Replace history select with tabs

apps/web/app/(app)/[emailAccountId]/assistant/History.tsx

@@ -26,20 +26,15 @@ import { useChat } from "@/components/assistant-chat/ChatContext";
 
 export function History() {
   const [page] = useQueryState("page", parseAsInteger.withDefault(1));
-  const [ruleId, setRuleId] = useQueryState(
-    "ruleId",
-    parseAsString.withDefault("all"),
-  );
+  const [ruleId] = useQueryState("ruleId", parseAsString.withDefault("all"));
 
   const { data, isLoading, error } = useSWR<PlanHistoryResponse>(
     `/api/user/planned/history?page=${page}&ruleId=${ruleId}`,
   );
 
   return (
     <>
-      <div className="flex">
-        <RulesSelect ruleId={ruleId} setRuleId={setRuleId} />
-      </div>
+      <RulesSelect />
       <Card className="mt-2">
         <LoadingContent loading={isLoading} error={error}>
           {data?.executedRules.length ? (

apps/web/app/(app)/[emailAccountId]/assistant/Pending.tsx

@@ -34,20 +34,15 @@ import { useChat } from "@/components/assistant-chat/ChatContext";
 
 export function Pending() {
   const [page] = useQueryState("page", parseAsInteger.withDefault(1));
-  const [ruleId, setRuleId] = useQueryState(
-    "rule-id",
-    parseAsString.withDefault("all"),
-  );
+  const [ruleId] = useQueryState("ruleId", parseAsString.withDefault("all"));
 
   const { data, isLoading, error, mutate } = useSWR<PendingExecutedRules>(
     `/api/user/planned?page=${page}&ruleId=${ruleId}`,
   );
 
   return (
     <>
-      <div className="flex">
-        <RulesSelect ruleId={ruleId} setRuleId={setRuleId} />
-      </div>
+      <RulesSelect />
       <Card className="mt-2">
         <LoadingContent loading={isLoading} error={error}>
           {data?.executedRules.length ? (

apps/web/app/(app)/[emailAccountId]/assistant/RulesSelect.tsx

@@ -1,51 +1,28 @@
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { useRules } from "@/hooks/useRules";
 import { Skeleton } from "@/components/ui/skeleton";
 import { LoadingContent } from "@/components/LoadingContent";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
-export function RulesSelect({
-  ruleId,
-  setRuleId,
-}: {
-  ruleId: string;
-  setRuleId: (ruleId: string) => void;
-}) {
-  const {
-    data: rules,
-    isLoading: rulesLoading,
-    error: rulesError,
-  } = useRules();
+export function RulesSelect() {
+  const { data, isLoading, error } = useRules();
 
   return (
     <LoadingContent
-      loading={rulesLoading}
-      error={rulesError}
-      loadingComponent={<Skeleton className="h-10 w-32" />}
+      loading={isLoading}
+      error={error}
+      loadingComponent={<Skeleton className="h-10 w-full" />}
     >
-      <div>
-        <Select defaultValue={ruleId} onValueChange={setRuleId}>
-          <SelectTrigger>
-            <SelectValue placeholder="Filter by rule" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All rules</SelectItem>
-            <SelectItem value="skipped">
-              Processed rules with no match
-            </SelectItem>
-            {rules?.map((rule) => (
-              <SelectItem key={rule.id} value={rule.id}>
-                {rule.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+      <Tabs defaultValue="all" searchParam="ruleId" className="overflow-x-auto">
+        <TabsList>
+          <TabsTrigger value="all">All rules</TabsTrigger>
+          <TabsTrigger value="skipped">No match</TabsTrigger>
+          {data?.map((rule) => (
+            <TabsTrigger key={rule.id} value={rule.id}>
+              {rule.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
     </LoadingContent>
   );
 }

version.txt

@@ -1 +1 @@
-v1.9.2
+v1.9.3