feat(data-page): implement data page store for search and view management

src/lib/client/stores/dataPage.ts

@@ -0,0 +1,98 @@
+/**
+ * Data page store for managing search, view toggle, and filtering
+ * Combines search functionality with view state persistence
+ */
+
+import { writable, derived } from 'svelte/store';
+import { browser } from '$app/environment';
+import { createSearchStore, type SearchStore } from './search';
+
+export type ViewMode = 'table' | 'cards';
+
+export interface DataPageConfig<T> {
+	/** Key for localStorage persistence */
+	storageKey: string;
+	/** Fields to search within items */
+	searchKeys: (keyof T)[];
+	/** Default view mode */
+	defaultView?: ViewMode;
+	/** Debounce time for search in ms */
+	debounceMs?: number;
+}
+
+export interface DataPageStore<T> {
+	/** Search store for SearchAction component */
+	search: SearchStore;
+	/** Current view mode ('table' | 'cards') */
+	view: {
+		subscribe: (fn: (value: ViewMode) => void) => () => void;
+		set: (value: ViewMode) => void;
+	};
+	/** Filtered items based on search query */
+	filtered: {
+		subscribe: (fn: (value: T[]) => void) => () => void;
+	};
+	/** Update the items (e.g., when data changes) */
+	setItems: (items: T[]) => void;
+}
+
+/**
+ * Create a data page store for managing list pages
+ *
+ * @example
+ * const { search, view, filtered } = createDataPageStore(data.profiles, {
+ *   storageKey: 'qualityProfilesView',
+ *   searchKeys: ['name', 'description']
+ * });
+ */
+export function createDataPageStore<T>(
+	initialItems: T[],
+	config: DataPageConfig<T>
+): DataPageStore<T> {
+	const { storageKey, searchKeys, defaultView = 'table', debounceMs = 300 } = config;
+
+	// Items store
+	const items = writable<T[]>(initialItems);
+
+	// Search store
+	const search = createSearchStore({ debounceMs });
+
+	// View store with localStorage persistence
+	const storedView = browser ? (localStorage.getItem(storageKey) as ViewMode | null) : null;
+	const view = writable<ViewMode>(storedView ?? defaultView);
+
+	// Persist view changes to localStorage
+	if (browser) {
+		view.subscribe((value) => {
+			localStorage.setItem(storageKey, value);
+		});
+	}
+
+	// Filtered items derived from search
+	const filtered = derived([items, search.debouncedQuery], ([$items, $query]) => {
+		if (!$query) return $items;
+
+		const queryLower = $query.toLowerCase();
+		return $items.filter((item) =>
+			searchKeys.some((key) => {
+				const value = item[key];
+				if (value == null) return false;
+				return String(value).toLowerCase().includes(queryLower);
+			})
+		);
+	});
+
+	return {
+		search,
+		view: {
+			subscribe: view.subscribe,
+			set: view.set
+		},
+		filtered: {
+			subscribe: filtered.subscribe
+		},
+		setItems: (newItems: T[]) => items.set(newItems)
+	};
+}
+
+export type { SearchStore };

src/lib/client/ui/actions/ViewToggle.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ActionButton from './ActionButton.svelte';
+	import Dropdown from '$ui/dropdown/Dropdown.svelte';
+	import DropdownItem from '$ui/dropdown/DropdownItem.svelte';
+	import { Eye, LayoutGrid, Table } from 'lucide-svelte';
+	import type { ViewMode } from '$lib/client/stores/dataPage';
+
+	export let value: ViewMode = 'table';
+	export let position: 'left' | 'right' | 'middle' = 'right';
+</script>
+
+<ActionButton icon={Eye} hasDropdown={true} dropdownPosition={position}>
+	<Dropdown slot="dropdown" {position}>
+		<DropdownItem
+			icon={LayoutGrid}
+			label="Cards"
+			selected={value === 'cards'}
+			on:click={() => (value = 'cards')}
+		/>
+		<DropdownItem
+			icon={Table}
+			label="Table"
+			selected={value === 'table'}
+			on:click={() => (value = 'table')}
+		/>
+	</Dropdown>
+</ActionButton>

src/routes/quality-profiles/[databaseId]/+page.svelte

