filters on AI search

apps/client/src/features/search/components/label-filter-menu.tsx

@@ -91,6 +91,7 @@ export function LabelFilterMenu({
             return (
               <Menu.Item
                 key={label.id}
+                type="button"
                 component={CheckboxMenuItem}
                 aria-checked={isChecked}
                 onClick={() => toggleLabel(label.id)}

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

@@ -124,8 +124,17 @@ export function SearchSpotlightFilters({
             color="blue"
             labelPosition="left"
             styles={{
-              root: { display: "flex", alignItems: "center" },
-              label: { paddingRight: "8px", fontSize: "13px", fontWeight: 500 },
+              root: {
+                display: "flex",
+                alignItems: "center",
+                flexShrink: 0,
+              },
+              label: {
+                whiteSpace: "nowrap",
+                paddingRight: "8px",
+                fontSize: "13px",
+                fontWeight: 500,
+              },
             }}
           />
         </div>

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

@@ -1,6 +1,6 @@
 import { Spotlight } from "@mantine/spotlight";
 import { IconSearch, IconSparkles } from "@tabler/icons-react";
-import { Group, Button, VisuallyHidden } from "@mantine/core";
+import { Group, Button, VisuallyHidden, Text } from "@mantine/core";
 import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { useDebouncedValue } from "@mantine/hooks";
 import { useTranslation } from "react-i18next";
@@ -56,7 +56,10 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
     return params;
   }, [debouncedSearchQuery, filters]);
 
-  const { data: searchResults, isLoading } = useUnifiedSearch(
+  const {
+    data: searchResults,
+    isFetching,
+  } = useUnifiedSearch(
     searchParams,
     !isAiMode // Disable regular search when in AI mode
   );
@@ -177,7 +180,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
             ? query.length > 0 && !isAiLoading && !aiSearchResult
               ? t("No answer available")
               : ""
-            : query.length > 0 && !isLoading
+            : query.length > 0 && !isFetching
               ? resultItems.length === 0
                 ? t("No results found")
                 : t("{{count}} results found", { count: resultItems.length })
@@ -208,11 +211,19 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
                 <Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
               )}
 
-              {query.length > 0 && !isLoading && resultItems.length === 0 && (
+              {query.length > 0 && !isFetching && resultItems.length === 0 && (
                 <Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
               )}
 
               {resultItems.length > 0 && <>{resultItems}</>}
+
+              {query.length > 0 && isFetching && (
+                <Spotlight.Empty>
+                  <Text size="sm" style={{ marginTop: 10 }}>
+                    {t("Searching...")}
+                  </Text>
+                </Spotlight.Empty>
+              )}
             </>
           )}
         </Spotlight.ActionsList>

apps/client/src/features/search/hooks/use-unified-search.ts

@@ -1,4 +1,4 @@
-import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { keepPreviousData, useQuery, UseQueryResult } from "@tanstack/react-query";
 import {
   searchPage,
   searchAttachments,
@@ -40,5 +40,6 @@ export function useUnifiedSearch(
       }
     },
     enabled: !!params.query && enabled,
+    placeholderData: params.query.length > 0 ? keepPreviousData: undefined
   });
 }