feat(webui): add global modern Spotlight Search (#367)

Co-authored-by: agnik <agnik@agniks-MacBook-Pro.local>

Author: Jitmisra

webui/src/app/globals.css

@@ -484,3 +484,34 @@ img[data-loaded="false"] {
         box-shadow: none;
     }
 }
+
+/* Spotlight Search Keyboard Shortcuts */
+kbd {
+    display: inline-block;
+    padding: 3px 8px;
+    font-family:
+        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    font-size: 0.7rem;
+    line-height: 1.2;
+    font-weight: 600;
+    color: #555;
+    background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%);
+    border: 1px solid #d0d0d0;
+    border-radius: 6px;
+    box-shadow:
+        0 1px 2px rgba(0, 0, 0, 0.1),
+        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+        0 -1px 0 rgba(0, 0, 0, 0.05) inset;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.dark kbd {
+    color: #d0d0d0;
+    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
+    border: 1px solid #4a4a4a;
+    box-shadow:
+        0 1px 2px rgba(0, 0, 0, 0.3),
+        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
+        0 -1px 0 rgba(0, 0, 0, 0.2) inset;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+}

webui/src/app/layout.tsx

@@ -25,6 +25,7 @@ import { Container } from "@mui/material";
 import { ThemeProvider } from "./theme-provider";
 import Footer from "./ui/footer";
 import Breadcrumb from "./ui/breadcrumb";
+import SpotlightSearch from "./ui/spotlight-search";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -45,6 +46,7 @@ export default function RootLayout({
                 suppressHydrationWarning
             >
                 <ThemeProvider>
+                    <SpotlightSearch />
                     <Banner />
                     <Container
                         sx={{ marginTop: "64px", height: "calc(100vh - 64px)" }}

webui/src/app/ui/banner.tsx

@@ -19,7 +19,16 @@
 
 "use client";
 
-import { AppBar, Container, Toolbar, IconButton, Box, Tooltip, Typography } from "@mui/material";
+import {
+    AppBar,
+    Container,
+    Toolbar,
+    IconButton,
+    Box,
+    Tooltip,
+    Typography,
+    Button,
+} from "@mui/material";
 import Image from "next/image";
 import NavLinks from "./nav-links";
 import { useTheme } from "../theme-provider";
@@ -29,6 +38,7 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import HomeIcon from "@mui/icons-material/Home";
 import FolderIcon from "@mui/icons-material/Folder";
 import MenuBookIcon from "@mui/icons-material/MenuBook";
+import SearchIcon from "@mui/icons-material/Search";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import Link from "next/link";
@@ -174,6 +184,53 @@ export default function Banner() {
                         <NavLinks links={links} scrolled={scrolled} />
                     </Box>
 
+                    <Box className="flex items-center">
+                        <Button
+                            onClick={() => {
+                                const event = new KeyboardEvent("keydown", {
+                                    key: "k",
+                                    metaKey: true,
+                                    ctrlKey: true,
+                                });
+                                window.dispatchEvent(event);
+                            }}
+                            startIcon={<SearchIcon fontSize="small" />}
+                            sx={{
+                                mr: 1,
+                                px: 1.5,
+                                py: 0.5,
+                                fontSize: "0.875rem",
+                                textTransform: "none",
+                                backgroundColor: isDarkMode
+                                    ? "rgba(255,255,255,0.1)"
+                                    : "rgba(0,0,0,0.05)",
+                                color: isDarkMode ? "rgba(255,255,255,0.9)" : "rgba(0,0,0,0.7)",
+                                borderRadius: 2,
+                                transition: "all 0.3s ease",
+                                "&:hover": {
+                                    backgroundColor: isDarkMode
+                                        ? "rgba(255,255,255,0.2)"
+                                        : "rgba(0,0,0,0.08)",
+                                },
+                            }}
+                        >
+                            <Box component="span" sx={{ mr: 0.5 }}>
+                                Search
+                            </Box>
+                            <Box
+                                component="kbd"
+                                sx={{
+                                    fontSize: "0.7rem",
+                                    px: 0.5,
+                                    py: 0.25,
+                                    ml: 0.5,
+                                }}
+                            >
+                                ⌘K
+                            </Box>
+                        </Button>
+                    </Box>
+
                     <Box className="flex items-center">
                         <Tooltip title="Toggle dark mode">
                             <IconButton