@@ -1,36 +1,23 @@
 <script lang="ts">
 	import Tabs from '$ui/navigation/tabs/Tabs.svelte';
 	import ActionsBar from '$ui/actions/ActionsBar.svelte';
-	import ActionButton from '$ui/actions/ActionButton.svelte';
 	import SearchAction from '$ui/actions/SearchAction.svelte';
-	import Dropdown from '$ui/dropdown/Dropdown.svelte';
-	import DropdownItem from '$ui/dropdown/DropdownItem.svelte';
+	import ViewToggle from '$ui/actions/ViewToggle.svelte';
 	import TableView from './views/TableView.svelte';
 	import CardView from './views/CardView.svelte';
-	import { createSearchStore } from '$lib/client/stores/search';
-	import { Eye, LayoutGrid, Table } from 'lucide-svelte';
-	import { browser } from '$app/environment';
+	import { createDataPageStore } from '$lib/client/stores/dataPage';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
 
-	// Initialize search store
-	const searchStore = createSearchStore({ debounceMs: 300 });
+	// Initialize data page store
+	const { search, view, filtered, setItems } = createDataPageStore(data.qualityProfiles, {
+		storageKey: 'qualityProfilesView',
+		searchKeys: ['name']
+	});
 
-	// View state - load from localStorage or default to 'table'
-	let currentView: 'cards' | 'table' = 'table';
-
-	if (browser) {
-		const savedView = localStorage.getItem('qualityProfilesView') as 'cards' | 'table' | null;
-		if (savedView) {
-			currentView = savedView;
-		}
-	}
-
-	// Save view to localStorage when it changes
-	$: if (browser && currentView) {
-		localStorage.setItem('qualityProfilesView', currentView);
-	}
+	// Update items when data changes (e.g., switching databases)
+	$: setItems(data.qualityProfiles);
 
 	// Map databases to tabs
 	$: tabs = data.databases.map((db) => ({
@@ -38,15 +25,6 @@
 		href: `/quality-profiles/${db.id}`,
 		active: db.id === data.currentDatabase.id
 	}));
-
-	// Filter quality profiles based on search
-	$: filteredProfiles = data.qualityProfiles.filter((profile) => {
-		const query = $searchStore.query;
-		if (!query) return true;
-
-		const searchLower = query.toLowerCase();
-		return profile.name?.toLowerCase().includes(searchLower);
-	});
 </script>
 
 <svelte:head>
@@ -59,23 +37,8 @@
 
 	<!-- Actions Bar -->
 	<ActionsBar>
-		<SearchAction {searchStore} placeholder="Search quality profiles..." />
-		<ActionButton icon={Eye} hasDropdown={true} dropdownPosition="right">
-			<Dropdown slot="dropdown" let:open position="right">
-				<DropdownItem
-					icon={LayoutGrid}
-					label="Cards"
-					selected={currentView === 'cards'}
-					on:click={() => (currentView = 'cards')}
-				/>
-				<DropdownItem
-					icon={Table}
-					label="Table"
-					selected={currentView === 'table'}
-					on:click={() => (currentView = 'table')}
-				/>
-			</Dropdown>
-		</ActionButton>
+		<SearchAction searchStore={search} placeholder="Search quality profiles..." />
+		<ViewToggle bind:value={$view} />
 	</ActionsBar>
 
 	<!-- Quality Profiles Content -->
@@ -88,7 +51,7 @@
 					No quality profiles found for {data.currentDatabase.name}
 				</p>
 			</div>
-		{:else if filteredProfiles.length === 0}
+		{:else if $filtered.length === 0}
 			<div
 				class="rounded-lg border border-neutral-200 bg-white p-8 text-center dark:border-neutral-800 dark:bg-neutral-900"
 			>
@@ -96,10 +59,10 @@
 					No quality profiles match your search
 				</p>
 			</div>
-		{:else if currentView === 'table'}
-			<TableView profiles={filteredProfiles} />
+		{:else if $view === 'table'}
+			<TableView profiles={$filtered} />
 		{:else}
-			<CardView profiles={filteredProfiles} />
+			<CardView profiles={$filtered} />
 		{/if}
 	</div>
 </div>