Skip to content

feat: added global modern Spotlight Search #367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PragmaTwice merged 1 commit into from
Nov 21, 2025
Merged

feat: added global modern Spotlight Search #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions webui/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Comment on lines +489 to +506
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The kbd styling uses fixed color values that may not provide sufficient contrast in all scenarios. The light mode kbd element uses color: #555 on a background that could vary, potentially violating WCAG contrast requirements. Consider using theme-aware colors or CSS variables that adapt to the theme context to ensure adequate contrast ratios (at least 4.5:1 for text).

Copilot uses AI. Check for mistakes.

.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);
}
2 changes: 2 additions & 0 deletions webui/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"] });

Expand All @@ -45,6 +46,7 @@ export default function RootLayout({
suppressHydrationWarning
>
<ThemeProvider>
<SpotlightSearch />
<Banner />
<Container
sx={{ marginTop: "64px", height: "calc(100vh - 64px)" }}
Expand Down
59 changes: 58 additions & 1 deletion webui/src/app/ui/banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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,
Comment on lines +190 to +193
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The keyboard event dispatch is incorrect. Setting both metaKey: true and ctrlKey: true doesn't match the actual keyboard shortcut logic in spotlight-search.tsx (line 197), which uses || (either Cmd OR Ctrl, not both). This will trigger the search on any platform. Instead, dispatch the event with only one modifier based on the user's platform:

const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
const event = new KeyboardEvent("keydown", {
    key: "k",
    metaKey: isMac,
    ctrlKey: !isMac,
});
Suggested change
const event = new KeyboardEvent("keydown", {
key: "k",
metaKey: true,
ctrlKey: true,
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
const event = new KeyboardEvent("keydown", {
key: "k",
metaKey: isMac,
ctrlKey: !isMac,

Copilot uses AI. Check for mistakes.
});
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>
Comment on lines +229 to +230
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The search button only displays the macOS keyboard shortcut symbol "⌘K" regardless of the user's platform. Windows/Linux users see "⌘K" but should see "Ctrl+K". Update the button to display the correct shortcut based on the platform:

const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
// Then in the kbd element:
{isMac ? '⌘K' : 'Ctrl+K'}

Copilot uses AI. Check for mistakes.
</Button>
</Box>

<Box className="flex items-center">
<Tooltip title="Toggle dark mode">
<IconButton
Expand Down
Loading
Loading