refactor: simplify table component structure and improve virtualization logic

- Removed unnecessary bindings and conditions in the table body and row components for cleaner rendering.
- Updated virtualization utility functions to enhance performance and reduce complexity.
- Refactored search worker to streamline data handling and improve state management.
- Removed unused cache state logic from sorting utilities to simplify codebase.

Author: githyperplexed

src/lib/components/table/body.svelte

@@ -12,19 +12,15 @@
 		rowHeight?: number;
 	}
 
-	let { data, columns, type, padding = { top: 0, bottom: 0 }, rowHeight = $bindable(0) }: Props = $props();
+	let { data, columns, type, padding = { top: 0, bottom: 0 } }: Props = $props();
 </script>
 
 <tbody class="divide-neutral-900">
 	{#if padding.top > 0}
 		<tr style:height="{padding.top}px" aria-hidden="true"></tr>
 	{/if}
-	{#each data as row, i}
-		{#if i === 0}
-			<Row {row} {columns} {type} bind:clientHeight={rowHeight} />
-		{:else}
-			<Row {row} {columns} {type} />
-		{/if}
+	{#each data as row}
+		<Row {row} {columns} {type} />
 	{/each}
 	{#if padding.bottom > 0}
 		<tr style:height="{padding.bottom}px" aria-hidden="true"></tr>

src/lib/components/table/row.svelte

@@ -13,10 +13,10 @@
 		[key: string]: any;
 	}
 
-	let { row, columns, type, clientHeight = $bindable(), ...rest }: Props = $props();
+	let { row, columns, type, ...rest }: Props = $props();
 </script>
 
-<tr class="group hover:bg-yellow-400/5 transition-colors" bind:clientHeight {...rest}>
+<tr class="group hover:bg-yellow-400/5 transition-colors" {...rest}>
 	{#each columns as col}
 		<StoreItem {row} {col} />
 	{/each}

src/lib/components/table/table.svelte

@@ -28,11 +28,7 @@
 	const virtualizer = new Virtualizer();
 
 	$effect(() => {
-		virtualizer.update(config, onloadrange);
-	});
-
-	$effect(() => {
-		virtualizer.checkScroll();
+		virtualizer.update(config);
 	});
 
 	let lastQuery = "";
@@ -58,8 +54,24 @@
 			virtualizer.reset();
 		}
 	});
+
+	$effect(() => {
+		const { start, end } = virtualizer.targetRange;
+		const { offset, data, count } = config;
+
+		if (count > 0 && data.length >= count) return;
+
+		const loadedStart = offset;
+		const loadedEnd = offset + data.length;
+
+		if (start >= loadedStart && end <= loadedEnd) return;
+
+		onloadrange(start, end - start);
+	});
 </script>
 
+<svelte:window bind:innerWidth={virtualizer.innerWidth} />
+
 <div class="w-full flex flex-col flex-1 bg-neutral-950 h-full overflow-hidden">
 	<div class="shrink-0 border-b border-neutral-900 bg-neutral-950">
 		<Input 
@@ -102,7 +114,6 @@
 						{type} 
 						columns={config.columns} 
 						padding={virtualizer.padding}
-						bind:rowHeight={virtualizer.rowHeight}
 					/>
 				{/if}
 			</table>

src/lib/components/ui/logo.svelte

@@ -26,7 +26,7 @@
   sizeClasses[size],
   className
 )}>
-  <span>{"{"} 🍯 Extension Data Viewer {"}"}</span>
+  <span>{"{"} 🍯 Data Viewer {"}"}</span>
   {#if version}
     <span class="text-yellow-400/50 text-xs">v{version}</span>
   {/if}

src/lib/components/virtualization/scroller.svelte

@@ -17,8 +17,6 @@
 	});
 </script>
 
-<svelte:window bind:innerWidth={virtualizer.innerWidth} />
-
 <div
 	bind:this={container}
 	bind:clientHeight={virtualizer.viewportHeight}

src/lib/stores/virtualization.svelte.ts

