feat(settings): add preview feature descriptions and improved UI/UX

Co-authored-by: seferturan <seferturan85@gmail.com>
Co-authored-by: Vlad Jerca <vlad.jerca@gmail.com>

Author: 3 people

projects/client/i18n/meta/en.json

@@ -7053,13 +7053,78 @@
       "description": "Header for the section that allows users to enable or disable preview features."
     },
     "description_preview_features": {
-      "default": "Enable or disable preview features that are in development. These features may be unstable and can be changed at any time.",
+      "default": "Try upcoming features before they’re broadly available. Preview Features may change as we refine them.",
       "description": "Description for the preview features section."
     },
     "text_placeholder_preview_features": {
       "default": "Currently there aren't any preview features. Check back later.",
       "description": "Placeholder text for when there are no preview features available."
     },
+    "link_label_open_preview_feature": {
+      "default": "Open {title}",
+      "description": "Aria-label for the link that opens an enabled preview feature.",
+      "variables": {
+        "title": {
+          "type": "string"
+        }
+      }
+    },
+    "preview_feature_title_year_in_review": {
+      "default": "Year In Review",
+      "description": "Title for the Year In Review preview feature."
+    },
+    "preview_feature_description_year_in_review": {
+      "default": "Preview Year in Review, now running directly in V3.",
+      "description": "Description for the Year In Review preview feature."
+    },
+    "preview_feature_title_month_in_review": {
+      "default": "Month In Review",
+      "description": "Title for the Month In Review preview feature."
+    },
+    "preview_feature_description_month_in_review": {
+      "default": "Preview Month in Review, now running directly in V3.",
+      "description": "Description for the Month In Review preview feature."
+    },
+    "preview_feature_title_edit_mode": {
+      "default": "Edit Mode",
+      "description": "Title for the Edit Mode preview feature."
+    },
+    "preview_feature_description_edit_mode": {
+      "default": "Enable controls for hiding or showing configurable sections across the app.",
+      "description": "Description for the Edit Mode preview feature."
+    },
+    "preview_feature_title_streaming_sync": {
+      "default": "Streaming Sync",
+      "description": "Title for the Streaming Sync preview feature."
+    },
+    "preview_feature_description_streaming_sync": {
+      "default": "Connect supported streaming services so watch history and ratings can sync back to Trakt automatically. The connection flow from web is still in beta.",
+      "description": "Description for the Streaming Sync preview feature."
+    },
+    "preview_feature_title_scoped_favorites": {
+      "default": "Scoped Favorites",
+      "description": "Title for the Scoped Favorites preview feature."
+    },
+    "preview_feature_description_scoped_favorites": {
+      "default": "Time-box favorite lists by showing current-year favorites on profiles and grouping the full favorites list by year.",
+      "description": "Description for the Scoped Favorites preview feature."
+    },
+    "preview_feature_title_social_activities": {
+      "default": "Social Activities",
+      "description": "Title for the Social Activities preview feature."
+    },
+    "preview_feature_description_social_activities": {
+      "default": "Show who you follow has watched, watchlisted, commented on, or rated a movie, show, or episode directly on media pages.",
+      "description": "Description for the Social Activities preview feature."
+    },
+    "preview_feature_title_plex_sync": {
+      "default": "Plex Sync",
+      "description": "Title for the Plex Sync preview feature."
+    },
+    "preview_feature_description_plex_sync": {
+      "default": "Connect Plex to sync your watch history, ratings, and library to Trakt. Includes connection, server selection, and sync tools.",
+      "description": "Description for the Plex Sync preview feature."
+    },
     "header_official_links": {
       "default": "Official Links",
       "description": "Header for the official links section, with official links for a show or movie, like the official site, instagram, etc.."

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

@@ -1,46 +1,160 @@
 <script lang="ts">
+  import CaretRightIcon from "$lib/components/icons/CaretRightIcon.svelte";
+  import Link from "$lib/components/link/Link.svelte";
   import Switch from "$lib/components/toggles/Switch.svelte";
   import { m } from "$lib/features/i18n/messages";
   import { appendClassList } from "$lib/utils/actions/appendClassList";
   import { FeatureFlag } from "./models/FeatureFlag";
+  import { featureFlagDefinitions } from "./models/featureFlagDefinitions";
   import { useFeatureFlag } from "./useFeatureFlag";
 
   const { classList = "" }: { classList?: string } = $props();
 
   const { flags, setFlag } = useFeatureFlag();
-
-  const hasFlags = $derived(Object.keys($flags).length > 0);
-
-  const getKeyLabel = (key: string) =>
-    key
-      .split("-")
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join(" ");
+  const featureFlags = Object.values(FeatureFlag);
+  const hasFlags = featureFlags.length > 0;
 </script>
 
 {#if hasFlags}
-  {#each Object.entries($flags) as [key, value] (key)}
-    <div class="feature-flag-item" use:appendClassList={classList}>
-      <span class="bold">{getKeyLabel(key)}</span>
-      <Switch
-        color="orange"
-        label={key}
-        checked={value}
-        innerText={value ? "On" : "Off"}
-        onclick={() => setFlag(key as FeatureFlag, !value)}
-      />
-    </div>
-  {/each}
+  <div class="feature-flag-list" use:appendClassList={classList}>
+    {#each featureFlags as key (key)}
+      {@const value = $flags[key]}
+      {@const definition = featureFlagDefinitions[key]}
+      {@const Icon = definition.icon}
+      {@const title = definition.title()}
+      {@const description = definition.description?.() ?? ""}
+      {@const featureLink = definition.featureLink?.()}
+      <div class="feature-flag-item">
+        <div class="feature-flag-icon">
+          <Icon />
+        </div>
+
+        <div class="feature-flag-copy">
+          <span class="feature-flag-title bold">{title}</span>
+          {#if description}
+            <p class="feature-flag-description secondary small">
+              {description}
+            </p>
+          {/if}
+        </div>
+
+        <div class="feature-flag-actions">
+          <Switch
+            color="purple"
+            label={title}
+            checked={value}
+            innerText={value ? "On" : "Off"}
+            onclick={() => setFlag(key, !value)}
+          />
+
+          <span class="feature-flag-link" aria-hidden={!value || !featureLink}>
+            {#if value && featureLink}
+              <Link
+                href={featureLink.href}
+                label={featureLink.label()}
+                color="inherit"
+              >
+                <CaretRightIcon />
+              </Link>
+            {/if}
+          </span>
+        </div>
+      </div>
+    {/each}
+  </div>
 {:else}
   <p class="bold">{m.text_placeholder_preview_features()}</p>
 {/if}
 
-<style>
+<style lang="scss">
+  @use "$style/scss/mixins/index" as *;
+
+  .feature-flag-list {
+    overflow: hidden;
+    max-width: var(--ni-640);
+    border-radius: var(--border-radius-l);
+    background: var(--color-card-background);
+    box-shadow: var(--shadow-base);
+
+    > :global(* + *) {
+      border-top: var(--border-thickness-xxs) solid
+        color-mix(in srgb, var(--color-foreground) 8%, transparent);
+    }
+  }
+
   .feature-flag-item {
     display: flex;
     align-items: center;
-    justify-content: flex-end;
-
     gap: var(--gap-m);
+    min-height: var(--ni-80);
+    padding: var(--gap-s) var(--gap-m);
+    box-sizing: border-box;
+
+    .feature-flag-icon {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: var(--ni-36);
+      height: var(--ni-36);
+      border-radius: var(--border-radius-m);
+      background: color-mix(in srgb, var(--purple-500) 15%, transparent);
+      color: var(--purple-500);
+
+      :global(svg) {
+        width: var(--ni-20);
+        height: var(--ni-20);
+      }
+    }
+
+    .feature-flag-copy {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--gap-xxs);
+      min-width: 0;
+    }
+
+    .feature-flag-description {
+      line-height: 1.3;
+      white-space: pre-line;
+    }
+
+    .feature-flag-actions {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      gap: var(--gap-xs);
+    }
+
+    .feature-flag-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--ni-28);
+      height: var(--ni-28);
+      opacity: 0.35;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+
+      :global(.trakt-link) {
+        display: flex;
+        color: inherit;
+        text-decoration: none;
+      }
+
+      :global(svg) {
+        width: var(--ni-16);
+        height: var(--ni-16);
+      }
+    }
+
+    @include for-mobile {
+      align-items: flex-start;
+
+      .feature-flag-actions {
+        flex-direction: column;
+      }
+    }
   }
 </style>

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

@@ -23,7 +23,12 @@
   </ActionButton>
 
   {#if $isOpen}
-    <Drawer {onClose} title={m.header_preview_features()} hasAutoClose={false}>
+    <Drawer
+      {onClose}
+      title={m.header_preview_features()}
+      hasAutoClose={false}
+      size="auto"
+    >
       <FeatureFlagItems />
     </Drawer>
   {/if}

projects/client/src/lib/features/feature-flag/_internal/createFeatureFlagContext.ts

@@ -9,12 +9,14 @@ export const FEATURE_FLAG_LOCAL_STORAGE_KEY = 'trakt-feature-flags';
 
 function initializeFlags() {
   const storedFlags = safeLocalStorage.getItem(FEATURE_FLAG_LOCAL_STORAGE_KEY);
-  const parsedFlags = storedFlags ? JSON.parse(storedFlags) : {};
+  const parsedFlags = storedFlags
+    ? JSON.parse(storedFlags) as Partial<Record<FeatureFlag, boolean>>
+    : {};
+  const featureFlags = Object.values(FeatureFlag);
 
-  return Object.values(FeatureFlag).reduce((acc, flag) => {
-    acc[flag] = parsedFlags[flag] ?? false;
-    return acc;
-  }, {} as Record<string, boolean>);
+  return Object.fromEntries(
+    featureFlags.map((flag) => [flag, parsedFlags[flag] ?? false]),
+  ) as Record<FeatureFlag, boolean>;
 }
 
 export function createFeatureFlagContext() {

projects/client/src/lib/features/feature-flag/models/featureFlagDefinitions.ts

@@ -0,0 +1,100 @@
+import CalendarIcon from '$lib/components/icons/CalendarIcon.svelte';
+import EditModeIcon from '$lib/components/icons/EditModeIcon.svelte';
+import FavoriteIcon from '$lib/components/icons/FavoriteIcon.svelte';
+import PlexLibraryIcon from '$lib/components/icons/PlexLibraryIcon.svelte';
+import SocialIcon from '$lib/components/icons/SocialIcon.svelte';
+import TrackIcon from '$lib/components/icons/TrackIcon.svelte';
+import { m } from '$lib/features/i18n/messages.ts';
+import { UrlBuilder } from '$lib/utils/url/UrlBuilder.ts';
+import type { Component } from 'svelte';
+import { FeatureFlag } from './FeatureFlag.ts';
+
+type FeatureFlagLink = {
+  href: string;
+  label: () => string;
+};
+
+type FeatureFlagDefinition = {
+  icon: Component;
+  title: () => string;
+  description?: (() => string | null) | null;
+  featureLink?: (() => FeatureFlagLink | null) | null;
+};
+
+type FeatureFlagDefinitions = Readonly<
+  Record<FeatureFlag, FeatureFlagDefinition>
+>;
+
+const currentDate = () => new Date();
+
+const currentYear = () => currentDate().getFullYear();
+
+const currentMonth = () => currentDate().getMonth() + 1;
+
+const openFeatureLink = (href: string, title: string): FeatureFlagLink => ({
+  href,
+  label: () => m.link_label_open_preview_feature({ title }),
+});
+
+export const featureFlagDefinitions: FeatureFlagDefinitions = {
+  [FeatureFlag.YearInReview]: {
+    icon: CalendarIcon,
+    title: () => m.preview_feature_title_year_in_review(),
+    description: () => m.preview_feature_description_year_in_review(),
+    featureLink: () =>
+      openFeatureLink(
+        UrlBuilder.users('me').yearToDate(currentYear()),
+        m.preview_feature_title_year_in_review(),
+      ),
+  },
+  [FeatureFlag.MonthInReview]: {
+    icon: CalendarIcon,
+    title: () => m.preview_feature_title_month_in_review(),
+    description: () => m.preview_feature_description_month_in_review(),
+    featureLink: () =>
+      openFeatureLink(
+        UrlBuilder.users('me').monthInReview(currentYear(), currentMonth()),
+        m.preview_feature_title_month_in_review(),
+      ),
+  },
+  [FeatureFlag.EditMode]: {
+    icon: EditModeIcon,
+    title: () => m.preview_feature_title_edit_mode(),
+    description: () => m.preview_feature_description_edit_mode(),
+  },
+  [FeatureFlag.StreamingServices]: {
+    icon: TrackIcon,
+    title: () => m.preview_feature_title_streaming_sync(),
+    description: () => m.preview_feature_description_streaming_sync(),
+    featureLink: () =>
+      openFeatureLink(
+        UrlBuilder.settings.streamingServices(),
+        m.preview_feature_title_streaming_sync(),
+      ),
+  },
+  [FeatureFlag.ScopedFavorites]: {
+    icon: FavoriteIcon,
+    title: () => m.preview_feature_title_scoped_favorites(),
+    description: () => m.preview_feature_description_scoped_favorites(),
+    featureLink: () =>
+      openFeatureLink(
+        UrlBuilder.profile.favorites('me'),
+        m.preview_feature_title_scoped_favorites(),
+      ),
+  },
+  [FeatureFlag.SocialActivities]: {
+    icon: SocialIcon,
+    title: () => m.preview_feature_title_social_activities(),
+    description: () => m.preview_feature_description_social_activities(),
+  },
+  [FeatureFlag.PlexSync]: {
+    icon: PlexLibraryIcon,
+    title: () => m.preview_feature_title_plex_sync(),
+    description: () => m.preview_feature_description_plex_sync(),
+    featureLink: () =>
+      openFeatureLink(
+        UrlBuilder.settings.plex(),
+        m.preview_feature_title_plex_sync(),
+      ),
+  },
+};