design: New Filter Bar Component

web-admin/src/features/projects/status/logs/ProjectLogsPage.svelte

@@ -7,10 +7,8 @@
   } from "@rilldata/web-common/runtime-client/sse-connection-manager";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { V1LogLevel, type V1Log } from "@rilldata/web-common/runtime-client";
-  import Search from "@rilldata/web-common/components/search/Search.svelte";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
-  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
+  import { TableToolbar } from "@rilldata/web-common/components/table-toolbar";
+  import type { FilterGroup } from "@rilldata/web-common/components/table-toolbar/types";
   import {
     createUrlFilterSync,
     parseArrayParam,
@@ -34,7 +32,6 @@
   let logs: LogEntry[] = [];
   let logsContainer: HTMLDivElement;
   let connectionError: string | null = null;
-  let filterDropdownOpen = false;
   let searchText = parseStringParam($page.url.searchParams.get("q"));
   let selectedLevels = parseArrayParam($page.url.searchParams.get("level"));
   let mounted = false;
@@ -81,19 +78,19 @@
     return matchesLevel && matchesSearch;
   });
 
-  $: selectedLevelLabel = (() => {
-    if (selectedLevels.length === 0) return "All levels";
-    if (selectedLevels.length === 1) {
-      return (
-        filterableLevels.find((l) => l.value === selectedLevels[0])?.label ??
-        "1 level"
-      );
-    }
-    const first = filterableLevels.find(
-      (l) => l.value === selectedLevels[0],
-    )?.label;
-    return `${first}, +${selectedLevels.length - 1} other${selectedLevels.length > 2 ? "s" : ""}`;
-  })();
+  $: filterGroups = [
+    {
+      label: "Level",
+      key: "level",
+      options: filterableLevels.map((l) => ({
+        value: l.value,
+        label: l.label,
+      })),
+      selected: selectedLevels,
+      defaultValue: [],
+      multiSelect: true,
+    },
+  ] satisfies FilterGroup[];
 
   let unsubs: (() => void)[] = [];
 
@@ -244,55 +241,18 @@
     </div>
   </div>
 
