use neutral ViewModeToggle in collection pages

src/lib/components/collection/CollectionFilters.svelte

@@ -6,7 +6,7 @@
 	import type { ViewMode } from '$lib/stores/viewMode.svelte'
 	import MultiSelect from '$lib/components/ui/MultiSelect.svelte'
 	import Select from '$lib/components/ui/Select.svelte'
-	import Icon from '$lib/components/Icon.svelte'
+	import ViewModeToggle from '$lib/components/ui/ViewModeToggle.svelte'
 	import { createQuery, queryOptions } from '@tanstack/svelte-query'
 	import { entityAdapter } from '$lib/api/adapters/entity.adapter'
 
@@ -44,6 +44,10 @@
 		onViewModeChange?: (mode: ViewMode) => void
 		/** Whether to show the view toggle */
 		showViewToggle?: boolean
+		/** Element color theme for active toggle state */
+		element?: string
+		/** Use neutral gray styling for view toggle */
+		neutralViewToggle?: boolean
 	}
 
 	export interface CollectionFilterState {
@@ -104,7 +108,9 @@
 		showSort = true,
 		viewMode = 'grid',
 		onViewModeChange,
-		showViewToggle = false
+		showViewToggle = false,
+		element,
+		neutralViewToggle = false
 	}: Props = $props()
 
 	// Compute effective filter visibility (explicit showFilters overrides entityType defaults)
@@ -360,28 +366,7 @@
 
 	<div class="right-controls">
 		{#if showViewToggle}
-			<div class="view-toggle">
+			<ViewModeToggle value={viewMode} onValueChange={onViewModeChange} {element} neutral={neutralViewToggle} />
-				<button
-					type="button"
-					class="view-btn"
-					class:active={viewMode === 'grid'}
-					onclick={() => onViewModeChange?.('grid')}
-					aria-label="Grid view"
-					aria-pressed={viewMode === 'grid'}
-				>
-					<Icon name="grid-2x2" size={18} />
-				</button>
-				<button
-					type="button"
-					class="view-btn"
-					class:active={viewMode === 'list'}
-					onclick={() => onViewModeChange?.('list')}
-					aria-label="List view"
-					aria-pressed={viewMode === 'list'}
-				>
-					<Icon name="list" size={18} />
-				</button>
-			</div>
 		{/if}
 
 		{#if showSort}
@@ -424,39 +409,6 @@
 		flex-shrink: 0;
 	}
 
-	.view-toggle {
-		display: flex;
-		border: 1px solid var(--border-color, #ddd);
-		border-radius: 6px;
-		overflow: hidden;
-	}
-
-	.view-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: $unit-half;
-		border: none;
-		background: transparent;
-		color: var(--text-secondary, #666);
-		cursor: pointer;
-		transition: background 0.15s, color 0.15s;
-
-		&:hover {
-			background: var(--button-bg-hover, #f5f5f5);
-			color: var(--text-primary, #333);
-		}
-
-		&.active {
-			background: var(--accent-color, #3366ff);
-			color: white;
-		}
-
-		&:first-child {
-			border-right: 1px solid var(--border-color, #ddd);
-		}
-	}
-
 	.sort {
 		flex-shrink: 0;
 

src/routes/(app)/[username]/collection/artifacts/+page.svelte

@@ -7,6 +7,7 @@
 	import CollectionArtifactCard from '$lib/components/collection/CollectionArtifactCard.svelte'
 	import CollectionArtifactRow from '$lib/components/collection/CollectionArtifactRow.svelte'
 	import Icon from '$lib/components/Icon.svelte'
+	import ViewModeToggle from '$lib/components/ui/ViewModeToggle.svelte'
 	import { IsInViewport } from 'runed'
 	import { sidebar } from '$lib/stores/sidebar.svelte'
 	import { viewMode, type ViewMode } from '$lib/stores/viewMode.svelte'
@@ -105,26 +106,11 @@
 			size="small"
 		/>
 
-		<div class="view-toggle">
+		<ViewModeToggle
-			<button
+			value={currentViewMode}
-				type="button"
+			onValueChange={handleViewModeChange}
-				class="toggle-btn"
+			neutral={true}
-				class:active={currentViewMode === 'grid'}
+		/>
-				onclick={() => handleViewModeChange('grid')}
-				aria-label="Grid view"
-			>
-				<Icon name="grid-2x2" size={18} />
-			</button>
-			<button
-				type="button"
-				class="toggle-btn"
-				class:active={currentViewMode === 'list'}
-				onclick={() => handleViewModeChange('list')}
-				aria-label="List view"
-			>
-				<Icon name="list" size={18} />
-			</button>
-		</div>
 	</div>
 
 	<!-- Collection grid -->
@@ -209,37 +195,6 @@
 		gap: $unit-2x;
 	}
 
-	.view-toggle {
-		display: flex;
-		gap: $unit-fourth;
-		padding: $unit-fourth;
-		background: var(--segmented-control-bg, $grey-90);
-		border-radius: $item-corner;
-	}
-
-	.toggle-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: $unit-half;
-		border: none;
-		background: transparent;
-		border-radius: $item-corner-small;
-		cursor: pointer;
-		color: var(--text-secondary);
-		transition: all 0.15s;
-
-		&:hover {
-			color: var(--text-primary);
-		}
-
-		&.active {
-			background: var(--unit-bg, white);
-			color: var(--text-primary);
-			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-		}
-	}
-
 	.grid-area {
 		min-height: 400px;
 	}

src/routes/(app)/[username]/collection/characters/+page.svelte

@@ -126,6 +126,7 @@
 			showViewToggle={true}
 			viewMode={currentViewMode}
 			onViewModeChange={handleViewModeChange}
+			neutralViewToggle={true}
 		/>
 	</div>
 

src/routes/(app)/[username]/collection/summons/+page.svelte

@@ -106,6 +106,7 @@
 			showViewToggle={true}
 			viewMode={currentViewMode}
 			onViewModeChange={handleViewModeChange}
+			neutralViewToggle={true}
 		/>
 	</div>
 

src/routes/(app)/[username]/collection/weapons/+page.svelte

@@ -113,6 +113,7 @@
 			showViewToggle={true}
 			viewMode={currentViewMode}
 			onViewModeChange={handleViewModeChange}
+			neutralViewToggle={true}
 		/>
 	</div>