refactor: make title-only search a toggle chip

apps/client/public/locales/en-US/translation.json

@@ -1309,7 +1309,5 @@
   "Read-only mode": "Read-only mode",
   "AI Chat can search and read workspace content, but cannot create or edit pages.": "AI Chat can search and read workspace content, but cannot create or edit pages.",
   "Toggle AI Chat read-only mode": "Toggle AI Chat read-only mode",
-  "Match": "Match",
-  "Everything": "Everything",
   "Title only": "Title only"
 }

apps/client/src/features/search/components/search-spotlight-filters.module.css

@@ -17,3 +17,10 @@
     color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-6));
   }
 }
+
+.filterButtonActive {
+  color: var(--mantine-color-blue-light-color);
+  &:hover {
+    color: var(--mantine-color-blue-light-color);
+  }
+}

apps/client/src/features/search/components/search-spotlight-filters.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import cx from "clsx";
 import {
   Button,
   Menu,
@@ -255,52 +256,22 @@ export function SearchSpotlightFilters({
       </Menu>
 
       {contentType !== "attachment" && !isAiMode && (
-        <Menu
-          shadow="md"
-          width={200}
-          position="bottom-start"
-          zIndex={getDefaultZIndex("max")}
-        >
-          <Menu.Target>
         <Button
-              variant="subtle"
+          variant={titleOnly ? "light" : "subtle"}
-              color="gray"
+          color={titleOnly ? "blue" : "gray"}
           size="sm"
-              rightSection={<IconChevronDown size={14} />}
+          radius="xl"
           leftSection={<IconLetterCase size={16} />}
-              className={classes.filterButton}
+          className={cx(
+            classes.filterButton,
+            titleOnly && classes.filterButtonActive,
+          )}
           fw={500}
+          aria-pressed={titleOnly}
+          onClick={() => setTitleOnly(!titleOnly)}
         >
-              {`${t("Match")}: ${titleOnly ? t("Title only") : t("Everything")}`}
-            </Button>
-          </Menu.Target>
-          <Menu.Dropdown>
-            <Menu.Item
-              component={RadioMenuItem}
-              aria-checked={!titleOnly}
-              onClick={() => setTitleOnly(false)}
-            >
-              <Group flex="1" gap="xs">
-                <Text size="sm" style={{ flex: 1 }}>
-                  {t("Everything")}
-                </Text>
-                {!titleOnly && <IconCheck size={20} aria-hidden />}
-              </Group>
-            </Menu.Item>
-            <Menu.Item
-              component={RadioMenuItem}
-              aria-checked={titleOnly}
-              onClick={() => setTitleOnly(true)}
-            >
-              <Group flex="1" gap="xs">
-                <Text size="sm" style={{ flex: 1 }}>
           {t("Title only")}
-                </Text>
+        </Button>
-                {titleOnly && <IconCheck size={20} aria-hidden />}
-              </Group>
-            </Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
       )}
 
       {orderedVisibleFilters.map((filterKey) => {