-  <div class="flex flex-row items-center gap-x-4 min-h-9">
-    <div class="flex-1 min-w-0 min-h-9">
-      <Search
-        bind:value={searchText}
-        placeholder="Search"
-        large
-        autofocus={false}
-        showBorderOnFocus={false}
-        retainValueOnMount
-      />
-    </div>
-
-    <DropdownMenu.Root bind:open={filterDropdownOpen}>
-      <DropdownMenu.Trigger
-        class="min-w-fit min-h-9 flex flex-row gap-1 items-center rounded-sm border bg-input {filterDropdownOpen
-          ? 'bg-gray-200'
-          : 'hover:bg-surface-hover'} px-2 py-1"
-      >
-        <span class="text-fg-secondary font-medium">
-          {selectedLevelLabel}
-        </span>
-        {#if filterDropdownOpen}
-          <CaretUpIcon size="12px" />
-        {:else}
-          <CaretDownIcon size="12px" />
-        {/if}
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="start" class="w-48">
-        {#each filterableLevels as level}
-          <DropdownMenu.CheckboxItem
-            closeOnSelect={false}
-            checked={selectedLevels.includes(level.value)}
-            onCheckedChange={() => toggleLevel(level.value)}
-          >
-            {level.label}
-          </DropdownMenu.CheckboxItem>
-        {/each}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-
-    {#if selectedLevels.length > 0 || searchText}
-      <button
-        class="shrink-0 text-sm text-primary-500 hover:text-primary-600 whitespace-nowrap"
-        onclick={clearFilters}
-      >
-        Clear
-      </button>
-    {/if}
-  </div>
+  <TableToolbar
+    {searchText}
+    onSearchChange={(text) => {
+      searchText = text;
+    }}
+    {filterGroups}
+    onFilterChange={(key, value) => {
+      if (key === "level") toggleLevel(value);
+    }}
+    onClearAllFilters={clearFilters}
+    showSort={false}
+  />
 
   <div class="logs-container" bind:this={logsContainer}>
     {#if hasConnectionError}

web-admin/src/features/projects/status/resource-table/ProjectResources.svelte

@@ -10,10 +10,8 @@
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import { useQueryClient } from "@tanstack/svelte-query";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
-  import Search from "@rilldata/web-common/components/search/Search.svelte";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
-  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
-  import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
+  import { TableToolbar } from "@rilldata/web-common/components/table-toolbar";
+  import type { FilterGroup } from "@rilldata/web-common/components/table-toolbar/types";
   import {
     ResourceKind,
     prettyResourceKind,
@@ -43,8 +41,6 @@
   filterSync.init($page.url);
 
   let isConfirmDialogOpen = false;
-  let filterDropdownOpen = false;
-  let statusDropdownOpen = false;
   let searchText = parseStringParam($page.url.searchParams.get("q"));
   let selectedTypes = parseArrayParam($page.url.searchParams.get("kind"));
   let selectedStatuses = parseArrayParam($page.url.searchParams.get("status"));
@@ -92,6 +88,31 @@
     ResourceKind.Connector,
   ];
 
+  $: filterGroups = [
+    {
+      label: "Type",
+      key: "kind",
+      options: filterableTypes.map((t) => ({
+        value: t,
+        label: prettyResourceKind(t),
+      })),
+      selected: selectedTypes,
+      defaultValue: [],
+      multiSelect: true,
+    },
+    {
+      label: "Status",
+      key: "status",
+      options: statusFilters.map((s) => ({
+        value: s.value,
+        label: s.label,
+      })),
+      selected: selectedStatuses,
+      defaultValue: [],
+      multiSelect: true,
+    },
+  ] satisfies FilterGroup[];
+
   $: resources = useResources(runtimeClient);
 
   // Parse errors
@@ -159,103 +180,19 @@
 <section class="flex flex-col gap-y-4">
   <h2 class="text-lg font-medium">Resources</h2>
 
-  <!-- Search, Filter, and Action Controls -->
-  <div class="flex flex-row items-center gap-x-4 min-h-9">
-    <div class="flex-1 min-w-0 min-h-9">
-      <Search
-        bind:value={searchText}
-        placeholder="Search"
-        large
-        autofocus={false}
-        showBorderOnFocus={false}
-        retainValueOnMount
-      />
-    </div>
-
-    <DropdownMenu.Root bind:open={filterDropdownOpen}>
-      <DropdownMenu.Trigger
-        class="min-w-fit min-h-9 flex flex-row gap-1 items-center rounded-sm border bg-input {filterDropdownOpen
-          ? 'bg-gray-200'
-          : 'hover:bg-surface-hover'} px-2 py-1"
-      >
-        <span class="text-fg-secondary font-medium">
-          {#if selectedTypes.length === 0}
-            All types
-          {:else if selectedTypes.length === 1}
-            {prettyResourceKind(selectedTypes[0])}
-          {:else}
-            {prettyResourceKind(selectedTypes[0])}, +{selectedTypes.length - 1} other{selectedTypes.length >
-            2
-              ? "s"
-              : ""}
-          {/if}
-        </span>
-        {#if filterDropdownOpen}
-          <CaretUpIcon size="12px" />
-        {:else}
-          <CaretDownIcon size="12px" />
-        {/if}
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="start" class="w-48">
-        {#each filterableTypes as type}
-          <DropdownMenu.CheckboxItem
-            closeOnSelect={false}
-            checked={selectedTypes.includes(type)}
-            onCheckedChange={() => toggleType(type)}
-          >
-            {prettyResourceKind(type)}
-          </DropdownMenu.CheckboxItem>
-        {/each}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-
-    <DropdownMenu.Root bind:open={statusDropdownOpen}>
-      <DropdownMenu.Trigger
-        class="min-w-fit min-h-9 flex flex-row gap-1 items-center rounded-sm border bg-input {statusDropdownOpen
-          ? 'bg-gray-200'
-          : 'hover:bg-surface-hover'} px-2 py-1"
-      >
-        <span class="text-fg-secondary font-medium">
-          {#if selectedStatuses.length === 0}
-            All statuses
-          {:else if selectedStatuses.length === 1}
-            {statusFilters.find((s) => s.value === selectedStatuses[0])
-              ?.label ?? selectedStatuses[0]}
-          {:else}
-            {statusFilters.find((s) => s.value === selectedStatuses[0])?.label},
-            +{selectedStatuses.length - 1} other{selectedStatuses.length > 2
-              ? "s"
-              : ""}
-          {/if}
-        </span>
-        {#if statusDropdownOpen}
-          <CaretUpIcon size="12px" />
-        {:else}
-          <CaretDownIcon size="12px" />
-        {/if}
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="start" class="w-48">
-        {#each statusFilters as status}
-          <DropdownMenu.CheckboxItem
-            closeOnSelect={false}
-            checked={selectedStatuses.includes(status.value)}
-            onCheckedChange={() => toggleStatus(status.value)}
-          >
-            {status.label}
-          </DropdownMenu.CheckboxItem>
-        {/each}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
-
-    {#if selectedTypes.length > 0 || searchText || selectedStatuses.length > 0}
-      <button
-        class="shrink-0 text-sm text-primary-500 hover:text-primary-600 whitespace-nowrap"
-        onclick={clearFilters}
-      >
-        Clear
-      </button>
-    {/if}
-
+  <TableToolbar
+    {searchText}
+    onSearchChange={(text) => {
+      searchText = text;
+    }}
+    {filterGroups}
+    onFilterChange={(key, value) => {
+      if (key === "kind") toggleType(value);
+      if (key === "status") toggleStatus(value);
+    }}
+    onClearAllFilters={clearFilters}
+    showSort={false}
+  >
     <Button
       type="secondary"
       large
@@ -268,7 +205,7 @@
       <span class="hidden lg:inline">Refresh all sources and models</span>
       <span class="lg:hidden">Refresh all</span>
     </Button>
-  </div>
+  </TableToolbar>
 
   {#if $resources.isLoading}
     <DelayedSpinner isLoading={true} size="16px" />