make look better :)

Author: LucHeart

src/lib/components/ControlModules/impl/ShockerMenu.svelte

@@ -20,7 +20,7 @@
   let pauseLoading = $state(false);
 
   function viewLogs() {
-    goto(resolve(`/shockers/logs/${shocker.id}`));
+    goto(resolve(`/shockers/logs?shockerId=${shocker.id}`));
   }
 
   function editShocker() {

src/lib/components/Table/DataTableTemplate.svelte

@@ -11,6 +11,7 @@
   } from '@tanstack/table-core';
   import { FlexRender, createSvelteTable } from '$lib/components/ui/data-table';
   import * as Table from '$lib/components/ui/table';
+  import { cn } from '$lib/utils';
 
   interface Props {
     data: TData[];
@@ -19,6 +20,7 @@
     filters?: ColumnFiltersState;
     pagination?: PaginationState;
     onRowClick?: (row: TData) => void;
+    class?: string;
   }
 
   let {
@@ -28,6 +30,7 @@
     filters = $bindable(),
     pagination = $bindable(),
     onRowClick,
+    class: className,
   }: Props = $props();
 
   const table = createSvelteTable({
@@ -78,7 +81,7 @@
   });
 </script>
 
-<div class="overflow-y-auto rounded-md border">
+<div class={cn('overflow-y-auto rounded-md border', className)}>
   <Table.Root>
     <Table.Header>
       {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}

src/lib/utils/urlFilters.svelte.ts

@@ -0,0 +1,146 @@
+import { goto } from '$app/navigation';
+import { page } from '$app/state';
+import { untrack } from 'svelte';
+
+type ParamTypeMap = {
+  number: number;
+  string: string;
+};
+
+export type ParamDef = {
+  [K in keyof ParamTypeMap]: {
+    type: K;
+    default?: ParamTypeMap[K] | null;
+  };
+}[keyof ParamTypeMap];
+
+// Resolved value type for a single param definition:
+//  - `{ type: 'number' }`                → number | undefined
+//  - `{ type: 'number', default: null }`  → number | null | undefined
+//  - `{ type: 'string' }`                → string | undefined
+type FilterValueFor<D extends ParamDef> = null extends D['default']
+  ? ParamTypeMap[D['type']] | null | undefined
+  : ParamTypeMap[D['type']] | undefined;
+
+export type FilterState<T extends Record<string, ParamDef>> = {
+  -readonly [K in keyof T]: FilterValueFor<T[K]>;
+};
+
+// Internal broadest value type used in records that mix all param kinds
+type FilterValue = string | number | null | undefined;
+
+// Sentinel used to represent null in URL params and localStorage
+const NULL_SENTINEL = '__null__';
+
+function parseValue(
+  type: ParamDef['type'],
+  raw: string | null,
+  defaultValue?: FilterValue
+): FilterValue {
+  if (raw === null || raw === '') return defaultValue;
+  if (raw === NULL_SENTINEL) return null;
+
+  if (type === 'number') {
+    const n = Number(raw);
+    return isNaN(n) ? defaultValue : n;
+  }
+
+  return raw;
+}
+
+/**
+ * Creates a reactive filter state object that syncs bidirectionally with URL query parameters.
+ *
+ * Must be called at component initialisation time (top-level in a <script> block, or inside
+ * a function that is called during component init — same rules as Svelte runes).
+ *
+ * On mount the state is seeded from the current URL, falling back to any declared default.
+ * Whenever a filter value changes, the URL is updated with replaceState so the address bar
+ * always reflects the current filter state and users can copy/share the link.
+ *
+ * @example
+ *   const filters = createUrlFilters({
+ *     companyId: { type: 'number' },
+ *     year:      { type: 'number', default: new Date().getFullYear() },
+ *     search:    { type: 'string' },
+ *     categoryId: { type: 'number' },
+ *   } as const satisfies Record<string, ParamDef>);
+ *
+ *   // Bind directly to components:
+ *   <ComboBox bind:selectedId={filters.companyId} ... />
+ *
+ *   // Read in derived/effect just like any $state property:
+ *   $effect(() => { if (filters.companyId) loadData(filters.companyId); });
+ */
+export function createUrlFilters<T extends Record<string, ParamDef>>(
+  defs: T,
+  options?: { storageKey?: string }
+): FilterState<T> {
+  // Load saved filters from localStorage if a storageKey is provided
+  const storageKey = options?.storageKey;
+  let saved: Record<string, FilterValue> = {};
+  if (storageKey) {
+    try {
+      const raw = localStorage.getItem(storageKey);
+      if (raw) saved = JSON.parse(raw);
+    } catch {
+      // ignore corrupt data
+    }
+  }
+
+  // Seed initial values from URL, then localStorage, then declared defaults
+  const init: Record<string, FilterValue> = {};
+  for (const [key, def] of Object.entries(defs)) {
+    const fromUrl = page.url.searchParams.get(key);
+    if (fromUrl !== null && fromUrl !== '') {
+      init[key] = parseValue(def.type, fromUrl, def.default);
+    } else if (key in saved) {
+      init[key] = saved[key];
+    } else {
+      init[key] = def.default;
+    }
+  }
+
+  const state = $state(init) as FilterState<T>;
+  const keys = Object.keys(defs);
+
+  // Whenever any filter value changes, update the URL with replaceState so the
+  // address bar stays in sync without adding a history entry.
+  // page.url is read inside untrack() so URL changes caused by our own goto
+  // call do not re-trigger this effect (avoids an infinite loop).
+  $effect(() => {
+    // Snapshot all tracked state values before entering untrack
+    const snapshot: Record<string, FilterValue> = {};
+    for (const key of keys) {
+      snapshot[key] = (state as Record<string, FilterValue>)[key];
+    }
+
+    untrack(() => {
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity
+      const params = new URLSearchParams(page.url.searchParams);
+      for (const key of keys) {
+        const value = snapshot[key];
+        if (value === null) {
+          params.set(key, NULL_SENTINEL);
+        } else if (value !== undefined) {
+          params.set(key, String(value));
+        } else {
+          params.delete(key);
+        }
+      }
+      // eslint-disable-next-line svelte/no-navigation-without-resolve
+      goto(`?${params}`, { replaceState: true, keepFocus: true, noScroll: true });
+
+      // Persist to localStorage so filters survive navigation
+      if (storageKey) {
+        try {
+          localStorage.setItem(storageKey, JSON.stringify(snapshot));
+        } catch {
+          // storage full or unavailable — silently ignore
+        }
+      }
+    });
+  });
+
+  return state;
+}

