refactor(lists): extract user list summary into a shared store

relocates the user list summary fetching logic from a route-specific file to a shared hook in the lists section. updates the pinned list component and the list page to use this centralized hook for improved reusability and consistency.

Author: vladjerca

projects/client/src/lib/sections/lists/user/PinnedList.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
   import type { DiscoverMode } from "$lib/features/discover/models/DiscoverMode.ts";
-  import { useQuery } from "$lib/features/query/useQuery.ts";
-  import { userListSummaryQuery } from "$lib/requests/queries/users/userListSummaryQuery.ts";
   import UserList from "./UserList.svelte";
+  import { useUserListSummary } from "./useUserListSummary.ts";
 
   type PinnedListProps = {
     userId: string;
     listId: string;
     mode?: DiscoverMode;
   };
 
-  const { userId, listId, mode }: PinnedListProps = $props();
+  const { userId, listId, mode = "media" }: PinnedListProps = $props();
 
-  const query = useQuery(userListSummaryQuery({ userId, listId }));
+  const { list, isLoading } = $derived(
+    useUserListSummary({
+      userId,
+      listId,
+    }),
+  );
 </script>
 
-{#if $query && $query.data}
+{#if !$isLoading && $list}
   <div class="trakt-pinned-list">
-    <UserList list={$query.data} type={mode} />
+    <UserList list={$list} type={mode} />
   </div>
 {/if}
 

…s/[user]/lists/[list]/userListSummary.ts …ections/lists/user/useUserListSummary.tsprojects/client/src/routes/users/[user]/lists/[list]/userListSummary.ts renamed to projects/client/src/lib/sections/lists/user/useUserListSummary.ts projects/client/src/routes/users/[user]/lists/[list]/userListSummary.ts renamed to projects/client/src/lib/sections/lists/user/useUserListSummary.ts

@@ -9,7 +9,7 @@ type UseUserListSummaryProps = {
   listId: string;
 };
 
-export function userListSummary(props: UseUserListSummaryProps) {
+export function useUserListSummary(props: UseUserListSummaryProps) {
   const query = useQuery(userListSummaryQuery(props));
 
   return {

projects/client/src/routes/users/[user]/lists/[list]/+page.svelte

@@ -3,16 +3,16 @@
   import TraktPage from "$lib/sections/layout/TraktPage.svelte";
   import TraktPageCoverSetter from "$lib/sections/layout/TraktPageCoverSetter.svelte";
   import UserListPaginatedList from "$lib/sections/lists/user/UserListPaginatedList.svelte";
+  import { useUserListSummary } from "$lib/sections/lists/user/useUserListSummary.ts";
   import NavbarStateSetter from "$lib/sections/navbar/NavbarStateSetter.svelte";
   import { DEFAULT_SHARE_COVER } from "$lib/utils/constants";
   import type { PageProps } from "./$types";
   import { mapToMediaType } from "./_internal/mapToMediaType";
-  import { userListSummary } from "./userListSummary.ts";
 
   const { params }: PageProps = $props();
 
   const { list } = $derived(
-    userListSummary({
+    useUserListSummary({
       userId: params.user,
       listId: params.list,
     }),