feat: add stale boards indication

Author: maximka76667

frontend/testing-view/src/features/filtering/components/FilterController.tsx

@@ -1,3 +1,5 @@
+import { useShallow } from "zustand/shallow";
+import { detectExtraBoards } from "../../../lib/utils";
 import { useStore } from "../../../store/store";
 import { FilterCategoryItem } from "./FilterCategoryItem";
 import { FilterDialog } from "./FilterDialog";
@@ -7,12 +9,15 @@ export const FilterController = () => {
   const close = useStore((s) => s.closeFilterDialog);
 
   const boards = useStore((s) => s.boards);
+  const activeFilters = useStore(useShallow((s) => s.getActiveFilters(scope)));
 
   const clearFilters = useStore((s) => s.clearFilters);
   const selectAllFilters = useStore((s) => s.selectAllFilters);
 
   if (!scope) return null;
 
+  const extraBoards = detectExtraBoards(activeFilters, boards);
+
   return (
     <FilterDialog
       title={`Filter ${scope === "commands" ? "commands" : "telemetry packets"}`}
@@ -22,6 +27,7 @@ export const FilterController = () => {
       onClearAll={() => clearFilters(scope)}
       onSelectAll={() => selectAllFilters(scope)}
       categories={boards}
+      extraCategories={extraBoards}
       FilterCategoryComponent={FilterCategoryItem}
     />
   );

frontend/testing-view/src/features/filtering/components/FilterDialog.tsx

@@ -6,6 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@workspace/ui";
+import { AlertTriangle } from "@workspace/ui/icons";
 import { type ComponentType } from "react";
 import type { BoardName } from "../../../types/data/board";
 
@@ -17,6 +18,7 @@ interface FilterDialogProps {
   onClearAll: () => void;
   onSelectAll: () => void;
   categories: readonly BoardName[];
+  extraCategories: readonly BoardName[];
   FilterCategoryComponent: ComponentType<{ category: BoardName }>;
 }
 
@@ -28,11 +30,13 @@ export const FilterDialog = ({
   onClearAll,
   onSelectAll,
   categories,
+  extraCategories,
   FilterCategoryComponent,
 }: FilterDialogProps) => {
+  console.log(extraCategories);
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="bg-background text-foreground max-h-[85vh] w-full min-w-[600px] max-w-2xl overflow-y-auto px-10 py-8">
+      <DialogContent className="bg-background text-foreground max-h-[85vh] w-full max-w-2xl min-w-[600px] overflow-y-auto px-10 py-8">
         <DialogHeader>
           <DialogTitle className="text-2xl font-semibold">{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}
@@ -47,6 +51,30 @@ export const FilterDialog = ({
           </Button>
         </div>
 
+        {extraCategories.length > 0 && (
+          <div className="mt-2 rounded-md border border-amber-500/30 bg-amber-500/15 p-4 text-sm text-amber-600 dark:text-amber-400">
+            <div className="flex items-center gap-2 font-semibold">
+              <AlertTriangle className="h-4 w-4" />
+              Stale filters detected
+            </div>
+            <p className="mt-1 opacity-90">
+              The following boards are in your saved filters but not in the
+              current configuration:{" "}
+              <span className="font-mono font-bold">
+                {extraCategories.join(", ")}
+              </span>
+            </p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="mt-3 border-amber-500/30 hover:bg-amber-500/10"
+              onClick={onClearAll}
+            >
+              Clear Stale Filters
+            </Button>
+          </div>
+        )}
+
         <div className="space-y-1">
           {categories.map((category) => (
             <FilterCategoryComponent key={category} category={category} />

frontend/testing-view/src/features/filtering/store/filteringSlice.ts

@@ -38,7 +38,7 @@ export interface FilteringSlice {
   workspaceFilters: Record<string, WorkspaceFilters>;
   initializeWorkspaceFilters: () => void;
   updateFilters: (scope: FilterScope, filters: TabFilter) => void;
-  getActiveFilters: (scope: FilterScope) => TabFilter | undefined;
+  getActiveFilters: (scope: FilterScope | null) => TabFilter | undefined;
 
   /** Filter Actions */
   selectAllFilters: (scope: FilterScope) => void;
@@ -229,6 +229,7 @@ export const createFilteringSlice: StateCreator<
   // Helper getters
   getActiveFilters: (scope) => {
     const id = get().getActiveWorkspaceId();
+    if (!scope) return {};
     return id ? get().workspaceFilters[id]?.[scope] : undefined;
   },
 

frontend/testing-view/src/features/workspace/components/rightSidebar/tabs/TabHeader.tsx

@@ -1,5 +1,7 @@
 import { Button } from "@workspace/ui";
-import { ListFilterPlus } from "@workspace/ui/icons";
+import { AlertTriangle, ListFilterPlus } from "@workspace/ui/icons";
+import { useShallow } from "zustand/shallow";
+import { detectExtraBoards } from "../../../../../lib/utils";
 import { useStore } from "../../../../../store/store";
 import type { SidebarTab } from "../../../types/sidebar";
 
@@ -13,23 +15,40 @@ export const TabHeader = ({ title, scope }: TabHeaderProps) => {
   const totalCount = useStore((state) => state.getTotalCount(scope));
   const filteredCount = useStore((state) => state.getFilteredCount(scope));
 
+  const boards = useStore((s) => s.boards);
+  const activeFilters = useStore(useShallow((s) => s.getActiveFilters(scope)));
+  const extraBoards = detectExtraBoards(activeFilters, boards);
+
   return (
-    <div className="flex items-center justify-between gap-2 py-4">
-      <h3 className="text-foreground text-lg font-semibold">
-        {title}
-        <span className="text-muted-foreground ml-2 text-sm font-normal">
-          {filteredCount} / {totalCount}
-        </span>
-      </h3>
-      <Button
-        onClick={() => openFilterDialog(scope)}
-        size="sm"
-        variant="secondary"
-        className="ring-border/50 hover:ring-primary/30 gap-2 shadow-sm ring-1 transition-all"
-      >
-        <ListFilterPlus className="h-4 w-4" />
-        Filter
-      </Button>
+    <div className="flex flex-col gap-1 py-4">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-foreground text-lg font-semibold">
+          {title}
+          <span className="text-muted-foreground ml-2 text-sm font-normal">
+            {filteredCount} / {totalCount}
+          </span>
+        </h3>
+        <Button
+          onClick={() => openFilterDialog(scope)}
+          size="sm"
+          variant="secondary"
+          className="ring-border/50 hover:ring-primary/30 gap-2 shadow-sm ring-1 transition-all"
+        >
+          <ListFilterPlus className="h-4 w-4" />
+          Filter
+        </Button>
+      </div>
+
+      {/* Warning for stale boards */}
+      {extraBoards.length > 0 && (
+        <div
+          className="flex cursor-help items-center gap-1.5 text-[11px] font-medium text-amber-500"
+          title={`Stale boards in filters: ${extraBoards.join(", ")}`}
+        >
+          <AlertTriangle className="h-3.5 w-3.5" />
+          <span>{extraBoards.length} stale board(s) affecting counts</span>
+        </div>
+      )}
     </div>
   );
 };

frontend/testing-view/src/lib/utils.ts

@@ -119,3 +119,11 @@ export const formatTimestamp = (ts: MessageTimestamp) => {
   if (!ts) return "00:00:00";
   return `${ts.hour.toString().padStart(2, "0")}:${ts.minute.toString().padStart(2, "0")}:${ts.second.toString().padStart(2, "0")}`;
 };
+
+export const detectExtraBoards = (
+  activeFilters: TabFilter | undefined,
+  boards: BoardName[],
+) =>
+  Object.keys(activeFilters || {}).filter(
+    (key) => !boards.includes(key),
+  ) as BoardName[];