feat(lists): compact my lists hub cards

projects/client/i18n/meta/en.json

@@ -6963,6 +6963,75 @@
         }
       }
     },
+    "list_summary_range_up_to": {
+      "default": "Up to {value}",
+      "description": "Smart list filter summary for an upper-bound-only range, e.g. 'Up to 90'.",
+      "variables": {
+        "value": {
+          "type": "string"
+        }
+      }
+    },
+    "list_summary_range_labeled_up_to": {
+      "default": "{label} up to {value}",
+      "description": "Smart list filter summary for a labeled upper-bound-only range, e.g. 'Trakt up to 80%'.",
+      "variables": {
+        "label": {
+          "type": "string"
+        },
+        "value": {
+          "type": "string"
+        }
+      }
+    },
+    "list_summary_range_between": {
+      "default": "{min} to {max}",
+      "description": "Smart list filter summary for a range with both bounds, e.g. '60 to 80'.",
+      "variables": {
+        "min": {
+          "type": "string"
+        },
+        "max": {
+          "type": "string"
+        }
+      }
+    },
+    "list_summary_range_labeled_between": {
+      "default": "{label} {min} to {max}",
+      "description": "Smart list filter summary for a labeled range with both bounds, e.g. 'Trakt 60% to 80%'.",
+      "variables": {
+        "label": {
+          "type": "string"
+        },
+        "min": {
+          "type": "string"
+        },
+        "max": {
+          "type": "string"
+        }
+      }
+    },
+    "list_summary_range_from": {
+      "default": "{value} and up",
+      "description": "Smart list filter summary for a lower-bound-only range, e.g. '60 and up'.",
+      "variables": {
+        "value": {
+          "type": "string"
+        }
+      }
+    },
+    "list_summary_range_labeled_from": {
+      "default": "{label} {value} and up",
+      "description": "Smart list filter summary for a labeled lower-bound-only range, e.g. 'Trakt 60% and up'.",
+      "variables": {
+        "label": {
+          "type": "string"
+        },
+        "value": {
+          "type": "string"
+        }
+      }
+    },
     "warning_smart_lists_limit": {
       "default": "You've reached your smart list limit",
       "description": "Warning text shown when a user has reached their smart list limit and attempts to create a new smart list."

projects/client/src/lib/sections/lists/components/ListSummaryCard.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import Card from "$lib/components/card/Card.svelte";
+  import type { Snippet } from "svelte";
+
+  const {
+    children,
+    variant = "default",
+  }: {
+    children: Snippet;
+    variant?: "default" | "official";
+  } = $props();
+</script>
+
+<Card
+  --width-card="min(var(--width-list-card), 85vw)"
+  --height-card="var(--height-list-card)"
+>
+  <div class="trakt-list-summary-card" data-variant={variant}>
+    {@render children()}
+  </div>
+</Card>
+
+<style lang="scss">
+  @use "$style/scss/mixins/index" as *;
+
+  .trakt-list-summary-card {
+    height: var(--height-list-card);
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: var(--gap-xs);
+
+    padding: var(--ni-12);
+
+    outline: var(--border-thickness-xs) solid transparent;
+    transition: outline-color var(--transition-increment) ease-in-out;
+
+    background-color: color-mix(
+      in srgb,
+      var(--color-card-background) 40%,
+      var(--color-background)
+    );
+    border-radius: var(--border-radius-m);
+
+    &[data-variant="official"] {
+      background-color: color-mix(
+        in srgb,
+        var(--color-official-list-background) 40%,
+        var(--color-background)
+      );
+    }
+  }
+
+  @include for-mouse() {
+    :global(.trakt-card-content:hover) .trakt-list-summary-card {
+      outline-color: var(--color-card-border-hover);
+    }
+  }
+</style>

projects/client/src/lib/sections/lists/components/list-summary/ListSummaryItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Card from "$lib/components/card/Card.svelte";
   import type { DiscoverMode } from "$lib/features/filters/models/DiscoverMode";
   import type { MediaListSummary } from "$lib/requests/models/MediaListSummary.ts";
+  import ListSummaryCard from "../ListSummaryCard.svelte";
   import ListHeader from "./_internal/ListHeader.svelte";
   import ListPosters from "./_internal/ListPosters.svelte";
 
@@ -22,54 +22,7 @@
   };
 </script>
 