src/routes/(app)/shockers/logs/+page.svelte

@@ -13,52 +13,81 @@
   } from '$lib/components/Table/ColumnUtils';
   import DataTable from '$lib/components/Table/DataTableTemplate.svelte';
   import PaginationFooter from '$lib/components/Table/PaginationFooter.svelte';
+  import { Badge } from '$lib/components/ui/badge';
   import Button from '$lib/components/ui/button/button.svelte';
   import * as Card from '$lib/components/ui/card';
-  import * as Select from '$lib/components/ui/select';
+  import MultiSelectCombobox from '$lib/components/ui/multi-select-combobox/multi-select-combobox.svelte';
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { addShockEventListener, removeShockEventListener } from '$lib/signalr/handlers/Log';
   import { ControlType } from '$lib/signalr/models/ControlType';
   import { ownHubs, refreshOwnHubs } from '$lib/state/hubs-state.svelte';
-
+  import { createUrlFilters } from '$lib/utils/urlFilters.svelte';
 
   registerBreadcrumbs(() => [
     { label: 'Shockers', href: '/shockers/own' },
     { label: 'Shocker Logs' },
   ]);
-  
+
   const DEFAULT_SORT_ID = 'createdOn';
 
   let logs = $state<LogEntryWithHub[]>([]);
   let sorting = $state<SortingState>([{ id: DEFAULT_SORT_ID, desc: true }]);
 
   let isFetching = $state(false);
   let requestedPage = $state(1);
-  let pageSize = $state(100);
   let page = $state(1);
   let total = $state(0);
 
-  // Empty = no filter (logs for all of the caller's shockers).
-  let selectedShockerIds = $state<string[]>([]);
+  // Row metrics — rows are single-line (whitespace-nowrap), so heights are
+  // stable and we can size pages off them without measuring each row.
+  const HEADER_HEIGHT = 40; // Table.Head (h-10)
+  const ROW_HEIGHT = 37; // td p-2 (16) + text-sm line (20) + border-b (1)
+  const MIN_PAGE_SIZE = 10;
+  const DEFAULT_PAGE_SIZE = 25; // used before the viewport has been measured
+
+  // Height available to the table, measured from the DOM (see markup binding).
+  let tableViewportHeight = $state(0);
+
+  // Fit as many rows as the viewport allows (clamped to a sane minimum) so the
+  // table fills the screen and we request exactly the page size we can show.
+  const pageSize = $derived.by(() => {
+    if (tableViewportHeight <= 0) return DEFAULT_PAGE_SIZE;
+    const rows = Math.floor((tableViewportHeight - HEADER_HEIGHT) / ROW_HEIGHT);
+    return Math.max(MIN_PAGE_SIZE, rows);
+  });
+
+  // Shocker filter synced to the URL (comma-separated list under ?shockerId=)
+  // so it can be bookmarked / shared. Empty = no filter (all of the caller's
+  // shockers).
+  const filters = createUrlFilters({
+    shockerId: { type: 'string' },
+  } as const);
+
+  const shockerOptions = $derived(
+    ownHubs
+      .values()
+      .flatMap((hub) => hub.shockers)
+      .map((shocker) => ({ value: shocker.id, label: shocker.name }))
+      .toArray()
+  );
 
