itube-specs 0.0.897 → 0.0.899

package/pages/following.vue

@@ -0,0 +1,205 @@
+<!-- Подписки: что нового у моделей, каналов, категорий и плейлистов. Данные пока заглушка -->
+<template>
+  <div class="following _page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <h1 class="_title">{{ t('following.title') }}</h1>
+
+    <SectionSwiperCards
+      :items="models"
+      :count="t('following.updates', { count: modelsUpdates })"
+      :title="t('models')"
+      :all-link-text="t('following.view_all')"
+      :all-link-note="t('plural.models', models.length)"
+      :header-link-text="t('following.all_models')"
+      all-link="/library/models"
+      icon="user"
+      size="xl"
+      placeholder-avatar="/img/model-placeholder.webp"
+      class="following__section"
+      without-count
+    />
+
+    <SectionSwiperCards
+      :items="channels"
+      :count="t('following.updates', { count: channelsUpdates })"
+      :title="t('channels')"
+      :all-link-text="t('following.view_all')"
+      :all-link-note="t('plural.channels', channels.length)"
+      :header-link-text="t('following.all_channels')"
+      all-link="/library/channels"
+      icon="play-circle"
+      size="xl"
+      placeholder-avatar="/img/logo-placeholder.svg"
+      class="following__section"
+      without-count
+    />
+
+    <section class="following__section">
+      <header class="following__header">
+        <UiSectionTitle
+          :title="t('categories')"
+          :count="t('following.updates', { count: categoriesUpdates })"
+          icon="grid"
+          title-tag="h2"
+          size="xl"
+        />
+
+        <!-- На мобиле плитки «все» в гриде нет, поэтому ссылка вынесена в шапку -->
+        <UiLink
+          :to="generateLink('/library/categories')"
+          class="following__link _to-sm"
+          theme="simple"
+        >
+          {{ t('following.all_categories') }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </header>
+
+      <GridCategories :categories="categories">
+        <UiViewAll
+          :text="t('following.view_all')"
+          :note="t('plural.categories', categories.length)"
+          class="_from-sm"
+          to="/library/categories"
+        />
+      </GridCategories>
+    </section>
+
+    <section class="following__section">
+      <header class="following__header">
+        <UiSectionTitle
+          :title="t('playlists')"
+          :count="t('following.updates', { count: playlistsUpdates })"
+          icon="playlist"
+          title-tag="h2"
+          size="xl"
+        />
+
+        <UiLink
+          :to="generateLink('/playlists')"
+          class="following__link _to-sm"
+          theme="simple"
+        >
+          {{ t('following.all_playlists') }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </header>
+
+      <GridPlaylists :items="playlists">
+        <UiViewAll
+          :text="t('following.view_all')"
+          :note="t('plural.playlists', playlists.length)"
+          class="_from-sm"
+          to="/playlists"
+        />
+      </GridPlaylists>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getLibraryCategoriesStub,
+  getLibraryChannelsStub,
+  getLibraryModelsStub,
+  getLibraryPlaylistsStub
+} from '../stubs/library-follows';
+import { convertString } from '../runtime';
+import type { IBreadcrumbItem, ICategoryCard, IRoundCard } from '../types';
+
+const { t } = useI18n();
+const { generateLink } = useGenerateLink();
+
+/** Сначала те, у кого больше новинок — ради этого страница и открывается. */
+const byNewCount = <T extends { newCount: number }>(items: T[]) => [...items].sort((a, b) => b.newCount - a.newCount);
+
+const sumUpdates = (items: { newCount: number }[]) => items.reduce((total, item) => total + item.newCount, 0);
+
+const modelsStub = computed(() => byNewCount(getLibraryModelsStub()));
+const channelsStub = computed(() => byNewCount(getLibraryChannelsStub()));
+const categoriesStub = computed(() => byNewCount(getLibraryCategoriesStub()));
+const playlists = computed(() => byNewCount(getLibraryPlaylistsStub()));
+
+const models = computed<IRoundCard[]>(() => modelsStub.value.map(model => ({
+  title: model.title,
+  primaryImageUrl: model.avatarUrl,
+  videosCount: model.videosCount,
+  link: `/models/${convertString().toSlug(model.title)}`,
+  newCount: model.newCount,
+})));
+
+const channels = computed<IRoundCard[]>(() => channelsStub.value.map(channel => ({
+  title: channel.title,
+  primaryImageUrl: channel.avatarUrl ?? '',
+  videosCount: channel.videosCount,
+  link: `/channels/${convertString().toSlug(channel.title)}`,
+  newCount: channel.newCount,
+})));
+
+const categories = computed<ICategoryCard[]>(() => categoriesStub.value.map(category => ({
+  guid: category.guid,
+  name: convertString().toSlug(category.title),
+  title: category.title,
+  videosCount: category.videosCount,
+  thumbUrls: category.videos[0]?.thumbUrls,
+  newCount: category.newCount,
+})));
+
+const modelsUpdates = computed(() => sumUpdates(modelsStub.value));
+const channelsUpdates = computed(() => sumUpdates(channelsStub.value));
+const categoriesUpdates = computed(() => sumUpdates(categoriesStub.value));
+const playlistsUpdates = computed(() => sumUpdates(playlists.value));
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('library.following')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('library.following')}`,
+  },
+] as IBreadcrumbItem[];
+</script>
+
+<style lang="scss">
+.following__section {
+  margin-bottom: 48px;
+}
+
+.following__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  margin-bottom: 16px;
+}
+
+.following__link {
+  flex-shrink: 0;
+}
+
+/* Плитка «смотреть все» часто оказывается одна в новом ряду: без равных рядов
+   ряд сжимается по её контенту и она выходит ниже карточек. */
+.following .grid-categories,
+.following .grid-playlists {
+  grid-auto-rows: 1fr;
+}
+</style>

package/pages/library/index.vue

@@ -21,15 +21,12 @@
       class="library__section"
     >
       <header class="library__section-header">
-        <h2 class="library__heading">
-          <span class="library__heading-icon">
-            <UiIcon
-              name="history"
-              size="16"
-            />
-          </span>
-          {{ t('library.continue_watching') }}
-        </h2>
+        <UiSectionTitle
+          :title="t('library.continue_watching')"
+          icon="history"
+          title-tag="h2"
+          size="xl"
+        />
 
         <UiLink
           :to="generateLink('/history')"
@@ -59,15 +56,12 @@
 
     <section class="library__section">
       <header class="library__section-header">
-        <h2 class="library__heading">
-          <span class="library__heading-icon">
-            <UiIcon
-              name="layers"
-              size="16"
-            />
-          </span>
-          {{ t('library.collections') }}
-        </h2>
+        <UiSectionTitle
+          :title="t('library.collections')"
+          icon="layers"
+          title-tag="h2"
+          size="xl"
+        />
       </header>
 
       <ul class="library__grid">
@@ -87,23 +81,23 @@
 
     <section class="library__section">
       <header class="library__section-header">
-        <h2 class="library__heading">
-          <span class="library__heading-icon">
-            <UiIcon
-              name="plus"
-              size="16"
-            />
-          </span>
-          {{ t('library.following') }}
-        </h2>
-
-        <UiBtn theme="secondary">
+        <UiSectionTitle
+          :title="t('library.following')"
+          icon="plus"
+          title-tag="h2"
+          size="xl"
+        />
+
+        <UiLink
+          :to="generateLink('/following')"
+          theme="secondary"
+        >
           {{ t('library.whats_new', { count: newTotal }) }}
           <UiIcon
             name="arrow-right"
             size="16"
           />
-        </UiBtn>
+        </UiLink>
       </header>
 
       <ul class="library__grid">
@@ -304,28 +298,6 @@ const breadcrumbs = [
   margin-bottom: 16px;
 }
 
-.library__heading {
-  @include font-xl;
-
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-  margin: 0;
-  font-weight: 600;
-  color: $page-library-heading;
-}
-
-.library__heading-icon {
-  display: grid;
-  place-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  color: $page-library-heading-icon;
-  background-color: $page-library-heading-icon-bg;
-  border-radius: $radius-md;
-}
-
 .library__continue {
   display: grid;
   gap: 16px;

package/pages/search/[slug]/index.vue

@@ -56,13 +56,12 @@
             v-if="modelsData.total > MAXIMUM_MODELS"
             #append
           >
-            <NuxtLink
-              :to="generateLink(`/search/${slug}/models`)"
-              class="section-swiper-cards__all"
-            >
-              <span>+{{(modelsData.total - MAXIMUM_MODELS) }}</span>
-              <span>{{ $t('models')}}</span>
-            </NuxtLink>
+            <UiViewAll
+              :to="`/search/${slug}/models`"
+              :text="`+${modelsData.total - MAXIMUM_MODELS}`"
+              :note="$t('models')"
+              mini
+            />
           </template>
         </UiSwiper>
       </div>
@@ -86,14 +85,13 @@
               v-if="featureFlags.AdsNativeEnabled"
               hydrate-on-visible
             />
-            <NuxtLink
+            <UiViewAll
               v-if="videosData.items.length > MAXIMUM_VIDEOS || videosData.total > MAXIMUM_VIDEOS"
-              :to="generateLink(`/search/${slug}/videos`)"
+              :to="`/search/${slug}/videos`"
+              :text="`+${videosData.total - MAXIMUM_VIDEOS}`"
+              :note="$t('show_more_videos')"
               class="search__show-all"
-            >
-              <span class="search__show-all-number">+{{ videosData.total - MAXIMUM_VIDEOS }}</span>
-              {{ $t('show_more_videos') }}
-            </NuxtLink>
+            />
           </template>
         </GridVideos>
       </div>
@@ -232,38 +230,22 @@ const breadcrumbs = [
   min-width: 0;
 }
 
-.search__show-all {
-  @include font-sm;
+/* Слайд ровно по круглой карточке: 80px на мобиле, 96px с sm */
+.search__result-section .ui-swiper__slide {
+  width: var(--card-round-size);
+}
 
-  display: grid;
-  row-gap: 4px;
-  place-content: center;
+/* Плитка стоит в гриде видео — равняем её по превью, а не по всей карточке */
+.search__show-all {
   align-self: start;
   aspect-ratio: 16/9;
-  background-color: $search-show-all-bg;
-  border-radius: $radius-lg;
-  border: 1px solid $search-show-all-border;
-  color: $search-show-all-text;
-
-  @include hover(border-color, color) {
-    border-color: $search-show-all-border--hover;
-    color: $search-show-all-text--hover;
-  }
 }
 
-.search__show-all-number {
+/* Здесь главный акцент — число, поэтому крупнее дефолтной подписи плитки */
+.search__show-all .ui-view-all__text {
   @include font-2xl;
 
-  text-align: center;
   font-weight: 700;
-  color: $search-show-all-number;
-  transition: var(--transition) color;
-}
-
-.search__show-all:is(:hover,:focus-visible) .search__show-all-number {
-  @include from-br(sm) {
-    color: $search-show-all-number--hover;
-  }
 }
 
 .search__title {

package/stubs/library-follows.ts

@@ -1,5 +1,7 @@
 import { VIDEO_POOL } from './videos';
 import type { StubVideo } from './videos';
+import { PlaylistType } from '../runtime/constants/playlist-type';
+import type { IPlaylistCard } from '../types';
 
 const HOUR = 3600;
 const DAY = 24 * HOUR;
@@ -41,6 +43,9 @@ export type LibraryChannelStub = LibraryFollowBase & {
 
 export type LibraryCategoryStub = LibraryFollowBase;
 
+/** Плейлист подписки: карточка как в общем гриде + число новых роликов. */
+export type LibraryPlaylistStub = IPlaylistCard & { newCount: number };
+
 const now = () => Math.floor(Date.now() / 1000);
 
 const toSlug = (title: string) => title.toLowerCase().replace(/\s+/g, '-');
@@ -64,6 +69,17 @@ const MODELS = [
   { title: 'Jax Thirio', image: 'Jax_Thirio.png', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, tags: ['Muscle', 'Daddy', 'Top', 'Tattooed'], updatedAgo: 2 * DAY, videoOffset: 9 },
   { title: 'Austin Young', image: 'Austin_Young.png', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, tags: ['Twink', 'Smooth', 'Bottom', 'Blond', 'Solo'], updatedAgo: 9 * DAY, videoOffset: 0 },
   { title: 'Devin Franco', image: 'Devin_Franco.png', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, tags: ['Muscle', 'Tattooed', 'Bottom', 'Fisting', 'Hardcore', 'Professional'], updatedAgo: 21 * DAY, videoOffset: 6 },
+  { title: 'Dakota Lovell', image: 'Dakota_Lovell.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, tags: ['Twink', 'Jock', 'Versatile', 'Smooth', 'Bareback', 'Amateur'], updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Jax Thirio', image: 'Jax_Thirio.png', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, tags: ['Muscle', 'Daddy', 'Top', 'Tattooed'], updatedAgo: 2 * DAY, videoOffset: 9 },
+  { title: 'Austin Young', image: 'Austin_Young.png', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, tags: ['Twink', 'Smooth', 'Bottom', 'Blond', 'Solo'], updatedAgo: 9 * DAY, videoOffset: 0 },
+  { title: 'Devin Franco', image: 'Devin_Franco.png', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, tags: ['Muscle', 'Tattooed', 'Bottom', 'Fisting', 'Hardcore', 'Professional'], updatedAgo: 21 * DAY, videoOffset: 6 },
+  { title: 'Dakota Lovell', image: 'Dakota_Lovell.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, tags: ['Twink', 'Jock', 'Versatile', 'Smooth', 'Bareback', 'Amateur'], updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Dakota Lovell', image: 'Dakota_Lovell.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, tags: ['Twink', 'Jock', 'Versatile', 'Smooth', 'Bareback', 'Amateur'], updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Dakota Lovell', image: 'Dakota_Lovell.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, tags: ['Twink', 'Jock', 'Versatile', 'Smooth', 'Bareback', 'Amateur'], updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Dakota Lovell', image: 'Dakota_Lovell.png', country: { name: 'us', title: 'USA' }, age: 22, videosCount: 41, newCount: 3, tags: ['Twink', 'Jock', 'Versatile', 'Smooth', 'Bareback', 'Amateur'], updatedAgo: 6 * HOUR, videoOffset: 3 },
+  { title: 'Jax Thirio', image: 'Jax_Thirio.png', country: { name: 'ca', title: 'Canada' }, age: 38, videosCount: 17, newCount: 2, tags: ['Muscle', 'Daddy', 'Top', 'Tattooed'], updatedAgo: 2 * DAY, videoOffset: 9 },
+  { title: 'Austin Young', image: 'Austin_Young.png', country: { name: 'us', title: 'USA' }, age: 24, videosCount: 75, newCount: 1, tags: ['Twink', 'Smooth', 'Bottom', 'Blond', 'Solo'], updatedAgo: 9 * DAY, videoOffset: 0 },
+  { title: 'Devin Franco', image: 'Devin_Franco.png', country: { name: 'us', title: 'USA' }, age: 33, videosCount: 24, newCount: 0, tags: ['Muscle', 'Tattooed', 'Bottom', 'Fisting', 'Hardcore', 'Professional'], updatedAgo: 21 * DAY, videoOffset: 6 },
 ];
 
 const CHANNELS = [
@@ -71,6 +87,18 @@ const CHANNELS = [
   { title: 'Icon Male', avatarUrl: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', videosCount: 128, followersCount: 128400, newCount: 2, tags: ['Muscle', 'Daddy', 'Bareback', 'Professional', 'Exclusive', 'HD', 'Studio'], updatedAgo: DAY, videoOffset: 0 },
   { title: 'Sean Cody', avatarUrl: undefined, videosCount: 64, followersCount: 210500, newCount: 1, tags: ['Jock', 'Muscle', 'Bareback', 'Studio'], updatedAgo: 5 * DAY, videoOffset: 7 },
   { title: 'Johnny Rapid', avatarUrl: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', videosCount: 86, followersCount: 94200, newCount: 0, tags: ['Twink', 'Bareback', 'Group', 'Amateur'], updatedAgo: 14 * DAY, videoOffset: 4 },
+  { title: 'Top To Bottom', avatarUrl: undefined, videosCount: 17, followersCount: 12800, newCount: 3, tags: ['Versatile', 'Flip-Flop', 'HD', 'Professional', 'Exclusive', 'Bareback'], updatedAgo: 4 * HOUR, videoOffset: 2 },
+  { title: 'Icon Male', avatarUrl: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', videosCount: 128, followersCount: 128400, newCount: 2, tags: ['Muscle', 'Daddy', 'Bareback', 'Professional', 'Exclusive', 'HD', 'Studio'], updatedAgo: DAY, videoOffset: 0 },
+  { title: 'Sean Cody', avatarUrl: undefined, videosCount: 64, followersCount: 210500, newCount: 1, tags: ['Jock', 'Muscle', 'Bareback', 'Studio'], updatedAgo: 5 * DAY, videoOffset: 7 },
+  { title: 'Johnny Rapid', avatarUrl: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', videosCount: 86, followersCount: 94200, newCount: 0, tags: ['Twink', 'Bareback', 'Group', 'Amateur'], updatedAgo: 14 * DAY, videoOffset: 4 },
+  { title: 'Johnny Rapid', avatarUrl: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', videosCount: 86, followersCount: 94200, newCount: 0, tags: ['Twink', 'Bareback', 'Group', 'Amateur'], updatedAgo: 14 * DAY, videoOffset: 4 },
+  { title: 'Johnny Rapid', avatarUrl: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', videosCount: 86, followersCount: 94200, newCount: 0, tags: ['Twink', 'Bareback', 'Group', 'Amateur'], updatedAgo: 14 * DAY, videoOffset: 4 },
+  { title: 'Johnny Rapid', avatarUrl: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', videosCount: 86, followersCount: 94200, newCount: 0, tags: ['Twink', 'Bareback', 'Group', 'Amateur'], updatedAgo: 14 * DAY, videoOffset: 4 },
+  { title: 'Johnny Rapid', avatarUrl: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', videosCount: 86, followersCount: 94200, newCount: 0, tags: ['Twink', 'Bareback', 'Group', 'Amateur'], updatedAgo: 14 * DAY, videoOffset: 4 },
+  { title: 'Top To Bottom', avatarUrl: undefined, videosCount: 17, followersCount: 12800, newCount: 3, tags: ['Versatile', 'Flip-Flop', 'HD', 'Professional', 'Exclusive', 'Bareback'], updatedAgo: 4 * HOUR, videoOffset: 2 },
+  { title: 'Icon Male', avatarUrl: 'https://nli01.joystorage.com/c/0/2/c02a3f8ef14943b5f3da537aaed46fcc.jpeg', videosCount: 128, followersCount: 128400, newCount: 2, tags: ['Muscle', 'Daddy', 'Bareback', 'Professional', 'Exclusive', 'HD', 'Studio'], updatedAgo: DAY, videoOffset: 0 },
+  { title: 'Sean Cody', avatarUrl: undefined, videosCount: 64, followersCount: 210500, newCount: 1, tags: ['Jock', 'Muscle', 'Bareback', 'Studio'], updatedAgo: 5 * DAY, videoOffset: 7 },
+  { title: 'Johnny Rapid', avatarUrl: 'https://nli01.joystorage.com/e/6/d/e6d0abd734a1a2eaef0baf7ceccfdb5c.jpeg', videosCount: 86, followersCount: 94200, newCount: 0, tags: ['Twink', 'Bareback', 'Group', 'Amateur'], updatedAgo: 14 * DAY, videoOffset: 4 },
 ];
 
 /**
@@ -80,8 +108,27 @@ const CHANNELS = [
 const CATEGORIES = [
   { title: 'Bareback', videosCount: 214, newCount: 3, updatedAgo: 3 * HOUR, videoOffset: 1 },
   { title: 'Twinks', videosCount: 176, newCount: 2, updatedAgo: 9 * HOUR, videoOffset: 5 },
-  { title: 'Bears', videosCount: 92, newCount: 0, updatedAgo: 11 * DAY, videoOffset: 10 },
-  { title: 'Firemen', videosCount: 61, newCount: 0, updatedAgo: 24 * DAY, videoOffset: 8 },
+  { title: 'Bareback', videosCount: 214, newCount: 3, updatedAgo: 3 * HOUR, videoOffset: 1 },
+  { title: 'Twinks', videosCount: 176, newCount: 2, updatedAgo: 9 * HOUR, videoOffset: 5 },
+  { title: 'Bareback', videosCount: 214, newCount: 3, updatedAgo: 3 * HOUR, videoOffset: 1 },
+  { title: 'Twinks', videosCount: 176, newCount: 2, updatedAgo: 9 * HOUR, videoOffset: 5 },
+];
+
+/** Чужие плейлисты, на которые подписан пользователь. */
+const PLAYLISTS = [
+  { name: 'Suits after office', username: 'andyblair2', videosCount: 24, likes: 156, views: 1200, newCount: 4, createdAgo: 12 * DAY, videoOffset: 0 },
+  { name: 'Weekend binge', username: 'mattdvoe', videosCount: 33, likes: 271, views: 2400, newCount: 5, createdAgo: 28 * DAY, videoOffset: 4 },
+  { name: 'Morning workout', username: 'andyblair2', videosCount: 12, likes: 98, views: 820, newCount: 2, createdAgo: 96 * DAY, videoOffset: 8 },
+  { name: 'Late night picks', username: 'romerofx', videosCount: 7, likes: 42, views: 340, newCount: 1, createdAgo: 5 * DAY, videoOffset: 2 },
+  { name: 'Suits after office', username: 'andyblair2', videosCount: 24, likes: 156, views: 1200, newCount: 4, createdAgo: 12 * DAY, videoOffset: 0 },
+  { name: 'Weekend binge', username: 'mattdvoe', videosCount: 33, likes: 271, views: 2400, newCount: 5, createdAgo: 28 * DAY, videoOffset: 4 },
+  { name: 'Morning workout', username: 'andyblair2', videosCount: 12, likes: 98, views: 820, newCount: 2, createdAgo: 96 * DAY, videoOffset: 8 },
+  { name: 'Late night picks', username: 'romerofx', videosCount: 7, likes: 42, views: 340, newCount: 1, createdAgo: 5 * DAY, videoOffset: 2 },
+  { name: 'Suits after office', username: 'andyblair2', videosCount: 24, likes: 156, views: 1200, newCount: 4, createdAgo: 12 * DAY, videoOffset: 0 },
+  { name: 'Weekend binge', username: 'mattdvoe', videosCount: 33, likes: 271, views: 2400, newCount: 5, createdAgo: 28 * DAY, videoOffset: 4 },
+  { name: 'Morning workout', username: 'andyblair2', videosCount: 12, likes: 98, views: 820, newCount: 2, createdAgo: 96 * DAY, videoOffset: 8 },
+  { name: 'Morning workout', username: 'andyblair2', videosCount: 12, likes: 98, views: 820, newCount: 2, createdAgo: 96 * DAY, videoOffset: 8 },
+  { name: 'Late night picks', username: 'romerofx', videosCount: 7, likes: 42, views: 340, newCount: 1, createdAgo: 5 * DAY, videoOffset: 2 },
 ];
 
 /**
@@ -119,6 +166,32 @@ export function getLibraryChannelsStub(): LibraryChannelStub[] {
   });
 }
 
+/** Мозаика обложек плейлиста: карточка раскладывает до 4 тумб. */
+function buildThumbs(offset: number, count: number) {
+  return Array.from({ length: Math.min(count, 4) }, (_, index) => (
+    VIDEO_POOL[(offset + index) % VIDEO_POOL.length].thumbUrls
+  ));
+}
+
+export function getLibraryPlaylistsStub(): LibraryPlaylistStub[] {
+  const stamp = now();
+
+  return PLAYLISTS.map(({ createdAgo, videoOffset, ...playlist }, index) => ({
+    ...playlist,
+    id: `${index + 1}`,
+    playlistType: PlaylistType.Public,
+    created: stamp - createdAgo,
+    firstVideoId: VIDEO_POOL[videoOffset % VIDEO_POOL.length].id,
+    thumbUrls: buildThumbs(videoOffset, playlist.videosCount),
+  }));
+}
+
+/** Сумма новинок по всем подпискам — счётчик на колокольчике и в шапках секций. */
+export function getFollowingUpdatesTotal(): number {
+  return [...MODELS, ...CHANNELS, ...CATEGORIES, ...PLAYLISTS]
+    .reduce((total, item) => total + item.newCount, 0);
+}
+
 export function getLibraryCategoriesStub(): LibraryCategoryStub[] {
   const stamp = now();
 

package/types/button-themes.d.ts

@@ -1 +1 @@
-export type ButtonThemes = 'primary' | 'secondary' | 'warning' | 'muted' | undefined
+export type ButtonThemes = 'primary' | 'secondary' | 'warning' | 'muted' | 'simple' | undefined

package/types/category-card.d.ts

@@ -9,4 +9,6 @@ export interface ICategoryCard {
   isTop?: boolean,
   icon?: string;
   description?: string,
+  /** Новинки с прошлого захода — бейдж «3 new» (страница подписок) */
+  newCount?: number;
 }

package/types/playlist-card.d.ts

@@ -14,4 +14,6 @@ export interface IPlaylistCard {
   views?: number;
   likes?: number;
   dislikes?: number;
+  /** Новинки с прошлого захода — бейдж «3 new» (страница подписок) */
+  newCount?: number;
 }

package/types/round-card.d.ts

@@ -3,4 +3,6 @@ export interface IRoundCard {
   primaryImageUrl: string
   videosCount: number
   link: string
+  /** Новинки с прошлого захода — бейдж на аватаре (страница подписок) */
+  newCount?: number
 }