status filter

src/lib/components/toolbar/StatusFilter.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { statusMap } from "$lib/utils";
+  import type { AppConfig } from "$lib/types/config";
+  import { configStore } from "$lib/stores/config";
+
+  export let statusFilter: string = "all";
+
+  const statusOptions = [
+    { value: "all", label: "All Statuses" },
+    ...Object.values(statusMap).map((status) => ({
+      value: status.label,
+      label: status.label,
+    })),
+  ];
+
+  function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
+    configStore.updateConfig({
+      behavior: {
+        ...$configStore.behavior,
+        [key]: value,
+      },
+    });
+  }
+</script>
+
+<div class="toolbar-group">
+  <select
+    bind:value={statusFilter}
+    on:change={() => updateBehaviorConfig("defaultStatusFilter", statusFilter)}
+    class="select-input"
+  >
+    {#each statusOptions as option}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
+</div>
+
+<style>
+  .select-input {
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    background: var(--surface0);
+    color: var(--text);
+    font-size: 13px;
+    cursor: pointer;
+    appearance: none;
+    padding-right: 24px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+
+  .select-input:hover {
+    background-color: var(--surface1);
+  }
+
+  .select-input:focus {
+    outline: none;
+    border-color: var(--blue);
+  }
+
+  .select-input:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+</style>

src/lib/components/toolbar/ToolBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AppInfo from "./AppInfo.svelte";
+  import AppInfo from "../AppInfo.svelte";
   import { statusMap } from "$lib/utils";
   import Fa from "svelte-fa";
   import {
@@ -10,6 +10,7 @@
   } from "@fortawesome/free-solid-svg-icons";
   import { configStore } from "$lib/stores/config";
   import type { AppConfig } from "$lib/types/config";
+  import StatusFilter from "./StatusFilter.svelte";
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -87,18 +88,7 @@
         {/if}
       </div>
     </div>
-    <div class="toolbar-group">
+    <StatusFilter bind:statusFilter />
-      <select
-        bind:value={statusFilter}
-        on:change={() =>
-          updateBehaviorConfig("defaultStatusFilter", statusFilter)}
-        class="select-input"
-      >
-        {#each statusOptions as option}
-          <option value={option.value}>{option.label}</option>
-        {/each}
-      </select>
-    </div>
 
     <div class="toolbar-spacer"></div>
 

src/lib/components/toolbar/index.ts

@@ -0,0 +1,6 @@
+export { default as ToolBar } from "./ToolBar.svelte";
+export { default as SearchBox } from "./SearchBox.svelte";
+export { default as StatusFilter } from "./StatusFilter.svelte";
+export { default as PaginationControls } from "./PaginationControls.svelte";
+export { default as ColumnToggle } from "./ColumnToggle.svelte";
+export { default as RefreshControls } from "./RefreshControls.svelte";

src/lib/constants/toolbar.ts

@@ -0,0 +1,9 @@
+export const ITEMS_PER_PAGE_OPTIONS = [15, 25, 50, 100, 250, 500];
+
+export const REFRESH_RATE_OPTIONS = [
+  { value: 1000, label: "1s" },
+  { value: 2000, label: "2s" },
+  { value: 5000, label: "5s" },
+  { value: 10000, label: "10s" },
+  { value: 30000, label: "30s" },
+];

src/lib/types/toolbar.ts

@@ -0,0 +1,28 @@
+export interface ColumnDefinition {
+  id: string;
+  label: string;
+  visible: boolean;
+  required?: boolean;
+}
+
+export interface StatusOption {
+  value: string;
+  label: string;
+}
+
+export interface RefreshRateOption {
+  value: number;
+  label: string;
+}
+
+export interface ToolBarProps {
+  searchTerm: string;
+  statusFilter: string;
+  itemsPerPage: number;
+  currentPage: number;
+  totalPages: number;
+  totalResults: number;
+  columns: ColumnDefinition[];
+  refreshRate: number;
+  isFrozen: boolean;
+}

src/routes/+page.svelte

@@ -2,7 +2,7 @@
   import { invoke } from "@tauri-apps/api/core";
   import { onMount, onDestroy } from "svelte";
   import { StatsBar } from "$lib/components/stats";
-  import ToolBar from "$lib/components/ToolBar.svelte";
+  import { ToolBar } from "$lib/components/toolbar";
   import { ProcessTable } from "$lib/components/process";
   import { ProcessDetailsModal } from "$lib/components/modals";
   import { KillProcessModal } from "$lib/components/modals";