-<Card
-  --width-card="min(var(--width-list-card), 85vw)"
-  --height-card="var(--height-list-card)"
->
-  <div
-    class="trakt-list-summary"
-    class:trakt-list-official={list.type === "official"}
-  >
-    <ListHeader {list} {type} {source} onclick={handler} />
-    <ListPosters {list} {type} {source} onclick={handler} />
-  </div>
-</Card>
-
-<style lang="scss">
-  @use "$style/scss/mixins/index" as *;
-
-  .trakt-list-summary {
-    height: var(--height-list-card);
-    box-sizing: border-box;
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap-xs);
-
-    padding: var(--ni-12);
-
-    outline: var(--border-thickness-xs) solid transparent;
-    transition: outline-color var(--transition-increment) ease-in-out;
-
-    background-color: color-mix(
-      in srgb,
-      var(--color-card-background) 40%,
-      var(--color-background)
-    );
-    border-radius: var(--border-radius-m);
-
-    &.trakt-list-official {
-      background-color: color-mix(
-        in srgb,
-        var(--color-official-list-background) 40%,
-        var(--color-background)
-      );
-    }
-  }
-
-  @include for-mouse() {
-    :global(.trakt-card-content:hover) .trakt-list-summary {
-      outline-color: var(--color-card-border-hover);
-    }
-  }
-</style>
+<ListSummaryCard variant={list.type === "official" ? "official" : "default"}>
+  <ListHeader {list} {type} {source} onclick={handler} />
+  <ListPosters {list} {type} {source} onclick={handler} />
+</ListSummaryCard>

projects/client/src/lib/sections/lists/smart/SmartLists.svelte

@@ -1,63 +1,49 @@
 <script lang="ts">
-  import SmartListIcon from "$lib/components/icons/SmartListIcon.svelte";
   import SectionList from "$lib/components/lists/section-list/SectionList.svelte";
   import type { DiscoverMode } from "$lib/features/filters/models/DiscoverMode";
   import * as m from "$lib/features/i18n/messages.ts";
   import { UrlBuilder } from "$lib/utils/url/UrlBuilder";
   import CtaItem from "../components/cta/CtaItem.svelte";
-  import ListsHeader from "../user/_internal/ListsHeader.svelte";
   import CreateSmartListButton from "./_internal/CreateSmartListButton.svelte";
-  import SmartListRenderer from "./SmartListRenderer.svelte";
+  import SmartListSummaryItem from "./_internal/SmartListSummaryItem.svelte";
   import { useSmartLists } from "./useSmartLists";
 
   const { mode }: { mode: DiscoverMode } = $props();
 
-  const { list } = $derived(useSmartLists({ mode }));
+  const { list, isLoading } = $derived(useSmartLists({ mode }));
 
   const drilldown = $derived({
     href: UrlBuilder.lists.smart.all(),
     label: m.button_label_view_all_lists(),
     source: { id: "smart-lists" },
-    mode: $list.length === 0 ? ("disabled" as const) : ("default" as const),
+    mode: "always" as const,
   });
 </script>
 
 {#snippet actions()}
   <CreateSmartListButton />
 {/snippet}
 
-{#if $list.length === 0}
-  <SectionList
-    id={{
-      scope: "smart-lists",
-    }}
-    items={[]}
-    title="Smart Lists"
-    --height-list="var(--height-poster-list-sm)"
-    {drilldown}
-    {actions}
-  >
-    {#snippet item(_)}{/snippet}
-    {#snippet empty()}
-      <CtaItem cta={{ type: "smart-list" }} variant="placeholder" />
-    {/snippet}
-  </SectionList>
-{:else}
-  <div class="trakt-smart-lists">
-    <ListsHeader title="Smart Lists" {actions} {drilldown}>
-      {#snippet icon()}
-        <SmartListIcon />
-      {/snippet}
-    </ListsHeader>
-
-    <SmartListRenderer mode={mode ?? "media"} />
-  </div>
-{/if}
+<SectionList
+  id={{
+    scope: "smart-lists",
+  }}
+  items={$list}
+  title={m.list_title_smart_lists()}
+  --height-list="var(--height-lists-list)"
+  --height-override-list={$list.length === 0
+    ? "var(--height-poster-list-sm)"
+    : undefined}
+  {drilldown}
+  {actions}
+>
+  {#snippet item(list)}
+    <SmartListSummaryItem {list} />
+  {/snippet}
 
-<style>
-  .trakt-smart-lists {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap-micro);
-  }
-</style>
+  {#snippet empty()}
+    {#if !$isLoading}
+      <CtaItem cta={{ type: "smart-list" }} variant="placeholder" />
+    {/if}
+  {/snippet}
+</SectionList>