itube-specs 0.0.892 → 0.0.895

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

@@ -204,7 +204,6 @@ $video-card-mini-title: $color-zinc-300;
 $video-card-mini-weight: 400;
 $video-card-user-text: $color-zinc-400;
 $video-card-user-bg: $color-zinc-700;
-$card-preview-loader-bg: linear-gradient(to right, $color-indigo-muted, $color-indigo-deep);
 
 // ─── History card ───
 $history-card-bg: $color-zinc-900-40;
@@ -965,11 +964,29 @@ $library-item-badge-text: $color-white;
 $library-item-badge-bordered-border: $color-zinc-600;
 $library-item-badge-bordered-text: $color-zinc-400;
 
+// ─── Library feed (блок подписки: модель / канал / категория) ───
+$library-feed-bg: $color-zinc-900-40;
+$library-feed-border: $color-zinc-800;
+$library-feed-fade: $color-zinc-950;
+$library-feed-avatar-border: $color-zinc-700;
+$library-feed-avatar-border--hover: $color-zinc-500;
+$library-feed-initials: $color-zinc-400;
+$library-feed-initials-gradient-from: $color-zinc-700;
+$library-feed-initials-gradient-to: $color-zinc-800;
+$library-feed-name: $color-white;
+$library-feed-name--hover: $color-indigo-400;
+$library-feed-badge-bg: $color-indigo-600;
+$library-feed-badge-text: $color-white;
+$library-feed-meta: $color-zinc-500;
+$library-feed-meta-dot: $color-zinc-600;
+$library-feed-title: $color-zinc-500;
+
 // ─── 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-library-confirm-text: $color-zinc-300;
 
 // ─── Page: history ───
 $page-history-group-title: $color-zinc-300;

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

@@ -261,7 +261,6 @@ $video-card-mini-title: $color-gray-900;
 $video-card-mini-weight: 500;
 $video-card-user-text: $color-gray-700;
 $video-card-user-bg: $color-gray-300;
-$card-preview-loader-bg: linear-gradient(to right, $color-indigo-muted, $color-indigo-deep);
 $video-card-dropdown-size--hover: 1.25;
 
 // ─── History card ───
@@ -995,11 +994,29 @@ $library-item-badge-text: $color-white;
 $library-item-badge-bordered-border: $color-gray-300;
 $library-item-badge-bordered-text: $color-gray-600;
 
+// ─── Library feed (блок подписки: модель / канал / категория) ───
+$library-feed-bg: $color-gray-100;
+$library-feed-border: transparent;
+$library-feed-fade: $color-gray-100;
+$library-feed-avatar-border: $color-gray-300;
+$library-feed-avatar-border--hover: $color-indigo-500-50;
+$library-feed-initials: $color-gray-600;
+$library-feed-initials-gradient-from: $color-gray-200;
+$library-feed-initials-gradient-to: $color-gray-300;
+$library-feed-name: $color-gray-900;
+$library-feed-name--hover: $color-indigo-600;
+$library-feed-badge-bg: $color-indigo-600;
+$library-feed-badge-text: $color-white;
+$library-feed-meta: $color-gray-500;
+$library-feed-meta-dot: $color-gray-400;
+$library-feed-title: $color-gray-500;
+
 // ─── 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-library-confirm-text: $color-gray-700;
 
 // ─── Page: history ───
 $page-history-group-title: $color-gray-900;

package/components/card/dropdown/trigger.vue

@@ -1,7 +1,8 @@
 <!-- Кнопка меню карточки: до первого клика в DOM только она, чанк самого меню грузится по требованию -->
 <template>
-  <LazyCardDropdown
-    v-if="isMounted"
+  <component
+    v-if="dropdown"
+    :is="dropdown"
     v-bind="{ ...$attrs, ...props }"
     auto-open
   />
@@ -21,6 +22,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Component } from 'vue';
 import type { IVideoCard } from '../../../types';
 
 defineOptions({ inheritAttrs: false });
