ctrl+k for global command search

apps/www/src/app/layout.tsx

@@ -11,6 +11,7 @@ import { Analytics } from "@/components/analytics";
 import { ModalProvider } from "@/components/modal-provider";
 import { Providers } from "@/components/providers";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
+import GlobalSearch from "@/components/command-window"
 
 interface RootLayoutProps {
   children: React.ReactNode;
@@ -83,6 +84,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <ModalProvider />
           <TailwindIndicator />
         </Providers>
+        <GlobalSearch/> 
       </body>
     </html>
   );

apps/www/src/components/command-window.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@dingify/ui/components/command"
+import Link from "next/link"
+import { useEffect, useState } from "react"
+
+export default function GlobalSearch() {
+    const [open, setOpen] = useState(false)
+
+    useEffect(() => {
+      const down = (e: KeyboardEvent) => {
+        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault()
+          setOpen((open) => !open)
+        }
+      }
+      document.addEventListener("keydown", down)
+      return () => document.removeEventListener("keydown", down)
+    }, [])
+
+    return (
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem><Link className="w-full" href="/property">Eiendommer</Link></CommandItem>
+            <CommandItem><Link className="w-full" href="/tenant">Leietakere</Link></CommandItem>
+            <CommandItem><Link className="w-full" href="/analytics">Analyser</Link></CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    )
+}

packages/ui/src/components/command.tsx

@@ -28,7 +28,7 @@ type CommandDialogProps = DialogProps;
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-2xl">
+      <DialogContent className="overflow-hidden p-0 shadow-2xl z-[9999]">
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>