From 52660f3fb1daebe3c481014ec38e64b1f867af7c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 3 Dec 2025 16:17:15 -0800
Subject: [PATCH] add collection artifact feature (cards, rows, pane, route)

- CollectionArtifactCard for grid view
- CollectionArtifactRow for list view
- CollectionArtifactPane for sidebar details
- artifacts collection page with filters and infinite scroll
- getArtifactImage util
- update collection layout for artifacts tab
---
 src/lib/api/adapters/artifact.adapter.ts      |   3 +-
 .../collection/CollectionArtifactCard.svelte  | 147 ++++++++
 .../collection/CollectionArtifactPane.svelte  | 157 +++++++++
 .../collection/CollectionArtifactRow.svelte   | 244 ++++++++++++++
 src/lib/utils/images.ts                       |  10 +
 .../[username]/collection/+layout.svelte      |  14 +-
 .../collection/artifacts/+page.server.ts      |  12 +
 .../collection/artifacts/+page.svelte         | 317 ++++++++++++++++++
 8 files changed, 899 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/components/collection/CollectionArtifactCard.svelte
 create mode 100644 src/lib/components/collection/CollectionArtifactPane.svelte
 create mode 100644 src/lib/components/collection/CollectionArtifactRow.svelte
 create mode 100644 src/routes/(app)/[username]/collection/artifacts/+page.server.ts
 create mode 100644 src/routes/(app)/[username]/collection/artifacts/+page.svelte

