feat(pwa): expose isQueued state for offline tracking actions

Adds useIsQueued, which resolves whether a not-yet-synced offline action
covers a given media key set, and threads an isQueued observable out of the
mark-as-watched, watchlist, favorite, and rating hooks. Distinct from
isLoading: a queued action is settled locally but pending server sync.

Author: vladjerca

projects/client/src/lib/features/offline/useIsQueued.spec.ts

@@ -0,0 +1,50 @@
+import { buildOfflineAction } from '$test/beds/offline/buildOfflineAction.ts';
+import { filter, firstValueFrom } from 'rxjs';
+import { afterEach, describe, expect, it } from 'vitest';
+import { offlineActionsStore } from './_internal/offlineActionsStore.ts';
+import { useIsQueued } from './useIsQueued.ts';
+
+async function drainQueue() {
+  const ids = offlineActionsStore.current().map(({ id }) => id);
+  await offlineActionsStore.remove(ids);
+}
+
+describe('store: useIsQueued', () => {
+  afterEach(drainQueue);
+
+  it('should be false with an empty queue', async () => {
+    const { isQueued } = useIsQueued({ domain: 'history', keys: ['movie:1'] });
+
+    expect(await firstValueFrom(isQueued)).toBe(false);
+  });
+
+  it('should be true when a queued action covers the keys', async () => {
+    const { isQueued } = useIsQueued({ domain: 'history', keys: ['movie:1'] });
+
+    await offlineActionsStore.enqueue(
+      buildOfflineAction({ endpoint: 'history:add', keys: ['movie:1'] }),
+    );
+
+    expect(await firstValueFrom(isQueued.pipe(filter(Boolean)))).toBe(true);
+  });
+
+  it('should ignore queued actions from another domain', async () => {
+    const { isQueued } = useIsQueued({ domain: 'history', keys: ['movie:1'] });
+
+    await offlineActionsStore.enqueue(
+      buildOfflineAction({ endpoint: 'watchlist:add', keys: ['movie:1'] }),
+    );
+
+    expect(await firstValueFrom(isQueued)).toBe(false);
+  });
+
+  it('should ignore queued actions for other keys', async () => {
+    const { isQueued } = useIsQueued({ domain: 'history', keys: ['movie:1'] });
+
+    await offlineActionsStore.enqueue(
+      buildOfflineAction({ endpoint: 'history:add', keys: ['movie:2'] }),
+    );
+
+    expect(await firstValueFrom(isQueued)).toBe(false);
+  });
+});

projects/client/src/lib/features/offline/useIsQueued.ts

@@ -0,0 +1,27 @@
+import { map, type Observable } from 'rxjs';
+import { findPendingOverride } from './findPendingOverride.ts';
+import type { OfflineActionDomain } from './models/OfflineActionEndpoint.ts';
+import { useOfflineActions } from './useOfflineActions.ts';
+
+type UseIsQueuedParams = {
+  domain: OfflineActionDomain;
+  keys: string[];
+};
+
+/**
+ * True while a queued (not-yet-synced) offline action covers these media
+ * keys - lets the UI flag the action as pending rather than just disabled.
+ */
+export function useIsQueued(
+  { domain, keys }: UseIsQueuedParams,
+): { isQueued: Observable<boolean> } {
+  const { actions } = useOfflineActions();
+
+  const isQueued = actions.pipe(
+    map((queued) =>
+      findPendingOverride({ actions: queued, domain, keys }) != null
+    ),
+  );
+
+  return { isQueued };
+}

projects/client/src/lib/sections/media-actions/favorite/useFavorites.ts

@@ -3,6 +3,7 @@ import { executeOrEnqueue } from '$lib/features/offline/executeOrEnqueue.ts';
 import { findPendingOverride } from '$lib/features/offline/findPendingOverride.ts';
 import { isAddEndpoint } from '$lib/features/offline/isAddEndpoint.ts';
 import { toMediaKey } from '$lib/features/offline/toMediaKey.ts';
