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 onDemandFilters = [
-  const showLabelFilter =
+    { key: "creator", label: t("Created by"), icon: IconUser, available: true },
-    contentType !== "attachment" &&
+    {
-    (selectedLabelIds.length > 0 || openedFilter === "labels");
+      key: "labels",
+      label: t("Labels"),
+      icon: IconTag,
+      available: contentType !== "attachment",
+    },
+  ];
 
-  const addableFilters: { key: string; label: string; icon: typeof IconUser }[] =
+  const isFilterVisible = (key: string) => {
-    [];
+    if (openedFilter === key) return true;
-  if (!showCreatorFilter) {
+    if (key === "creator") return !!selectedCreatorId;
-    addableFilters.push({
+    if (key === "labels")
-      key: "creator",
+      return contentType !== "attachment" && selectedLabelIds.length > 0;
-      label: t("Created by"),
+    return false;
-      icon: IconUser,
+  };
-    });
+
-  }
+  const orderedVisibleFilters = visibleFilters.filter(isFilterVisible);
-  if (contentType !== "attachment" && !showLabelFilter) {
+  const addableFilters = onDemandFilters.filter(
-    addableFilters.push({ key: "labels", label: t("Labels"), icon: IconTag });
+    (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,57 +250,71 @@ export function SearchSpotlightFilters({
         </Menu.Dropdown>
       </Menu>
 
-      {showCreatorFilter && (
+      {orderedVisibleFilters.map((filterKey) => {
-        <CreatorFilterMenu
+        if (filterKey === "creator") {
-          value={selectedCreatorId}
+          return (
-          onChange={handleCreatorSelect}
+            <CreatorFilterMenu
-          position="bottom-start"
+              key="creator"
-          width={250}
+              value={selectedCreatorId}
-          zIndex={getDefaultZIndex("max")}
+              onChange={handleCreatorSelect}
-          opened={openedFilter === "creator"}
+              position="bottom-start"
-          onOpenChange={(opened) => setOpenedFilter(opened ? "creator" : null)}
+              width={250}
-        >
+              zIndex={getDefaultZIndex("max")}
-          <Button
+              opened={openedFilter === "creator"}
-            variant="subtle"
+              onOpenChange={(opened) =>
-            color="gray"
+                setOpenedFilter(opened ? "creator" : null)
-            size="sm"
+              }
-            rightSection={<IconChevronDown size={14} />}
+            >
-            leftSection={<IconUser size={16} />}
+              <Button
-            className={classes.filterButton}
+                variant="subtle"
-            fw={500}
+                color="gray"
-          >
+                size="sm"
-            {selectedCreatorId
+                rightSection={<IconChevronDown size={14} />}
-              ? `${t("Created by")}: ${selectedCreatorName || t("Unknown")}`
+                leftSection={<IconUser size={16} />}
-              : `${t("Created by")}: ${t("Anyone")}`}
+                className={classes.filterButton}
-          </Button>
+                fw={500}
-        </CreatorFilterMenu>
+              >
-      )}
+                {selectedCreatorId
+                  ? `${t("Created by")}: ${selectedCreatorName || t("Unknown")}`
+                  : `${t("Created by")}: ${t("Anyone")}`}
+              </Button>
+            </CreatorFilterMenu>
+          );
+        }
 
-      {showLabelFilter && (
+        if (filterKey === "labels") {
-        <LabelFilterMenu
+          return (
-          value={selectedLabelIds}
+            <LabelFilterMenu
-          onChange={handleLabelsSelect}
+              key="labels"
-          position="bottom-start"
+              value={selectedLabelIds}
-          width={250}
+              onChange={handleLabelsSelect}
-          zIndex={getDefaultZIndex("max")}
+              position="bottom-start"
-          opened={openedFilter === "labels"}
+              width={250}
-          onOpenChange={(opened) => setOpenedFilter(opened ? "labels" : null)}
+              zIndex={getDefaultZIndex("max")}
-        >
+              opened={openedFilter === "labels"}
-          <Button
+              onOpenChange={(opened) =>
-            variant="subtle"
+                setOpenedFilter(opened ? "labels" : null)
-            color="gray"
+              }
-            size="sm"
+            >
-            rightSection={<IconChevronDown size={14} />}
+              <Button
-            leftSection={<IconTag size={16} />}
+                variant="subtle"
-            className={classes.filterButton}
+                color="gray"
-            fw={500}
+                size="sm"
-          >
+                rightSection={<IconChevronDown size={14} />}
-            {selectedLabelIds.length > 0
+                leftSection={<IconTag size={16} />}
-              ? `${t("Labels")} (${selectedLabelIds.length})`
+                className={classes.filterButton}
-              : t("Labels")}
+                fw={500}
-          </Button>
+              >
-        </LabelFilterMenu>
+                {selectedLabelIds.length > 0
-      )}
+                  ? `${t("Labels")} (${selectedLabelIds.length})`
+                  : 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>