mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 21:10:59 +00:00
Marc-André Bombeck
39fc4e4da2
The docked panels' strips now run from the top edge of the window to the bottom, and the top bar ends left of them. The panel header no longer carries a fold button in docked mode: the strip opens and closes the day and, on /coach, the conversations; opening moves focus to the panel's heading and closing returns it to the strip. The sheets keep a close button, the day's now an X at the end of its header. The command palette's door is a magnifier at every width, named Search, with the shortcut in its tooltip. g p opens or closes the day like a click on its strip, and below the docking width opens the sheet on the last day or closes it; the shortcuts list shows it under Day.
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Search } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { useMounted } from "@/hooks/use-mounted";
|
|
import { useTranslations } from "@/lib/i18n/context";
|
|
import { isApplePlatform } from "@/lib/keyboard/global-shortcuts";
|
|
|
|
import { openCommandPalette, preloadCommandPalette } from "./palette-store";
|
|
|
|
/**
|
|
* The way into the command palette, at the trailing end of the top bar on
|
|
* every signed-in page: a magnifier at every width, named "Search", with a
|
|
* tooltip that gives the key that opens it as well ("Search (⌘K)", or
|
|
* "Search (Ctrl K)" off Apple platforms). 44 px under a coarse pointer, 36 px
|
|
* beside a fine one. Docked panels' strips stand right of the top bar, so the
|
|
* magnifier always sits just left of them and nothing covers it.
|
|
*/
|
|
export function CommandPaletteTrigger() {
|
|
const { t } = useTranslations();
|
|
// The key hint depends on the platform, which the server cannot know.
|
|
const mounted = useMounted();
|
|
const apple = mounted && isApplePlatform();
|
|
const label = t("palette.title");
|
|
const keyHint = apple ? "⌘K" : "Ctrl K";
|
|
const shortcut = apple ? "Meta+K" : "Control+K";
|
|
|
|
return (
|
|
<div className="ml-auto flex shrink-0 items-center">
|
|
<TooltipProvider delayDuration={300}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
data-slot="command-palette-trigger"
|
|
aria-label={label}
|
|
aria-keyshortcuts={mounted ? shortcut : undefined}
|
|
aria-haspopup="dialog"
|
|
onClick={openCommandPalette}
|
|
onPointerEnter={preloadCommandPalette}
|
|
onFocus={preloadCommandPalette}
|
|
className="text-muted-foreground hover:text-foreground size-11 pointer-fine:size-9"
|
|
>
|
|
<Search className="size-5" aria-hidden="true" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" data-slot="command-palette-tooltip">
|
|
{mounted ? `${label} (${keyHint})` : label}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
);
|
|
}
|