itube-specs 0.0.910 → 0.0.911

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

@@ -1001,10 +1001,11 @@ $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;
+$library-item-avatar-bg: $color-zinc-700;
+$library-item-avatar-text: $color-zinc-200;
+$library-item-avatar-border: $color-zinc-900;
+$library-item-rest-bg: $color-zinc-800;
+$library-item-rest-text: $color-zinc-400;
 
 // ─── Library feed (блок подписки: модель / канал / категория) ───
 $library-feed-bg: $color-zinc-900-40;
@@ -1023,6 +1024,8 @@ $library-feed-age: $color-zinc-500;
 $library-feed-meta: $color-zinc-500;
 $library-feed-meta-dot: $color-zinc-600;
 $library-feed-title: $color-zinc-500;
+$library-feed-open: $color-zinc-400;
+$library-feed-open--hover: $color-white;
 
 // ─── Page: library ───
 $page-library-toggle-text: $color-zinc-300;

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

@@ -1029,10 +1029,11 @@ $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;
+$library-item-avatar-bg: $color-gray-300;
+$library-item-avatar-text: $color-gray-700;
+$library-item-avatar-border: $color-gray-100;
+$library-item-rest-bg: $color-gray-200;
+$library-item-rest-text: $color-gray-600;
 
 // ─── Library feed (блок подписки: модель / канал / категория) ───
 $library-feed-bg: $color-gray-100;
@@ -1051,6 +1052,8 @@ $library-feed-age: $color-gray-500;
 $library-feed-meta: $color-gray-500;
 $library-feed-meta-dot: $color-gray-400;
 $library-feed-title: $color-gray-500;
+$library-feed-open: $color-gray-600;
+$library-feed-open--hover: $color-gray-900;
 
 // ─── Page: library ───
 $page-library-toggle-text: $color-gray-700;

package/components/library/feed.vue

@@ -49,7 +49,7 @@
 
           <span
             v-if="item.newCount"
-            class="library-feed__badge _from-sm"
+            class="library-feed__badge"
           >{{ t('library.new_count', { count: item.newCount }) }}</span>
         </div>
 
@@ -108,10 +108,28 @@
       </div>
     </header>
 
-    <!-- <h3
-      v-if="item.feedTitle"
-      class="library-feed__feed-title"
-    >{{ item.feedTitle }}</h3> -->
+    <!-- На мобиле ссылки на сущность в шапке нет — она уезжает сюда, в строку над лентой -->
+    <div
+      v-if="item.feedTitle || item.openText"
+      class="library-feed__feed-head _to-sm"
+    >
+      <p
+        v-if="item.feedTitle"
+        class="library-feed__feed-title"
+      >{{ item.feedTitle }}</p>
+
+      <NuxtLink
+        v-if="item.openText"
+        :to="item.to"
+        class="library-feed__open"
+      >
+        {{ item.openText }}
+        <UiIcon
+          name="arrow-right"
+          size="16"
+        />
+      </NuxtLink>
+    </div>
 
     <div class="library-feed__grid">
       <CardVideo
