itube-specs 0.0.881 → 0.0.885

package/assets/scss/mixins/_button.scss

@@ -13,7 +13,6 @@ $button-variants: (
     'border': $button-primary-border,
     'border--hover': $button-primary-border,
     'border--active': $button-primary-border,
-    'icon': $button-primary-text,
   ),
   secondary: (
     'bg': $button-secondary-bg,
@@ -24,7 +23,6 @@ $button-variants: (
     'border': $button-secondary-border,
     'border--hover': $button-secondary-border,
     'border--active': $button-secondary-border--active,
-    'icon': $button-secondary-icon,
   ),
   muted: (
     'bg': $button-muted-bg,
@@ -35,7 +33,6 @@ $button-variants: (
     'border': $button-muted-border,
     'border--hover': $button-muted-border--hover,
     'border--active': $button-muted-border,
-    'icon': $button-muted-text,
   ),
   warning: (
     'bg': $button-warning-bg,
@@ -46,7 +43,6 @@ $button-variants: (
     'border': $button-warning-border,
     'border--hover': $button-warning-border,
     'border--active': $button-warning-border,
-    'icon': $button-warning-text,
   ),
 );
 

package/assets/scss/themes/dark/_theme.scss

@@ -221,6 +221,7 @@ $history-card-dropdown-icon: $color-zinc-500;
 $history-card-dropdown-icon--hover: $color-white;
 $history-card-progress-bg: $mono-white-50;
 $history-card-progress-fill: $color-indigo-500;
+$history-card-remaining: $color-indigo-400;
 
 // ─── Video card dropdown ───
 $video-card-dropdown-border: $color-zinc-800;
@@ -469,7 +470,6 @@ $button-secondary-text: $color-zinc-400;
 $button-secondary-text--active: $color-white;
 $button-secondary-border: $color-zinc-700-50;
 $button-secondary-border--active: $color-indigo-500;
-$button-secondary-icon: $color-indigo-600;
 $button-muted-bg: $color-zinc-800;
 $button-muted-text: $color-zinc-300;
 $button-muted-bg--hover: $color-zinc-700;
@@ -723,7 +723,6 @@ $filters-main-slider-border: $color-zinc-800;
 $filters-main-select-border--active: $color-indigo-500-50;
 $filters-main-select-bg--active: $color-indigo-600-20;
 $filters-main-select-text--active: $color-indigo-300;
-$filters-main-select-icon: $color-zinc-400;
 $filters-main-slider-content-bg: $color-zinc-900;
 $filters-main-bg--hover: $color-zinc-700-70;
 
@@ -948,10 +947,33 @@ $page-channels-border: $color-zinc-800;
 // ─── Page: channel ───
 $page-channel-border: $color-zinc-800;
 
+// ─── Library item (карточка-ссылка) ───
+$library-item-bg: $color-zinc-900-40;
+$library-item-bg--hover: $color-zinc-900;
+$library-item-border: $color-zinc-800;
+$library-item-border--hover: $color-indigo-500-50;
+$library-item-icon: $color-indigo-400;
+$library-item-icon-bg: $color-indigo-500-10;
+$library-item-icon-bg--hover: $color-indigo-500-20;
+$library-item-icon-border: $color-indigo-500-20;
+$library-item-icon-border--hover: $color-indigo-500-40;
+$library-item-title: $color-white;
+$library-item-title--hover: $color-indigo-400;
+$library-item-subtitle: $color-zinc-500;
+$library-item-badge-bg: $color-indigo-600-90;
+$library-item-badge-text: $color-white;
+$library-item-badge-bordered-border: $color-zinc-600;
+$library-item-badge-bordered-text: $color-zinc-400;
+
+// ─── Page: library ───
+$page-library-heading: $color-white;
+$page-library-heading-icon: $color-white;
+$page-library-heading-icon-bg: $mono-white-10;
+$page-library-toggle-text: $color-zinc-300;
+
 // ─── Page: history ───
 $page-history-group-title: $color-zinc-300;
 $page-history-group-icon: $color-zinc-500;
-$page-history-clear-icon: $color-zinc-400;
 $page-history-group-count: $color-zinc-500;
 $page-history-confirm-text: $color-zinc-300;
 $page-history-confirm-muted: $color-zinc-500;

package/assets/scss/themes/light/_theme.scss

@@ -279,6 +279,7 @@ $history-card-dropdown-icon: $color-gray-600;
 $history-card-dropdown-icon--hover: $color-gray-900;
 $history-card-progress-bg: $color-gray-300;
 $history-card-progress-fill: $color-indigo-500;
+$history-card-remaining: $color-indigo-600;
 
 // ─── Video card dropdown ───
 $video-card-dropdown-border: transparent;
@@ -526,7 +527,6 @@ $button-secondary-text: $color-gray-700;
 $button-secondary-text--active: $color-white;
 $button-secondary-border: transparent;
 $button-secondary-border--active: $color-indigo-soft;
-$button-secondary-icon: $color-gray-700;
 $button-muted-bg: transparent;
 $button-muted-text: $color-gray-300;
 $button-muted-bg--hover: $color-slate-750;
@@ -753,7 +753,6 @@ $filters-main-slider-border: transparent;
 $filters-main-select-border--active: $color-indigo-500-50;
 $filters-main-select-bg--active: $color-gray-300;
 $filters-main-select-text--active: $color-gray-700;
-$filters-main-select-icon: $color-gray-700;
 $filters-main-slider-content-bg: $color-slate-800;
 $filters-main-bg--hover: $button-secondary-bg--hover;
 
@@ -978,10 +977,33 @@ $page-channels-border: transparent;
 // ─── Page: channel ───
 $page-channel-border: transparent;
 
+// ─── Library item (карточка-ссылка) ───
+$library-item-bg: $color-gray-100;
+$library-item-bg--hover: $color-gray-200;
+$library-item-border: transparent;
+$library-item-border--hover: $color-indigo-500-50;
+$library-item-icon: $color-indigo-600;
+$library-item-icon-bg: $color-indigo-500-10;
+$library-item-icon-bg--hover: $color-indigo-500-20;
+$library-item-icon-border: transparent;
+$library-item-icon-border--hover: transparent;
+$library-item-title: $color-gray-900;
+$library-item-title--hover: $color-indigo-600;
+$library-item-subtitle: $color-gray-500;
+$library-item-badge-bg: $color-indigo-600;
+$library-item-badge-text: $color-white;
+$library-item-badge-bordered-border: $color-gray-300;
+$library-item-badge-bordered-text: $color-gray-600;
+
+// ─── Page: library ───
+$page-library-heading: $color-gray-900;
+$page-library-heading-icon: $color-gray-900;
+$page-library-heading-icon-bg: $color-gray-200;
+$page-library-toggle-text: $color-gray-700;
+
 // ─── Page: history ───
 $page-history-group-title: $color-gray-900;
 $page-history-group-icon: $color-gray-500;
-$page-history-clear-icon: $color-gray-400;
 $page-history-group-count: $color-gray-500;
 $page-history-confirm-text: $color-gray-900;
 $page-history-confirm-muted: $color-gray-500;

package/assets/scss/vars/_palette.scss

@@ -52,9 +52,12 @@ $color-indigo-300: lab(74.0235% 8.54138 -41.6075); // #a4b3ff
 $color-indigo-400: lab(59.866% 22.4834 -64.4485); // #7d87ff
 $color-indigo-500: lab(48.295% 38.3129 -81.9673); // #625fff
 $color-indigo-500-10: lab(48.295% 38.3129 -81.9673 / 10%);
+$color-indigo-500-20: lab(48.295% 38.3129 -81.9673 / 20%);
+$color-indigo-500-40: lab(48.295% 38.3129 -81.9673 / 40%);
 $color-indigo-500-50: lab(48.295% 38.3129 -81.9673 / 50%);
 $color-indigo-600: lab(38.4009% 52.6132 -92.3857); // #4f39f6
 $color-indigo-600-20: lab(38.4009% 52.6132 -92.3857 / 20%);
+$color-indigo-600-90: lab(38.4009% 52.6132 -92.3857 / 90%);
 $color-indigo-700: lab(32.4486% 49.2217 -84.6695); // #432dd7
 $color-indigo-800: lab(26.6645% 37.9804 -68.6402); // #372aac
 $color-indigo-900: lab(23.3911% 24.6978 -50.4718); // #312c85

package/components/card/history.vue

@@ -82,12 +82,15 @@
           :to="channelLink"
           class="card-history__channel _truncate"
         >{{ card.channelName }}</NuxtLink>
-        <span class="card-history__watched">
+        <span
+          :class="{'--remaining': remaining}"
+          class="card-history__watched"
+        >
           <UiIcon
             name="clock"
             size="12"
           />
-          {{ watchedAgo }}
+          {{ remaining ? remainingText : watchedAgo }}
         </span>
       </p>
 
@@ -127,6 +130,8 @@ const props = defineProps<{
   card: HistoryStubCard
   loading?: 'eager' | 'lazy'
   priority?: boolean
+  /** Развилка мета-строки: вместо «когда смотрели» — сколько осталось до конца («Продолжить просмотр») */
+  remaining?: boolean
 }>();
 
 const emit = defineEmits<{
@@ -160,6 +165,11 @@ const progress = computed(() => Math.min(100, Math.max(0, Math.round(props.card.
 
 const watchedAgo = computed(() => useFormatTimeAgo(props.card.watchedAt, locale.value, true));
 
+const remainingText = computed(() => {
+  const left = Math.ceil((props.card.duration * (100 - progress.value)) / 100 / 60);
+  return t('minutes_left', { count: Math.max(left, 1) });
+});
+
 const link = computed(() => generateLink(`/videos/${props.card.id}`));
 
 const channelLink = computed(() => props.card.channelName
@@ -325,6 +335,10 @@ $progress-height: 4px;
   flex-shrink: 0;
 }
 
+.card-history__watched.--remaining {
+  color: $history-card-remaining;
+}
+
 .card-history__dropdown {
   grid-row: 1/3;
   grid-column: 3;

package/components/filter/selects.vue

@@ -37,7 +37,6 @@
         >
           {{ getSelectLabel(item) }}
           <UiIcon
-            class="filter-selects__select-icon"
             name="angle-down"
             size="16"
           />
@@ -59,7 +58,6 @@
         >
           {{ item.title }}
           <UiIcon
-            class="filter-selects__select-icon"
             name="angle-down"
             size="16"
           />
@@ -338,10 +336,6 @@ function getSelectLabel(item: IModelFilter) {
   background-color: $filters-main-select-bg--active;
 }
 
-.ui-btn.filter-selects__select-button .ui-icon.filter-selects__select-icon:last-child {
-  color: $filters-main-select-icon;
-}
-
 .filter-selects__slider-popup {
   display: grid;
   row-gap: 16px;

package/components/library/item.vue

@@ -0,0 +1,152 @@
+<!-- Карточка-ссылка библиотеки: иконка-плитка, счётчик, заголовок и опциональный бейдж -->
+<template>
+  <NuxtLink
+    :to="to"
+    class="library-item"
+  >
+    <span class="library-item__head">
+      <span class="library-item__icon">
+        <UiIcon
+          :name="icon"
+          size="20"
+        />
+      </span>
+      <span
+        v-if="subtitle"
+        class="library-item__subtitle _truncate"
+      >{{ subtitle }}</span>
+    </span>
+
+    <span class="library-item__footer">
+      <h3 class="library-item__title">{{ title }}</h3>
+      <span
+        v-if="badge"
+        :class="`--${badgeTheme}`"
+        class="library-item__badge"
+      >
+        {{ badge }}
+        <span
+          v-if="badgeNote"
+          class="library-item__badge-note _from-xs"
+        >{{ badgeNote }}</span>
+      </span>
+    </span>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  to: string
+  icon: string
+  title: string
+  /** Счётчик справа от иконки: «128 videos», «3 private · 1 public» */
+  subtitle?: string
+  /** Бейдж у заголовка: «3 new», «+214» */
+  badge?: string
+  /** Хвост бейджа, скрытый на мобиле: «this week» */
+  badgeNote?: string
+  badgeTheme?: 'accent' | 'bordered'
+}>(), {
+  badgeTheme: 'accent'
+});
+</script>
+
+<style lang="scss">
+.library-item {
+  display: flex;
+  flex-direction: column;
+  row-gap: 32px;
+  justify-content: space-between;
+  padding: 20px;
+  background-color: $library-item-bg;
+  border: 1px solid $library-item-border;
+  border-radius: $radius-xl;
+
+  @include hover(background-color, border-color) {
+    background-color: $library-item-bg--hover;
+    border-color: $library-item-border--hover;
+  }
+}
+
+.library-item__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 8px;
+}
+
+.library-item__icon {
+  display: grid;
+  place-content: center;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  color: $library-item-icon;
+  background-color: $library-item-icon-bg;
+  border: 1px solid $library-item-icon-border;
+  border-radius: $radius-xl;
+
+  @include from-br(sm) {
+    transition: var(--transition) background-color, var(--transition) border-color;
+  }
+}
+
+@include from-br(sm) {
+  .library-item:is(:hover, :focus-visible) .library-item__icon {
+    background-color: $library-item-icon-bg--hover;
+    border-color: $library-item-icon-border--hover;
+  }
+}
+
+.library-item__subtitle {
+  @include font-sm;
+
+  color: $library-item-subtitle;
+}
+
+.library-item__footer {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+.library-item__title {
+  @include font-base;
+
+  margin: 0;
+  font-weight: 600;
+  color: $library-item-title;
+
+  @include from-br(sm) {
+    transition: var(--transition) color;
+  }
+}
+
+@include from-br(sm) {
+  .library-item:is(:hover, :focus-visible) .library-item__title {
+    color: $library-item-title--hover;
+  }
+}
+
+.library-item__badge {
+  @include font-3xs;
+
+  flex-shrink: 0;
+  font-weight: 600;
+  white-space: nowrap;
+  padding-block: 2px;
+  padding-inline: 8px;
+  border: 1px solid transparent;
+  border-radius: $radius-full;
+}
+
+.library-item__badge.--accent {
+  color: $library-item-badge-text;
+  background-color: $library-item-badge-bg;
+}
+
+.library-item__badge.--bordered {
+  color: $library-item-badge-bordered-text;
+  border-color: $library-item-badge-bordered-border;
+}
+</style>

package/components/ui/btn.vue

@@ -122,10 +122,6 @@ const slotText = computed(() => {
   }
 }
 
-.ui-btn.--secondary > .ui-icon:first-child {
-  color: var(--button-icon, #{$button-secondary-icon});
-}
-
 .ui-btn.--active.--secondary {
   background-color: var(--button-bg--active, #{$button-secondary-bg--active});
   color: var(--button-text--active, #{$button-secondary-text--active});

package/components/ui/toggle.vue

@@ -71,8 +71,9 @@ $toggler-size: 16px;
   right: 0;
 }
 
+/* Трек уехал к правому краю лейбла — ручку считаем от него же (без слота 100% = 0). */
 .ui-toggle.--left::after {
-  left: -1 * $control-width + $padding;
+  left: calc(100% - #{$control-width} + #{$padding});
 }
 
 .ui-toggle::before {
@@ -112,4 +113,9 @@ $toggler-size: 16px;
 .ui-toggle__text {
   padding-left: calc($control-width + 8px);
 }
+
+.ui-toggle.--left .ui-toggle__text {
+  padding-left: 0;
+  padding-right: calc($control-width + 8px);
+}
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.881",
+  "version": "0.0.885",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/pages/history.vue

@@ -225,8 +225,6 @@ const breadcrumbs = [
 }
 
 .history__clear.ui-btn {
-  --button-icon: #{$page-history-clear-icon};
-
   flex-shrink: 0;
   margin-left: auto;
 }

package/pages/library.vue

@@ -1,6 +1,366 @@
+<!-- Библиотека: «продолжить просмотр», коллекции и подписки. Данные пока заглушка -->
 <template>
-  <div class="library"/>
+  <div class="library _page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <div class="library__header">
+      <h1 class="library__title _title">{{ t('navigation.library') }}</h1>
+
+      <UiToggle
+        v-model="saveHistory"
+        class="library__save"
+        left
+      >{{ t('history_text') }}</UiToggle>
+    </div>
+
+    <section
+      v-if="continueWatching.length > 0"
+      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>
+
+        <UiLink
+          :to="generateLink('/history')"
+          theme="secondary"
+        >
+          {{ t('library.view_all_history') }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </header>
+
+      <div class="library__continue">
+        <CardHistory
+          v-for="item in continueWatching"
+          :key="`continue-${item.guid}`"
+          :card="item"
+          loading="eager"
+          priority
+          remaining
+          @share="onShare"
+          @remove="onRemove"
+        />
+      </div>
+    </section>
+
+    <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>
+      </header>
+
+      <ul class="library__grid">
+        <li
+          v-for="item in collections"
+          :key="item.title"
+        >
+          <LibraryItem
+            :to="item.to"
+            :icon="item.icon"
+            :title="item.title"
+            :subtitle="item.subtitle"
+          />
+        </li>
+      </ul>
+    </section>
+
+    <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">
+          {{ t('library.whats_new', { count: newTotal }) }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiBtn>
+      </header>
+
+      <ul class="library__grid">
+        <li
+          v-for="item in following"
+          :key="item.title"
+        >
+          <LibraryItem
+            :to="item.to"
+            :icon="item.icon"
+            :title="item.title"
+            :subtitle="item.subtitle"
+            :badge="item.badge"
+            :badge-note="item.badgeNote"
+            :badge-theme="item.badgeTheme"
+          />
+        </li>
+      </ul>
+    </section>
+
+    <ShareMain
+      v-model="isShareOpen"
+      :url="shareUrl"
+    >
+      <template #card>
+        <CardVideoMini
+          v-if="shareCard"
+          :card="shareCard"
+        />
+      </template>
+    </ShareMain>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { getHistoryStub } from '../stubs/history';
+import type { HistoryStubCard } from '../stubs/history';
+import { libraryStub } from '../stubs/library';
+import type { IBreadcrumbItem, IVideoCard } from '../types';
+
+/** Карточка-ссылка библиотеки в разметке страницы. */
+type LibraryLink = {
+  to: string
+  icon: string
+  title: string
+  subtitle?: string
+  badge?: string
+  badgeNote?: string
+  badgeTheme?: 'accent' | 'bordered'
+};
+
+const CONTINUE_LIMIT = 4;
+
+const { t } = useI18n();
+
+const { generateLink } = useGenerateLink();
+
+const saveHistory = ref(true);
+
+const removedGuids = ref<string[]>([]);
+
+/** Недосмотренные ролики: прогресс есть, но до конца не дошли. */
+const continueWatching = computed(() => getHistoryStub()
+  .filter(item => item.progress > 0 && item.progress < 100)
+  .filter(item => !removedGuids.value.includes(item.guid))
+  .slice(0, CONTINUE_LIMIT));
+
+const newTotal = computed(() => libraryStub.newModels + libraryStub.newChannels + libraryStub.newPlaylists);
+
+const collections = computed<LibraryLink[]>(() => [
+  {
+    to: generateLink('/favorites'),
+    icon: 'heart',
+    title: t('favorites'),
+    subtitle: t('plural.videos', libraryStub.favorites),
+  },
+  {
+    to: `${generateLink('/favorites')}?tab=watch-later`,
+    icon: 'clock',
+    title: t('watch_later'),
+    subtitle: t('plural.videos', libraryStub.watchLater),
+  },
+  {
+    to: generateLink('/playlists'),
+    icon: 'playlist',
+    title: t('my_playlists'),
+    subtitle: t('library.playlists_visibility', {
+      privateCount: libraryStub.privatePlaylists,
+      publicCount: libraryStub.publicPlaylists,
+    }),
+  },
+  {
+    to: generateLink('/history'),
+    icon: 'history',
+    title: t('history'),
+    subtitle: t('library.watched_today', { count: libraryStub.watchedToday }),
+  },
+]);
+
+const following = computed<LibraryLink[]>(() => [
+  {
+    to: generateLink('/models'),
+    icon: 'user-group',
+    title: t('models'),
+    subtitle: t('plural.models', libraryStub.models),
+    badge: t('library.new_count', { count: libraryStub.newModels }),
+  },
+  {
+    to: generateLink('/channels'),
+    icon: 'play-circle',
+    title: t('channels'),
+    subtitle: t('plural.channels', libraryStub.channels),
+    badge: t('library.new_count', { count: libraryStub.newChannels }),
+  },
+  {
+    to: generateLink('/categories'),
+    icon: 'grid',
+    title: t('categories'),
+    subtitle: t('plural.categories', libraryStub.categories),
+    badge: `+${libraryStub.categoryVideosPerWeek}`,
+    badgeNote: t('library.this_week'),
+    badgeTheme: 'bordered',
+  },
+  {
+    to: generateLink('/playlists'),
+    icon: 'playlist',
+    title: t('playlists'),
+    subtitle: t('plural.playlists', libraryStub.playlists),
+    badge: t('library.new_count', { count: libraryStub.newPlaylists }),
+  },
+]);
+
+function onRemove(card: HistoryStubCard) {
+  removedGuids.value = [...removedGuids.value, card.guid];
+}
+
+const isShareOpen = ref(false);
+const shareCard = ref<IVideoCard | null>(null);
+
+const shareUrl = computed(() => shareCard.value ? generateLink(`/videos/${shareCard.value.id}`) : '');
+
+function onShare(card: IVideoCard) {
+  shareCard.value = card;
+  isShareOpen.value = true;
+}
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('navigation.library')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.library')}`,
+  },
+] as IBreadcrumbItem[];
 </script>
+
+<style lang="scss">
+.library__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  row-gap: 12px;
+  margin-bottom: 24px;
+}
+
+.library__title._title {
+  margin-bottom: 0;
+}
+
+.library__save .ui-toggle__text {
+  @include font-sm;
+
+  color: $page-library-toggle-text;
+}
+
+.library__section {
+  margin-bottom: 48px;
+}
+
+.library__section-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  row-gap: 12px;
+  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;
+  grid-template-columns: 1fr;
+
+  @include from-br(xm) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include from-br(sm) {
+    gap: 24px;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @include from-br(md) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.library__grid {
+  display: grid;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+
+  @include from-br(sm) {
+    gap: 24px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Карточка тянется на всю высоту ряда — иначе соседи с двухстрочным тайтлом разной высоты. */
+.library__grid > li {
+  display: grid;
+}
+</style>

package/runtime/utils/cleaners/clean-video-data.ts

@@ -14,7 +14,7 @@ const cleanTimelineGroups = (raw: ITimelineGroup[] | null): ISceneGroup[] | null
     .filter((group) => Array.isArray(group?.actions) && group.actions.length > 0)
     .map((group) => ({
       id: group.name || '',
-      title: humanize(group.name),
+      title: humanize(group.title),
       scenes: group.actions
         .filter((action) => action?.title)
         .map((action) => ({

package/stubs/library.ts

@@ -0,0 +1,16 @@
+/** Счётчики карточек «Библиотеки» — ручек под них пока нет, вёрстка живёт на заглушке. */
+export const libraryStub = {
+  favorites: 128,
+  watchLater: 12,
+  privatePlaylists: 3,
+  publicPlaylists: 1,
+  watchedToday: 6,
+  models: 12,
+  newModels: 3,
+  channels: 5,
+  newChannels: 1,
+  categories: 4,
+  categoryVideosPerWeek: 214,
+  playlists: 7,
+  newPlaylists: 2,
+};

package/types/video-data.d.ts

@@ -13,6 +13,7 @@ export interface ITimelineGroupAction {
 
 export interface ITimelineGroup {
   name: string;
+  title: string;
   actions: ITimelineGroupAction[];
 }