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,57 +250,71 @@ export function SearchSpotlightFilters({
         </Menu.Dropdown>
       </Menu>
 
-      {showCreatorFilter && (
-        <CreatorFilterMenu
-          value={selectedCreatorId}
-          onChange={handleCreatorSelect}
-          position="bottom-start"
-          width={250}
-          zIndex={getDefaultZIndex("max")}
-          opened={openedFilter === "creator"}
-          onOpenChange={(opened) => setOpenedFilter(opened ? "creator" : null)}
-        >
-          <Button
-            variant="subtle"
-            color="gray"
-            size="sm"
-            rightSection={<IconChevronDown size={14} />}
-            leftSection={<IconUser size={16} />}
-            className={classes.filterButton}
-            fw={500}
-          >
-            {selectedCreatorId
-              ? `${t("Created by")}: ${selectedCreatorName || t("Unknown")}`
-              : `${t("Created by")}: ${t("Anyone")}`}
-          </Button>
-        </CreatorFilterMenu>
-      )}
+      {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)
+              }
+            >
+              <Button
+                variant="subtle"
+                color="gray"
+                size="sm"
+                rightSection={<IconChevronDown size={14} />}
+                leftSection={<IconUser size={16} />}
+                className={classes.filterButton}
+                fw={500}
+              >
+                {selectedCreatorId
+                  ? `${t("Created by")}: ${selectedCreatorName || t("Unknown")}`
+                  : `${t("Created by")}: ${t("Anyone")}`}
+              </Button>
+            </CreatorFilterMenu>
+          );
+        }
 
-      {showLabelFilter && (
-        <LabelFilterMenu
-          value={selectedLabelIds}
-          onChange={handleLabelsSelect}
-          position="bottom-start"
-          width={250}
-          zIndex={getDefaultZIndex("max")}
-          opened={openedFilter === "labels"}
-          onOpenChange={(opened) => setOpenedFilter(opened ? "labels" : null)}
-        >
-          <Button
-            variant="subtle"
-            color="gray"
-            size="sm"
-            rightSection={<IconChevronDown size={14} />}
-            leftSection={<IconTag size={16} />}
-            className={classes.filterButton}
-            fw={500}
-          >
-            {selectedLabelIds.length > 0
-              ? `${t("Labels")} (${selectedLabelIds.length})`
-              : t("Labels")}
-          </Button>
-        </LabelFilterMenu>
-      )}
+        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)
+              }
+            >
+              <Button
+                variant="subtle"
+                color="gray"
+                size="sm"
+                rightSection={<IconChevronDown size={14} />}
+                leftSection={<IconTag size={16} />}
+                className={classes.filterButton}
+                fw={500}
+              >
+                {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>