@nightkatana/kronosys-app 1.0.0-beta.21 → 1.0.0-beta.22

package/components/dashboard/DashboardCommandCenter.tsx

@@ -17,6 +17,11 @@ import {
 } from "@/lib/dashboardShortcuts";
 import type { DashboardSearchItem } from "@/lib/dashboardQuickSearch";
 import { dataSearchItemMatches } from "@/lib/dashboardQuickSearchQuery";
+import {
+  appShellToolbarIconLinkClass,
+  appShellToolbarRaisedWideTriggerClass,
+  appShellToolbarRibbonGroupClass,
+} from "@/lib/appShellToolbarChrome";
 
 export type DashboardCommandHandlers = {
   newSession: () => void;
@@ -49,7 +54,7 @@ const DATA_SEARCH_TIMER_BASE =
   "block w-full min-w-0 truncate text-[0.7rem] leading-snug tabular-nums";
 
 function classForDataSearchTimer(
-  state: DashboardSearchItem["searchTimerState"]
+  state: DashboardSearchItem["searchTimerState"],
 ): string {
   if (state === "active") {
     return `${DATA_SEARCH_TIMER_BASE} text-emerald-600 dark:text-emerald-400/95`;
@@ -88,23 +93,64 @@ export function DashboardCommandCenter({
   const combos = useMemo(() => mergeCombos(overrides), [overrides]);
 
   const isMac =
-    typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.platform ?? "");
+    typeof navigator !== "undefined" &&
+    /mac|iphone|ipad|ipod/i.test(navigator.platform ?? "");
 
   const actions = useMemo(() => {
-    const list: Array<{ id: string; label: string; kw: string; run: () => void }> = [
-      { id: "new-session", label: dt.commandNewSession, kw: "new session nouvelle", run: handlers.newSession },
-      { id: "refresh", label: dt.commandRefresh, kw: "reload actualiser rafraîchir", run: handlers.refresh },
-      { id: "reporting", label: dt.commandOpenReporting, kw: "reporting graph bilan stats", run: handlers.openReporting },
-      { id: "settings", label: dt.commandOpenSettings, kw: "settings paramètres", run: handlers.openSettings },
+    const list: Array<{
+      id: string;
+      label: string;
+      kw: string;
+      run: () => void;
+    }> = [
+      {
+        id: "new-session",
+        label: dt.commandNewSession,
+        kw: "new session nouvelle",
+        run: handlers.newSession,
+      },
+      {
+        id: "refresh",
+        label: dt.commandRefresh,
+        kw: "reload actualiser rafraîchir",
+        run: handlers.refresh,
+      },
+      {
+        id: "reporting",
+        label: dt.commandOpenReporting,
+        kw: "reporting graph bilan stats",
+        run: handlers.openReporting,
+      },
+      {
+        id: "settings",
+        label: dt.commandOpenSettings,
+        kw: "settings paramètres",
+        run: handlers.openSettings,
+      },
       {
         id: "user-guide",
         label: dt.commandOpenUserGuide,
         kw: "help aide manuel guide book livre",
         run: handlers.openUserGuide,
       },
-      { id: "focus-sessions", label: dt.commandFocusSessions, kw: "sessions colonne liste", run: handlers.focusSessions },
-      { id: "focus-tasks", label: dt.commandFocusTasks, kw: "tasks tâches", run: handlers.focusTasks },
-      { id: "focus-tags", label: dt.commandFocusTags, kw: "tags étiquettes projects projets", run: handlers.focusTags },
+      {
+        id: "focus-sessions",
+        label: dt.commandFocusSessions,
+        kw: "sessions colonne liste",
+        run: handlers.focusSessions,
+      },
+      {
+        id: "focus-tasks",
+        label: dt.commandFocusTasks,
+        kw: "tasks tâches",
+        run: handlers.focusTasks,
+      },
+      {
+        id: "focus-tags",
+        label: dt.commandFocusTags,
+        kw: "tags étiquettes projects projets",
+        run: handlers.focusTags,
+      },
       {
         id: "toggle-theme",
         label: dt.commandToggleTheme,
@@ -171,7 +217,7 @@ export function DashboardCommandCenter({
       row.onSelect();
       closePalette();
     },
-    [closePalette, filtered]
+    [closePalette, filtered],
   );
 
   useEffect(() => {
@@ -239,7 +285,15 @@ export function DashboardCommandCenter({
     };
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
-  }, [actions, closePalette, combos, handlers, paletteOpen, recordingId, shortcutsOpen]);
+  }, [
+    actions,
+    closePalette,
+    combos,
+    handlers,
+    paletteOpen,
+    recordingId,
+    shortcutsOpen,
+  ]);
 
   const onPaletteKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "ArrowDown") {
@@ -278,7 +332,11 @@ export function DashboardCommandCenter({
             onKeyDown={onPaletteKeyDown}
           >
             <div className="flex items-center gap-2 border-b border-zinc-200 px-3 py-2 dark:border-zinc-700">
-              <Search className="shrink-0 text-zinc-400" size={18} aria-hidden />
+              <Search
+                className="shrink-0 text-zinc-400"
+                size={18}
+                aria-hidden
+              />
               <input
                 ref={inputRef}
                 type="search"
@@ -293,11 +351,18 @@ export function DashboardCommandCenter({
                 {isMac ? "⌘K" : "Ctrl+K"}
               </kbd>
             </div>
-            <ul id="dash-palette-results" className="max-h-[min(50vh,22rem)] list-none overflow-y-auto py-1">
+            <ul
+              id="dash-palette-results"
+              className="max-h-[min(50vh,22rem)] list-none overflow-y-auto py-1"
+            >
               {query.trim() === "" ? (
-                <li className="px-3 py-4 text-center text-sm text-zinc-500">{dt.dataSearchTypePrompt}</li>
+                <li className="px-3 py-4 text-center text-sm text-zinc-500">
+                  {dt.dataSearchTypePrompt}
+                </li>
               ) : filtered.length === 0 ? (
-                <li className="px-3 py-4 text-center text-sm text-zinc-500">{dt.dataSearchEmpty}</li>
+                <li className="px-3 py-4 text-center text-sm text-zinc-500">
+                  {dt.dataSearchEmpty}
+                </li>
               ) : (
                 filtered.map((row, idx) => (
                   <li key={row.id} className="list-none">
@@ -312,7 +377,9 @@ export function DashboardCommandCenter({
                       onClick={() => runSearchRow(idx)}
                     >
                       <span className="flex w-full min-w-0 items-center justify-between gap-2">
-                        <span className="min-w-0 truncate font-medium">{row.title}</span>
+                        <span className="min-w-0 truncate font-medium">
+                          {row.title}
+                        </span>
                         {row.subtitle ? (
                           <span className="shrink-0 text-[0.65rem] uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                             {row.subtitle}
@@ -320,7 +387,11 @@ export function DashboardCommandCenter({
                         ) : null}
                       </span>
                       {row.searchTimerLine ? (
-                        <span className={classForDataSearchTimer(row.searchTimerState)}>
+                        <span
+                          className={classForDataSearchTimer(
+                            row.searchTimerState,
+                          )}
+                        >
                           {row.searchTimerLine}
                         </span>
                       ) : null}
@@ -339,7 +410,7 @@ export function DashboardCommandCenter({
             </p>
           </div>
         </div>,
-        document.body
+        document.body,
       )
     : null;
 
@@ -359,7 +430,10 @@ export function DashboardCommandCenter({
         >
           <div className="max-h-[min(90vh,36rem)] w-full max-w-lg overflow-hidden rounded-xl border border-zinc-300 bg-white shadow-2xl dark:border-zinc-600 dark:bg-zinc-900">
             <div className="flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-700">
-              <h2 id="dash-shortcuts-title" className="text-base font-semibold text-zinc-900 dark:text-zinc-100">
+              <h2
+                id="dash-shortcuts-title"
+                className="text-base font-semibold text-zinc-900 dark:text-zinc-100"
+              >
                 {dt.shortcutsModalTitle}
               </h2>
               <button
@@ -388,16 +462,26 @@ export function DashboardCommandCenter({
                 </thead>
                 <tbody>
                   {actions
-                    .filter((a) => a.id !== "end-live-session" || handlers.endLiveSession)
+                    .filter(
+                      (a) =>
+                        a.id !== "end-live-session" || handlers.endLiveSession,
+                    )
                     .map((a) => {
                       const combo = combos[a.id] ?? "";
                       const recording = recordingId === a.id;
                       return (
-                        <tr key={a.id} className="border-t border-zinc-100 dark:border-zinc-800">
-                          <td className="px-2 py-2 text-zinc-800 dark:text-zinc-200">{a.label}</td>
+                        <tr
+                          key={a.id}
+                          className="border-t border-zinc-100 dark:border-zinc-800"
+                        >
+                          <td className="px-2 py-2 text-zinc-800 dark:text-zinc-200">
+                            {a.label}
+                          </td>
                           <td className="px-2 py-2 font-mono text-xs text-zinc-600 dark:text-zinc-400">
                             {recording ? (
-                              <span className="text-violet-600 dark:text-violet-300">{dt.shortcutsRecordPrompt}</span>
+                              <span className="text-violet-600 dark:text-violet-300">
+                                {dt.shortcutsRecordPrompt}
+                              </span>
                             ) : (
                               formatComboForDisplay(combo, isMac)
                             )}
@@ -433,29 +517,34 @@ export function DashboardCommandCenter({
             </div>
           </div>
         </div>,
-        document.body
+        document.body,
       )
     : null;
 
   return (
     <>
-      <div id={toolbarDomId} className="flex shrink-0 items-center gap-1.5">
+      <div
+        id={toolbarDomId}
+        className={`${appShellToolbarRibbonGroupClass} shrink-0`}
+      >
         <button
           type="button"
-          className="inline-flex h-10 w-[9.5rem] max-w-[min(42vw,11rem)] shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 bg-white px-2 text-left text-xs text-zinc-500 shadow-sm transition hover:border-zinc-400 hover:bg-zinc-50 sm:w-44 sm:max-w-none sm:px-2.5 sm:text-sm dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:bg-zinc-800"
+          className={`${appShellToolbarRaisedWideTriggerClass} w-[9.5rem] max-w-[min(42vw,11rem)] gap-1.5 px-2 text-left text-xs text-zinc-500 sm:w-44 sm:max-w-none sm:px-2.5 sm:text-sm dark:text-zinc-400`}
           onClick={openPalette}
           aria-haspopup="dialog"
           aria-expanded={paletteOpen ? "true" : "false"}
         >
           <Search className="shrink-0" size={16} aria-hidden />
-          <span className="min-w-0 flex-1 truncate">{dt.dataSearchTrigger}</span>
-          <kbd className="hidden shrink-0 rounded border border-zinc-300 px-1 py-0.5 font-mono text-[0.6rem] text-zinc-500 sm:inline dark:border-zinc-600">
+          <span className="min-w-0 flex-1 truncate">
+            {dt.dataSearchTrigger}
+          </span>
+          <kbd className="hidden shrink-0 rounded border border-zinc-300/90 bg-gradient-to-b from-white to-zinc-100 px-1 py-0.5 font-mono text-[0.6rem] text-zinc-500 shadow-[0_1px_1px_rgba(15,23,42,0.08)] sm:inline dark:border-zinc-600 dark:from-zinc-700 dark:to-zinc-800 dark:text-zinc-400">
             {isMac ? "⌘K" : "Ctrl+K"}
           </kbd>
         </button>
         <button
           type="button"
-          className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 shadow-sm transition hover:border-zinc-400 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:bg-zinc-800"
+          className={appShellToolbarIconLinkClass}
           onClick={() => setShortcutsOpen(true)}
           title={dt.shortcutsModalTitle}
           aria-label={dt.shortcutsModalTitle}