fix: dashboard switcher, platform-aware search shortcut, mobile search, static topbar
- Always show dashboard tab strip + add button (was gated behind length > 1) - Search shortcut now shows Ctrl+K on Windows/Linux, ⌘K on Mac - Add icon-only search button in topbar for mobile viewports - Lock html/body overflow and use 100dvh to prevent topbar scrolling off-screen on mobile
This commit is contained in:
@@ -3,25 +3,45 @@
|
||||
import { useQuickAdd } from "@/components/quick-add-provider";
|
||||
import { NavIcon } from "@/components/nav-icon";
|
||||
|
||||
function useShortcutLabel() {
|
||||
if (typeof navigator === "undefined") return "⌘K";
|
||||
return /Mac|iPhone|iPad|iPod/.test(navigator.platform) ? "⌘K" : "Ctrl+K";
|
||||
}
|
||||
|
||||
export function TopbarSearch() {
|
||||
const { openPalette } = useQuickAdd();
|
||||
const shortcut = useShortcutLabel();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openPalette}
|
||||
aria-label="Search (⌘K)"
|
||||
className="hidden md:flex items-center gap-2 h-8 px-2.5 rounded-md text-[13px]"
|
||||
style={{
|
||||
border: "0.5px solid var(--hair-2)",
|
||||
background: "var(--card)",
|
||||
color: "var(--ink-mute)",
|
||||
width: 220,
|
||||
}}
|
||||
>
|
||||
<NavIcon name="search" className="size-3.5" />
|
||||
<span style={{ flex: 1, textAlign: "left" }}>Search…</span>
|
||||
<span className="kbd">⌘K</span>
|
||||
</button>
|
||||
<>
|
||||
{/* Desktop: pill with shortcut hint */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={openPalette}
|
||||
aria-label={`Search (${shortcut})`}
|
||||
className="hidden md:flex items-center gap-2 h-8 px-2.5 rounded-md text-[13px]"
|
||||
style={{
|
||||
border: "0.5px solid var(--hair-2)",
|
||||
background: "var(--card)",
|
||||
color: "var(--ink-mute)",
|
||||
width: 220,
|
||||
}}
|
||||
>
|
||||
<NavIcon name="search" className="size-3.5" />
|
||||
<span style={{ flex: 1, textAlign: "left" }}>Search…</span>
|
||||
<span className="kbd">{shortcut}</span>
|
||||
</button>
|
||||
|
||||
{/* Mobile: icon-only */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={openPalette}
|
||||
aria-label="Search"
|
||||
className="flex md:hidden items-center justify-center h-8 w-8 rounded-md"
|
||||
style={{ color: "var(--ink-mute)" }}
|
||||
>
|
||||
<NavIcon name="search" className="size-4" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user