From b8b90268b97c12954f881287db41f00d83b68eb4 Mon Sep 17 00:00:00 2001
From: bsickler <210394354+bsickler@users.noreply.github.com>
Date: Sat, 18 Oct 2025 19:43:15 -0700
Subject: [PATCH] Enhancement: Remove unnecessary component renders for
 difference screen sizes (#661)

* adds breakpoint stores to allow selective rendering on screen size

* removes unused type

* formatting
---
 .../src/lib/components/ManifestTable.svelte   | 50 ++++++++++---------
 daemon/web/src/lib/stores/breakpoint.ts       | 29 +++++++++++
 daemon/web/src/theme.ts                       | 11 ++++
 daemon/web/tailwind.config.ts                 |  2 +
 4 files changed, 69 insertions(+), 23 deletions(-)
 create mode 100644 daemon/web/src/lib/stores/breakpoint.ts
 create mode 100644 daemon/web/src/theme.ts

diff --git a/daemon/web/src/lib/components/ManifestTable.svelte b/daemon/web/src/lib/components/ManifestTable.svelte
index b9c47c3..b8c93f6 100644
--- a/daemon/web/src/lib/components/ManifestTable.svelte
+++ b/daemon/web/src/lib/components/ManifestTable.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { ManifestEntry } from '$lib/manifest.svelte';
     import { AnalysisManager } from '$lib/analysisManager.svelte';
+    import { screenIsLgUp } from '$lib/stores/breakpoint';
     import TableRow from './ManifestTableRow.svelte';
     import Card from './ManifestCard.svelte';
     interface Props {
@@ -12,27 +13,30 @@
 </script>
 
 <!--For larger screens we use a table-->
-<table class="hidden table-auto text-left lg:table">
-    <thead>
-        <tr class="bg-gray-100 drop-shadow">
-            <th class="p-2" scope="col">ID</th>
-            <th class="p-2" scope="col">Started</th>
-            <th class="p-2" scope="col">Last Message</th>
-            <th class="p-2" scope="col">Size</th>
-            <th class="p-2" scope="col">Download</th>
-            <th class="p-2" scope="col">Analysis</th>
-            <th class="p-2" scope="col"></th>
-        </tr>
-    </thead>
-    <tbody>
-        {#each entries as entry, i}
-            <TableRow {entry} current={false} {i} {manager} />
+{#if $screenIsLgUp}
+    <table class="table-auto text-left table">
+        <thead>
+            <tr class="bg-gray-100 drop-shadow">
+                <th class="p-2" scope="col">ID</th>
+                <th class="p-2" scope="col">Started</th>
+                <th class="p-2" scope="col">Last Message</th>
+                <th class="p-2" scope="col">Size</th>
+                <th class="p-2" scope="col">Download</th>
+                <th class="p-2" scope="col">Analysis</th>
+                <th class="p-2" scope="col"></th>
+            </tr>
+        </thead>
+        <tbody>
+            {#each entries as entry, i}
+                <TableRow {entry} current={false} {i} {manager} />
+            {/each}
+        </tbody>
+    </table>
+{:else}
+    <!--For smaller screens we use cards-->
+    <div class="flex flex-col gap-4">
+        {#each entries as entry}
+            <Card {entry} current={false} {server_is_recording} {manager} />
         {/each}
-    </tbody>
-</table>
-<!--For smaller screens we use cards-->
-<div class="lg:hidden flex flex-col gap-4">
-    {#each entries as entry}
-        <Card {entry} current={false} {server_is_recording} {manager} />
-    {/each}
-</div>
+    </div>
+{/if}
diff --git a/daemon/web/src/lib/stores/breakpoint.ts b/daemon/web/src/lib/stores/breakpoint.ts
new file mode 100644
index 0000000..288f6b7
--- /dev/null
+++ b/daemon/web/src/lib/stores/breakpoint.ts
@@ -0,0 +1,29 @@
+// stores/breakpoint.ts
+import { readable, type Readable } from 'svelte/store';
+import { breakpoints } from '../../theme';
+
+type Breakpoint = keyof typeof breakpoints;
+
+// Store that tracks if a specific breakpoint matches
+export function createBreakpointStore(breakpoint: Breakpoint): Readable<boolean> {
+    return readable<boolean>(false, (set) => {
+        const width = breakpoints[breakpoint];
+        const mediaQuery = window.matchMedia(`(min-width: ${width})`);
+
+        // Set initial value
+        set(mediaQuery.matches);
+
+        // Update on change
+        const handler = (e: MediaQueryListEvent) => set(e.matches);
+        mediaQuery.addEventListener('change', handler);
+
+        // Cleanup
+        return () => mediaQuery.removeEventListener('change', handler);
+    });
+}
+
+// Create stores for each breakpoint
+export const screenIsSmUp: Readable<boolean> = createBreakpointStore('sm');
+export const screenIsMdUp: Readable<boolean> = createBreakpointStore('md');
+export const screenIsLgUp: Readable<boolean> = createBreakpointStore('lg');
+export const screenIsXlUp: Readable<boolean> = createBreakpointStore('xl');
diff --git a/daemon/web/src/theme.ts b/daemon/web/src/theme.ts
new file mode 100644
index 0000000..a6258dc
--- /dev/null
+++ b/daemon/web/src/theme.ts
@@ -0,0 +1,11 @@
+/** These are the default Tailwind CSS breakpoints.
+ * We're defining them here so they can be referenced
+ * programmatically in other parts of the application.
+ */
+export const breakpoints = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+} as const;
diff --git a/daemon/web/tailwind.config.ts b/daemon/web/tailwind.config.ts
index d9bf9e9..7773cb2 100644
--- a/daemon/web/tailwind.config.ts
+++ b/daemon/web/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from 'tailwindcss';
+import { breakpoints } from './src/theme';
 
 export default {
     content: ['./src/**/*.{html,js,svelte,ts}'],
@@ -10,6 +11,7 @@ export default {
                 'rayhunter-dark-blue': '#3f3da0',
                 'rayhunter-green': '#94ea18',
             },
+            screens: breakpoints,
         },
     },