feat: migrate components to TanStack Query v6 (Phase 2) (#442)

# feat: migrate components to TanStack Query v6 (Phase 2) ## Summary This PR migrates 4 components from the custom `createInfiniteScrollResource` pattern to TanStack Query v6's `createInfiniteQuery`: - **JobSkillSelectionSidebar** - Job skill search with infinite scroll and category filtering - **SearchContent** - Search modal for weapons/characters/summons with element/rarity/proficiency filters - **User Profile Page** (`[username]/+page.svelte`) - User's teams and favorites with tab switching - **Teams Explore Page** (`teams/explore/+page.svelte`) - Public teams listing All components now use: - TanStack Query v6 infinite query pattern with thunk for reactivity - `IsInViewport` from runed for intersection-based infinite scroll - Debounced search (debounce the value, not the query) - Proper loading, error, and empty states - SSR integration with `initialData` pattern ## Updates since last revision - **Fixed duplicate key error in SearchContent.svelte** - The API can return the same item across multiple pages during infinite scroll (e.g., due to items being added/removed between page fetches). This caused Svelte's keyed each block to throw `each_key_duplicate` errors. Fixed by deduplicating results by `id` using a Map before rendering. ## Review & Testing Checklist for Human This is a medium-risk change affecting core user-facing pages. Please verify: - [ ] **Infinite scroll works on all 4 pages** - Scroll to bottom and verify more items load automatically - [ ] **No duplicate items appear in search results** - After the fix, scrolling through many pages of search results should not show duplicates - [ ] **SSR hydration** - Verify no flash of loading state on initial page load (data should be pre-rendered) - [ ] **User profile tab switching** - Test switching between "Teams" and "Favorites" tabs; verify correct data loads - [ ] **Search debouncing** - Type quickly in JobSkillSelectionSidebar and SearchContent; verify queries aren't fired on every keystroke - [ ] **Error states** - Simulate network failure and verify retry button works **Recommended Test Plan:** 1. Navigate to `/teams/explore` - verify teams load and infinite scroll works 2. Navigate to a user profile page - verify teams load, switch to favorites tab, verify favorites load 3. Open the search sidebar - search for weapons/characters/summons, scroll through many pages, verify no duplicate key errors and no duplicate items 4. Open job skill selection - search and filter skills, verify results ### Notes - The Party component mutations migration (Follow-Up Prompt 5) was deferred to a follow-up PR due to complexity - Deprecated resource classes remain in codebase for now; removal planned for separate PR - Pre-existing paraglide module errors in build are unrelated to this PR - Type assertions (`as unknown as`, `as any`) are used to handle different query result structures between favorites and parties queries **Link to Devin run:** https://app.devin.ai/sessions/5aa7ea29edf34f569f95f13acee9e0d9 **Requested by:** Justin Edmund (justin@jedmund.com) / @jedmund --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Justin Edmund <justin@jedmund.com>
2025-11-29 01:11:24 -08:00 · 2025-11-29 01:11:24 -08:00 · f9bb43f214
commit f9bb43f214
parent 5764161803
5 changed files with 729 additions and 298 deletions
--- a/TANSTACK_QUERY_MIGRATION_CONTINUATION.md
+++ b/TANSTACK_QUERY_MIGRATION_CONTINUATION.md
@ -0,0 +1,217 @@
+# TanStack Query Migration - Continuation Guide
+
+This document provides context for continuing the TanStack Query v6 migration in hensei-web.
+
+## Migration Status
+
+### Completed (PR #441 - merged)
+- Query options factories: `party.queries.ts`, `job.queries.ts`, `user.queries.ts`, `search.queries.ts`
+- Mutation configurations: `party.mutations.ts`, `grid.mutations.ts`, `job.mutations.ts`
+- SSR utilities: `withInitialData`, `prefetchQuery`, `prefetchInfiniteQuery`
+- Example components: `JobSelectionSidebar.svelte`, `teams/[id]/+page.svelte`
+
+### Completed (PR #442 - pending merge)
+- `JobSkillSelectionSidebar.svelte` - Job skill search with infinite scroll
+- `SearchContent.svelte` - Search modal for weapons/characters/summons
+- `[username]/+page.svelte` - User profile page with teams/favorites tabs
+- `teams/explore/+page.svelte` - Public teams listing
+
+### Remaining Work
+
+#### Follow-Up Prompt 5: Party Component Mutations
+**Priority: High**
+**Complexity: Large**
+
+The `Party.svelte` component (1535 lines) needs to be migrated to use TanStack Query mutations instead of direct service calls.
+
+**Files to modify:**
+- `src/lib/components/party/Party.svelte`
+
+**Current state:** Uses `PartyService`, `GridService`, `ConflictService`, and direct `partyAdapter` calls.
+
+**Target state:** Use mutation hooks from:
+- `src/lib/api/mutations/party.mutations.ts` - `useUpdateParty`, `useDeleteParty`, `useRemixParty`, `useFavoriteParty`, `useUnfavoriteParty`, `useRegeneratePreview`
+- `src/lib/api/mutations/grid.mutations.ts` - `useCreateGridWeapon`, `useUpdateGridWeapon`, `useDeleteGridWeapon`, etc.
+- `src/lib/api/mutations/job.mutations.ts` - `useUpdatePartyJob`, `useUpdatePartyJobSkills`, `useRemovePartyJobSkill`, `useUpdatePartyAccessory`
+
+**Recommended sub-tasks:**
+1. **5a: Party metadata mutations** - name, description, visibility using `useUpdateParty`
+2. **5b: Grid weapon mutations** - add/update/delete weapons using grid mutations
+3. **5c: Grid character mutations** - add/update/delete characters using grid mutations
+4. **5d: Grid summon mutations** - add/update/delete summons using grid mutations
+5. **5e: Job and skill mutations** - job selection, skill management using job mutations
+
+**Key functions to migrate in Party.svelte:**
+- `updatePartyDetails()` - replace `partyService.update()` with `useUpdateParty().mutate()`
+- `toggleFavorite()` - replace `partyService.favorite()/unfavorite()` with `useFavoriteParty()/useUnfavoriteParty()`
+- `remixParty()` - replace `partyService.remix()` with `useRemixParty()`
+- `deleteParty()` - replace `partyService.delete()` with `useDeleteParty()`
+- `handleSelectJob()` - replace `partyAdapter.updateJob()` with `useUpdatePartyJob()`
+- `handleSelectJobSkill()` - replace `partyAdapter.updateJobSkills()` with `useUpdatePartyJobSkills()`
+- Drag-drop operations - replace `gridService.moveWeapon/Character/Summon()` with appropriate mutations
+
+#### Follow-Up Prompt 6: Remove Deprecated Resource Classes
+**Priority: Low**
+**Complexity: Small**
+**Prerequisite:** All components migrated away from resource classes
+
+**Files to delete:**
+- `src/lib/api/adapters/resources/search.resource.svelte.ts`
+- `src/lib/api/adapters/resources/party.resource.svelte.ts`
+- `src/lib/api/adapters/resources/job.resource.svelte.ts`
+- `src/lib/api/adapters/resources/infiniteScroll.resource.svelte.ts`
+
+**Steps:**
+1. Search for any remaining imports: `grep -r "from.*resources/" src/`
+2. Migrate any remaining usages
+3. Delete the resource files
+4. Update any barrel exports (index.ts files)
+5. Run build to verify no import errors
+
+**Current blockers:** `InfiniteScroll.svelte` still imports `InfiniteScrollResource` type
+
+## Patterns and Best Practices
+
+### Infinite Query Pattern
+```typescript
+import { createInfiniteQuery } from '@tanstack/svelte-query'
+import { IsInViewport } from 'runed'
+
+// Create the query with thunk for reactivity
+const query = createInfiniteQuery(() => ({
+  ...queryOptions.list(filters),
+  initialData: serverData ? {
+    pages: [{ results: serverData.items, page: 1, totalPages: serverData.totalPages }],
+    pageParams: [1]
+  } : undefined,
+  initialDataUpdatedAt: 0
+}))
+
+// Flatten and deduplicate results
+const rawResults = $derived(query.data?.pages.flatMap((page) => page.results) ?? [])
+const items = $derived(Array.from(new Map(rawResults.map((item) => [item.id, item])).values()))
+
+// Infinite scroll with IsInViewport
+let sentinelEl = $state<HTMLElement>()
+const inViewport = new IsInViewport(() => sentinelEl, { rootMargin: '200px' })
+
+$effect(() => {
+  if (inViewport.current && query.hasNextPage && !query.isFetchingNextPage && !query.isLoading) {
+    query.fetchNextPage()
+  }
+})
+```
+
+### Debounced Search Pattern
+```typescript
+let searchQuery = $state('')
+let debouncedSearchQuery = $state('')
+let debounceTimer: ReturnType<typeof setTimeout> | undefined
+
+$effect(() => {
+  const query = searchQuery
+  if (debounceTimer) clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => {
+    debouncedSearchQuery = query
+  }, 300)
+  return () => { if (debounceTimer) clearTimeout(debounceTimer) }
+})
+
+// Use debouncedSearchQuery in the query, not searchQuery
+const query = createInfiniteQuery(() => queryOptions.search(debouncedSearchQuery))
+```
+
+### Type Assertions for Conditional Queries
+When a query can return different types based on conditions, use type assertions:
+```typescript
+const query = createInfiniteQuery(() => {
+  if (condition) {
+    return queryOptionsA()
+  }
+  return queryOptionsB() as unknown as ReturnType<typeof queryOptionsA>
+})
+```
+
+### Mutation Pattern
+```typescript
+import { useUpdateParty } from '$lib/api/mutations/party.mutations'
+
+const updatePartyMutation = useUpdateParty()
+
+function handleSave() {
+  updatePartyMutation.mutate(
+    { partyId, updates },
+    {
+      onSuccess: () => { /* handle success */ },
+      onError: (error) => { /* handle error */ }
+    }
+  )
+}
+
+// Use mutation state for UI
+{#if updatePartyMutation.isPending}
+  <span>Saving...</span>
+{/if}
+```
+
+## Known Issues
+
+### Pre-existing Build Errors
+The build has pre-existing errors unrelated to TanStack Query migration:
+- `Cannot find module '$lib/paraglide/server'` in `hooks.server.ts`
+- `Cannot find module '$lib/paraglide/runtime'` in `hooks.ts`
+- `Cannot find module '$lib/paraglide/messages'` in various components
+
+These are paraglide i18n setup issues and should be ignored when checking for migration-related errors.
+
+### Duplicate Key Error Fix
+When using infinite queries, the API may return duplicate items across pages. Always deduplicate:
+```typescript
+const rawResults = $derived(query.data?.pages.flatMap((page) => page.results) ?? [])
+const items = $derived(Array.from(new Map(rawResults.map((item) => [item.id, item])).values()))
+```
+
+## File Locations
+
+### Query Options Factories
+- `src/lib/api/queries/party.queries.ts`
+- `src/lib/api/queries/job.queries.ts`
+- `src/lib/api/queries/user.queries.ts`
+- `src/lib/api/queries/search.queries.ts`
+
+### Mutation Hooks
+- `src/lib/api/mutations/party.mutations.ts`
+- `src/lib/api/mutations/grid.mutations.ts`
+- `src/lib/api/mutations/job.mutations.ts`
+
+### SSR Utilities
+- `src/lib/query/ssr.ts`
+
+### Reference Implementations
+- `src/lib/components/sidebar/JobSelectionSidebar.svelte` - Simple infinite query
+- `src/lib/components/sidebar/JobSkillSelectionSidebar.svelte` - Infinite query with search
+- `src/lib/components/sidebar/SearchContent.svelte` - Infinite query with filters and deduplication
+- `src/routes/teams/[id]/+page.svelte` - SSR with initialData
+- `src/routes/[username]/+page.svelte` - Conditional queries (teams vs favorites)
+- `src/routes/teams/explore/+page.svelte` - Simple infinite scroll page
+
+## Commands
+
+```bash
+# Run TypeScript check
+pnpm run check
+
+# Run development server
+pnpm run dev
+
+# Check for resource class imports
+grep -r "from.*resources/" src/
+
+# Check for createInfiniteScrollResource usage
+grep -r "createInfiniteScrollResource" src/
+```
+
+## Branch Information
+
+- Base branch: `svelte-main`
+- PR #442 branch: `devin/1764405731-tanstack-query-migration-phase2`
--- a/src/lib/components/sidebar/JobSkillSelectionSidebar.svelte
+++ b/src/lib/components/sidebar/JobSkillSelectionSidebar.svelte
@ -1,15 +1,16 @@
 <svelte:options runes={true} />

 <script lang="ts">
+	import { createInfiniteQuery } from '@tanstack/svelte-query'
 	import type { Job, JobSkill } from '$lib/types/api/entities'
 	import type { JobSkillList } from '$lib/types/api/party'
-	import { jobAdapter } from '$lib/api/adapters/job.adapter'
-	import { createInfiniteScrollResource } from '$lib/api/adapters/resources/infiniteScroll.resource.svelte'
+	import { jobQueries } from '$lib/api/queries/job.queries'
 	import JobSkillItem from '../job/JobSkillItem.svelte'
 	import Button from '../ui/Button.svelte'
 	import Input from '../ui/Input.svelte'
 	import Select from '../ui/Select.svelte'
 	import Icon from '../Icon.svelte'
+	import { IsInViewport } from 'runed'
 	import * as m from '$lib/paraglide/messages'

 	interface Props {
@ -41,101 +42,25 @@
 		{ value: 5, label: 'Base' }
 	]

-	// State
+	// State for filtering (local UI state, not server state)
 	let searchQuery = $state('')
 	let skillCategory = $state(-1) // -1 = All
 	let error = $state<string | undefined>()
-	let sentinelEl = $state<HTMLElement>()
-	let skillsResource = $state<ReturnType<typeof createInfiniteScrollResource<JobSkill>> | null>(null)
-	let lastSearchQuery = ''
-	let lastJobId: string | undefined
-	let lastCategory = -1

-	// Check if slot is locked
-	const slotLocked = $derived(targetSlot === 0)
-	const currentSkill = $derived(currentSkills[targetSlot as keyof JobSkillList])
-
-	const canSearch = $derived(Boolean(job) && !slotLocked)
-
-	// Manage resource creation and search updates
+	// Debounced search value for query
+	let debouncedSearchQuery = $state('')
 	let debounceTimer: ReturnType<typeof setTimeout> | undefined

-	function updateSearch(forceRebuild = false) {
-		const jobId = job?.id
-		const locked = slotLocked
-		const category = skillCategory
-
-		// Clean up if no job or locked
-		if (!jobId || locked) {
-			if (skillsResource) {
-				skillsResource.destroy()
-				skillsResource = null
-			}
-			lastJobId = undefined
-			lastSearchQuery = ''
-			lastCategory = -1
-			return
-		}
-
-		// Rebuild resource if job or category changed
-		const needsRebuild = forceRebuild || jobId !== lastJobId || category !== lastCategory
-
-		if (needsRebuild) {
-			if (skillsResource) {
-				skillsResource.destroy()
-			}
-
-			// Capture current values for the closure
-			const currentQuery = searchQuery
-			const currentCategory = category
-
-			const resource = createInfiniteScrollResource<JobSkill>({
-				fetcher: async (page) => {
-					const response = await jobAdapter.searchSkills({
-						query: currentQuery,
-						jobId,
-						page,
-						...(currentCategory >= 0 ? { filters: { group: currentCategory } } : {})
-					})
-					return response
-				},
-				threshold: 200,
-				debounceMs: 200
-			})
-
-			skillsResource = resource
-			lastJobId = jobId
-			lastSearchQuery = searchQuery
-			lastCategory = category
-			resource.load()
-		}
-		// Reload if only search query changed
-		else if (searchQuery !== lastSearchQuery && skillsResource) {
-			lastSearchQuery = searchQuery
-			// Need to rebuild to capture new query in closure
-			updateSearch(true)
-		}
-	}
-
-	// Watch for job and category changes
+	// Debounce search query changes
 	$effect(() => {
-		job // Track job
-		skillCategory // Track category
-		updateSearch()
-	})
-
-	// Watch for search query changes with debounce
-	$effect(() => {
-		const query = searchQuery // Track searchQuery
+		const query = searchQuery

 		if (debounceTimer) {
 			clearTimeout(debounceTimer)
 		}

 		debounceTimer = setTimeout(() => {
-			if (query !== lastSearchQuery) {
-				updateSearch()
-			}
+			debouncedSearchQuery = query
 		}, 300)

 		return () => {
@ -145,16 +70,60 @@
 		}
 	})

-	// Bind sentinel when ready
-	$effect(() => {
-		const sentinel = sentinelEl
-		const resource = skillsResource
+	// Check if slot is locked
+	const slotLocked = $derived(targetSlot === 0)
+	const currentSkill = $derived(currentSkills[targetSlot as keyof JobSkillList])
+	const canSearch = $derived(Boolean(job) && !slotLocked)

-		if (sentinel && resource) {
-			resource.bindSentinel(sentinel)
+	// TanStack Query v6: Use createInfiniteQuery with thunk pattern for reactivity
+	// Query automatically updates when job, debouncedSearchQuery, or skillCategory changes
+	const skillsQuery = createInfiniteQuery(() => {
+		const jobId = job?.id
+		const query = debouncedSearchQuery
+		const category = skillCategory
+
+		// Build filter params
+		const filters = category >= 0 ? { group: category } : undefined
+
+		return {
+			...jobQueries.skills(jobId ?? '', {
+				query: query || undefined,
+				filters
+			}),
+			// Disable query when no job or slot is locked
+			enabled: !!jobId && !slotLocked
 		}
 	})

+	// Flatten all pages into a single items array
+	const skills = $derived(skillsQuery.data?.pages.flatMap((page) => page.results) ?? [])
+
+	// Sentinel element for intersection observation
+	let sentinelEl = $state<HTMLElement>()
+
+	// Use runed's IsInViewport for viewport detection
+	const inViewport = new IsInViewport(() => sentinelEl, {
+		rootMargin: '200px'
+	})
+
+	// Auto-fetch next page when sentinel is visible
+	$effect(() => {
+		if (
+			inViewport.current &&
+			skillsQuery.hasNextPage &&
+			!skillsQuery.isFetchingNextPage &&
+			!skillsQuery.isLoading
+		) {
+			skillsQuery.fetchNextPage()
+		}
+	})
+
+	// Computed states
+	const isEmpty = $derived(skills.length === 0 && !skillsQuery.isLoading && !skillsQuery.isError)
+	const showSentinel = $derived(
+		!skillsQuery.isLoading && skillsQuery.hasNextPage && skills.length > 0
+	)
+
 	function handleSelectSkill(skill: JobSkill) {
 		// Clear any previous errors
 		error = undefined
@ -210,7 +179,7 @@
 		<div class="error-banner">
 			<Icon name="alert-circle" size={16} />
 			<p>{error}</p>
-			<button class="close-error" on:click={() => error = undefined}>
+			<button class="close-error" onclick={() => error = undefined}>
 				<Icon name="x" size={16} />
 			</button>
 		</div>
@ -243,44 +212,44 @@
 				<Icon name="briefcase" size={32} />
 				<p>Select a job first</p>
 			</div>
-	{:else if slotLocked}
-		<div class="empty-state">
-			<Icon name="arrow-left" size={32} />
-			<p>This slot cannot be changed</p>
-		</div>
-	{:else if skillsResource?.loading}
+		{:else if slotLocked}
+			<div class="empty-state">
+				<Icon name="arrow-left" size={32} />
+				<p>This slot cannot be changed</p>
+			</div>
+		{:else if skillsQuery.isLoading}
 			<div class="loading-state">
 				<Icon name="loader-2" size={32} />
 				<p>Loading skills...</p>
 			</div>
-		{:else if skillsResource?.error}
+		{:else if skillsQuery.isError}
 			<div class="error-state">
 				<Icon name="alert-circle" size={32} />
-				<p>{skillsResource.error.message || 'Failed to load skills'}</p>
-				<Button size="small" on:click={() => skillsResource?.retry()}>Retry</Button>
+				<p>{skillsQuery.error?.message || 'Failed to load skills'}</p>
+				<Button size="small" onclick={() => skillsQuery.refetch()}>Retry</Button>
 			</div>
 		{:else}
 			<div class="skills-list">
-				{#each skillsResource?.items || [] as skill (skill.id)}
+				{#each skills as skill (skill.id)}
 					<JobSkillItem
 						{skill}
 						onClick={() => handleSelectSkill(skill)}
 					/>
 				{/each}

-				{#if skillsResource?.isEmpty}
+				{#if isEmpty}
 					<div class="empty-state">
 						<Icon name="search-x" size={32} />
 						<p>No skills found</p>
 						{#if searchQuery || skillCategory >= 0}
 							<div class="clear-filters">
 								{#if searchQuery}
-									<Button size="small" variant="ghost" on:click={() => searchQuery = ''}>
+									<Button size="small" variant="ghost" onclick={() => searchQuery = ''}>
 										Clear search
 									</Button>
 								{/if}
 								{#if skillCategory >= 0}
-									<Button size="small" variant="ghost" on:click={() => skillCategory = -1}>
+									<Button size="small" variant="ghost" onclick={() => skillCategory = -1}>
 										Clear filter
 									</Button>
 								{/if}
@ -289,11 +258,11 @@
 					</div>
 				{/if}

-				{#if skillsResource?.hasMore && !skillsResource?.loadingMore}
+				{#if showSentinel}
 					<div class="load-more-sentinel" bind:this={sentinelEl}></div>
 				{/if}

-				{#if skillsResource?.loadingMore}
+				{#if skillsQuery.isFetchingNextPage}
 					<div class="loading-more">
 						<Icon name="loader-2" size={20} />
 						<span>Loading more skills...</span>
--- a/src/lib/components/sidebar/SearchContent.svelte
+++ b/src/lib/components/sidebar/SearchContent.svelte
@ -1,9 +1,12 @@
 <svelte:options runes={true} />

 <script lang="ts">
-	import { SearchAdapter } from '$lib/api/adapters/search.adapter'
+	import { createInfiniteQuery } from '@tanstack/svelte-query'
 	import type { SearchResult } from '$lib/api/adapters/search.adapter'
+	import { searchQueries, type SearchFilters } from '$lib/api/queries/search.queries'
 	import Button from '../ui/Button.svelte'
+	import Icon from '../Icon.svelte'
+	import { IsInViewport } from 'runed'
 	import { getCharacterImage, getWeaponImage, getSummonImage } from '$lib/features/database/detail/image'

 	interface Props {
@ -18,16 +21,10 @@
 		canAddMore = true
 	}: Props = $props()

-	// Search adapter
-	const searchAdapter = new SearchAdapter()
-
-	// Search state
+	// Search state (local UI state)
 	let searchQuery = $state('')
-	let searchResults = $state<SearchResult[]>([])
-	let isLoading = $state(false)
-	let currentPage = $state(1)
-	let totalPages = $state(1)
-	let hasInitialLoad = $state(false)
+	let debouncedSearchQuery = $state('')
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined

 	// Filter state
 	let elementFilters = $state<number[]>([])
@ -36,6 +33,7 @@

 	// Refs
 	let searchInput: HTMLInputElement
+	let sentinelEl = $state<HTMLElement>()

 	// Constants
 	const elements = [
@ -67,64 +65,95 @@
 		{ value: 10, label: 'Katana' }
 	]

+	// Debounce search query changes
+	$effect(() => {
+		const query = searchQuery
+
+		if (debounceTimer) {
+			clearTimeout(debounceTimer)
+		}
+
+		debounceTimer = setTimeout(() => {
+			debouncedSearchQuery = query
+		}, 300)
+
+		return () => {
+			if (debounceTimer) {
+				clearTimeout(debounceTimer)
+			}
+		}
+	})
+
+	// Build filters object for query
+	const filters = $derived<SearchFilters>({
+		element: elementFilters.length > 0 ? elementFilters : undefined,
+		rarity: rarityFilters.length > 0 ? rarityFilters : undefined,
+		proficiency: type === 'weapon' && proficiencyFilters.length > 0 ? proficiencyFilters : undefined
+	})
+
+	// TanStack Query v6: Use createInfiniteQuery with thunk pattern for reactivity
+	// Query automatically updates when type, debouncedSearchQuery, or filters change
+	// Note: Type assertion needed because different search types have different query keys
+	// but share the same SearchPageResult structure
+	const searchQueryResult = createInfiniteQuery(() => {
+		const query = debouncedSearchQuery
+		const currentFilters = filters
+
+		// Select the appropriate query based on type
+		// All query types return the same SearchPageResult structure
+		switch (type) {
+			case 'weapon':
+				return searchQueries.weapons(query, currentFilters)
+			case 'character':
+				return searchQueries.characters(query, currentFilters) as unknown as ReturnType<typeof searchQueries.weapons>
+			case 'summon':
+				return searchQueries.summons(query, currentFilters) as unknown as ReturnType<typeof searchQueries.weapons>
+		}
+	})
+
+	// Flatten all pages into a single items array
+	const rawResults = $derived(
+		searchQueryResult.data?.pages.flatMap((page) => page.results) ?? []
+	)
+
+	// Deduplicate by id - needed because the API may return the same item across pages
+	// (e.g., due to items being added/removed between page fetches)
+	const searchResults = $derived(
+		Array.from(new Map(rawResults.map((item) => [item.id, item])).values())
+	)
+
+	// Use runed's IsInViewport for viewport detection
+	const inViewport = new IsInViewport(() => sentinelEl, {
+		rootMargin: '200px'
+	})
+
+	// Auto-fetch next page when sentinel is visible
+	$effect(() => {
+		if (
+			inViewport.current &&
+			searchQueryResult.hasNextPage &&
+			!searchQueryResult.isFetchingNextPage &&
+			!searchQueryResult.isLoading
+		) {
+			searchQueryResult.fetchNextPage()
+		}
+	})
+
+	// Computed states
+	const isEmpty = $derived(
+		searchResults.length === 0 && !searchQueryResult.isLoading && !searchQueryResult.isError
+	)
+	const showSentinel = $derived(
+		!searchQueryResult.isLoading && searchQueryResult.hasNextPage && searchResults.length > 0
+	)
+
 	// Focus search input on mount
 	$effect(() => {
 		if (searchInput) {
 			searchInput.focus()
 		}
-		// Load recent items on mount
-		if (!hasInitialLoad) {
-			hasInitialLoad = true
-			performSearch()
-		}
 	})

-	// Search when query or filters change (debounced by adapter)
-	$effect(() => {
-		if (hasInitialLoad) {
-			performSearch()
-		}
-	})
-
-	async function performSearch() {
-		isLoading = true
-
-		try {
-			const params = {
-				query: searchQuery || '',
-				page: currentPage,
-				filters: {
-					element: elementFilters.length > 0 ? elementFilters : undefined,
-					rarity: rarityFilters.length > 0 ? rarityFilters : undefined,
-					proficiency1: type === 'weapon' && proficiencyFilters.length > 0 ? proficiencyFilters : undefined
-				}
-			}
-
-			let response
-			switch (type) {
-				case 'weapon':
-					response = await searchAdapter.searchWeapons(params)
-					break
-				case 'character':
-					response = await searchAdapter.searchCharacters(params)
-					break
-				case 'summon':
-					response = await searchAdapter.searchSummons(params)
-					break
-			}
-
-			if (response) {
-				searchResults = response.results || []
-				totalPages = response.totalPages || 1
-			}
-		} catch (error) {
-			console.error('Search failed:', error)
-			searchResults = []
-		} finally {
-			isLoading = false
-		}
-	}
-
 	function handleItemClick(item: SearchResult) {
 		if (canAddMore) {
 			onAddItems([item])
@ -248,8 +277,17 @@

 	<!-- Results -->
 	<div class="results-section">
-		{#if isLoading}
-			<div class="loading">Searching...</div>
+		{#if searchQueryResult.isLoading}
+			<div class="loading">
+				<Icon name="loader-2" size={24} />
+				<span>Searching...</span>
+			</div>
+		{:else if searchQueryResult.isError}
+			<div class="error-state">
+				<Icon name="alert-circle" size={24} />
+				<p>{searchQueryResult.error?.message || 'Search failed'}</p>
+				<Button size="small" onclick={() => searchQueryResult.refetch()}>Retry</Button>
+			</div>
 		{:else if searchResults.length > 0}
 			<ul class="results-list">
 				{#each searchResults as item (item.id)}
@ -281,31 +319,24 @@
 				{/each}
 			</ul>

-			{#if totalPages > 1}
-				<div class="pagination">
-					<Button
-						variant="ghost"
-						size="small"
-						onclick={() => currentPage = Math.max(1, currentPage - 1)}
-						disabled={currentPage === 1}
-					>
-						Previous
-					</Button>
-					<span class="page-info">Page {currentPage} of {totalPages}</span>
-					<Button
-						variant="ghost"
-						size="small"
-						onclick={() => currentPage = Math.min(totalPages, currentPage + 1)}
-						disabled={currentPage === totalPages}
-					>
-						Next
-					</Button>
+			{#if showSentinel}
+				<div class="load-more-sentinel" bind:this={sentinelEl}></div>
+			{/if}
+
+			{#if searchQueryResult.isFetchingNextPage}
+				<div class="loading-more">
+					<Icon name="loader-2" size={20} />
+					<span>Loading more...</span>
 				</div>
 			{/if}
-		{:else if searchQuery.length > 0}
-			<div class="no-results">No results found</div>
-		{:else}
-			<div class="no-results">Start typing to search</div>
+		{:else if isEmpty}
+			<div class="no-results">
+				{#if searchQuery.length > 0}
+					No results found
+				{:else}
+					Start typing to search
+				{/if}
+			</div>
 		{/if}
 	</div>
 </div>
@ -492,19 +523,58 @@
 			}
 		}

-		.pagination {
+		.loading {
 			display: flex;
-			justify-content: center;
+			flex-direction: column;
 			align-items: center;
-			gap: $unit-2x;
-			margin-top: $unit-2x;
-			padding-top: $unit-2x;
-			border-top: 1px solid var(--border-primary);
+			gap: $unit;

-			.page-info {
-				font-size: $font-small;
-				color: var(--text-secondary);
+			:global(svg) {
+				animation: spin 1s linear infinite;
+			}
+		}
+
+		.error-state {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: $unit;
+			padding: $unit-3x;
+			color: var(--text-secondary);
+
+			:global(svg) {
+				color: var(--text-tertiary);
+			}
+
+			p {
+				margin: 0;
+				font-size: $font-regular;
+			}
+		}
+
+		.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);
+			font-size: $font-regular;
+
+			:global(svg) {
+				animation: spin 1s linear infinite;
 			}
 		}
 	}
-</style>
+
+	@keyframes spin {
+		from { transform: rotate(0deg); }
+		to { transform: rotate(360deg); }
+	}
+</style>
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@ -1,52 +1,94 @@
 <script lang="ts">
 	import type { PageData } from './$types'
-	import { browser } from '$app/environment'
-	import InfiniteScroll from '$lib/components/InfiniteScroll.svelte'
+	import { createInfiniteQuery } from '@tanstack/svelte-query'
 	import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
-	import { createInfiniteScrollResource } from '$lib/api/adapters/resources/infiniteScroll.resource.svelte'
-	import { userAdapter } from '$lib/api/adapters/user.adapter'
+	import { userQueries } from '$lib/api/queries/user.queries'
 	import { getAvatarSrc, getAvatarSrcSet } from '$lib/utils/avatar'
+	import { IsInViewport } from 'runed'
+	import Icon from '$lib/components/Icon.svelte'
+	import Button from '$lib/components/ui/Button.svelte'

 	const { data } = $props() as { data: PageData }
-	const tab = data.tab || 'teams'
-	const isOwner = data.isOwner || false
+	const tab = $derived(data.tab || 'teams')
+	const isOwner = $derived(data.isOwner || false)

-	const avatarFile = data.user?.avatar?.picture || ''
-	const avatarSrc = getAvatarSrc(avatarFile)
-	const avatarSrcSet = getAvatarSrcSet(avatarFile)
+	const avatarFile = $derived(data.user?.avatar?.picture || '')
+	const avatarSrc = $derived(getAvatarSrc(avatarFile))
+	const avatarSrcSet = $derived(getAvatarSrcSet(avatarFile))

-	// Create infinite scroll resource for profile parties
-	const profileResource = createInfiniteScrollResource({
-		fetcher: async (page) => {
-			if (tab === 'favorites' && isOwner) {
-				const response = await userAdapter.getFavorites({ page })
-				return {
-					results: response.items,
-					page: response.page,
-					total: response.total,
-					totalPages: response.totalPages,
-					perPage: response.perPage
-				}
+	// Note: Type assertion needed because favorites and parties queries have different
+	// result structures (items vs results) but we handle both in the items $derived
+	const partiesQuery = createInfiniteQuery(() => {
+		const isFavorites = tab === 'favorites' && isOwner
+
+		if (isFavorites) {
+			return {
+				...userQueries.favorites(),
+				initialData: data.items
+					? {
+							pages: [
+								{
+									items: data.items,
+									page: data.page || 1,
+									totalPages: data.totalPages,
+									total: data.total,
+									perPage: data.perPage || 20
+								}
+							],
+							pageParams: [1]
+						}
+					: undefined,
+				initialDataUpdatedAt: 0
 			}
-			return userAdapter.getProfileParties(data.user.username, page)
-		},
-		initialData: data.items,
-		initialPage: data.page || 1,
-		initialTotalPages: data.totalPages,
-		initialTotal: data.total,
-		threshold: 300,
-		debounceMs: 200
+		}
+
+		return {
+			...userQueries.parties(data.user?.username ?? ''),
+			enabled: !!data.user?.username,
+			initialData: data.items
+				? {
+						pages: [
+							{
+								results: data.items,
+								page: data.page || 1,
+								totalPages: data.totalPages,
+								total: data.total,
+								perPage: data.perPage || 20
+							}
+						],
+						pageParams: [1]
+					}
+				: undefined,
+			initialDataUpdatedAt: 0
+		} as unknown as ReturnType<typeof userQueries.favorites>
+	})
+
+	const items = $derived(() => {
+		if (!partiesQuery.data?.pages) return data.items || []
+		const isFavorites = tab === 'favorites' && isOwner
+		if (isFavorites) {
+			return partiesQuery.data.pages.flatMap((page) => (page as any).items ?? [])
+		}
+		return partiesQuery.data.pages.flatMap((page) => (page as any).results ?? [])
+	})
+
+	const isEmpty = $derived(!partiesQuery.isLoading && items().length === 0)
+	const showSentinel = $derived(partiesQuery.hasNextPage && !partiesQuery.isFetchingNextPage)
+
+	let sentinelEl = $state<HTMLElement>()
+
+	const inViewport = new IsInViewport(() => sentinelEl, {
+		rootMargin: '300px'
 	})

-	// Initialize with SSR data on client
 	$effect(() => {
-		if (browser && data.items && !profileResource.items.length) {
-			profileResource.initFromSSR({
-				items: data.items,
-				page: data.page || 1,
-				totalPages: data.totalPages,
-				total: data.total
-			})
+		if (
+			inViewport.current &&
+			partiesQuery.hasNextPage &&
+			!partiesQuery.isFetchingNextPage &&
+			!partiesQuery.isLoading
+		) {
+			partiesQuery.fetchNextPage()
 		}
 	})
 </script>
@ -82,27 +124,43 @@
 		</div>
 	</header>

-	<InfiniteScroll resource={profileResource} class="profile-grid">
-		<ExploreGrid items={profileResource.items} />
+	{#if partiesQuery.isLoading}
+		<div class="loading">
+			<Icon name="loader-2" size={32} />
+			<p>Loading {tab}...</p>
+		</div>
+	{:else if partiesQuery.isError}
+		<div class="error">
+			<Icon name="alert-circle" size={32} />
+			<p>Failed to load {tab}: {partiesQuery.error?.message || 'Unknown error'}</p>
+			<Button size="small" onclick={() => partiesQuery.refetch()}>Retry</Button>
+		</div>
+	{:else if isEmpty}
+		<div class="empty">
+			<p>{tab === 'favorites' ? 'No favorite teams yet' : 'No teams found'}</p>
+		</div>
+	{:else}
+		<div class="profile-grid">
+			<ExploreGrid items={items()} />

-		{#snippet emptySnippet()}
-			<div class="empty">
-				<p>{tab === 'favorites' ? 'No favorite teams yet' : 'No teams found'}</p>
-			</div>
-		{/snippet}
+			{#if showSentinel}
+				<div class="load-more-sentinel" bind:this={sentinelEl}></div>
+			{/if}

-		{#snippet endSnippet()}
-			<div class="end">
-				<p>You've seen all {tab === 'favorites' ? 'favorites' : 'teams'}!</p>
-			</div>
-		{/snippet}
+			{#if partiesQuery.isFetchingNextPage}
+				<div class="loading-more">
+					<Icon name="loader-2" size={20} />
+					<span>Loading more...</span>
+				</div>
+			{/if}

-		{#snippet errorSnippet(error)}
-			<div class="error">
-				<p>Failed to load {tab}: {error.message || 'Unknown error'}</p>
-			</div>
-		{/snippet}
-	</InfiniteScroll>
+			{#if !partiesQuery.hasNextPage && items().length > 0}
+				<div class="end">
+					<p>You've seen all {tab === 'favorites' ? 'favorites' : 'teams'}!</p>
+				</div>
+			{/if}
+		</div>
+	{/if}
 </section>

 <style lang="scss">
@ -161,4 +219,45 @@
 	.error {
 		color: var(--text-error, #dc2626);
 	}
+
+	.loading {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: $unit;
+		padding: $unit-4x;
+		color: var(--text-secondary);
+
+		:global(svg) {
+			animation: spin 1s linear infinite;
+		}
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.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);
+
+		:global(svg) {
+			animation: spin 1s linear infinite;
+		}
+	}
+
+	@keyframes spin {
+		from { transform: rotate(0deg); }
+		to { transform: rotate(360deg); }
+	}
 </style>
--- a/src/routes/teams/explore/+page.svelte
+++ b/src/routes/teams/explore/+page.svelte
@ -1,35 +1,54 @@
 <script lang="ts">
  import type { PageData } from './$types'
-  import { browser } from '$app/environment'
-  import InfiniteScroll from '$lib/components/InfiniteScroll.svelte'
+  import { createInfiniteQuery } from '@tanstack/svelte-query'
  import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
-  import { createInfiniteScrollResource } from '$lib/api/adapters/resources/infiniteScroll.resource.svelte'
-  import { partyAdapter } from '$lib/api/adapters/party.adapter'
+  import { partyQueries } from '$lib/api/queries/party.queries'
+  import { IsInViewport } from 'runed'
+  import Icon from '$lib/components/Icon.svelte'
+  import Button from '$lib/components/ui/Button.svelte'

  const { data } = $props() as { data: PageData }

-  // Create infinite scroll resource
-  const exploreResource = createInfiniteScrollResource({
-    fetcher: (page) => partyAdapter.list({ page }),
-    initialData: data.items,
-    initialPage: data.page || 1,
-    initialTotalPages: data.totalPages,
-    initialTotal: data.total,
-    threshold: 300,
-    debounceMs: 200,
-    maxItems: 500, // Limit for performance
-    debug: false // Disable debug logging
+  const partiesQuery = createInfiniteQuery(() => ({
+    ...partyQueries.list(),
+    initialData: data.items
+      ? {
+          pages: [
+            {
+              results: data.items,
+              page: data.page || 1,
+              totalPages: data.totalPages,
+              total: data.total,
+              perPage: data.perPage || 20
+            }
+          ],
+          pageParams: [1]
+        }
+      : undefined,
+    initialDataUpdatedAt: 0
+  }))
+
+  const items = $derived(
+    partiesQuery.data?.pages.flatMap((page) => page.results) ?? data.items ?? []
+  )
+
+  const isEmpty = $derived(!partiesQuery.isLoading && items.length === 0)
+  const showSentinel = $derived(partiesQuery.hasNextPage && !partiesQuery.isFetchingNextPage)
+
+  let sentinelEl = $state<HTMLElement>()
+
+  const inViewport = new IsInViewport(() => sentinelEl, {
+    rootMargin: '300px'
  })

-  // Initialize with SSR data on client
  $effect(() => {
-    if (browser && data.items && !exploreResource.items.length) {
-      exploreResource.initFromSSR({
-        items: data.items,
-        page: data.page || 1,
-        totalPages: data.totalPages,
-        total: data.total
-      })
+    if (
+      inViewport.current &&
+      partiesQuery.hasNextPage &&
+      !partiesQuery.isFetchingNextPage &&
+      !partiesQuery.isLoading
+    ) {
+      partiesQuery.fetchNextPage()
    }
  })
 </script>
@ -39,27 +58,43 @@
    <h1>Explore Teams</h1>
  </header>

-  <InfiniteScroll resource={exploreResource} class="explore-grid">
-    <ExploreGrid items={exploreResource.items} />
+  {#if partiesQuery.isLoading}
+    <div class="loading">
+      <Icon name="loader-2" size={32} />
+      <p>Loading teams...</p>
+    </div>
+  {:else if partiesQuery.isError}
+    <div class="error">
+      <Icon name="alert-circle" size={32} />
+      <p>Failed to load teams: {partiesQuery.error?.message || 'Unknown error'}</p>
+      <Button size="small" onclick={() => partiesQuery.refetch()}>Retry</Button>
+    </div>
+  {:else if isEmpty}
+    <div class="empty">
+      <p>No teams found</p>
+    </div>
+  {:else}
+    <div class="explore-grid">
+      <ExploreGrid items={items} />

-    {#snippet emptySnippet()}
-      <div class="empty">
-        <p>No teams found</p>
-      </div>
-    {/snippet}
+      {#if showSentinel}
+        <div class="load-more-sentinel" bind:this={sentinelEl}></div>
+      {/if}

-    {#snippet endSnippet()}
-      <div class="end">
-        <p>You've reached the end of all teams!</p>
-      </div>
-    {/snippet}
+      {#if partiesQuery.isFetchingNextPage}
+        <div class="loading-more">
+          <Icon name="loader-2" size={20} />
+          <span>Loading more...</span>
+        </div>
+      {/if}

-    {#snippet errorSnippet(error)}
-      <div class="error">
-        <p>Failed to load teams: {error.message || 'Unknown error'}</p>
-      </div>
-    {/snippet}
-  </InfiniteScroll>
+      {#if !partiesQuery.hasNextPage && items.length > 0}
+        <div class="end">
+          <p>You've reached the end of all teams!</p>
+        </div>
+      {/if}
+    </div>
+  {/if}
 </section>

 <style lang="scss">
@ -89,4 +124,45 @@
  .error {
    color: var(--text-error, #dc2626);
  }
+
+  .loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: $unit;
+    padding: $unit-4x;
+    color: var(--text-secondary);
+
+    :global(svg) {
+      animation: spin 1s linear infinite;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .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);
+
+    :global(svg) {
+      animation: spin 1s linear infinite;
+    }
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
 </style>