feat(pwa): flag queued offline actions with a pending pill

Renders a yellow 'Queued' pill next to text/dropdown tracking controls and a
corner dot on icon-only action buttons whenever isQueued is set, so an action
saved offline reads as pending rather than merely disabled. A queued action
also un-sticks the control (Sefer's change pins isUpdating until sync) so the
user can still toggle it back. Adds the queued-tag color tokens and i18n.

Author: vladjerca

projects/client/i18n/meta/en.json

@@ -9070,6 +9070,14 @@
       "default": "Add the offline plays anyway",
       "description": "Accessible label for the button confirming that duplicate offline watches should be replayed."
     },
+    "tag_text_queued": {
+      "default": "Queued",
+      "description": "Pill label on a tracking action (watched, watchlist, rating, favorite) that was saved offline and is waiting to sync."
+    },
+    "label_queued_action": {
+      "default": "Saved offline, waiting to sync",
+      "description": "Accessible label / tooltip for the queued indicator shown on an action that was saved offline."
+    },
     "error_text_sync_load_failed": {
       "default": "We couldn't load this right now. Please try again.",
       "description": "Inline error message shown when a streaming sync detail or its items fail to load."

projects/client/src/lib/components/badge/QueuedIndicator.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import * as m from "$lib/features/i18n/messages.ts";
+  import type { Snippet } from "svelte";
+
+  type QueuedIndicatorProps = {
+    isQueued: boolean;
+    children: Snippet;
+  };
+
+  const { isQueued, children }: QueuedIndicatorProps = $props();
+</script>
+
+<div class="trakt-queued-indicator" class:is-queued={isQueued}>
+  {@render children()}
+  {#if isQueued}
+    <span class="queued-dot" role="status" aria-label={m.label_queued_action()}
+    ></span>
+  {/if}
+</div>
+
+<style lang="scss">
+  .trakt-queued-indicator {
+    position: relative;
+    display: inline-flex;
+
+    // A queued action disables its button. Chromium ignores `cursor` on a
+    // disabled <button> and falls back to the ancestor's, so set it here to
+    // cover the whole control (not just the icon, which inherits it).
+    &.is-queued {
+      cursor: not-allowed;
+    }
+
+    .queued-dot {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+
+      width: var(--ni-10);
+      height: var(--ni-10);
+      box-sizing: border-box;
+
+      border-radius: 50%;
+      background-color: var(--color-background-queued-tag);
+      border: var(--border-thickness-xs) solid var(--color-background);
+
+      pointer-events: none;
+    }
+  }
+</style>

projects/client/src/lib/components/badge/QueuedTag.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import * as m from "$lib/features/i18n/messages.ts";
+  import StemTag from "../tags/StemTag.svelte";
+  import Tooltip from "../tooltip/Tooltip.svelte";
+</script>
+
+<Tooltip content={m.label_queued_action()}>
+  <div class="trakt-queued-tag" role="status" aria-label={m.label_queued_action()}>
+    <StemTag
+      --color-background-stem-tag="var(--color-background-queued-tag)"
+      --color-foreground-stem-tag="var(--color-text-queued-tag)"
+      text={m.tag_text_queued()}
+    />
+  </div>
+</Tooltip>
+
+<style>
+  .trakt-queued-tag {
+    user-select: none;
+  }
+</style>

projects/client/src/lib/components/buttons/favorite/FavoriteButton.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import QueuedIndicator from "$lib/components/badge/QueuedIndicator.svelte";
+  import QueuedTag from "$lib/components/badge/QueuedTag.svelte";
+  import * as m from "$lib/features/i18n/messages.ts";
   import Button from "$lib/components/buttons/Button.svelte";
   import DropdownItem from "$lib/components/dropdown/DropdownItem.svelte";
   import FavoriteIcon from "$lib/components/icons/FavoriteIcon.svelte";
@@ -11,6 +14,7 @@
     title,
     isFavoriteUpdating,
     isFavorited,
+    isQueued = false,
     style,
     onAdd,
     onRemove,
@@ -22,11 +26,19 @@
   const handler = $derived(isFavorited ? onRemove : onAdd);
   const state = $derived(isFavorited ? "filled" : "open");
 
+  const label = $derived(
+    isQueued
+      ? `${i18n.label({ isFavorited, title })} (${m.label_queued_action()})`
+      : i18n.label({ isFavorited, title }),
+  );
+
   const commonProps: Omit<ButtonProps, "children"> = $derived({
-    label: i18n.label({ isFavorited, title }),
+    label,
     variant: "primary",
     onclick: handler,
-    disabled: isFavoriteUpdating,
+    // A queued action stays disabled so it can't be re-triggered while it
+    // waits to sync - the pending pill signals it's already been actioned.
+    disabled: isFavoriteUpdating || isQueued,
     navigationType,
     size,
   });
@@ -35,21 +47,25 @@
 {#if style === "normal"}
   <Button {...commonProps} {...props} style="ghost" color="orange">
     {i18n.text({ isFavorited, title })}
+    {#if isQueued}<QueuedTag />{/if}
     {#snippet icon()}
       <FavoriteIcon {state} />
     {/snippet}
   </Button>
 {/if}
 
 {#if style === "action"}
-  <ActionButton {...commonProps} {...props} style="ghost" color="default">
-    <FavoriteIcon {state} --icon-color="var(--color-background-orange)" />
-  </ActionButton>
+  <QueuedIndicator {isQueued}>
+    <ActionButton {...commonProps} {...props} style="ghost" color="default">
+      <FavoriteIcon {state} --icon-color="var(--color-background-orange)" />
+    </ActionButton>
+  </QueuedIndicator>
 {/if}
 
 {#if style === "dropdown-item"}
   <DropdownItem {...commonProps} style="flat" color="default">
     {i18n.text({ isFavorited, title })}
+    {#if isQueued}<QueuedTag />{/if}
     {#snippet icon()}
       <FavoriteIcon {state} />
     {/snippet}

projects/client/src/lib/components/buttons/favorite/FavoriteButtonProps.ts

@@ -6,6 +6,7 @@ export type FavoriteButtonProps = {
   title: string;
   isFavoriteUpdating: boolean;
   isFavorited: boolean;
+  isQueued?: boolean;
   style: 'action' | 'normal' | 'dropdown-item';
   size?: 'small' | 'normal';
   onAdd: () => void;

projects/client/src/lib/components/buttons/mark-as-watched/MarkAsWatchedButton.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import QueuedIndicator from "$lib/components/badge/QueuedIndicator.svelte";
+  import QueuedTag from "$lib/components/badge/QueuedTag.svelte";
+  import * as m from "$lib/features/i18n/messages.ts";
   import DropdownItem from "$lib/components/dropdown/DropdownItem.svelte";
   import LoadingIndicator from "$lib/components/icons/LoadingIndicator.svelte";
   import TrackIcon from "$lib/components/icons/TrackIcon.svelte";
@@ -18,6 +21,7 @@
     onAsk,
     isMarkingAsWatched,
     isWatched,
+    isQueued = false,
     isLoading = false,
     style,
     mode = "hybrid",
@@ -52,12 +56,20 @@
   );
   const state = $derived(isRemovable ? "watched" : "unwatched");
 
+  const label = $derived(
+    isQueued
+      ? `${i18n.label({ title, isWatched, isRewatching })} (${m.label_queued_action()})`
+      : i18n.label({ title, isWatched, isRewatching }),
+  );
+
   const commonProps: Omit<ButtonProps, "children"> = $derived({
-    label: i18n.label({ title, isWatched, isRewatching }),
+    label,
     color: $color,
     variant: mode === "ask" ? "primary" : variant,
     onclick: handler,
-    disabled: isMarkingAsWatched || isLoading,
+    // A queued action stays disabled so it can't be re-triggered while it
+    // waits to sync - the pending pill signals it's already been actioned.
+    disabled: isMarkingAsWatched || isQueued || isLoading,
     ...events,
   });
 
@@ -92,6 +104,7 @@
         navigationType={DpadNavigationType.Item}
       >
         {buttonText}
+        {#if isQueued}<QueuedTag />{/if}
         {#snippet icon()}
           {@render watchIcon()}
         {/snippet}
@@ -100,14 +113,17 @@
   {/if}
 
   {#if style === "action"}
-    <ActionButton style="ghost" {...commonProps} {...props}>
-      {@render watchIcon("small")}
-    </ActionButton>
+    <QueuedIndicator {isQueued}>
+      <ActionButton style="ghost" {...commonProps} {...props}>
+        {@render watchIcon("small")}
+      </ActionButton>
+    </QueuedIndicator>
   {/if}
 
   {#if style === "dropdown-item"}
     <DropdownItem {...commonProps} style="flat">
       {buttonText}
+      {#if isQueued}<QueuedTag />{/if}
       {#snippet icon()}
         {@render watchIcon()}
       {/snippet}

projects/client/src/lib/components/buttons/mark-as-watched/MarkAsWatchedButtonProps.ts

@@ -5,6 +5,7 @@ export type MarkAsWatchedButtonProps = {
   title: string;
   isMarkingAsWatched: boolean;
   isWatched: boolean;
+  isQueued?: boolean;
   isLoading?: boolean;
   style: 'action' | 'normal' | 'dropdown-item';
   size: 'normal' | 'small';

projects/client/src/lib/components/buttons/watchlist/WatchlistButton.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import QueuedIndicator from "$lib/components/badge/QueuedIndicator.svelte";
+  import QueuedTag from "$lib/components/badge/QueuedTag.svelte";
+  import * as m from "$lib/features/i18n/messages.ts";
   import Button from "$lib/components/buttons/Button.svelte";
   import DropdownItem from "$lib/components/dropdown/DropdownItem.svelte";
   import BookmarkIcon from "$lib/components/icons/BookmarkIcon.svelte";
@@ -14,6 +17,7 @@
     title,
     isWatchlistUpdating,
     isWatchlisted,
+    isQueued = false,
     type,
     onAdd,
     onRemove,
@@ -31,10 +35,18 @@
   );
   const state = $derived(isWatchlisted ? "added" : "missing");
 
+  const label = $derived(
+    isQueued
+      ? `${i18n.label({ isWatchlisted, title })} (${m.label_queued_action()})`
+      : i18n.label({ isWatchlisted, title }),
+  );
+
   const actionProps = $derived({
-    label: i18n.label({ isWatchlisted, title }),
+    label,
     onclick: handler,
-    disabled: isWatchlistUpdating,
+    // A queued action stays disabled so it can't be re-triggered while it
+    // waits to sync - the pending pill signals it's already been actioned.
+    disabled: isWatchlistUpdating || isQueued,
     ...events,
   });
 
@@ -53,6 +65,7 @@
       navigationType={DpadNavigationType.Item}
     >
       {i18n.text({ isWatchlisted, title })}
+      {#if isQueued}<QueuedTag />{/if}
       {#snippet icon()}
         <BookmarkIcon {state} size="normal" />
       {/snippet}
@@ -61,17 +74,20 @@
 {/if}
 
 {#if type === "action"}
-  <ActionButton style="ghost" {...actionProps} {...props}>
-    <BookmarkIcon {state} />
-  </ActionButton>
+  <QueuedIndicator {isQueued}>
+    <ActionButton style="ghost" {...actionProps} {...props}>
+      <BookmarkIcon {state} />
+    </ActionButton>
+  </QueuedIndicator>
 {/if}
 
 {#if type === "dropdown-item"}
   <DropdownItem {...commonProps} style="flat">
     {i18n.text({ isWatchlisted, title })}
+    {#if isQueued}<QueuedTag />{/if}
     {#snippet icon()}
       <!-- FIXME: generalize this and do this for all applicable buttons/items  -->
-      {#if isWatchlistUpdating}
+      {#if isWatchlistUpdating && !isQueued}
         <LoadingIndicator />
       {:else}
         <BookmarkIcon {state} size="normal" />

projects/client/src/lib/components/buttons/watchlist/WatchlistButtonProps.ts

@@ -5,6 +5,7 @@ export type WatchlistButtonProps = {
   title: string;
   isWatchlistUpdating: boolean;
   isWatchlisted: boolean;
+  isQueued?: boolean;
   type: 'action' | 'normal' | 'dropdown-item';
   size: 'small' | 'normal';
   onAdd: () => void;

projects/client/src/lib/sections/media-actions/favorite/FavoriteAction.svelte

@@ -35,6 +35,7 @@
   const {
     isUpdatingFavorite,
     isFavorited,
+    isQueued,
     addToFavorites: doAddToFavorites,
     removeFromFavorites,
   } = $derived(useFavorites({ type, id, title }));
@@ -91,6 +92,7 @@
     {size}
     isFavorited={$isFavorited}
     isFavoriteUpdating={$isUpdatingFavorite}
+    isQueued={$isQueued}
     onAdd={() => handler("add")}
     onRemove={() => handler("remove")}
   />