How trakt/trakt-web works
Trakt Web is a SvelteKit frontend for browsing media and viewing personal media insights. The main evidenced runtime path is user-facing lists consuming paginated query results; other documented-by-tree capabilities include media presentation, account actions, streaming-service management, analytics, and preview-feature state. The sampled files establish query and streaming-action wiring, but not route composition or the full request-to-API implementation, so those connections are left out where ownership is unclear.
Main entry points: useQuery.ts Query observables · useStreamingServicesActions.ts Streaming settings actions · safeStorage.ts Safe browser storage · useStreamingServiceOptions.ts Streaming filters
Components 23
Client foundation
- SvelteKit client
projects/client/src - Preview feature state
projects/client/src/lib/features/feature-flag/useUnreadPreviewFeatures.ts - WebView session keys
projects/client/src/lib/features/webview/webviewStorageKey.ts - Review banners
projects/client/src/lib/sections/banner/_internal/useReviewBanners.ts
Browse and media
- Paginated list state
projects/client/src/lib/sections/lists/stores/usePaginatedListQuery.ts - Lists and navigation
projects/client/src/lib/components/lists - Media presentation
projects/client/src/lib/components/media - Media actions
projects/client/src/lib/components/buttons - Media visualizations
projects/client/src/lib/components/charts - Streaming filters
projects/client/src/lib/sections/navbar/components/filter/filters/_internal/useStreamingServiceOptions.ts - Service branding
projects/client/src/lib/components/media/streaming-service/useStreamingServiceLogo.ts
Account and streaming
- Streaming settings actions
projects/client/src/lib/sections/settings/_internal/streaming-services/useStreamingServicesActions.ts - Confirmation flow
projects/client/src/lib/features/confirmation - Streaming preferences
projects/client/src/lib/stores/useStreamingPreferences.ts
Client services
- Query provider
projects/client/src/lib/features/query/QueryClientProvider.svelte - Query client context
projects/client/src/lib/features/query/_internal/queryClientContext.ts - Query observables
projects/client/src/lib/features/query/useQuery.ts - Request modules
projects/client/src/lib/requests - Analytics batching
projects/client/src/lib/features/analytics/_internal/createHalEngine.ts - Safe browser storage
projects/client/src/lib/utils/storage/safeStorage.ts
Other components
- Web user
- Streaming provider
- HAL analytics service
Connections 18
- Web user → SvelteKit client: uses
- SvelteKit client → Query provider: provides
- Query provider → Query client context: sets context
- Query observables → Query client context: gets client
- Paginated list state → Query observables: queries pages
- Lists and navigation → Paginated list state: consumes list
- Streaming filters → Query observables: queries sources
- Service branding → Query observables: queries sources
- Streaming filters → Streaming preferences: reads preferences
- Service branding → Streaming preferences: reads country
- Streaming settings actions → Request modules: sends sync requests
- Streaming settings actions → Confirmation flow: requests confirmation
- Streaming settings actions → Streaming provider: redirects to connect
- Query observables → Request modules: uses query functions
- Analytics batching → HAL analytics service: sends batches
- Preview feature state → Safe browser storage: persists read state
- WebView session keys → Safe browser storage: defines storage key
- Review banners → Safe browser storage: uses dismissal state