@@ -329,13 +347,38 @@ const ageText = computed(() => {
   column-gap: 8px;
 }
 
-// .library-feed__feed-title {
-//   @include font-sm;
+.library-feed__feed-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 12px;
+  margin-bottom: 8px;
+}
+
+.library-feed__feed-title {
+  @include font-sm;
 
-//   margin: 0 0 12px;
-//   font-weight: 400;
-//   color: $library-feed-title;
-// }
+  margin: 0;
+  font-weight: 400;
+  color: $library-feed-title;
+}
+
+/* Заголовка может не быть (лента без подписи) — ссылка всё равно держится правого края */
+.library-feed__open {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  white-space: nowrap;
+  color: $library-feed-open;
+
+  @include hover(color) {
+    color: $library-feed-open--hover;
+  }
+}
 
 .library-feed__grid {
   display: grid;

package/components/library/item.vue

@@ -1,4 +1,4 @@
-<!-- Карточка-ссылка библиотеки: иконка-плитка, счётчик, заголовок и опциональный бейдж -->
+<!-- Карточка-ссылка библиотеки: иконка-плитка, ряд аватарок «что внутри» (десктоп), заголовок и счётчик -->
 <template>
   <NuxtLink
     :to="to"
@@ -8,55 +8,76 @@
       <span class="library-item__icon">
         <UiIcon
           :name="icon"
-          size="20"
+          size="22"
         />
       </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"
+        v-if="avatars && avatars.length"
+        class="library-item__preview"
       >
-        {{ badge }}
         <span
-          v-if="badgeNote"
-          class="library-item__badge-note _from-xs"
-        >{{ badgeNote }}</span>
+          v-for="(avatar, index) in avatars"
+          :key="`${avatar.title}-${index}`"
+          :style="{ zIndex: avatars.length - index }"
+          :title="avatar.title"
+          class="library-item__avatar"
+        >
+          <UiImg
+            v-if="avatar.avatarUrl && !failedAvatars.includes(index)"
+            :src="avatar.avatarUrl"
+            :alt="avatar.title"
+            class="library-item__photo"
+            width="40"
+            height="40"
+            @error="failedAvatars.push(index)"
+          />
+          <span
+            v-else
+            class="library-item__initials"
+          >{{ getNameInitials(avatar.title) }}</span>
+        </span>
+
+        <span
+          v-if="restCount"
+          class="library-item__rest"
+        >+{{ restCount }}</span>
       </span>
     </span>
+
+    <h3 class="library-item__title">{{ title }}</h3>
+
+    <span
+      v-if="subtitle"
+      class="library-item__subtitle"
+    >{{ subtitle }}</span>
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+import { getNameInitials } from '../../utils/player-channel/get-name-initials';
+import type { ILibraryItemAvatar } from '../../types';
+
+defineProps<{
   to: string
   icon: string
   title: string
-  /** Счётчик справа от иконки: «128 videos», «3 private · 1 public» */
+  /** Счётчик под заголовком: «128 videos», «3 private · 1 public» */
   subtitle?: string
-  /** Бейдж у заголовка: «3 new», «+214» */
-  badge?: string
-  /** Хвост бейджа, скрытый на мобиле: «this week» */
-  badgeNote?: string
-  badgeTheme?: 'accent' | 'bordered'
-}>(), {
-  badgeTheme: 'accent'
-});
+  /** Первые подписки внутри раздела — ряд аватарок, виден только на широкой карточке */
+  avatars?: ILibraryItemAvatar[]
+  /** Сколько подписок не влезло в ряд: плашка «+8» в его хвосте */
+  restCount?: number
+}>();
+
+const failedAvatars = ref<number[]>([]);
 </script>
 
 <style lang="scss">
 .library-item {
+  container-type: inline-size;
   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;
@@ -71,16 +92,17 @@ withDefaults(defineProps<{
 .library-item__head {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  column-gap: 8px;
+  column-gap: 12px;
+  min-height: 44px;
+  margin-bottom: 32px;
 }
 
 .library-item__icon {
   display: grid;
   place-content: center;
   flex-shrink: 0;
-  width: 44px;
-  height: 44px;
+  width: 48px;
+  height: 48px;
   color: $library-item-icon;
   background-color: $library-item-icon-bg;
   border: 1px solid $library-item-icon-border;
@@ -98,18 +120,70 @@ withDefaults(defineProps<{
   }
 }
 
+/* Ряд аватарок занимает больше половины карточки: показываем, только когда она реально широкая */
+.library-item__preview {
+  display: none;
+}
+
+@include from-br(sm) {
+  @include from-cq(220px) {
+    .library-item__preview {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.library-item__avatar,
+.library-item__rest {
+  display: grid;
+  place-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border: 2px solid $library-item-avatar-border;
+  border-radius: $radius-full;
+}
+
+.library-item__avatar {
+  background-color: $library-item-avatar-bg;
+}
+
+.library-item__avatar:not(:first-child),
+.library-item__rest {
+  margin-inline-start: -11px;
+}
+
+.library-item__photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 30%;
+}
+
+.library-item__initials {
+  @include font-3xs;
+
+  font-weight: 700;
+  color: $library-item-avatar-text;
+}
+
+.library-item__rest {
+  @include font-3xs;
+
+  font-weight: 600;
+  color: $library-item-rest-text;
+  background-color: $library-item-rest-bg;
+}
+
 .library-item__subtitle {
   @include font-sm;
 
+  margin-top: 4px;
   color: $library-item-subtitle;
 }
 
-.library-item__footer {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-}
-
 .library-item__title {
   @include font-base;
 
@@ -127,26 +201,4 @@ withDefaults(defineProps<{
     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/package.json

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

package/pages/library/categories.vue

@@ -35,6 +35,7 @@ const items = computed<ILibraryFeedItem[]>(() => getLibraryCategoriesStub().map(
   videosCount: category.videosCount,
   // Нечего показать в новинках — лента откатывается на лучшее за неделю
   feedTitle: category.newCount ? t('library.latest') : t('library.top_this_week'),
+  openText: t('library.open_category'),
   videos: category.videos,
 })));
 

package/pages/library/channels.vue

@@ -35,6 +35,8 @@ const items = computed<ILibraryFeedItem[]>(() => getLibraryChannelsStub().map(ch
     { icon: 'date', text: t('library.updated_at', { date: formatDate(channel.lastVideoAddedAt) }), desktopOnly: true },
   ],
   videosCount: channel.videosCount,
+  feedTitle: t('library.latest'),
+  openText: t('library.open_channel'),
   videos: channel.videos,
 })));
 

package/pages/library/index.vue

@@ -111,9 +111,8 @@
             :icon="item.icon"
             :title="item.title"
             :subtitle="item.subtitle"
-            :badge="item.badge"
-            :badge-note="item.badgeNote"
-            :badge-theme="item.badgeTheme"
+            :avatars="item.avatars"
+            :rest-count="item.restCount"
           />
         </li>
       </ul>
@@ -135,8 +134,9 @@
 
 <script setup lang="ts">
 import { getHistoryStub } from '../../stubs/history';
+import { getLibraryChannelsStub, getLibraryModelsStub } from '../../stubs/library-follows';
 import { libraryStub } from '../../stubs/library';
-import type { IBreadcrumbItem, IVideoCard } from '../../types';
+import type { IBreadcrumbItem, ILibraryItemAvatar, IVideoCard } from '../../types';
 
 /** Карточка-ссылка библиотеки в разметке страницы. */
 type LibraryLink = {
@@ -144,13 +144,15 @@ type LibraryLink = {
   icon: string
   title: string
   subtitle?: string
-  badge?: string
-  badgeNote?: string
-  badgeTheme?: 'accent' | 'bordered'
+  avatars?: ILibraryItemAvatar[]
+  restCount?: number
 };
 
 const CONTINUE_LIMIT = 4;
 
+/** Сколько аватарок помещается в ряд «что внутри» — остальные уходят в плашку «+N». */
+const AVATARS_LIMIT = 4;
+
 const { t } = useI18n();
 
 const { generateLink } = useGenerateLink();
@@ -197,36 +199,43 @@ const collections = computed<LibraryLink[]>(() => [
   },
 ]);
 
+/** Первые подписки раздела: ряд аватарок на карточке показывает, что внутри. */
+const modelAvatars: ILibraryItemAvatar[] = getLibraryModelsStub()
+  .slice(0, AVATARS_LIMIT)
+  .map(model => ({ title: model.title, avatarUrl: model.avatarUrl }));
+
+const channelAvatars: ILibraryItemAvatar[] = getLibraryChannelsStub()
+  .slice(0, AVATARS_LIMIT)
+  .map(channel => ({ title: channel.title, avatarUrl: channel.avatarUrl }));
+
 const following = computed<LibraryLink[]>(() => [
   {
     to: generateLink('/library/models'),
     icon: 'user',
     title: t('models'),
     subtitle: t('plural.models', libraryStub.models),
-    badge: t('library.new_count', { count: libraryStub.newModels }),
+    avatars: modelAvatars,
+    restCount: Math.max(libraryStub.models - AVATARS_LIMIT, 0),
   },
   {
     to: generateLink('/library/channels'),
     icon: 'play-circle',
     title: t('channels'),
     subtitle: t('plural.channels', libraryStub.channels),
-    badge: t('library.new_count', { count: libraryStub.newChannels }),
+    avatars: channelAvatars,
+    restCount: Math.max(libraryStub.channels - AVATARS_LIMIT, 0),
   },
   {
     to: generateLink('/library/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 }),
   },
 ]);
 

package/pages/library/models.vue

@@ -36,6 +36,8 @@ const items = computed<ILibraryFeedItem[]>(() => getLibraryModelsStub().map(mode
     { icon: 'date', text: t('library.updated_at', { date: formatDate(model.lastVideoAddedAt) }), desktopOnly: true },
   ],
   videosCount: model.videosCount,
+  feedTitle: t('library.latest'),
+  openText: t('library.open_profile'),
   videos: model.videos,
 })));
 

package/stubs/library.ts

@@ -10,7 +10,6 @@ export const libraryStub = {
   channels: 5,
   newChannels: 1,
   categories: 4,
-  categoryVideosPerWeek: 214,
   playlists: 7,
   newPlaylists: 2,
 };

package/types/index.d.ts

@@ -50,6 +50,7 @@ export * from './link-item.d.ts';
 export * from './fluid-player.d.ts';
 export * from './chips-item.d.ts';
 export * from './library-feed.d.ts';
+export * from './library-item.d.ts';
 export * from './nav-link-item.d.ts';
 export * from './paginated-response.d.ts';
 export * from './page-seo.d.ts';

package/types/library-feed.d.ts

@@ -36,5 +36,7 @@ export interface ILibraryFeedItem {
   videosCount: number
   /** Подпись над лентой: «Latest» / «Top this week». Нет — лента без подписи */
   feedTitle?: string
+  /** Текст ссылки на сущность в строке над лентой: «Open profile» / «Open channel» */
+  openText?: string
   videos: IVideoCard[]
 }

package/types/library-item.d.ts

@@ -0,0 +1,6 @@
+/** Аватарка в ряду «что внутри» на карточке библиотеки: фото подписки или инициалы вместо него. */
+export interface ILibraryItemAvatar {
+  title: string
+  /** Нет — вместо картинки рисуются инициалы */
+  avatarUrl?: string
+}