Mirror/rayhunter
1
0
Fork 0
mirror of https://github.com/EFForg/rayhunter.git synced 2026-04-27 07:59:59 -07:00
Code Issues Packages Projects Releases Wiki Activity

Enhancement: Remove unnecessary component renders for difference screen sizes (#661)

Browse Source 
* adds breakpoint stores to allow selective rendering on screen size

* removes unused type

* formatting
This commit is contained in:
bsickler
2025-10-18 19:43:15 -07:00
committed by GitHub
parent 9e5de4a445
commit b8b90268b9
4 changed files with 69 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
daemon/web/src/lib/components/ManifestTable.svelte
View File

@@ -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}

29
daemon/web/src/lib/stores/breakpoint.ts Normal file
View File

@@ -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');

11
daemon/web/src/theme.ts Normal file
View File

@@ -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;