refactor: convert search to mantine spotlight

Author: gregrickaby

app/layout.tsx

@@ -16,6 +16,7 @@ import {
 import '@mantine/core/styles.css'
 import {Notifications} from '@mantine/notifications'
 import '@mantine/notifications/styles.css'
+import '@mantine/spotlight/styles.css'
 import type {Metadata, Viewport} from 'next'
 
 if (!isProduction()) {

components/layout/Header/Header.tsx

@@ -1,10 +1,9 @@
-import {SearchBar} from '@/components/ui/SearchBar/SearchBar'
-import {ThemeToggle} from '@/components/ui/ThemeToggle/ThemeToggle'
-import {ActionIcon, Box, Group} from '@mantine/core'
-import {IconSearch} from '@tabler/icons-react'
+import {MobileSearch} from '@/components/layout/Header/MobileSearch'
 import {Logo} from '@/components/layout/Logo/Logo'
 import {SidebarToggle} from '@/components/layout/Sidebar/SidebarToggle'
 import {UserMenu} from '@/components/layout/UserMenu/UserMenu'
+import {ThemeToggle} from '@/components/ui/ThemeToggle/ThemeToggle'
+import {Group} from '@mantine/core'
 
 /**
  * Props for the Header component.
@@ -37,20 +36,7 @@ export function Header({
       </Group>
 
       <Group gap="xs">
-        <ActionIcon
-          variant="subtle"
-          color="gray"
-          size="lg"
-          hiddenFrom="sm"
-          aria-label="Search"
-          data-umami-event="open-mobile-search"
-        >
-          <IconSearch aria-hidden="true" size={20} />
-        </ActionIcon>
-
-        <Box visibleFrom="sm">
-          <SearchBar />
-        </Box>
+        <MobileSearch />
 
         <ThemeToggle />
 

components/layout/Header/MobileSearch.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import {SearchBar} from '@/components/ui/SearchBar/SearchBar'
+import {ActionIcon, Group, Text, UnstyledButton} from '@mantine/core'
+import {spotlight} from '@mantine/spotlight'
+import {IconSearch} from '@tabler/icons-react'
+
+/**
+ * Search triggers for the header.
+ * Mobile shows an icon button; desktop shows a search input button.
+ * Both open the Spotlight overlay. The Spotlight overlay is also rendered here.
+ */
+export function MobileSearch() {
+  return (
+    <>
+      {/* Mobile: icon button */}
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="lg"
+        hiddenFrom="sm"
+        aria-label="Search"
+        data-umami-event="open-mobile-search"
+        onClick={spotlight.open}
+      >
+        <IconSearch aria-hidden="true" size={20} />
+      </ActionIcon>
+
+      {/* Desktop: input-styled button */}
+      <UnstyledButton
+        visibleFrom="sm"
+        onClick={spotlight.open}
+        aria-label="Open search"
+        data-umami-event="open-desktop-search"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          padding: '6px 12px',
+          borderRadius: 'var(--mantine-radius-md)',
+          border: '1px solid var(--mantine-color-default-border)',
+          background: 'var(--mantine-color-default)',
+          color: 'var(--mantine-color-dimmed)',
+          width: 280,
+          fontSize: 'var(--mantine-font-size-sm)',
+          cursor: 'pointer'
+        }}
+      >
+        <IconSearch size={14} aria-hidden="true" />
+        <Text size="sm" c="dimmed" style={{flex: 1}}>
+          Search Reddit...
+        </Text>
+        <Group gap={4}>
+          <kbd
+            style={{
+              padding: '1px 5px',
+              borderRadius: 4,
+              border: '1px solid var(--mantine-color-default-border)',
+              fontSize: 11,
+              background: 'var(--mantine-color-default)'
+            }}
+          >
+            /
+          </kbd>
+        </Group>
+      </UnstyledButton>
+
+      {/* Spotlight overlay – mounted once, opened programmatically */}
+      <SearchBar />
+    </>
+  )
+}