diff --git a/src/lib/api/adapters/artifact.adapter.ts b/src/lib/api/adapters/artifact.adapter.ts
index 728f445e..4049b04d 100644
--- a/src/lib/api/adapters/artifact.adapter.ts
+++ b/src/lib/api/adapters/artifact.adapter.ts
@@ -40,9 +40,10 @@ export interface ArtifactListParams {
 export interface CollectionArtifactListParams {
 	page?: number
 	limit?: number
-	element?: number
+	element?: number | number[]
 	artifactId?: string
 	proficiency?: number
+	rarity?: 'standard' | 'quirk'
 }
 
 /**
diff --git a/src/lib/components/collection/CollectionArtifactCard.svelte b/src/lib/components/collection/CollectionArtifactCard.svelte
new file mode 100644
index 00000000..bfaf6ab9
--- /dev/null
+++ b/src/lib/components/collection/CollectionArtifactCard.svelte
@@ -0,0 +1,147 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { CollectionArtifact } from '$lib/types/api/artifact'
+	import { getArtifactImage } from '$lib/utils/images'
+	import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
+
+	interface Props {
+		artifact: CollectionArtifact
+		onClick?: () => void
+	}
+
+	let { artifact, onClick }: Props = $props()
+
+	const imageUrl = $derived(getArtifactImage(artifact.artifact?.granblueId))
+
+	const displayName = $derived.by(() => {
+		const name = artifact.artifact?.name
+		if (!name) return '—'
+		if (typeof name === 'string') return name
+		return name.en || name.ja || '—'
+	})
+
+	// Get grade letter for badge
+	const gradeLetter = $derived(artifact.grade?.letter)
+	const gradeClass = $derived(gradeLetter?.toLowerCase() ?? 'none')
+
+	// Is this a quirk artifact?
+	const isQuirk = $derived(artifact.artifact?.rarity === 'quirk')
+</script>
+
+<button type="button" class="artifact-card" onclick={onClick}>
+	<div class="card-image">
+		<img class="artifact-image" src={imageUrl} alt={displayName} loading="lazy" />
+		{#if gradeLetter}
+			<span class="grade-badge grade-{gradeClass}">{gradeLetter}</span>
+		{/if}
+		{#if isQuirk}
+			<span class="quirk-badge">Q</span>
+		{/if}
+	</div>
+	<div class="card-info">
+		<ElementLabel element={artifact.element} size="small" />
+		<span class="level">Lv.{artifact.level}</span>
+	</div>
+</button>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/layout' as *;
+
+	.artifact-card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $unit-half;
+		padding: 0;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		transition: transform 0.2s ease;
+
+		&:hover {
+			transform: scale(1.05);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--accent-color, #3366ff);
+			outline-offset: 2px;
+			border-radius: $item-corner;
+		}
+	}
+
+	.card-image {
+		position: relative;
+		width: 100%;
+		aspect-ratio: 1 / 1;
+		border-radius: $item-corner;
+		overflow: hidden;
+		background: var(--card-bg, #f5f5f5);
+	}
+
+	.artifact-image {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		border-radius: $item-corner;
+	}
+
+	.grade-badge {
+		position: absolute;
+		top: $unit-fourth;
+		right: $unit-fourth;
+		font-size: $font-small;
+		font-weight: $bold;
+		padding: 2px 6px;
+		border-radius: 4px;
+		line-height: 1;
+
+		&.grade-s {
+			background: linear-gradient(135deg, #ffd700, #ffb347);
+			color: #6b4c00;
+		}
+		&.grade-a {
+			background: linear-gradient(135deg, #4ade80, #22c55e);
+			color: #14532d;
+		}
+		&.grade-b {
+			background: linear-gradient(135deg, #60a5fa, #3b82f6);
+			color: #1e3a5f;
+		}
+		&.grade-c,
+		&.grade-d {
+			background: var(--grey-80, #e9e9e9);
+			color: var(--grey-40, #444);
+		}
+		&.grade-f {
+			background: linear-gradient(135deg, #f87171, #ef4444);
+			color: #7f1d1d;
+		}
+	}
+
+	.quirk-badge {
+		position: absolute;
+		top: $unit-fourth;
+		left: $unit-fourth;
+		font-size: $font-small;
+		font-weight: $bold;
+		padding: 2px 6px;
+		border-radius: 4px;
+		line-height: 1;
+		background: var(--purple-50, #b6b2fc);
+		color: var(--purple-10, #4f3c79);
+	}
+
+	.card-info {
+		display: flex;
+		align-items: center;
+		gap: $unit-half;
+	}
+
+	.level {
+		font-size: $font-small;
+		color: var(--text-secondary);
+	}
+</style>
diff --git a/src/lib/components/collection/CollectionArtifactPane.svelte b/src/lib/components/collection/CollectionArtifactPane.svelte
new file mode 100644
index 00000000..2b216a0c
--- /dev/null
+++ b/src/lib/components/collection/CollectionArtifactPane.svelte
@@ -0,0 +1,157 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { CollectionArtifact } from '$lib/types/api/artifact'
+	import { useUpdateCollectionArtifact, useDeleteCollectionArtifact } from '$lib/api/mutations/artifact.mutations'
+	import { getArtifactImage } from '$lib/utils/images'
+	import ArtifactEditPane from '$lib/components/artifact/ArtifactEditPane.svelte'
+	import Button from '$lib/components/ui/Button.svelte'
+
+	interface Props {
+		artifact: CollectionArtifact
+		isOwner?: boolean
+		onClose?: () => void
+	}
+
+	let { artifact, isOwner = false, onClose }: Props = $props()
+
+	// Mutations
+	const updateMutation = useUpdateCollectionArtifact()
+	const deleteMutation = useDeleteCollectionArtifact()
+
+	// Image and name for header
+	const imageUrl = $derived(getArtifactImage(artifact.artifact?.granblueId))
+	const displayName = $derived.by(() => {
+		const name = artifact.artifact?.name
+		if (!name) return '—'
+		if (typeof name === 'string') return name
+		return name.en || name.ja || '—'
+	})
+
+	// Handle updates from ArtifactEditPane
+	function handleUpdate(updates: Partial<CollectionArtifact>) {
+		updateMutation.mutate({
+			id: artifact.id,
+			input: {
+				element: updates.element,
+				level: updates.level,
+				proficiency: updates.proficiency,
+				skill1: updates.skills?.[0] ?? undefined,
+				skill2: updates.skills?.[1] ?? undefined,
+				skill3: updates.skills?.[2] ?? undefined,
+				skill4: updates.skills?.[3] ?? undefined
+			}
+		})
+	}
+
+	// Handle delete
+	function handleDelete() {
+		if (confirm('Are you sure you want to delete this artifact from your collection?')) {
+			deleteMutation.mutate(artifact.id, {
+				onSuccess: () => {
+					onClose?.()
+				}
+			})
+		}
+	}
+</script>
+
+<div class="artifact-pane">
+	<!-- Header with image -->
+	<div class="pane-header">
+		<div class="artifact-image">
+			<img src={imageUrl} alt={displayName} />
+		</div>
+		<h2 class="artifact-name">{displayName}</h2>
+		{#if artifact.nickname}
+			<p class="artifact-nickname">"{artifact.nickname}"</p>
+		{/if}
+	</div>
+
+	<!-- Edit pane content -->
+	<div class="pane-content">
+		<ArtifactEditPane
+			{artifact}
+			onUpdate={isOwner ? handleUpdate : undefined}
+			disabled={!isOwner}
+		/>
+	</div>
+
+	<!-- Actions footer (owner only) -->
+	{#if isOwner}
+		<div class="pane-footer">
+			<Button
+				variant="destructive"
+				size="small"
+				onclick={handleDelete}
+				disabled={deleteMutation.isPending}
+			>
+				{deleteMutation.isPending ? 'Deleting...' : 'Delete'}
+			</Button>
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/layout' as *;
+
+	.artifact-pane {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.pane-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: $unit-2x;
+		border-bottom: 1px solid var(--border-secondary);
+	}
+
+	.artifact-image {
+		width: 80px;
+		height: 80px;
+		border-radius: $item-corner;
+		overflow: hidden;
+		background: var(--card-bg, #f5f5f5);
+		margin-bottom: $unit;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+		}
+	}
+
+	.artifact-name {
+		margin: 0;
+		font-size: $font-large;
+		font-weight: $bold;
+		color: var(--text-primary);
+		text-align: center;
+	}
+
+	.artifact-nickname {
+		margin: $unit-half 0 0;
+		font-size: $font-small;
+		color: var(--text-secondary);
+		font-style: italic;
+		text-align: center;
+	}
+
+	.pane-content {
+		flex: 1;
+		overflow-y: auto;
+	}
+
+	.pane-footer {
+		display: flex;
+		justify-content: center;
+		padding: $unit-2x;
+		border-top: 1px solid var(--border-secondary);
+		flex-shrink: 0;
+	}
+</style>
diff --git a/src/lib/components/collection/CollectionArtifactRow.svelte b/src/lib/components/collection/CollectionArtifactRow.svelte
new file mode 100644
index 00000000..6dad37a8
--- /dev/null
+++ b/src/lib/components/collection/CollectionArtifactRow.svelte
@@ -0,0 +1,244 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { CollectionArtifact } from '$lib/types/api/artifact'
+	import { getArtifactImage } from '$lib/utils/images'
+	import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
+	import ProficiencyLabel from '$lib/components/labels/ProficiencyLabel.svelte'
+
+	interface Props {
+		artifact: CollectionArtifact
+		onClick?: () => void
+	}
+
+	let { artifact, onClick }: Props = $props()
+
+	const imageUrl = $derived(getArtifactImage(artifact.artifact?.granblueId))
+
+	const displayName = $derived.by(() => {
+		const name = artifact.artifact?.name
+		if (!name) return '—'
+		if (typeof name === 'string') return name
+		return name.en || name.ja || '—'
+	})
+
+	// Get grade display
+	const gradeLetter = $derived(artifact.grade?.letter)
+	const gradeClass = $derived(gradeLetter?.toLowerCase() ?? 'none')
+
+	// Is this a quirk artifact?
+	const isQuirk = $derived(artifact.artifact?.rarity === 'quirk')
+
+	// Proficiency - from artifact for standard, from instance for quirk
+	const proficiency = $derived(
+		(isQuirk ? artifact.proficiency : artifact.artifact?.proficiency) ?? undefined
+	)
+
+	// Skills summary (count of non-null skills)
+	const skillCount = $derived(
+		artifact.skills?.filter((s) => s !== null).length ?? 0
+	)
+</script>
+
+<button type="button" class="artifact-row" onclick={onClick}>
+	<div class="core-info">
+		<div class="thumbnail">
+			<img src={imageUrl} alt={displayName} loading="lazy" />
+		</div>
+
+		<div class="name-cell">
+			<span class="name">{displayName}</span>
+			{#if artifact.nickname}
+				<span class="nickname">"{artifact.nickname}"</span>
+			{/if}
+		</div>
+	</div>
+
+	<div class="element-cell">
+		<ElementLabel element={artifact.element} size="medium" />
+	</div>
+
+	<div class="proficiency-cell">
+		<ProficiencyLabel {proficiency} size="medium" />
+	</div>
+
+	<div class="level-cell">
+		<span class="level">Lv.{artifact.level}</span>
+	</div>
+
+	<div class="skills-cell">
+		{#if isQuirk}
+			<span class="quirk-badge">Quirk</span>
+		{:else if skillCount > 0}
+			<span class="skills">{skillCount}/4 skills</span>
+		{:else}
+			<span class="placeholder">—</span>
+		{/if}
+	</div>
+
+	<div class="grade-cell">
+		{#if gradeLetter}
+			<span class="grade-badge grade-{gradeClass}">{gradeLetter}</span>
+		{:else}
+			<span class="placeholder">—</span>
+		{/if}
+	</div>
+</button>
+
+<style lang="scss">
+	@use '$src/themes/layout' as *;
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/typography' as *;
+
+	.artifact-row {
+		display: flex;
+		align-items: center;
+		gap: $unit-4x;
+		padding: $unit $unit-2x $unit $unit;
+		border: none;
+		background: var(--list-cell-bg);
+		cursor: pointer;
+		width: 100%;
+		text-align: left;
+		border-radius: $card-corner;
+		transition:
+			background 0.15s,
+			box-shadow 0.15s;
+
+		&:hover {
+			background: var(--list-cell-bg-hover);
+			box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--accent-color, #3366ff);
+			outline-offset: -2px;
+		}
+	}
+
+	.core-info {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+		flex-grow: 1;
+
+		.thumbnail {
+			width: 64px;
+			aspect-ratio: 1 / 1;
+			border-radius: $item-corner;
+			overflow: hidden;
+			background: var(--card-bg, #f5f5f5);
+			flex-shrink: 0;
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		}
+
+		.name-cell {
+			flex: 1;
+			min-width: 0;
+			display: flex;
+			flex-direction: column;
+			gap: $unit-fourth;
+
+			.name {
+				font-size: $font-regular;
+				font-weight: $medium;
+				color: var(--text-primary);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.nickname {
+				font-size: $font-small;
+				color: var(--text-secondary);
+				font-style: italic;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.element-cell,
+	.proficiency-cell {
+		flex-shrink: 0;
+	}
+
+	.level-cell {
+		width: 48px;
+		flex-shrink: 0;
+
+		.level {
+			font-size: $font-small;
+			color: var(--text-secondary);
+			font-weight: $medium;
+		}
+	}
+
+	.skills-cell {
+		width: 80px;
+		display: flex;
+		justify-content: flex-start;
+		flex-shrink: 0;
+
+		.skills {
+			font-size: $font-small;
+			color: var(--text-secondary);
+		}
+
+		.quirk-badge {
+			font-size: $font-small;
+			font-weight: $medium;
+			padding: 2px 6px;
+			border-radius: 4px;
+			background: var(--purple-50, #b6b2fc);
+			color: var(--purple-10, #4f3c79);
+		}
+	}
+
+	.grade-cell {
+		width: 40px;
+		display: flex;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.grade-badge {
+		font-size: $font-small;
+		font-weight: $bold;
+		padding: 2px 8px;
+		border-radius: 4px;
+		line-height: 1;
+
+		&.grade-s {
+			background: linear-gradient(135deg, #ffd700, #ffb347);
+			color: #6b4c00;
+		}
+		&.grade-a {
+			background: linear-gradient(135deg, #4ade80, #22c55e);
+			color: #14532d;
+		}
+		&.grade-b {
+			background: linear-gradient(135deg, #60a5fa, #3b82f6);
+			color: #1e3a5f;
+		}
+		&.grade-c,
+		&.grade-d {
+			background: var(--grey-80, #e9e9e9);
+			color: var(--grey-40, #444);
+		}
+		&.grade-f {
+			background: linear-gradient(135deg, #f87171, #ef4444);
+			color: #7f1d1d;
+		}
+	}
+
+	.placeholder {
+		color: var(--text-tertiary);
+	}
+</style>
diff --git a/src/lib/utils/images.ts b/src/lib/utils/images.ts
index 5cedadcd..4da704ed 100644
--- a/src/lib/utils/images.ts
+++ b/src/lib/utils/images.ts
@@ -364,6 +364,16 @@ export function getElementIcon(element: number): string {
 	return `${getBasePath()}/elements/element-${name}.png`
 }
 
+// ===== Artifact Images =====
+
+/**
+ * Get artifact image URL
+ */
+export function getArtifactImage(granblueId: string | number | null | undefined): string {
+	if (!granblueId) return '/images/placeholders/placeholder-weapon-grid.png'
+	return `${getBasePath()}/artifacts/${granblueId}.png`
+}
+
 // ===== Other Game Images =====
 
 /**
diff --git a/src/routes/(app)/[username]/collection/+layout.svelte b/src/routes/(app)/[username]/collection/+layout.svelte
index 236d29cd..916f4b31 100644
--- a/src/routes/(app)/[username]/collection/+layout.svelte
+++ b/src/routes/(app)/[username]/collection/+layout.svelte
@@ -18,16 +18,21 @@
 		const path = $page.url.pathname
 		if (path.includes('/weapons')) return 'weapons'
 		if (path.includes('/summons')) return 'summons'
+		if (path.includes('/artifacts')) return 'artifacts'
 		return 'characters'
 	})
 
-	// Map entity type to singular form for modal
-	const modalEntityType = $derived.by(() => {
+	// Map entity type to singular form for modal (only for supported types)
+	const modalEntityType = $derived.by((): 'character' | 'weapon' | 'summon' | undefined => {
 		if (activeEntityType === 'weapons') return 'weapon'
 		if (activeEntityType === 'summons') return 'summon'
+		if (activeEntityType === 'artifacts') return undefined // Artifacts use different flow
 		return 'character'
 	})
 
+	// Whether the current entity type supports the add modal
+	const supportsAddModal = $derived(activeEntityType !== 'artifacts')
+
 	// Dynamic button text
 	const addButtonText = $derived(`Add ${activeEntityType}`)
 
@@ -62,9 +67,10 @@
 			<Segment value="characters">Characters</Segment>
 			<Segment value="weapons">Weapons</Segment>
 			<Segment value="summons">Summons</Segment>
+			<Segment value="artifacts">Artifacts</Segment>
 		</SegmentedControl>
 
-		{#if data.isOwner}
+		{#if data.isOwner && supportsAddModal}
 			<Button
 				variant="primary"
 				size="small"
@@ -82,7 +88,7 @@
 	</div>
 </section>
 
-{#if data.isOwner}
+{#if data.isOwner && modalEntityType}
 	<AddToCollectionModal
 		userId={data.user.id}
 		entityType={modalEntityType}
diff --git a/src/routes/(app)/[username]/collection/artifacts/+page.server.ts b/src/routes/(app)/[username]/collection/artifacts/+page.server.ts
new file mode 100644
index 00000000..e7cc668f
--- /dev/null
+++ b/src/routes/(app)/[username]/collection/artifacts/+page.server.ts
@@ -0,0 +1,12 @@
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad = async ({ parent }) => {
+	const { user, isOwner } = await parent()
+
+	// User info comes from layout, collection data is fetched client-side via TanStack Query
+	// The unified API endpoint handles privacy checks server-side
+	return {
+		user,
+		isOwner
+	}
+}
diff --git a/src/routes/(app)/[username]/collection/artifacts/+page.svelte b/src/routes/(app)/[username]/collection/artifacts/+page.svelte
new file mode 100644
index 00000000..26f310e7
--- /dev/null
+++ b/src/routes/(app)/[username]/collection/artifacts/+page.svelte
@@ -0,0 +1,317 @@
+<script lang="ts">
+	import type { PageData } from './$types'
+	import type { CollectionArtifact } from '$lib/types/api/artifact'
+	import { createInfiniteQuery } from '@tanstack/svelte-query'
+	import { artifactQueries } from '$lib/api/queries/artifact.queries'
+	import CollectionArtifactPane from '$lib/components/collection/CollectionArtifactPane.svelte'
+	import CollectionArtifactCard from '$lib/components/collection/CollectionArtifactCard.svelte'
+	import CollectionArtifactRow from '$lib/components/collection/CollectionArtifactRow.svelte'
+	import Icon from '$lib/components/Icon.svelte'
+	import { IsInViewport } from 'runed'
+	import { sidebar } from '$lib/stores/sidebar.svelte'
+	import { viewMode, type ViewMode } from '$lib/stores/viewMode.svelte'
+	import SegmentedControl from '$lib/components/ui/segmented-control/SegmentedControl.svelte'
+	import Segment from '$lib/components/ui/segmented-control/Segment.svelte'
+
+	const { data }: { data: PageData } = $props()
+
+	// Filter state
+	let elementFilters = $state<number[]>([])
+	let rarityFilter = $state<'all' | 'standard' | 'quirk'>('all')
+
+	// Sentinel for infinite scroll
+	let sentinelEl = $state<HTMLElement>()
+
+	// Build filters for query
+	const queryFilters = $derived({
+		element: elementFilters.length > 0 ? elementFilters : undefined,
+		rarity: rarityFilter !== 'all' ? rarityFilter : undefined
+	})
+
+	// Query for artifacts collection
+	const collectionQuery = createInfiniteQuery(() => {
+		const userId = data.user.id
+		const filters = queryFilters
+		return artifactQueries.collection(userId, filters)
+	})
+
+	// Flatten all artifacts from pages
+	const allArtifacts = $derived.by((): CollectionArtifact[] => {
+		if (!collectionQuery.data?.pages) {
+			return []
+		}
+		return collectionQuery.data.pages.flatMap((page) => page.results ?? [])
+	})
+
+	// Infinite scroll
+	const inViewport = new IsInViewport(() => sentinelEl, {
+		rootMargin: '200px'
+	})
+
+	$effect(() => {
+		if (
+			inViewport.current &&
+			collectionQuery.hasNextPage &&
+			!collectionQuery.isFetchingNextPage &&
+			!collectionQuery.isLoading
+		) {
+			collectionQuery.fetchNextPage()
+		}
+	})
+
+	const isLoading = $derived(collectionQuery.isLoading)
+	const isEmpty = $derived(!isLoading && allArtifacts.length === 0)
+	const showSentinel = $derived(collectionQuery.hasNextPage && !collectionQuery.isFetchingNextPage)
+
+	// Current view mode from store
+	const currentViewMode = $derived(viewMode.collectionView)
+
+	function handleViewModeChange(mode: ViewMode) {
+		viewMode.setCollectionView(mode)
+	}
+
+	function openArtifactDetails(artifact: CollectionArtifact) {
+		const artifactName =
+			typeof artifact.artifact?.name === 'string'
+				? artifact.artifact.name
+				: artifact.artifact?.name?.en || 'Artifact'
+
+		sidebar.openWithComponent(artifactName, CollectionArtifactPane, {
+			artifact,
+			isOwner: data.isOwner,
+			onClose: () => sidebar.close()
+		})
+	}
+</script>
+
+<div class="collection-page">
+	<!-- Filters bar -->
+	<div class="filters-bar">
+		<SegmentedControl
+			value={rarityFilter}
+			onValueChange={(v) => (rarityFilter = v as 'all' | 'standard' | 'quirk')}
+			variant="blended"
+			size="small"
+		>
+			<Segment value="all">All</Segment>
+			<Segment value="standard">Standard</Segment>
+			<Segment value="quirk">Quirk</Segment>
+		</SegmentedControl>
+
+		<div class="view-toggle">
+			<button
+				type="button"
+				class="toggle-btn"
+				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 -->
+	<div class="grid-area">
+		{#if isLoading}
+			<div class="loading-state">
+				<Icon name="loader-2" size={32} />
+				<p>Loading collection...</p>
+			</div>
+		{:else if isEmpty}
+			<div class="empty-state">
+				{#if data.isOwner}
+					<Icon name="gem" size={48} />
+					<h3>Your artifact collection is empty</h3>
+					<p>Artifacts will appear here once added</p>
+				{:else}
+					<Icon name="lock" size={48} />
+					<p>This collection is empty or private</p>
+				{/if}
+			</div>
+		{:else if currentViewMode === 'grid'}
+			<div class="artifact-grid">
+				{#each allArtifacts as artifact (artifact.id)}
+					<CollectionArtifactCard
+						{artifact}
+						onClick={() => openArtifactDetails(artifact)}
+					/>
+				{/each}
+			</div>
+		{:else}
+			<div class="artifact-list">
+				{#each allArtifacts as artifact (artifact.id)}
+					<CollectionArtifactRow
+						{artifact}
+						onClick={() => openArtifactDetails(artifact)}
+					/>
+				{/each}
+			</div>
+		{/if}
+
+		{#if !isLoading && !isEmpty}
+			{#if showSentinel}
+				<div class="load-more-sentinel" bind:this={sentinelEl}></div>
+			{/if}
+
+			{#if collectionQuery.isFetchingNextPage}
+				<div class="loading-more">
+					<Icon name="loader-2" size={20} />
+					<span>Loading more...</span>
+				</div>
+			{/if}
+
+			{#if !collectionQuery.hasNextPage && allArtifacts.length > 0}
+				<div class="end-message">
+					<p>
+						{allArtifacts.length} artifact{allArtifacts.length === 1 ? '' : 's'} in {data.isOwner
+							? 'your'
+							: 'this'} collection
+					</p>
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/layout' as *;
+
+	.collection-page {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+	}
+
+	.filters-bar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		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;
+	}
+
+	.artifact-grid {
+		display: grid;
+		grid-template-columns: repeat(5, 100px);
+		justify-content: space-between;
+		gap: $unit-4x;
+	}
+
+	.artifact-list {
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+	}
+
+	.loading-state,
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 300px;
+		color: var(--text-secondary, #666);
+		gap: $unit;
+
+		:global(svg) {
+			color: var(--icon-secondary, #999);
+		}
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.empty-state h3 {
+		margin: 0;
+		color: var(--text-primary, #333);
+	}
+
+	.loading-state :global(svg) {
+		animation: spin 1s linear infinite;
+	}
+
+	.load-more-sentinel {
+		height: 1px;
+		margin-top: $unit;
+	}
+
+	.loading-more {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: $unit;
+		padding: $unit-2x;
+		color: var(--text-secondary, #666);
+
+		:global(svg) {
+			animation: spin 1s linear infinite;
+		}
+	}
+
+	.end-message {
+		text-align: center;
+		padding: $unit-2x;
+		color: var(--text-secondary, #666);
+
+		p {
+			margin: 0;
+		}
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>