From 44260422d68e910ed4ad37e78cd8a1d1f8bb51a3 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Sat, 31 Jan 2026 14:54:03 -0600
Subject: [PATCH] refactor(web): streamline filter ui with simplified removal

---
 web/src/lib/components/FilterChip.svelte    | 32 +++++----------------
 web/src/lib/components/SegmentedChip.svelte | 15 +---------
 web/src/routes/+page.svelte                 | 21 ++++++--------
 3 files changed, 17 insertions(+), 51 deletions(-)

diff --git a/web/src/lib/components/FilterChip.svelte b/web/src/lib/components/FilterChip.svelte
index bb14525..1b1549d 100644
--- a/web/src/lib/components/FilterChip.svelte
+++ b/web/src/lib/components/FilterChip.svelte
@@ -1,36 +1,18 @@
 <script lang="ts">
-import { X } from "@lucide/svelte";
-
 let {
   label,
   onRemove,
-  onclick,
 }: {
   label: string;
   onRemove: () => void;
-  onclick?: () => void;
 } = $props();
 </script>
 
-<span
-  class="inline-flex items-center gap-1 rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-xs text-foreground"
+<button
+  type="button"
+  class="inline-flex items-center rounded-full border border-border bg-muted/40 px-2.5 py-0.5 text-xs text-foreground hover:bg-muted/60 transition-colors cursor-pointer"
+  onclick={onRemove}
+  aria-label="Remove {label} filter"
 >
-  <button
-    type="button"
-    class="hover:text-foreground/80 transition-colors cursor-pointer"
-    onclick={onclick}
-  >
-    {label}
-  </button>
-  <button
-    type="button"
-    class="inline-flex items-center justify-center rounded-full hover:bg-muted transition-colors cursor-pointer"
-    onclick={(e) => {
-      e.stopPropagation();
-      onRemove();
-    }}
-    aria-label="Remove {label} filter"
-  >
-    <X class="size-3" />
-  </button>
-</span>
+  {label}
+</button>
diff --git a/web/src/lib/components/SegmentedChip.svelte b/web/src/lib/components/SegmentedChip.svelte
index 05c7932..394912c 100644
--- a/web/src/lib/components/SegmentedChip.svelte
+++ b/web/src/lib/components/SegmentedChip.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
-import { X } from "@lucide/svelte";
-
 let {
   segments,
   onRemoveSegment,
-  onRemoveAll,
 }: {
   segments: string[];
   onRemoveSegment: (segment: string) => void;
-  onRemoveAll: () => void;
 } = $props();
 </script>
 
@@ -22,21 +18,12 @@ let {
       {/if}
       <button
         type="button"
-        class="px-2 py-0.5 hover:bg-muted/60 transition-colors cursor-pointer first:rounded-l-full"
+        class="px-2 py-0.5 hover:bg-muted/60 transition-colors cursor-pointer first:rounded-l-full last:rounded-r-full"
         onclick={() => onRemoveSegment(segment)}
         aria-label="Remove {segment} filter"
       >
         {segment}
       </button>
     {/each}
-    <span class="w-px self-stretch bg-border"></span>
-    <button
-      type="button"
-      class="inline-flex items-center justify-center px-1.5 py-0.5 rounded-r-full hover:bg-muted/60 transition-colors cursor-pointer"
-      onclick={onRemoveAll}
-      aria-label="Remove all subject filters"
-    >
-      <X class="size-3" />
-    </button>
   </span>
 {/if}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 7d88c1b..aff18ef 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -545,10 +545,6 @@ function removeSubject(code: string) {
   selectedSubjects = selectedSubjects.filter((s) => s !== code);
 }
 
-function clearAllSubjects() {
-  selectedSubjects = [];
-}
-
 function clearAllFilters() {
   selectedSubjects = [];
   openOnly = false;
@@ -582,7 +578,6 @@ function clearAllFilters() {
                     <SegmentedChip
                         segments={selectedSubjects}
                         onRemoveSegment={removeSubject}
-                        onRemoveAll={clearAllSubjects}
                     />
                 {/if}
                 {#if openOnly}
@@ -690,13 +685,14 @@ function clearAllFilters() {
             </div>
 
             <!-- View columns dropdown (moved from CourseTable) -->
-            <DropdownMenu.Root>
-                <DropdownMenu.Trigger
-                    class="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer shrink-0"
-                >
-                    <Columns3 class="size-3.5" />
-                    View
-                </DropdownMenu.Trigger>
+            <div class="pb-1.5">
+                <DropdownMenu.Root>
+                    <DropdownMenu.Trigger
+                        class="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer shrink-0"
+                    >
+                        <Columns3 class="size-3.5" />
+                        View
+                    </DropdownMenu.Trigger>
                 <DropdownMenu.Portal>
                     <DropdownMenu.Content
                         class="z-50 min-w-40 rounded-md border border-border bg-card p-1 text-card-foreground shadow-lg"
@@ -772,6 +768,7 @@ function clearAllFilters() {
                     </DropdownMenu.Content>
                 </DropdownMenu.Portal>
             </DropdownMenu.Root>
+            </div>
         </div>
 
         <!-- Filter bar -->