@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/DashboardColumnHintsBanner.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { ArrowDown, ArrowRight, ChevronRight, X } from "lucide-react";
+import { useCallback, useEffect, useId, useState } from "react";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import {
+  readDashboardColumnHintsClosed,
+  readDashboardColumnHintsDismissed,
+  writeDashboardColumnHintsClosed,
+  writeDashboardColumnHintsDismissed,
+} from "@/lib/dashboardColumnHintsStorage";
+
+type Props = Readonly<{
+  dt: DashboardStrings;
+}>;
+
+const arrowPillClass =
+  "inline-flex size-11 items-center justify-center rounded-full border border-violet-300/90 bg-linear-to-br from-violet-100 via-white to-violet-50/90 shadow-md shadow-violet-500/10 dark:border-violet-700/70 dark:from-violet-950 dark:via-zinc-900 dark:to-violet-950/80 dark:shadow-violet-950/40 sm:size-12";
+
+const arrowIconClass =
+  "size-5 text-violet-600 sm:size-[1.35rem] dark:text-violet-300";
+
+/** Flèche entre deux blocs : vers le bas sur mobile, vers la droite à partir de `sm`. */
+function FlowBetweenArrows() {
+  return (
+    <div
+      className="flex shrink-0 justify-center py-0.5 sm:w-12 sm:items-center sm:justify-center sm:py-0 md:w-14"
+      aria-hidden
+    >
+      <span className={`${arrowPillClass} sm:hidden`}>
+        <ArrowDown className={arrowIconClass} strokeWidth={2.35} aria-hidden />
+      </span>
+      <span className={`${arrowPillClass} hidden sm:inline-flex`}>
+        <ArrowRight className={arrowIconClass} strokeWidth={2.35} aria-hidden />
+      </span>
+    </div>
+  );
+}
+
+export function DashboardColumnHintsBanner({ dt }: Props) {
+  const [dismissed, setDismissed] = useState(false);
+  const [open, setOpen] = useState(true);
+  const headingId = useId();
+  const panelId = useId();
+
+  useEffect(() => {
+    if (readDashboardColumnHintsDismissed()) {
+      setDismissed(true);
+      return;
+    }
+    if (readDashboardColumnHintsClosed()) {
+      setOpen(false);
+    }
+  }, []);
+
+  const toggle = useCallback(() => {
+    setOpen((prev) => {
+      const next = !prev;
+      writeDashboardColumnHintsClosed(!next);
+      return next;
+    });
+  }, []);
+
+  const dismiss = useCallback(() => {
+    writeDashboardColumnHintsDismissed(true);
+    setDismissed(true);
+  }, []);
+
+  if (dismissed) {
+    return null;
+  }
+
+  const cellClass =
+    "min-w-0 flex-1 rounded-lg border border-zinc-200/90 bg-white/80 px-3 py-3 shadow-sm dark:border-zinc-700/80 dark:bg-zinc-950/40 sm:px-4";
+
+  return (
+    <section
+      className="mb-4 rounded-lg border border-zinc-200 bg-zinc-50/90 shadow-sm dark:border-zinc-700/90 dark:bg-zinc-900/60"
+      aria-labelledby={headingId}
+    >
+      <div className="flex w-full items-stretch">
+        <button
+          type="button"
+          id={headingId}
+          className="flex min-w-0 flex-1 items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-zinc-100/90 dark:hover:bg-zinc-800/50 sm:px-4"
+          aria-expanded={open ? "true" : "false"}
+          aria-controls={panelId}
+          aria-label={open ? dt.dashboardColumnHintsCollapseAria : dt.dashboardColumnHintsExpandAria}
+          onClick={toggle}
+        >
+          <ChevronRight
+            className={`size-4 shrink-0 text-zinc-500 transition-transform duration-200 dark:text-zinc-400 ${open ? "rotate-90" : ""}`}
+            strokeWidth={2}
+            aria-hidden
+          />
+          <span className="min-w-0 text-sm font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
+            {dt.dashboardColumnHintsPanelTitle}
+          </span>
+        </button>
+        <button
+          type="button"
+          className="flex shrink-0 items-center justify-center px-2.5 text-zinc-500 transition-colors hover:bg-zinc-100/90 hover:text-zinc-800 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-200 sm:px-3"
+          title={dt.dashboardColumnHintsDismissTitle}
+          aria-label={dt.dashboardColumnHintsDismissTitle}
+          onClick={(e) => {
+            e.stopPropagation();
+            dismiss();
+          }}
+        >
+          <X className="size-4" strokeWidth={2} aria-hidden />
+        </button>
+      </div>
+
+      {open ? (
+        <div
+          id={panelId}
+          className="border-t border-zinc-200/90 px-3 pb-3 pt-3 dark:border-zinc-700/80 sm:px-4 sm:pb-4"
+          aria-labelledby={headingId}
+        >
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-stretch sm:gap-1 md:gap-2">
+            <div className={cellClass}>
+              <p className="text-xs font-bold uppercase tracking-wide text-violet-600 dark:text-violet-400">
+                {dt.sessionsColumnTitle}
+              </p>
+              <p className="mt-1.5 text-sm font-semibold leading-snug text-zinc-900 dark:text-zinc-100">
+                {dt.dashboardColSessionTeaser}
+              </p>
+              <p className="mt-1 text-xs font-medium text-zinc-600 dark:text-zinc-400">{dt.dashboardColSessionFlowHint}</p>
+            </div>
+
+            <FlowBetweenArrows />
+
+            <div className={cellClass}>
+              <p className="text-xs font-bold uppercase tracking-wide text-violet-600 dark:text-violet-400">
+                {dt.rightColumnTitle}
+              </p>
+              <p className="mt-1.5 text-sm font-semibold leading-snug text-zinc-900 dark:text-zinc-100">
+                {dt.dashboardColTasksTeaser}
+              </p>
+              <p className="mt-1 text-xs font-medium text-zinc-600 dark:text-zinc-400">{dt.dashboardColTasksFlowHint}</p>
+            </div>
+
+            <FlowBetweenArrows />
+
+            <div className={cellClass}>
+              <p className="text-xs font-bold uppercase tracking-wide text-violet-600 dark:text-violet-400">
+                {dt.tagsProjectsColumnTitle}
+              </p>
+              <p className="mt-1.5 text-sm font-semibold leading-snug text-zinc-900 dark:text-zinc-100">
+                {dt.dashboardColTagsTeaser}
+              </p>
+              <p className="mt-1 text-xs font-medium text-zinc-600 dark:text-zinc-400">{dt.dashboardColTagsFlowHint}</p>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/components/dashboard/DashboardCommandCenter.tsx

@@ -0,0 +1,470 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Keyboard, Search, X } from "lucide-react";
+import { useKronosysTheme } from "@/components/ThemeProvider";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import {
+  eventMatchesCombo,
+  eventOpensCommandPalette,
+  formatComboForDisplay,
+  isReservedPaletteCombo,
+  loadComboOverrides,
+  mergeCombos,
+  saveComboOverrides,
+  serializeEventAsCombo,
+} from "@/lib/dashboardShortcuts";
+import type { DashboardSearchItem } from "@/lib/dashboardQuickSearch";
+import { dataSearchItemMatches } from "@/lib/dashboardQuickSearchQuery";
+
+export type DashboardCommandHandlers = {
+  newSession: () => void;
+  refresh: () => void;
+  openReporting: () => void;
+  openSettings: () => void;
+  openUserGuide: () => void;
+  focusSessions: () => void;
+  focusTasks: () => void;
+  focusTags: () => void;
+  toggleLang: () => void;
+  endLiveSession?: () => void;
+};
+
+function isEditableTarget(n: EventTarget | null): boolean {
+  if (!n || !(n instanceof HTMLElement)) {
+    return false;
+  }
+  const tag = n.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
+    return true;
+  }
+  if (n.isContentEditable) {
+    return true;
+  }
+  return Boolean(n.closest("[contenteditable='true']"));
+}
+
+const DATA_SEARCH_TIMER_BASE =
+  "block w-full min-w-0 truncate text-[0.7rem] leading-snug tabular-nums";
+
+function classForDataSearchTimer(
+  state: DashboardSearchItem["searchTimerState"]
+): string {
+  if (state === "active") {
+    return `${DATA_SEARCH_TIMER_BASE} text-emerald-600 dark:text-emerald-400/95`;
+  }
+  if (state === "paused") {
+    return `${DATA_SEARCH_TIMER_BASE} text-amber-600 dark:text-amber-400/90`;
+  }
+  return `${DATA_SEARCH_TIMER_BASE} text-zinc-500 dark:text-zinc-400`;
+}
+
+export function DashboardCommandCenter({
+  dt,
+  handlers,
+  searchItems,
+  toolbarDomId,
+}: {
+  dt: DashboardStrings;
+  handlers: DashboardCommandHandlers;
+  searchItems: DashboardSearchItem[];
+  /** Ancre pour la visite guidée (spotlight). */
+  toolbarDomId?: string;
+}) {
+  const { toggleTheme } = useKronosysTheme();
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [highlight, setHighlight] = useState(0);
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
+  const [overrides, setOverrides] = useState<Record<string, string>>({});
+  const [recordingId, setRecordingId] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setOverrides(loadComboOverrides());
+  }, []);
+
+  const combos = useMemo(() => mergeCombos(overrides), [overrides]);
+
+  const isMac =
+    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 },
+      {
+        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: "toggle-theme",
+        label: dt.commandToggleTheme,
+        kw: "theme dark light sombre clair",
+        run: () => toggleTheme(),
+      },
+      {
+        id: "toggle-lang",
+        label: dt.commandToggleLang,
+        kw: "language langue fr en",
+        run: handlers.toggleLang,
+      },
+    ];
+    if (handlers.endLiveSession) {
+      list.push({
+        id: "end-live-session",
+        label: dt.commandEndLiveSession,
+        kw: "end terminer session live",
+        run: handlers.endLiveSession,
+      });
+    }
+    return list;
+  }, [dt, handlers, toggleTheme]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim();
+    if (!q) {
+      return [] as DashboardSearchItem[];
+    }
+    return searchItems.filter((item) => dataSearchItemMatches(item, q));
+  }, [query, searchItems]);
+
+  useEffect(() => {
+    setHighlight(0);
+  }, [query, paletteOpen]);
+
+  useEffect(() => {
+    setHighlight((i) => Math.min(i, Math.max(0, filtered.length - 1)));
+  }, [filtered.length, paletteOpen]);
+
+  useEffect(() => {
+    if (paletteOpen) {
+      const t = window.setTimeout(() => inputRef.current?.focus(), 30);
+      return () => window.clearTimeout(t);
+    }
+    setQuery("");
+    return undefined;
+  }, [paletteOpen]);
+
+  const openPalette = useCallback(() => {
+    setPaletteOpen(true);
+  }, []);
+
+  const closePalette = useCallback(() => {
+    setPaletteOpen(false);
+  }, []);
+
+  const runSearchRow = useCallback(
+    (index: number) => {
+      const row = filtered[index];
+      if (!row) {
+        return;
+      }
+      row.onSelect();
+      closePalette();
+    },
+    [closePalette, filtered]
+  );
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (recordingId && shortcutsOpen) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.key === "Escape") {
+          setRecordingId(null);
+          return;
+        }
+        const ser = serializeEventAsCombo(e);
+        if (!ser || isReservedPaletteCombo(ser)) {
+          return;
+        }
+        setOverrides((prev) => {
+          const next = { ...prev, [recordingId]: ser };
+          saveComboOverrides(next);
+          return next;
+        });
+        setRecordingId(null);
+        return;
+      }
+
+      if (eventOpensCommandPalette(e)) {
+        if (shortcutsOpen) {
+          return;
+        }
+        if (isEditableTarget(e.target)) {
+          return;
+        }
+        e.preventDefault();
+        setPaletteOpen((o) => !o);
+        return;
+      }
+
+      if (paletteOpen) {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          closePalette();
+        }
+        return;
+      }
+
+      if (shortcutsOpen || isEditableTarget(e.target)) {
+        return;
+      }
+
+      for (const [id, combo] of Object.entries(combos)) {
+        if (!combo?.trim()) {
+          continue;
+        }
+        if (id === "end-live-session" && !handlers.endLiveSession) {
+          continue;
+        }
+        if (eventMatchesCombo(e, combo)) {
+          const a = actions.find((x) => x.id === id);
+          if (a) {
+            e.preventDefault();
+            a.run();
+          }
+          return;
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [actions, closePalette, combos, handlers, paletteOpen, recordingId, shortcutsOpen]);
+
+  const onPaletteKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlight((i) => Math.min(i + 1, Math.max(0, filtered.length - 1)));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlight((i) => Math.max(0, i - 1));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      runSearchRow(highlight);
+    }
+  };
+
+  const resetBindings = () => {
+    setOverrides({});
+    saveComboOverrides({});
+  };
+
+  const palette = paletteOpen
+    ? createPortal(
+        <div
+          className="fixed inset-0 z-[200] flex items-start justify-center bg-black/50 p-4 pt-[min(20vh,8rem)]"
+          role="dialog"
+          aria-modal="true"
+          aria-label={dt.dataSearchPaletteAriaLabel}
+          data-dash-palette=""
+          onMouseDown={(ev) => {
+            if (ev.target === ev.currentTarget) {
+              closePalette();
+            }
+          }}
+        >
+          <div
+            className="w-full max-w-lg rounded-xl border border-zinc-300 bg-white shadow-2xl dark:border-zinc-600 dark:bg-zinc-900"
+            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 />
+              <input
+                ref={inputRef}
+                type="search"
+                className="min-w-0 flex-1 border-0 bg-transparent py-1 text-sm text-zinc-900 outline-none dark:text-zinc-100"
+                placeholder={dt.dataSearchPlaceholder}
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                aria-label={dt.dataSearchPlaceholder}
+                aria-controls="dash-palette-results"
+              />
+              <kbd className="hidden shrink-0 rounded border border-zinc-300 px-1.5 py-0.5 font-mono text-[0.65rem] text-zinc-500 sm:inline dark:border-zinc-600">
+                {isMac ? "⌘K" : "Ctrl+K"}
+              </kbd>
+            </div>
+            <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>
+              ) : filtered.length === 0 ? (
+                <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">
+                    <button
+                      type="button"
+                      className={`flex w-full flex-col gap-0.5 px-3 py-2 text-left text-sm ${
+                        idx === highlight
+                          ? "bg-violet-500/15 text-violet-950 dark:bg-violet-500/20 dark:text-violet-100"
+                          : "text-zinc-800 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800"
+                      }`}
+                      onMouseEnter={() => setHighlight(idx)}
+                      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>
+                        {row.subtitle ? (
+                          <span className="shrink-0 text-[0.65rem] uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+                            {row.subtitle}
+                          </span>
+                        ) : null}
+                      </span>
+                      {row.searchTimerLine ? (
+                        <span className={classForDataSearchTimer(row.searchTimerState)}>
+                          {row.searchTimerLine}
+                        </span>
+                      ) : null}
+                      {row.metaLine ? (
+                        <span className="block w-full min-w-0 truncate text-[0.7rem] leading-snug text-zinc-500 dark:text-zinc-400">
+                          {row.metaLine}
+                        </span>
+                      ) : null}
+                    </button>
+                  </li>
+                ))
+              )}
+            </ul>
+            <p className="border-t border-zinc-200 px-3 py-2 text-[0.65rem] text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
+              {dt.dataSearchFooter}
+            </p>
+          </div>
+        </div>,
+        document.body
+      )
+    : null;
+
+  const shortcutsModal = shortcutsOpen
+    ? createPortal(
+        <div
+          className="fixed inset-0 z-[190] flex items-center justify-center bg-black/50 p-4"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="dash-shortcuts-title"
+          onMouseDown={(ev) => {
+            if (ev.target === ev.currentTarget) {
+              setShortcutsOpen(false);
+              setRecordingId(null);
+            }
+          }}
+        >
+          <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">
+                {dt.shortcutsModalTitle}
+              </h2>
+              <button
+                type="button"
+                className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-transparent text-zinc-500 transition hover:border-zinc-300 hover:bg-zinc-100 hover:text-zinc-800 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
+                onClick={() => {
+                  setShortcutsOpen(false);
+                  setRecordingId(null);
+                }}
+                aria-label={dt.shortcutsModalCloseAriaLabel}
+              >
+                <X size={20} strokeWidth={2} aria-hidden />
+              </button>
+            </div>
+            <p className="border-b border-zinc-200 px-4 py-2 text-xs text-zinc-600 dark:border-zinc-700 dark:text-zinc-400">
+              {dt.shortcutsModalIntro}
+            </p>
+            <div className="max-h-[min(60vh,28rem)] overflow-y-auto px-2 py-2">
+              <table className="w-full text-left text-sm">
+                <thead>
+                  <tr className="text-[0.65rem] uppercase tracking-wide text-zinc-500">
+                    <th className="px-2 py-1.5">{dt.shortcutsTableAction}</th>
+                    <th className="px-2 py-1.5">{dt.shortcutsTableShortcut}</th>
+                    <th className="px-2 py-1.5">{dt.shortcutsTableAssign}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {actions
+                    .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>
+                          <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>
+                            ) : (
+                              formatComboForDisplay(combo, isMac)
+                            )}
+                          </td>
+                          <td className="px-2 py-2">
+                            <button
+                              type="button"
+                              className="rounded border border-zinc-400 px-2 py-0.5 text-xs font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                              onClick={() => setRecordingId(a.id)}
+                            >
+                              {dt.shortcutsChangeBtn}
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  <tr className="border-t border-zinc-200 dark:border-zinc-700">
+                    <td colSpan={3} className="px-2 py-2 text-xs text-zinc-500">
+                      {dt.shortcutsPaletteRow}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div className="flex flex-wrap justify-end gap-2 border-t border-zinc-200 px-4 py-3 dark:border-zinc-700">
+              <button
+                type="button"
+                className="rounded-lg border border-zinc-400 px-3 py-1.5 text-xs font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                onClick={resetBindings}
+              >
+                {dt.shortcutsResetAll}
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )
+    : null;
+
+  return (
+    <>
+      <div id={toolbarDomId} className="flex shrink-0 items-center gap-1.5">
+        <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"
+          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">
+            {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"
+          onClick={() => setShortcutsOpen(true)}
+          title={dt.shortcutsModalTitle}
+          aria-label={dt.shortcutsModalTitle}
+        >
+          <Keyboard size={18} aria-hidden />
+        </button>
+      </div>
+      {palette}
+      {shortcutsModal}
+    </>
+  );
+}