-  const filterLabel = $derived.by(() => {
-    if (selectedShockerIds.length === 0) return 'All shockers';
-    if (selectedShockerIds.length === 1) {
-      for (const hub of ownHubs.values()) {
-        const shocker = hub.shockers.find((s) => s.id === selectedShockerIds[0]);
-        if (shocker) return shocker.name;
-      }
-      return '1 shocker';
+  // Local selection bound to the combobox, which mutates the array in place, so
+  // it needs a real $state target (not a derived getter/setter). Seeded from the
+  // URL-synced filter.
+  let selectedShockerIds = $state<string[]>(
+    filters.shockerId ? filters.shockerId.split(',').filter(Boolean) : []
+  );
+
+  // Push selection changes back into the URL-synced filter and reset to the
+  // first page so we never land on an out-of-range page for the narrowed set.
+  $effect(() => {
+    const joined = selectedShockerIds.length > 0 ? selectedShockerIds.join(',') : undefined;
+    if (joined !== filters.shockerId) {
+      filters.shockerId = joined;
+      requestedPage = 1;
     }
-    return `${selectedShockerIds.length} shockers`;
   });
 
-  // Reset to the first page whenever the filter changes so we never land on an
-  // out-of-range page for the narrowed result set.
-  function onFilterChange() {
-    requestedPage = 1;
-  }
-
   const sortQuery = $derived(sorting.length > 0 ? sorting[0] : undefined);
   // Live updates only make sense on page 1 with the default newest-first sort,
   // otherwise prepending breaks the user's chosen ordering / page slice.
@@ -85,7 +114,6 @@
       .then((res) => {
         logs = res.items;
         page = res.page;
-        pageSize = res.pageSize;
         total = res.totalCount;
       })
       .catch(handleApiError)
@@ -155,45 +183,54 @@
   <Card.Header class="w-full">
     <Card.Title class="flex items-center justify-between space-x-2 text-3xl">
       <h1>Shocker Logs</h1>
+      <Badge
+        variant={liveUpdatesActive ? 'default' : 'secondary'}
+        class="gap-1.5"
+        title={liveUpdatesActive
+          ? 'New logs appear in real time'
+          : 'Live updates pause when sorting or viewing a page other than the first'}
+      >
+        <span class="relative flex size-2">
+          {#if liveUpdatesActive}
+            <span
+              class="absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75"
+            ></span>
+          {/if}
+          <span
+            class="relative inline-flex size-2 rounded-full {liveUpdatesActive
+              ? 'bg-green-500'
+              : 'bg-muted-foreground'}"
+          ></span>
+        </span>
+        {liveUpdatesActive ? 'Live' : 'Paused'}
+      </Badge>
     </Card.Title>
     <Card.Description>These are the logs for all shockers.</Card.Description>
   </Card.Header>
-  <div class="grid w-full gap-6 p-6">
-    <div class="flex items-center gap-2">
-      <Select.Root type="multiple" bind:value={selectedShockerIds} onValueChange={onFilterChange}>
-        <Select.Trigger class="w-64">{filterLabel}</Select.Trigger>
-        <Select.Content>
-          {#each [...ownHubs.values()] as hub (hub.id)}
-            {#if hub.shockers.length > 0}
-              <Select.Group>
-                <Select.GroupHeading>{hub.name}</Select.GroupHeading>
-                {#each hub.shockers as shocker (shocker.id)}
-                  <Select.Item value={shocker.id} label={shocker.name}>{shocker.name}</Select.Item>
-                {/each}
-              </Select.Group>
-            {/if}
-          {/each}
-        </Select.Content>
-      </Select.Root>
+  <div class="flex min-h-0 w-full flex-1 flex-col gap-6 p-6">
+    <div class="flex items-end gap-2">
+      <div class="w-64">
+        <MultiSelectCombobox
+          bind:selected={selectedShockerIds}
+          options={shockerOptions}
+          label="Filter by shocker"
+          placeholder="Search shockers..."
+          selectText="All shockers"
+          noMatchText="No matching shockers"
+        />
+      </div>
       {#if selectedShockerIds.length > 0}
-        <Button
-          variant="ghost"
-          size="sm"
-          onclick={() => {
-            selectedShockerIds = [];
-            onFilterChange();
-          }}
-        >
-          Clear
-        </Button>
+        <Button variant="ghost" size="sm" onclick={() => (selectedShockerIds = [])}>Clear</Button>
       {/if}
     </div>
-    <DataTable data={logs} {columns} bind:sorting />
+    <div class="min-h-0 flex-1" bind:clientHeight={tableViewportHeight}>
+      <DataTable data={logs} {columns} bind:sorting class="h-full" />
+    </div>
     <PaginationFooter
       count={total}
       perPage={pageSize}
       bind:page={() => page, (p) => (requestedPage = p)}
       disabled={isFetching}
     />
   </div>
-</Container>
+</Container>