DRAFT - Experimenting with a drawer system for tooltips

web/client/src/components/project/ChartStringBreakdown.tsx

@@ -4,7 +4,7 @@ import { createColumnHelper } from '@tanstack/react-table';
 import { formatCurrency } from '@/lib/currency.ts';
 import type { ProjectRecord } from '@/queries/project.ts';
 import { DataTable } from '@/shared/DataTable.tsx';
-import { TooltipLabel } from '@/shared/TooltipLabel.tsx';
+import { TooltipIconButton } from '@/shared/TooltipLabel.tsx';
 import { tooltipDefinitions } from '@/shared/tooltips.ts';
 
 interface ChartStringRow {
@@ -165,10 +165,11 @@ export function ChartStringBreakdown({ employeeId, projectNumber, records }: Cha
           </span>
         ),
         header: () => (
-          <span className="flex justify-end w-full">
-            <TooltipLabel
+          <span className="flex justify-end items-center gap-1 w-full">
+            <span>Commitments</span>
+            <TooltipIconButton
+              drawerStyle="compact"
               label="Commitments"
-              placement="bottom"
               tooltip={tooltipDefinitions.commitment}
             />
           </span>
@@ -189,10 +190,11 @@ export function ChartStringBreakdown({ employeeId, projectNumber, records }: Cha
           </span>
         ),
         header: () => (
-          <span className="flex justify-end w-full">
-            <TooltipLabel
+          <span className="flex justify-end items-center gap-1 w-full">
+            <span>Balance</span>
+            <TooltipIconButton
+              drawerStyle="compact"
               label="Balance"
-              placement="bottom"
               tooltip={tooltipDefinitions.balance}
             />
           </span>

web/client/src/components/project/FinancialDetails.tsx

@@ -28,6 +28,7 @@ export function FinancialDetails({ summary }: FinancialDetailsProps) {
         <div>
           <dd className="stat-label">
             <TooltipLabel
+              drawerStyle="spotlight"
               label="Commitment"
               tooltip={tooltipDefinitions.commitment}
             />
@@ -39,6 +40,7 @@ export function FinancialDetails({ summary }: FinancialDetailsProps) {
         <div>
           <dd className="stat-label">
             <TooltipLabel
+              drawerStyle="spotlight"
               label="Balance"
               tooltip={tooltipDefinitions.balance}
             />

web/client/src/components/project/PersonnelTable.tsx

@@ -10,7 +10,7 @@ import { formatCurrency } from '@/lib/currency.ts';
 import { formatDate } from '@/lib/date.ts';
 import type { PersonnelRecord } from '@/queries/personnel.ts';
 import { DataTable } from '@/shared/DataTable.tsx';
-import { TooltipLabel } from '@/shared/TooltipLabel.tsx';
+import { TooltipIconButton, TooltipLabel } from '@/shared/TooltipLabel.tsx';
 import { tooltipDefinitions } from '@/shared/tooltips.ts';
 
 function isEndingSoon(dateStr: string | null): boolean {
@@ -143,10 +143,11 @@ function DistributionSubtable({
             <th>Project</th>
             <th>
               <span className="flex justify-end w-full">
-                <TooltipLabel
-                  label="Dist %"
-                  placement="bottom"
-                  tooltip={tooltipDefinitions.distributionPercent}
+            <TooltipLabel
+              drawerStyle="compact"
+              label="Dist %"
+              placement="bottom"
+              tooltip={tooltipDefinitions.distributionPercent}
                 />
               </span>
             </th>
@@ -162,6 +163,7 @@ function DistributionSubtable({
             <th>
               <span className="flex justify-end w-full">
                 <TooltipLabel
+                  drawerStyle="compact"
                   label="CBR"
                   placement="bottom"
                   tooltip={tooltipDefinitions.cbr}
@@ -328,10 +330,11 @@ export function PersonnelTable({
           <span className="flex justify-end">{info.getValue()}</span>
         ),
         header: () => (
-          <span className="flex justify-end w-full">
-            <TooltipLabel
+          <span className="flex justify-end items-center gap-1 w-full">
+            <span>FTE</span>
+            <TooltipIconButton
+              drawerStyle="compact"
               label="FTE"
-              placement="bottom"
               tooltip={tooltipDefinitions.fte}
             />
           </span>
@@ -413,10 +416,11 @@ export function PersonnelTable({
             )
           : undefined,
         header: () => (
-          <span className="flex justify-end w-full">
-            <TooltipLabel
+          <span className="flex justify-end items-center gap-1 w-full">
+            <span>Monthly CBR</span>
+            <TooltipIconButton
+              drawerStyle="compact"
               label="Monthly CBR"
-              placement="bottom"
               tooltip={tooltipDefinitions.monthlyCbr}
             />
           </span>

web/client/src/components/project/ProjectDetails.tsx

@@ -74,6 +74,7 @@ export function ProjectDetails({ summary }: ProjectDetailsProps) {
             <BanknotesIcon className="w-4 h-4" />
             <dt className="stat-label">
               <TooltipLabel
+                drawerStyle="spotlight"
                 label="Balance"
                 tooltip={tooltipDefinitions.balance}
               />

web/client/src/main.css

@@ -104,13 +104,82 @@
   }
 
   .tooltip-trigger {
-    @apply inline-flex items-center cursor-help focus:outline-none focus-visible:rounded-xs focus-visible:ring-2 focus-visible:ring-primary/30;
+    @apply inline-flex items-center cursor-pointer border-0 bg-transparent p-0 text-left text-inherit focus:outline-none focus-visible:rounded-xs focus-visible:ring-2 focus-visible:ring-primary/30;
   }
 
   .tooltip-label {
     @apply decoration-dotted underline underline-offset-4;
   }
 
+  .tooltip-icon-trigger {
+    @apply inline-flex items-center justify-center rounded-full border-0 bg-transparent p-0 text-base-content/55 transition-colors hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30;
+  }
+
+  .tooltip-drawer-frame {
+    @apply fixed inset-0 z-[300] flex justify-end;
+  }
+
+  .tooltip-drawer-shell {
+    @apply relative h-screen w-full max-w-xl shrink-0;
+  }
+
+  .tooltip-drawer-overlay {
+    @apply h-full flex-1 border-0 bg-neutral/45 p-0 backdrop-blur-[1px];
+  }
+
+  .tooltip-drawer-surface {
+    @apply flex h-screen min-h-screen flex-col bg-neutral text-neutral-content shadow-2xl;
+    background-image:
+      radial-gradient(circle at top left, rgb(255 255 255 / 0.08), transparent 32%),
+      linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 22%);
+  }
+
+  .tooltip-drawer-surface-spotlight {
+    @apply bg-neutral;
+    background-image:
+      radial-gradient(circle at top left, rgb(255 191 105 / 0.18), transparent 34%),
+      linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 26%);
+  }
+
+  .tooltip-drawer-surface-compact {
+    @apply bg-neutral;
+    background-image:
+      linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 20%),
+      linear-gradient(90deg, rgb(255 255 255 / 0.05), transparent 18%);
+  }
+
+  .tooltip-drawer-header {
+    @apply flex items-start justify-between gap-4 border-b border-white/10 px-6 py-5 sm:px-8;
+  }
+
+  .tooltip-drawer-eyebrow {
+    @apply text-xs font-semibold uppercase tracking-[0.24em] text-neutral-content/60;
+  }
+
+  .tooltip-drawer-title {
+    @apply mt-3 text-3xl font-semibold leading-tight text-balance sm:text-4xl;
+  }
+
+  .tooltip-drawer-body {
+    @apply flex flex-1 flex-col justify-between gap-8 px-6 py-6 sm:px-8 sm:py-8;
+  }
+
+  .tooltip-drawer-copy {
+    @apply max-w-2xl text-lg leading-8 text-neutral-content/90;
+  }
+
+  .tooltip-drawer-copy-spotlight {
+    @apply rounded-2xl border border-white/10 bg-white/5 p-6 text-xl leading-9 text-neutral-content;
+  }
+
+  .tooltip-drawer-copy-compact {
+    @apply border-l-4 border-warning pl-5 text-base leading-7 text-neutral-content/85;
+  }
+
+  .tooltip-drawer-footer {
+    @apply flex flex-wrap items-center gap-3 text-sm text-neutral-content/65;
+  }
+
   .floating-tooltip {
     @apply pointer-events-none z-[200] max-w-sm rounded bg-neutral px-2 py-1 text-sm leading-tight text-neutral-content shadow-lg;
     position: relative;

web/client/src/routes/(authenticated)/projects/$employeeId/$projectNumber/expenditure-categories.tsx

@@ -6,7 +6,7 @@ import { ExportDataButton } from '@/components/ExportDataButton.tsx';
 import { formatCurrency } from '@/lib/currency.ts';
 import { type ProjectRecord, projectsDetailQueryOptions } from '@/queries/project.ts';
 import { DataTable } from '@/shared/DataTable.tsx';
-import { TooltipLabel } from '@/shared/TooltipLabel.tsx';
+import { TooltipIconButton } from '@/shared/TooltipLabel.tsx';
 import { tooltipDefinitions } from '@/shared/tooltips.ts';
 
 interface SearchParams {
@@ -44,12 +44,30 @@ function buildRows(
   search: SearchParams
 ): ExpenditureCategoryRow[] {
   const filtered = records.filter((r) => {
-    if (r.projectNumber !== projectNumber) return false;
-    if (search.task && (r.taskNum ?? '') !== search.task) return false;
-    if (search.fund && (r.fundCode ?? '') !== search.fund) return false;
-    if (search.program && (r.programCode ?? '') !== search.program) return false;
-    if (search.activity && (r.activityCode ?? '') !== search.activity) return false;
-    if (search.dept && (r.projectOwningOrgCode ?? '') !== search.dept) return false;
+    if (r.projectNumber !== projectNumber) {
+      return false;
+    }
+
+    if (search.task && (r.taskNum ?? '') !== search.task) {
+      return false;
+    }
+
+    if (search.fund && (r.fundCode ?? '') !== search.fund) {
+      return false;
+    }
+
+    if (search.program && (r.programCode ?? '') !== search.program) {
+      return false;
+    }
+
+    if (search.activity && (r.activityCode ?? '') !== search.activity) {
+      return false;
+    }
+
+    if (search.dept && (r.projectOwningOrgCode ?? '') !== search.dept) {
+      return false;
+    }
+
     return true;
   });
 
@@ -119,11 +137,14 @@ function RouteComponent() {
         cell: (info) => <span>{info.getValue() || '-'}</span>,
         footer: () => 'Totals',
         header: () => (
-          <TooltipLabel
-            label="Expenditure Category"
-            placement="bottom"
-            tooltip={tooltipDefinitions.expenditureCategory}
-          />
+          <span className="flex items-center gap-1">
+            <span>Expenditure Category</span>
+            <TooltipIconButton
+              drawerStyle="compact"
+              label="Expenditure Category"
+              tooltip={tooltipDefinitions.expenditureCategory}
+            />
+          </span>
         ),
         minSize: 200,
       }),
@@ -165,10 +186,11 @@ function RouteComponent() {
           </span>
         ),
         header: () => (
-          <span className="flex justify-end w-full">
-            <TooltipLabel
+          <span className="flex justify-end items-center gap-1 w-full">
+            <span>Commitments</span>
+            <TooltipIconButton
+              drawerStyle="compact"
               label="Commitments"
-              placement="bottom"
               tooltip={tooltipDefinitions.commitment}
             />
           </span>
@@ -189,10 +211,11 @@ function RouteComponent() {
           </span>
         ),
         header: () => (
-          <span className="flex justify-end w-full">
-            <TooltipLabel
+          <span className="flex justify-end items-center gap-1 w-full">
+            <span>Balance</span>
+            <TooltipIconButton
+              drawerStyle="compact"
               label="Balance"
-              placement="bottom"
               tooltip={tooltipDefinitions.balance}
             />
           </span>

web/client/src/routes/(authenticated)/projects/$employeeId/$projectNumber/index.tsx

@@ -88,6 +88,7 @@ function ProjectContent({
       <section className="section-margin">
         <h2 className="h2">
           <TooltipLabel
+            drawerStyle="spotlight"
             label="Chart String Breakdown"
             tooltip={tooltipDefinitions.chartStringBreakdown}
           />