fix(frontend): rewrite FiltersSortingPanel with shadcn, correct styling, useTransition

thoughts-frontend/components/filters-sorting-panel.tsx

@@ -1,6 +1,11 @@
 "use client";
 
+import { useState, useTransition } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import { FeedSortOption } from "@/lib/api";
 
 const SORT_OPTIONS: { value: FeedSortOption; label: string }[] = [
@@ -14,112 +19,148 @@ const SORT_OPTIONS: { value: FeedSortOption; label: string }[] = [
 export function FiltersSortingPanel() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
 
-  const currentSort = (searchParams.get("sort") ?? "newest") as FeedSortOption;
-  const originalsOnly = searchParams.get("originals_only") === "true";
-  const repliesOnly   = searchParams.get("replies_only")   === "true";
-  const localOnly     = searchParams.get("local_only")     === "true";
-  const hideSensitive = searchParams.get("hide_sensitive") === "true";
+  const [sort, setSort] = useState<FeedSortOption>(
+    (searchParams.get("sort") as FeedSortOption | null) ?? "newest"
+  );
+  const [originalsOnly, setOriginalsOnly] = useState(
+    searchParams.get("originals_only") === "true"
+  );
+  const [repliesOnly, setRepliesOnly] = useState(
+    searchParams.get("replies_only") === "true"
+  );
+  const [localOnly, setLocalOnly] = useState(
+    searchParams.get("local_only") === "true"
+  );
+  const [hideSensitive, setHideSensitive] = useState(
+    searchParams.get("hide_sensitive") === "true"
+  );
 
-  function update(key: string, value: string | null) {
+  function pushParams(updates: Record<string, string | null>) {
     const params = new URLSearchParams(searchParams.toString());
     params.delete("page");
+    for (const [key, value] of Object.entries(updates)) {
       if (value === null) {
         params.delete(key);
       } else {
         params.set(key, value);
       }
-    router.push(`/?${params.toString()}`);
+    }
+    startTransition(() => router.replace(`/?${params.toString()}`));
   }
 
-  function setSort(value: FeedSortOption) {
-    update("sort", value === "newest" ? null : value);
+  function handleSort(value: FeedSortOption) {
+    setSort(value);
+    pushParams({ sort: value === "newest" ? null : value });
   }
 
-  function toggleFilter(key: string, current: boolean) {
-    update(key, current ? null : "true");
+  function handleOriginalsOnly(checked: boolean) {
+    setOriginalsOnly(checked);
+    if (checked) setRepliesOnly(false);
+    const updates: Record<string, string | null> = {
+      originals_only: checked ? "true" : null,
+    };
+    if (checked) updates.replies_only = null;
+    pushParams(updates);
+  }
+
+  function handleRepliesOnly(checked: boolean) {
+    setRepliesOnly(checked);
+    if (checked) setOriginalsOnly(false);
+    const updates: Record<string, string | null> = {
+      replies_only: checked ? "true" : null,
+    };
+    if (checked) updates.originals_only = null;
+    pushParams(updates);
+  }
+
+  function handleLocalOnly(checked: boolean) {
+    setLocalOnly(checked);
+    pushParams({ local_only: checked ? "true" : null });
+  }
+
+  function handleHideSensitive(checked: boolean) {
+    setHideSensitive(checked);
+    pushParams({ hide_sensitive: checked ? "true" : null });
   }
 
   return (
-    <div className="space-y-4">
+    <div
+      className={`space-y-3 transition-opacity duration-150 ${
+        isPending ? "opacity-50 pointer-events-none" : ""
+      }`}
+    >
       <div>
-        <h3 className="text-sm font-semibold mb-2">Sort by</h3>
-        <div className="space-y-1">
+        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+          Sort by
+        </p>
+        <RadioGroup
+          value={sort}
+          onValueChange={(v) => handleSort(v as FeedSortOption)}
+          className="space-y-1"
+        >
           {SORT_OPTIONS.map((opt) => (
-            <label key={opt.value} className="flex items-center gap-2 cursor-pointer">
-              <input
-                type="radio"
-                name="feed-sort"
-                value={opt.value}
-                checked={currentSort === opt.value}
-                onChange={() => setSort(opt.value)}
-                className="accent-primary"
-              />
-              <span className="text-sm">{opt.label}</span>
-            </label>
-          ))}
+            <div key={opt.value} className="flex items-center gap-2">
+              <RadioGroupItem value={opt.value} id={`sort-${opt.value}`} />
+              <Label
+                htmlFor={`sort-${opt.value}`}
+                className="text-xs font-normal cursor-pointer"
+              >
+                {opt.label}
+              </Label>
             </div>
+          ))}
+        </RadioGroup>
       </div>
 
+      <Separator />
+
       <div>
-        <h3 className="text-sm font-semibold mb-2">Filter</h3>
-        <div className="space-y-1">
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
+        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
+          Filter
+        </p>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="originals-only"
               checked={originalsOnly}
-              onChange={() => {
-                const params = new URLSearchParams(searchParams.toString());
-                params.delete("page");
-                if (!originalsOnly) {
-                  params.delete("replies_only");
-                  params.set("originals_only", "true");
-                } else {
-                  params.delete("originals_only");
-                }
-                router.push(`/?${params.toString()}`);
-              }}
-              className="accent-primary"
+              onCheckedChange={(c) => handleOriginalsOnly(c === true)}
             />
-            <span className="text-sm">Originals only</span>
-          </label>
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
+            <Label htmlFor="originals-only" className="text-xs font-normal cursor-pointer">
+              Originals only
+            </Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="replies-only"
               checked={repliesOnly}
-              onChange={() => {
-                const params = new URLSearchParams(searchParams.toString());
-                params.delete("page");
-                if (!repliesOnly) {
-                  params.delete("originals_only");
-                  params.set("replies_only", "true");
-                } else {
-                  params.delete("replies_only");
-                }
-                router.push(`/?${params.toString()}`);
-              }}
-              className="accent-primary"
+              onCheckedChange={(c) => handleRepliesOnly(c === true)}
             />
-            <span className="text-sm">Replies only</span>
-          </label>
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
+            <Label htmlFor="replies-only" className="text-xs font-normal cursor-pointer">
+              Replies only
+            </Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="local-only"
               checked={localOnly}
-              onChange={() => toggleFilter("local_only", localOnly)}
-              className="accent-primary"
+              onCheckedChange={(c) => handleLocalOnly(c === true)}
             />
-            <span className="text-sm">Local only</span>
-          </label>
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
+            <Label htmlFor="local-only" className="text-xs font-normal cursor-pointer">
+              Local only
+            </Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="hide-sensitive"
               checked={hideSensitive}
-              onChange={() => toggleFilter("hide_sensitive", hideSensitive)}
-              className="accent-primary"
+              onCheckedChange={(c) => handleHideSensitive(c === true)}
             />
-            <span className="text-sm">Hide sensitive</span>
-          </label>
+            <Label htmlFor="hide-sensitive" className="text-xs font-normal cursor-pointer">
+              Hide sensitive
+            </Label>
+          </div>
         </div>
       </div>
     </div>