refresh controls

src/lib/components/toolbar/RefreshControls.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import Fa from "svelte-fa";
+  import { faPlay, faPause } from "@fortawesome/free-solid-svg-icons";
+  import type { AppConfig } from "$lib/types/config";
+  import { configStore } from "$lib/stores/config";
+
+  export let refreshRate: number;
+  export let isFrozen: boolean;
+
+  const refreshRateOptions = [
+    { value: 1000, label: "1s" },
+    { value: 2000, label: "2s" },
+    { value: 5000, label: "5s" },
+    { value: 10000, label: "10s" },
+    { value: 30000, label: "30s" },
+  ];
+
+  function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
+    configStore.updateConfig({
+      behavior: {
+        ...$configStore.behavior,
+        [key]: value,
+      },
+    });
+  }
+</script>
+
+<div class="refresh-controls">
+  <select
+    class="select-input"
+    bind:value={refreshRate}
+    on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
+    disabled={isFrozen}
+  >
+    {#each refreshRateOptions as option}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
+  <button
+    class="btn-action"
+    class:frozen={isFrozen}
+    on:click={() => (isFrozen = !isFrozen)}
+    title={isFrozen ? "Resume Updates" : "Pause Updates"}
+  >
+    {#if isFrozen}
+      <Fa icon={faPlay} />
+    {:else}
+      <Fa icon={faPause} />
+    {/if}
+  </button>
+</div>
+
+<style>
+  .refresh-controls {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .refresh-controls :global(svg) {
+    font-size: 14px;
+    color: var(--subtext0);
+  }
+
+  .btn-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: var(--surface0);
+    color: var(--text);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .btn-action:hover {
+    background: var(--surface1);
+  }
+
+  .btn-action.frozen {
+    background: var(--blue);
+    color: var(--base);
+  }
+
+  .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

@@ -12,6 +12,7 @@
   import type { AppConfig } from "$lib/types/config";
   import StatusFilter from "./StatusFilter.svelte";
   import SearchBox from "./SearchBox.svelte";
+  import RefreshControls from "./RefreshControls.svelte";
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -37,14 +38,6 @@
     })),
   ];
 
-  const refreshRateOptions = [
-    { value: 1000, label: "1s" },
-    { value: 2000, label: "2s" },
-    { value: 5000, label: "5s" },
-    { value: 10000, label: "10s" },
-    { value: 30000, label: "30s" },
-  ];
-
   function changePage(page: number) {
     if (page >= 1 && page <= totalPages) {
       currentPage = page;
@@ -166,32 +159,7 @@
       {/if}
     </div>
 
-    <div class="toolbar-group">
+    <RefreshControls bind:refreshRate bind:isFrozen />
-      <div class="refresh-controls">
-        <select
-          class="select-input"
-          bind:value={refreshRate}
-          on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
-          disabled={isFrozen}
-        >
-          {#each refreshRateOptions as option}
-            <option value={option.value}>{option.label}</option>
-          {/each}
-        </select>
-        <button
-          class="btn-action"
-          class:frozen={isFrozen}
-          on:click={() => (isFrozen = !isFrozen)}
-          title={isFrozen ? "Resume Updates" : "Pause Updates"}
-        >
-          {#if isFrozen}
-            <Fa icon={faPlay} />
-          {:else}
-            <Fa icon={faPause} />
-          {/if}
-        </button>
-      </div>
-    </div>
 
     <AppInfo />
   </div>