+import { useIsQueued } from '$lib/features/offline/useIsQueued.ts';
 import { useOfflineActions } from '$lib/features/offline/useOfflineActions.ts';
 import { InvalidateAction } from '$lib/requests/models/InvalidateAction.ts';
 import type { MediaType } from '$lib/requests/models/MediaType.ts';
@@ -31,6 +32,10 @@ export function useFavorites({ type, id }: FavoritesStoreProps) {
   const { favorites } = useUser();
   const { invalidate } = useInvalidator();
   const { actions } = useOfflineActions();
+  const { isQueued } = useIsQueued({
+    domain: 'favorites',
+    keys: [toMediaKey(type, id)],
+  });
 
   const isFavorited = combineLatest([favorites, actions]).pipe(
     map(([$favorites, $actions]) => {
@@ -71,13 +76,17 @@ export function useFavorites({ type, id }: FavoritesStoreProps) {
 
     if (result === 'executed') {
       await invalidate(InvalidateAction.Favorited(type));
-      isUpdatingFavorite.next(false);
     }
+
+    // Always clear: a queued action stays flagged via isQueued, and leaving
+    // this pinned would re-disable the button once it syncs and dequeues.
+    isUpdatingFavorite.next(false);
   };
 
   return {
     isUpdatingFavorite,
     isFavorited,
+    isQueued,
     addToFavorites: async () => await addOrRemoveFavorite('add'),
     removeFromFavorites: async () => await addOrRemoveFavorite('remove'),
   };

projects/client/src/lib/sections/media-actions/mark-as-watched/useMarkAsWatched.ts

@@ -3,6 +3,7 @@ import { useTrack } from '$lib/features/analytics/useTrack.ts';
 import { useUser } from '$lib/features/auth/stores/useUser.ts';
 import { executeOrEnqueue } from '$lib/features/offline/executeOrEnqueue.ts';
 import { toMediaKey } from '$lib/features/offline/toMediaKey.ts';
+import { useIsQueued } from '$lib/features/offline/useIsQueued.ts';
 import type { MediaStoreProps } from '$lib/models/MediaStoreProps.ts';
 import { InvalidateAction } from '$lib/requests/models/InvalidateAction.ts';
 import type { MediaStatus } from '$lib/requests/models/MediaStatus.ts';
@@ -31,6 +32,7 @@ export function useMarkAsWatched(
   const { track } = useTrack(AnalyticsEvent.MarkAsWatched);
 
   const { isWatched } = useIsWatched(props);
+  const { isQueued } = useIsQueued({ domain: 'history', keys: mediaKeys });
 
   const markAsWatched = async (watchedAt?: MarkAsWatchedAt) => {
     const current = await resolve(user);
@@ -53,8 +55,11 @@ export function useMarkAsWatched(
 
     if (result === 'executed') {
       await invalidate(InvalidateAction.MarkAsWatched(type));
-      isMarkingAsWatched.next(false);
     }
+
+    // Always clear: a queued action stays flagged via isQueued, and leaving
+    // this pinned would re-disable the button once it syncs and dequeues.
+    isMarkingAsWatched.next(false);
   };
 
   // Ids whose rating this removal orphans. The main action removes *every*
@@ -122,8 +127,9 @@ export function useMarkAsWatched(
 
     if (removeResult === 'executed') {
       await invalidate(InvalidateAction.MarkAsWatched(type));
-      isMarkingAsWatched.next(false);
     }
+
+    isMarkingAsWatched.next(false);
   };
 
   const isWatchable = media.every((item) => {
@@ -138,6 +144,7 @@ export function useMarkAsWatched(
     removeWatched,
     isWatched,
     isMarkingAsWatched,
+    isQueued,
     isWatchable,
   };
 }

projects/client/src/lib/sections/media-actions/watchlist/useWatchlist.ts

@@ -2,6 +2,7 @@ import { AnalyticsEvent } from '$lib/features/analytics/events/AnalyticsEvent.ts
 import { useTrack } from '$lib/features/analytics/useTrack.ts';
 import { executeOrEnqueue } from '$lib/features/offline/executeOrEnqueue.ts';
 import { toMediaKey } from '$lib/features/offline/toMediaKey.ts';
+import { useIsQueued } from '$lib/features/offline/useIsQueued.ts';
 import type { MediaStoreProps } from '$lib/models/MediaStoreProps.ts';
 import { InvalidateAction } from '$lib/requests/models/InvalidateAction.ts';
 import { toBulkPayload } from '$lib/sections/media-actions/_internal/toBulkPayload.ts';
@@ -19,6 +20,10 @@ export function useWatchlist(props: MediaStoreProps) {
   const ids = media.map(({ id }) => id);
 
   const { isWatchlisted } = useIsWatchlisted(props);
+  const { isQueued } = useIsQueued({
+    domain: 'watchlist',
+    keys: ids.map((id) => toMediaKey(type, id)),
+  });
   const body = toBulkPayload(type, ids);
 
   const addToWatchlist = async () => {
@@ -38,8 +43,11 @@ export function useWatchlist(props: MediaStoreProps) {
 
     if (addResult === 'executed') {
       await invalidate(InvalidateAction.Watchlisted(type));
-      isWatchlistUpdating.next(false);
     }
+
+    // Always clear: a queued action stays flagged via isQueued, and leaving
+    // this pinned would re-disable the button once it syncs and dequeues.
+    isWatchlistUpdating.next(false);
   };
 
   const removeFromWatchlist = async () => {
@@ -59,13 +67,15 @@ export function useWatchlist(props: MediaStoreProps) {
 
     if (removeResult === 'executed') {
       await invalidate(InvalidateAction.Watchlisted(type));
-      isWatchlistUpdating.next(false);
     }
+
+    isWatchlistUpdating.next(false);
   };
 
   return {
     isWatchlistUpdating,
     isWatchlisted,
+    isQueued,
     addToWatchlist,
     removeFromWatchlist,
   };

projects/client/src/lib/sections/summary/components/rating/useRatings.ts

@@ -7,6 +7,7 @@ import { findPendingOverride } from '$lib/features/offline/findPendingOverride.t
 import { isAddEndpoint } from '$lib/features/offline/isAddEndpoint.ts';
 import type { OfflineAction } from '$lib/features/offline/models/OfflineAction.ts';
 import { toMediaKey } from '$lib/features/offline/toMediaKey.ts';
+import { useIsQueued } from '$lib/features/offline/useIsQueued.ts';
 import { useOfflineActions } from '$lib/features/offline/useOfflineActions.ts';
 import { useLastWatched } from '$lib/features/toast/useLastWatched.ts';
 import {
@@ -81,6 +82,10 @@ export function useRatings({ type, id }: WatchlistStoreProps) {
   const { dismiss } = useLastWatched();
 
   const { actions } = useOfflineActions();
+  const { isQueued } = useIsQueued({
+    domain: 'rating',
+    keys: [toMediaKey(type, id)],
+  });
 
   const rating = combineLatest([ratings, actions]).pipe(
     map(([$ratings, $actions]) => {
@@ -183,12 +188,15 @@ export function useRatings({ type, id }: WatchlistStoreProps) {
     });
     if (addResult === 'executed') {
       await invalidate(InvalidateAction.Rated(type));
-      pendingRating.next(null);
-      isSubmitting.next(false);
       if (type !== 'season') {
         dismiss(id, type, 'rating');
       }
     }
+
+    // Always clear: a queued rating stays flagged via isQueued, and leaving
+    // these pinned would re-disable the stars once it syncs and dequeues.
+    pendingRating.next(null);
+    isSubmitting.next(false);
   });
 
   const addRating = (newRating: number) => {
@@ -216,6 +224,7 @@ export function useRatings({ type, id }: WatchlistStoreProps) {
   return {
     pendingRating,
     isSubmitting,
+    isQueued,
     current,
     addRating,
     removeRating,