@@ -35,11 +37,13 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-const isMounted = ref(false);
+// Не LazyCardDropdown: async-обёртка на первом рендере отдаёт коммент-заглушку вместо элемента,
+// колонка грида схлопывается и текст карточки успевает дёрнуться. Кладём уже загруженный компонент —
+// подмена кнопки на меню происходит одним патчем.
+const dropdown = shallowRef<Component | null>(null);
 
 async function mountDropdown() {
-  await import('./index.vue');
-  isMounted.value = true;
+  dropdown.value = (await import('./index.vue')).default;
 }
 </script>
 

package/components/card/history.vue

@@ -20,7 +20,7 @@
         height="270"
         @error="posterError = true"
       />
-      <CardPreview
+      <UiVideoPreview
         v-if="isPreviewShow && card.previewUrl"
         :url="card.previewUrl"
       />
@@ -179,6 +179,7 @@ const videoCard = computed<IVideoCard>(() => ({
 <style lang="scss">
 $inset-label: 8px;
 $progress-height: 4px;
+$dropdown-column: 18px;
 
 .card-history {
   @include video-card;
@@ -249,7 +250,7 @@ $progress-height: 4px;
 .card-history__wrapper {
   display: grid;
   column-gap: 8px;
-  grid-template-columns: 32px 1fr auto;
+  grid-template-columns: 32px 1fr $dropdown-column;
   align-items: start;
   padding: 12px;
   color: $history-card-secondary;
@@ -343,7 +344,7 @@ $progress-height: 4px;
   }
 
   .card-history__wrapper {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr $dropdown-column;
   }
 
   .card-history__title,

package/components/card/video/index.vue

@@ -3,6 +3,7 @@
   <div
     :class="[
       {'--mini': mini},
+      {'--compact': compact},
       {'--avatar': card.channelAvatar},
       {'--no-channel': isChannelPage},
     ]"
@@ -27,7 +28,7 @@
         height="270"
         @error="onPosterError"
       />
-      <CardPreview
+      <UiVideoPreview
         v-if="isPreviewShow && card.previewUrl"
         :url="card.previewUrl"
       />
@@ -81,7 +82,7 @@
       >{{ card.title }}
       </NuxtLink>
       <component
-        v-if="!mini && card.channelName"
+        v-if="!mini && !compact && card.channelName"
         :is="component"
         :to="channelLink"
         class="card-video__channel-wrapper"
@@ -96,7 +97,7 @@
         </span>
       </component>
       <div
-        v-if="!mini && cardTags && cardTags.length > 0"
+        v-if="!mini && !compact && cardTags && cardTags.length > 0"
         class="card-video__tags"
       >
         <div class="card-video__tags-wrapper">
@@ -130,6 +131,8 @@ const featureFlags = useRuntimeConfig().public.featureFlags;
 const props = defineProps<{
   card: IVideoCard
   mini?: boolean
+  /** Аватар канала и тайтл, но без названия канала и тегов — лента подписок */
+  compact?: boolean
   loading?: 'eager' | 'lazy'
   topChips?: string[]
   playlistId?: string
@@ -202,6 +205,10 @@ const cardTags = computed(() => {
 $inset-label: 8px;
 $layout-breakpoint: 250px;
 
+// Колонка под меню карточки фиксирована, а не auto: иначе ширина зависит от того, отрисовано меню
+// или нет, и в момент подмены кнопки заголовок дёргается
+$dropdown-column: 18px;
+
 .card-video {
   @include video-card;
 
@@ -276,7 +283,7 @@ $layout-breakpoint: 250px;
 
 .card-video__wrapper {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr $dropdown-column;
   align-items: start;
   align-content: center;
   color: $video-card-secondary;
@@ -287,13 +294,13 @@ $layout-breakpoint: 250px;
 
   @include from-cq($layout-breakpoint) {
     column-gap: 8px;
-    grid-template-columns: 32px 1fr auto;
+    grid-template-columns: 32px 1fr $dropdown-column;
   }
 }
 
 .--avatar .card-video__wrapper {
   column-gap: 8px;
-  grid-template-columns: 32px 1fr auto;
+  grid-template-columns: 32px 1fr $dropdown-column;
 }
 
 .--avatar .card-video__title {
@@ -321,7 +328,7 @@ $layout-breakpoint: 250px;
   }
 
   .--no-channel .card-video__wrapper {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr $dropdown-column;
   }
 
   .--no-channel .card-video__title {
@@ -339,7 +346,13 @@ $layout-breakpoint: 250px;
 }
 
 .--mini .card-video__wrapper {
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr $dropdown-column;
+}
+
+/* Без строки канала и тегов вторая строка грида не нужна — иначе аватар и «троеточие» растягиваются. */
+.--compact .card-video__logo-wrapper,
+.--compact .card-video__dropdown {
+  grid-row: 1;
 }
 
 .--mini .card-video__dropdown {

package/components/library/feed.vue

@@ -0,0 +1,340 @@
+<!-- Блок подписки (модель / канал / категория): шапка с аватаром, тегами и счётчиками + лента роликов -->
+<template>
+  <article class="library-feed">
+    <header class="library-feed__header">
+      <NuxtLink
+        :to="item.to"
+        :title="item.title"
+        class="library-feed__avatar-link"
+      >
+        <UiImg
+          v-if="currentAvatar"
+          :src="currentAvatar"
+          :alt="item.title"
+          :loading="priority ? 'eager' : 'lazy'"
+          :priority="priority"
+          class="library-feed__avatar"
+          width="96"
+          height="96"
+          sizes="96px"
+          @error="avatarError = true"
+        />
+        <span
+          v-else
+          class="library-feed__avatar library-feed__initials"
+        >{{ initials }}</span>
+      </NuxtLink>
+
+      <div class="library-feed__info">
+        <div class="library-feed__heading">
+          <NuxtLink
+            :to="item.to"
+            class="library-feed__name"
+          >
+            {{ item.title }}
+            <img
+              v-if="item.country"
+              :alt="item.country.title"
+              :title="`${t('birthplace_country')}: ${item.country.title}`"
+              :src="`/icons/flags/${item.country.name}.svg`"
+              class="library-feed__flag"
+              width="20"
+              height="14"
+            >
+          </NuxtLink>
+
+          <span
+            v-if="item.newCount"
+            class="library-feed__badge"
+          >{{ t('library.new_count', { count: item.newCount }) }}</span>
+        </div>
+
+        <LazyUiExpandRow
+          v-if="item.tags && item.tags.length"
+          :items="item.tags"
+          class="library-feed__tags"
+          hydrate-on-visible
+          micro
+        />
+
+        <p class="library-feed__meta">
+          <span
+            v-for="(entry, index) in item.meta"
+            :key="`meta-${index}`"
+            class="library-feed__meta-item"
+          >
+            <UiIcon
+              v-if="entry.icon"
+              :name="entry.icon"
+              size="14"
+            />
+            {{ entry.text }}
+          </span>
+        </p>
+      </div>
+
+      <div class="library-feed__actions _from-sm">
+        <UiBtn
+          :theme="following ? 'secondary' : 'primary'"
+          class="library-feed__follow"
+          @click="emit('toggle-follow', item)"
+        >
+          <UiIcon
+            :name="following ? 'check' : 'plus'"
+            size="16"
+          />
+          {{ following ? t('library.following_state') : t('follow') }}
+        </UiBtn>
+
+        <UiLink
+          :to="item.to"
+          theme="secondary"
+        >
+          {{ videosText }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </div>
+    </header>
+
+    <h3
+      v-if="item.feedTitle"
+      class="library-feed__feed-title"
+    >{{ item.feedTitle }}</h3>
+
+    <div class="library-feed__grid">
+      <CardVideo
+        v-for="(video, index) in item.videos"
+        :key="video.guid"
+        :card="video"
+        :loading="priority && index < 3 ? 'eager' : 'lazy'"
+        :priority="priority && index < 3"
+        compact
+      />
+    </div>
+
+    <UiLink
+      :to="item.to"
+      theme="secondary"
+      class="library-feed__all _to-sm"
+      wide
+    >
+      {{ videosText }}
+      <UiIcon
+        name="arrow-right"
+        size="16"
+      />
+    </UiLink>
+  </article>
+</template>
+
+<script setup lang="ts">
+import type { ILibraryFeedItem } from '../../types';
+
+const props = defineProps<{
+  item: ILibraryFeedItem
+  following?: boolean
+  priority?: boolean
+}>();
+
+const emit = defineEmits<{
+  (eventName: 'toggle-follow', item: ILibraryFeedItem): void,
+}>();
+
+const { t } = useI18n();
+
+const avatarError = ref(false);
+
+const currentAvatar = computed(() => avatarError.value ? undefined : props.item.avatarUrl);
+
+/** Заглушка вместо аватара: «Top To Bottom» → TTB, «Bareback» → B. */
+const initials = computed(() => props.item.title
+  .split(/\s+/)
+  .slice(0, 3)
+  .map(word => word.charAt(0))
+  .join('')
+  .toUpperCase());
+
+const videosText = computed(() => t('plural.videos', props.item.videosCount));
+</script>
+
+<style lang="scss">
+.library-feed {
+  /* Растушёвка «ещё» у тегов уходит в фон карточки, а не страницы */
+  --expand-row-fade-end: #{$library-feed-fade};
+
+  padding: 16px;
+  background-color: $library-feed-bg;
+  border: 1px solid $library-feed-border;
+  border-radius: $radius-xl;
+
+  @include from-br(sm) {
+    padding: 20px;
+  }
+}
+
+.library-feed__header {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 16px;
+  row-gap: 12px;
+  align-items: start;
+  margin-bottom: 20px;
+
+  @include from-br(sm) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+}
+
+.library-feed__avatar {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  object-position: center 30%;
+  border-radius: $radius-full;
+  border: 2px solid $library-feed-avatar-border;
+
+  @include from-br(sm) {
+    width: 96px;
+    height: 96px;
+    transition: var(--transition) border-color;
+  }
+}
+
+@include from-br(sm) {
+  .library-feed__avatar-link:is(:hover, :focus-visible) .library-feed__avatar {
+    border-color: $library-feed-avatar-border--hover;
+  }
+}
+
+.library-feed__initials {
+  @include font-lg;
+
+  display: grid;
+  place-content: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: $library-feed-initials;
+  background: linear-gradient(to bottom right, $library-feed-initials-gradient-from, $library-feed-initials-gradient-to);
+}
+
+.library-feed__info {
+  min-width: 0;
+}
+
+.library-feed__heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 10px;
+  row-gap: 6px;
+}
+
+.library-feed__name {
+  @include font-lg;
+
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: $library-feed-name;
+
+  @include from-br(sm) {
+    transition: var(--transition) color;
+  }
+
+  @include hover(color) {
+    color: $library-feed-name--hover;
+  }
+}
+
+.library-feed__flag {
+  flex-shrink: 0;
+  border-radius: 2px;
+}
+
+.library-feed__badge {
+  @include font-xs;
+
+  flex-shrink: 0;
+  font-weight: 600;
+  white-space: nowrap;
+  padding-block: 4px;
+  padding-inline: 10px;
+  color: $library-feed-badge-text;
+  background-color: $library-feed-badge-bg;
+  border-radius: $radius-full;
+}
+
+.library-feed__tags {
+  margin-top: 8px;
+}
+
+.library-feed__meta {
+  @include font-sm;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 8px;
+  row-gap: 4px;
+  margin-top: 8px;
+  color: $library-feed-meta;
+}
+
+.library-feed__meta-item {
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+}
+
+.library-feed__meta-item:not(:last-child)::after {
+  content: '·';
+  margin-inline-start: 2px;
+  color: $library-feed-meta-dot;
+}
+
+.library-feed__actions {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+.library-feed__follow {
+  min-width: 124px;
+}
+
+.library-feed__feed-title {
+  @include font-sm;
+
+  margin: 0 0 12px;
+  font-weight: 400;
+  color: $library-feed-title;
+}
+
+.library-feed__grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, 1fr);
+
+  @include from-br(xm) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @include from-br(sm) {
+    gap: 24px 16px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @include from-br(md) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.library-feed__all {
+  margin-top: 16px;
+}
+</style>