itube-specs 0.0.927 → 0.0.928

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

@@ -224,6 +224,15 @@ $video-card-action-active-icon--hover: $color-white;
 $video-card-dropdown-border: $color-zinc-800;
 $video-card-dropdown-size--hover: 1;
 
+// ─── Video card tags (ряд плашек моделей и поповер «ещё») ───
+$video-card-tags-more-bg: $color-zinc-800-80;
+$video-card-tags-more-bg--hover: $color-zinc-700;
+$video-card-tags-more-text: $color-zinc-300;
+$video-card-tags-more-text--hover: $color-white;
+$video-card-tags-popover-bg: $color-zinc-900;
+$video-card-tags-popover-border: $color-zinc-800;
+$video-card-tags-popover-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+
 // ─── Video info ───
 $video-info-item-text: $color-zinc-500-70;
 $video-info-handler-text: $color-zinc-400;

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

@@ -281,6 +281,15 @@ $video-card-action-active-icon--hover: $color-white;
 // ─── Video card dropdown ───
 $video-card-dropdown-border: transparent;
 
+// ─── Video card tags (ряд плашек моделей и поповер «ещё») ───
+$video-card-tags-more-bg: $color-gray-300;
+$video-card-tags-more-bg--hover: $color-gray-400;
+$video-card-tags-more-text: $color-gray-700;
+$video-card-tags-more-text--hover: $color-gray-900;
+$video-card-tags-popover-bg: $color-white;
+$video-card-tags-popover-border: $color-gray-300;
+$video-card-tags-popover-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+
 // ─── Video info ───
 $video-info-item-text: $color-gray-400;
 $video-info-handler-text: $color-gray-400;

package/components/card/video/index.vue

@@ -8,6 +8,7 @@
       {'--no-channel': isChannelPage},
       {'--progress': hasProgress},
       {'--favorite': isFavoriteCard},
+      {'--tags-open': isTagsOpen},
     ]"
     class="card-video"
   >
@@ -131,11 +132,15 @@
       </p>
       <div
         v-if="!mini && !compact && !history && cardTags && cardTags.length > 0"
+        ref="tagsRef"
         class="card-video__tags"
       >
-        <div class="card-video__tags-wrapper">
+        <div
+          class="card-video__tags-wrapper"
+          @click="isTagsOpen = false"
+        >
           <UiChips
-            v-for="(item, index) in cardTags?.slice(0, 4)"
+            v-for="(item, index) in cardTags"
             micro
             :key="`${card.guid}-tag-${index}`"
             :item="item"
@@ -143,6 +148,14 @@
             is-link
           />
         </div>
+        <button
+          v-if="hasMoreTags"
+          :aria-label="t('show_all_models')"
+          :aria-expanded="isTagsOpen"
+          class="card-video__tags-more"
+          type="button"
+          @click="isTagsOpen = !isTagsOpen"
+        >+</button>
       </div>
       <CardDropdownTrigger
         :card="card"
@@ -161,9 +174,13 @@
 
 <script setup lang="ts">
 import type { IVideoCard } from '../../../types';
+import { onClickOutside } from '@vueuse/core';
 import { convertString, getDuration } from '../../../runtime';
 import { CSS_BREAKPOINTS } from '../../../config/css-breakpoints';
 
+/** Потолок плашек в разметке: ряд скроллится, но неограниченный список раздувает DOM всей сетки */
+const TAGS_LIMIT = 8;
+
 const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const props = defineProps<{
@@ -280,7 +297,16 @@ const cardTags = computed(() => {
       searchRank(a) - searchRank(b) || a.localeCompare(b)
   );
 
-  return sortModels?.map(item => convertString().toChips(item, 'models'));
+  return sortModels.slice(0, TAGS_LIMIT).map(item => convertString().toChips(item, 'models'));
+});
+
+const tagsRef = ref();
+const isTagsOpen = ref(false);
+
+const hasMoreTags = computed(() => cardTags.value.length > 1);
+
+onClickOutside(tagsRef, () => {
+  isTagsOpen.value = false;
 });
 </script>
 