@@ -1,80 +1,45 @@
-import {
-	getTotalHeight,
-	getStartIndex,
-	getVisibleCount,
-	getPadding,
-	shouldLoadMore
-} from "$lib/utilities/virtualization";
+import { getRange, getSpacers } from "$lib/utilities/virtualization";
 
 import { type TableConfig, TableConfigSchema } from "$lib/types/table";
 
 export class Virtualizer {
+	// Scroll State
 	scrollTop = $state(0);
-	innerWidth = $state(0);
 	viewportHeight = $state(800);
-	rowHeight = $state(65);
-	checkInterval = $state(50);
+	innerWidth = $state(1024);
+	
+	get rowHeight() {
+		return this.innerWidth < 768 ? 140 : 70;
+	}
 
 	private config = $state<TableConfig>(TableConfigSchema.parse({}));
-	private timer: ReturnType<typeof setTimeout> | undefined;
-	private at = 0;
-
-	private onloadrange: (offset: number, limit: number) => void = () => {};
 
 	constructor() {}
 
-	update(config: TableConfig, onloadrange: (offset: number, limit: number) => void) {
+	update(config: TableConfig) {
 		this.config = config;
-		this.onloadrange = onloadrange;
 	}
 
 	get totalHeight() {
-		return getTotalHeight(this.config.count, this.rowHeight);
-	}
-
-	get startIndex() {
-		return getStartIndex(this.scrollTop, this.rowHeight);
-	}
-
-	get visibleCount() {
-		return getVisibleCount(this.viewportHeight, this.rowHeight);
+		return this.config.count * this.rowHeight;
 	}
 
 	get padding() {
-		return getPadding(
+		return getSpacers(
 			this.config.count,
 			this.config.offset,
 			this.config.data.length,
 			this.rowHeight
 		);
 	}
 
-	checkScroll() {
-		const { load, start, limit } = shouldLoadMore(
-			this.startIndex,
-			this.visibleCount,
-			this.config.offset,
-			this.config.data.length,
-			this.config.count
+	get targetRange() {
+		return getRange(
+			this.scrollTop,
+			this.viewportHeight,
+			this.rowHeight,
+			25
 		);
-
-		if (load) {
-			const now = Date.now();
-
-			const delta = now - this.at;
-
-			if (this.timer) clearTimeout(this.timer);
-
-			if (delta > this.checkInterval) {
-				this.onloadrange(start, limit);
-				this.at = now;
-			} else {
-				this.timer = setTimeout(() => {
-					this.onloadrange(start, limit);
-					this.at = Date.now();
-				}, this.checkInterval - delta);
-			}
-		}
 	}
 
 	reset() {

src/lib/utilities/sort.test.ts

@@ -3,10 +3,7 @@ import { describe, it, expect } from "vitest";
 import {
 	getSortValue,
 	compareItems,
-	sortItems,
-	createCacheState,
-	shouldInvalidateCache,
-	type CacheState
+	sortItems
 } from "./sort";
 
 import type { Store } from "$lib/types/store";
@@ -144,72 +141,3 @@ describe("sortItems", () => {
 		expect(stores[0].n).toBe(original[0].n);
 	});
 });
-
-describe("createCacheState", () => {
-	it("creates empty cache state", () => {
-		const cache = createCacheState();
-		expect(cache.results).toEqual([]);
-		expect(cache.query).toBeNull();
-		expect(cache.sortKey).toBeNull();
-		expect(cache.sortDirection).toBeNull();
-	});
-});
-
-describe("shouldInvalidateCache", () => {
-	const emptyCache = createCacheState();
-
-	const populatedCache: CacheState = {
-		results: [createStore({ n: "Amazon" })],
-		query: "amazon",
-		sortKey: "info",
-		sortDirection: "asc"
-	};
-
-	it("returns true when query changes", () => {
-		expect(shouldInvalidateCache(populatedCache, "walmart", { key: "info", direction: "asc" })).toBe(true);
-	});
-
-	it("returns true when sort key changes", () => {
-		expect(shouldInvalidateCache(populatedCache, "amazon", { key: "visits", direction: "asc" })).toBe(true);
-	});
-
-	it("returns true when sort direction changes", () => {
-		expect(shouldInvalidateCache(populatedCache, "amazon", { key: "info", direction: "desc" })).toBe(true);
-	});
-
-	it("returns true when cache is empty but items exist", () => {
-		expect(shouldInvalidateCache(emptyCache, "", undefined, 100)).toBe(true);
-	});
-
-	it("returns false when nothing changes", () => {
-		expect(shouldInvalidateCache(populatedCache, "amazon", { key: "info", direction: "asc" })).toBe(false);
-	});
-
-	it("returns true when cache query is null (fresh cache)", () => {
-		expect(shouldInvalidateCache(emptyCache, "", undefined, 0)).toBe(true);
-	});
-
-	it("handles undefined sort gracefully", () => {
-		const cacheNoSort: CacheState = {
-			results: [createStore()],
-			query: "",
-			sortKey: null,
-			sortDirection: null
-		};
-		expect(shouldInvalidateCache(cacheNoSort, "", undefined)).toBe(false);
-	});
-
-	it("invalidates when adding sort to unsorted cache", () => {
-		const cacheNoSort: CacheState = {
-			results: [createStore()],
-			query: "",
-			sortKey: null,
-			sortDirection: null
-		};
-		expect(shouldInvalidateCache(cacheNoSort, "", { key: "info", direction: "asc" })).toBe(true);
-	});
-
-	it("invalidates when removing sort from sorted cache", () => {
-		expect(shouldInvalidateCache(populatedCache, "amazon", undefined)).toBe(true);
-	});
-});

src/lib/utilities/sort.ts

@@ -29,33 +29,3 @@ export const sortItems = (items: Store[], sort?: SortState): Store[] => {
 	return sorted;
 };
 
-export type CacheState = {
-	results: Store[];
-	query: string | null;
-	sortKey: string | null;
-	sortDirection: string | null;
-};
-
-export const createCacheState = (): CacheState => ({
-	results: [],
-	query: null,
-	sortKey: null,
-	sortDirection: null
-});
-
-export const shouldInvalidateCache = (
-	cache: CacheState,
-	query: string,
-	sort?: SortState,
-	itemsLength?: number
-): boolean => {
-	const sortKey = sort?.key || null;
-	const sortDirection = sort?.direction || null;
-
-	return (
-		query !== cache.query ||
-		sortKey !== cache.sortKey ||
-		sortDirection !== cache.sortDirection ||
-		(cache.results.length === 0 && (itemsLength ?? 0) > 0)
-	);
-};