fix: keep applied search filters in the order they were added

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

@@ -54,6 +54,7 @@ export function SearchSpotlightFilters({
   );
   const [selectedLabelIds, setSelectedLabelIds] = useState<string[]>([]);
   const [openedFilter, setOpenedFilter] = useState<string | null>(null);
+  const [visibleFilters, setVisibleFilters] = useState<string[]>([]);
   const [workspace] = useAtom(workspaceAtom);
 
   const { data: spacesData } = useGetSpacesQuery({ limit: 100 });
@@ -106,23 +107,33 @@ export function SearchSpotlightFilters({
     }
   };
 
-  const showCreatorFilter = !!selectedCreatorId || openedFilter === "creator";
-  const showLabelFilter =
-    contentType !== "attachment" &&
-    (selectedLabelIds.length > 0 || openedFilter === "labels");
+  const onDemandFilters = [
+    { key: "creator", label: t("Created by"), icon: IconUser, available: true },
+    {
+      key: "labels",
+      label: t("Labels"),
+      icon: IconTag,
+      available: contentType !== "attachment",
+    },
+  ];
 
-  const addableFilters: { key: string; label: string; icon: typeof IconUser }[] =
-    [];
-  if (!showCreatorFilter) {
-    addableFilters.push({
-      key: "creator",
-      label: t("Created by"),
-      icon: IconUser,
-    });
-  }
-  if (contentType !== "attachment" && !showLabelFilter) {
-    addableFilters.push({ key: "labels", label: t("Labels"), icon: IconTag });
-  }
+  const isFilterVisible = (key: string) => {
+    if (openedFilter === key) return true;
+    if (key === "creator") return !!selectedCreatorId;
+    if (key === "labels")
+      return contentType !== "attachment" && selectedLabelIds.length > 0;
+    return false;
+  };
+
+  const orderedVisibleFilters = visibleFilters.filter(isFilterVisible);
+  const addableFilters = onDemandFilters.filter(
+    (filter) => filter.available && !isFilterVisible(filter.key),
+  );
+
+  const revealFilter = (key: string) => {
+    setVisibleFilters((prev) => [...prev.filter((k) => k !== key), key]);
+    setOpenedFilter(key);
+  };
 
   return (
     <div className={classes.filtersContainer}>
@@ -239,15 +250,20 @@ export function SearchSpotlightFilters({
         </Menu.Dropdown>
       </Menu>
 
-      {showCreatorFilter && (
+      {orderedVisibleFilters.map((filterKey) => {
+        if (filterKey === "creator") {
+          return (
             <CreatorFilterMenu
+              key="creator"
               value={selectedCreatorId}
               onChange={handleCreatorSelect}
               position="bottom-start"
               width={250}
               zIndex={getDefaultZIndex("max")}
               opened={openedFilter === "creator"}
-          onOpenChange={(opened) => setOpenedFilter(opened ? "creator" : null)}
+              onOpenChange={(opened) =>
+                setOpenedFilter(opened ? "creator" : null)
+              }
             >
               <Button
                 variant="subtle"
@@ -263,17 +279,22 @@ export function SearchSpotlightFilters({
                   : `${t("Created by")}: ${t("Anyone")}`}
               </Button>
             </CreatorFilterMenu>
-      )}
+          );
+        }
 
-      {showLabelFilter && (
+        if (filterKey === "labels") {
+          return (
             <LabelFilterMenu
+              key="labels"
               value={selectedLabelIds}
               onChange={handleLabelsSelect}
               position="bottom-start"
               width={250}
               zIndex={getDefaultZIndex("max")}
               opened={openedFilter === "labels"}
-          onOpenChange={(opened) => setOpenedFilter(opened ? "labels" : null)}
+              onOpenChange={(opened) =>
+                setOpenedFilter(opened ? "labels" : null)
+              }
             >
               <Button
                 variant="subtle"
@@ -289,7 +310,11 @@ export function SearchSpotlightFilters({
                   : t("Labels")}
               </Button>
             </LabelFilterMenu>
-      )}
+          );
+        }
+
+        return null;
+      })}
 
       {addableFilters.length > 0 && (
         <Menu
@@ -316,7 +341,7 @@ export function SearchSpotlightFilters({
               <Menu.Item
                 key={filter.key}
                 leftSection={<filter.icon size={16} />}
-                onClick={() => setOpenedFilter(filter.key)}
+                onClick={() => revealFilter(filter.key)}
               >
                 {filter.label}
               </Menu.Item>