@@ -288,6 +314,7 @@ const cardTags = computed(() => {
 $inset-label: 8px;
 $layout-breakpoint: 250px;
 $progress-height: 4px;
+$tags-fade: 40px;
 
 // Колонка под меню карточки фиксирована, а не auto: иначе ширина зависит от того, отрисовано меню
 // или нет, и в момент подмены кнопки заголовок дёргается
@@ -590,10 +617,36 @@ $dropdown-column: 18px;
   aspect-ratio: 16/9;
 }
 
+@property --card-video-tags-fade {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+/* Затемнение гаснет на последних 15% прокрутки — доехал до конца, подсказывать больше нечего */
+@keyframes card-video-tags-fade {
+  0%,
+  85% {
+    --card-video-tags-fade: #{$tags-fade};
+  }
+
+  100% {
+    --card-video-tags-fade: 0px;
+  }
+}
+
+@keyframes card-video-tags-more {
+  0%,
+  100% {
+    visibility: visible;
+  }
+}
+
 .card-video__tags {
-  align-items: center;
-  gap: 8px;
+  position: relative;
   grid-column: 1;
+  min-height: var(--chips-height-micro);
+  timeline-scope: --card-video-tags;
 
   @include from-cq($layout-breakpoint) {
     grid-column: 2;
@@ -602,11 +655,87 @@ $dropdown-column: 18px;
 }
 
 .card-video__tags-wrapper {
-  max-height: calc( var(--chips-height-micro) * 2 + 8px);
-  overflow: hidden;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  align-items: center;
   gap: 8px;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.card-video__tags-more {
+  @include font-xs;
+
+  position: absolute;
+  inset-block: 0;
+  right: 0;
+  z-index: $z-index-dropdown;
+  display: grid;
+  place-content: center;
+  padding-inline: 8px;
+  visibility: hidden;
+  color: $video-card-tags-more-text;
+  background-color: $video-card-tags-more-bg;
+  border-radius: $radius-6;
+
+  @include hover(background-color, color) {
+    background-color: $video-card-tags-more-bg--hover;
+    color: $video-card-tags-more-text--hover;
+  }
+
+  @include to-br(sm) {
+    display: none;
+  }
+}
+
+/* Влезли плашки в ряд или нет, решает сам браузер: у непрокручиваемого контейнера scroll-таймлайн
+   неактивен, анимации не применяются — ни затемнения, ни кнопки. Без замеров и без JS, то есть
+   ещё до гидрации. Где scroll() не поддержан — ряд просто обрезается по краю. */
+@supports (animation-timeline: scroll()) {
+  .card-video__tags-wrapper {
+    scroll-timeline: --card-video-tags inline;
+    animation: card-video-tags-fade linear both;
+    animation-timeline: --card-video-tags;
+    mask-image: linear-gradient(to right, currentcolor calc(100% - var(--card-video-tags-fade)), transparent);
+  }
+
+  .card-video__tags-more {
+    animation: card-video-tags-more linear both;
+    animation-timeline: --card-video-tags;
+  }
+}
+
+/* Раскрытый список — тот же DOM: ряд перестаёт быть скроллом и разворачивается поповером поверх */
+.--tags-open .card-video__tags-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-dropdown;
+  flex-wrap: wrap;
+  width: max-content;
+  max-width: 100%;
+  padding: 8px $tags-fade 8px 8px;
+  overflow: visible;
+  background-color: $video-card-tags-popover-bg;
+  border: 1px solid $video-card-tags-popover-border;
+  border-radius: $radius-md;
+  box-shadow: $video-card-tags-popover-shadow;
+  mask-image: none;
+}
+
+.--tags-open .card-video__tags-more {
+  visibility: visible;
+}
+
+/* Карточка — свой контекст наложения из-за container-type, поповер иначе уйдёт под соседнюю */
+.card-video.--tags-open {
+  z-index: $z-index-dropdown;
 }
 
 .card-video__user {

package/package.json

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