From 6a177cbc4d6a98b35da81ed52b2062ae69b7f0d5 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 24 Aug 2026 21:41:57 +0100
Subject: [PATCH] refactor: make title-only search a toggle chip

---
 .../public/locales/en-US/translation.json     |  2 -
 .../search-spotlight-filters.module.css       |  7 +++
 .../components/search-spotlight-filters.tsx   | 61 +++++--------------
 3 files changed, 23 insertions(+), 47 deletions(-)

diff --git a/apps/client/public/locales/en-US/translation.json b/apps/client/public/locales/en-US/translation.json
index 1855a6f8c..472c4ea46 100644
--- a/apps/client/public/locales/en-US/translation.json
+++ b/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"
 }
diff --git a/apps/client/src/features/search/components/search-spotlight-filters.module.css b/apps/client/src/features/search/components/search-spotlight-filters.module.css
index e8073aab6..3709f2960 100644
--- a/apps/client/src/features/search/components/search-spotlight-filters.module.css
+++ b/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);
+  }
+}
diff --git a/apps/client/src/features/search/components/search-spotlight-filters.tsx b/apps/client/src/features/search/components/search-spotlight-filters.tsx
index 36179e4b8..ca4bdcd85 100644
--- a/apps/client/src/features/search/components/search-spotlight-filters.tsx
+++ b/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")}
+        <Button
+          variant={titleOnly ? "light" : "subtle"}
+          color={titleOnly ? "blue" : "gray"}
+          size="sm"
+          radius="xl"
+          leftSection={<IconLetterCase size={16} />}
+          className={cx(
+            classes.filterButton,
+            titleOnly && classes.filterButtonActive,
+          )}
+          fw={500}
+          aria-pressed={titleOnly}
+          onClick={() => setTitleOnly(!titleOnly)}
         >
-          <Menu.Target>
-            <Button
-              variant="subtle"
-              color="gray"
-              size="sm"
-              rightSection={<IconChevronDown size={14} />}
-              leftSection={<IconLetterCase size={16} />}
-              className={classes.filterButton}
-              fw={500}
-            >
-              {`${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>
-                {titleOnly && <IconCheck size={20} aria-hidden />}
-              </Group>
-            </Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
+          {t("Title only")}
+        </Button>
       )}
 
       {orderedVisibleFilters.map((filterKey) => {