feat(preview-features): tag unseen features NEW in drawer

Unread ids are snapshotted when the drawer opens, before markAllRead,
so the tags stay visible for the session in which the user first sees
the new features and disappear on the next open. Separate i18n message
from the episode NEW tag so translators can gender it per noun.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Magnea

projects/client/i18n/meta/en.json

@@ -7890,6 +7890,10 @@
       "default": "Preview Features",
       "description": "Header for the section that allows users to enable or disable preview features."
     },
+    "tag_text_new_preview_feature": {
+      "default": "New",
+      "description": "Text for the tag shown next to a preview feature's name when the feature was recently added and the user has not seen it yet. This should be as short as possible."
+    },
     "button_label_unread_preview_features": {
       "default": "Preview Features (new features available)",
       "description": "Aria-label for the preview features button when there are new preview features the user has not seen yet."

projects/client/src/lib/features/feature-flag/FeatureFlagItems.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import CaretRightIcon from "$lib/components/icons/CaretRightIcon.svelte";
   import Link from "$lib/components/link/Link.svelte";
+  import StemTag from "$lib/components/tags/StemTag.svelte";
   import Switch from "$lib/components/toggles/Switch.svelte";
   import { m } from "$lib/features/i18n/messages";
   import RenderFor from "$lib/guards/RenderFor.svelte";
@@ -9,7 +10,10 @@
   import { featureFlagDefinitions } from "./models/featureFlagDefinitions";
   import { useFeatureFlag } from "./useFeatureFlag";
 
-  const { classList = "" }: { classList?: string } = $props();
+  const {
+    classList = "",
+    newFeatures = [],
+  }: { classList?: string; newFeatures?: ReadonlyArray<string> } = $props();
 
   const { flags, setFlag } = useFeatureFlag();
   const featureFlags = Object.values(FeatureFlag);
@@ -32,7 +36,17 @@
           </div>
 
           <div class="feature-flag-copy">
-            <span class="feature-flag-title bold">{title}</span>
+            <span class="feature-flag-title-row">
+              <span class="feature-flag-title bold">{title}</span>
+              {#if newFeatures.includes(key)}
+                <StemTag
+                  text={m.tag_text_new_preview_feature()}
+                  classList="feature-flag-new-tag"
+                  --color-background-stem-tag="var(--color-background-purple)"
+                  --color-foreground-stem-tag="var(--color-foreground-purple)"
+                />
+              {/if}
+            </span>
             {#if description}
               <p class="feature-flag-description secondary small">
                 {description}
@@ -121,6 +135,17 @@
       min-width: 0;
     }
 
+    .feature-flag-title-row {
+      display: flex;
+      align-items: center;
+      gap: var(--gap-xs);
+      min-width: 0;
+
+      :global(.feature-flag-new-tag) {
+        flex-shrink: 0;
+      }
+    }
+
     .feature-flag-description {
       line-height: 1.3;
       white-space: pre-line;

projects/client/src/lib/features/feature-flag/FeatureFlagTool.svelte

@@ -12,10 +12,16 @@
   const isOpen = writable(false);
   const onClose = () => isOpen.set(false);
 
-  const { hasUnreadFeatures, markAllRead } = useUnreadPreviewFeatures();
+  const { hasUnreadFeatures, unreadFeatures, markAllRead } =
+    useUnreadPreviewFeatures();
+
+  // Snapshot of the unread ids taken when the drawer opens, so the NEW
+  // tags stay visible for the session in which the user first sees them.
+  let newFeatures = $state<ReadonlyArray<string>>([]);
 
   const onToggle = () => {
     if (!$isOpen) {
+      newFeatures = $unreadFeatures;
       markAllRead();
     }
     isOpen.set(!$isOpen);
@@ -52,7 +58,7 @@
       size="auto"
     >
       <div class="trakt-feature-flag-items">
-        <FeatureFlagItems />
+        <FeatureFlagItems {newFeatures} />
       </div>
     </Drawer>
   {/if}

projects/client/src/lib/features/feature-flag/useUnreadPreviewFeatures.ts

@@ -28,12 +28,16 @@ export function useUnreadPreviewFeatures() {
     initializeReadFeatures(),
   );
 
-  const hasUnreadFeatures = readFeatures.pipe(
+  const unreadFeatures = readFeatures.pipe(
     map((read) =>
-      Object.values(FeatureFlag).some((feature) => !read.includes(feature))
+      Object.values(FeatureFlag).filter((feature) => !read.includes(feature))
     ),
   );
 
+  const hasUnreadFeatures = unreadFeatures.pipe(
+    map((unread) => unread.length > 0),
+  );
+
   const markAllRead = () => {
     const allFeatures: ReadonlyArray<string> = Object.values(FeatureFlag);
     safeLocalStorage.setItem(
@@ -45,6 +49,7 @@ export function useUnreadPreviewFeatures() {
 
   return {
     hasUnreadFeatures,
+    unreadFeatures,
     markAllRead,
   };
 }