itube-specs 0.0.912 → 0.0.914

package/assets/scss/base/_animations.scss

@@ -2,22 +2,23 @@
 @use '../mixins' as *;
 
 /**
-  Анимация открытия попапов, для анимации открытия попапа обернуть SPopup в transition
+  Анимация открытия попапов, для анимации открытия попапа обернуть попап в transition.
+  Гейты `--no-enter-anim` / `--no-leave-anim` вешает useOverlayStack: появление
+  анимируется только у первого оверлея в стеке, закрытие — только у последнего.
+  Негации завёрнуты в `:where()`, чтобы не поднимать вес селектора — иначе они начинают
+  спорить с правилами компонентов (`.ui-snackbar.v-enter-from` и Ко).
  */
-.v-enter-active,
-.v-leave-active {
-  transition: 100ms ease opacity;
+.v-enter-active:where(:not(.--no-enter-anim)),
+.v-leave-active:where(:not(.--no-leave-anim)) {
+  transition: 200ms linear opacity, 200ms linear transform;
 
   @include from-br(sm) {
     transition: 300ms linear opacity, 200ms linear transform;
   }
 }
 
-.v-enter-from,
-.v-leave-to {
+.v-enter-from:where(:not(.--no-enter-anim)),
+.v-leave-to:where(:not(.--no-leave-anim)) {
   opacity: 0;
-
-  @include from-br(sm) {
-    transform: scale(0.99) translateY(8px);
-  }
+  transform: scale(0.99) translateY(8px);
 }

package/assets/scss/mixins/_font-sizes.scss

@@ -48,9 +48,12 @@
   line-height: 1.333;
 }
 
+@mixin font-3xl {
+  font-size: 30px;
+  line-height: 1.2;
+}
+
 @mixin font-4xl {
   font-size: 36px;
   line-height: 1.111;
 }
-
-

package/assets/scss/mixins/_video-card.scss

@@ -4,11 +4,34 @@
 
 @mixin video-card {
   display: grid;
-  row-gap: 12px;
+  row-gap: 16px;
   width: 100%;
   align-content: start;
 }
 
+/**
+  Сетка карточек видео: 2 колонки, 3 с xs, 4 с md.
+  minmax(0, 1fr) обязателен, не `1fr`: мета-строка карточки истории нешринкуема и задаёт
+  колонке min-content, из-за которого грид вылезает за контейнер на телефоне.
+ */
+@mixin video-card-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @include from-br(xs) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @include from-br(sm) {
+    gap: 24px;
+  }
+
+  @include from-br(md) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 @mixin video-card-poster {
   position: relative;
   aspect-ratio: 16/9;

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

@@ -59,8 +59,10 @@ $chips-bg--active: $color-zinc-700;
 $chips-text: $color-zinc-400;
 $chips-text--hover: $color-white;
 $chips-text--active: $color-white;
-$chips-micro-bg: $color-zinc-800;
-$chips-micro-text: $color-zinc-400;
+$chips-micro-bg: $color-zinc-800-80;
+$chips-micro-bg--hover: $color-zinc-700;
+$chips-micro-text: $color-zinc-300;
+$chips-micro-text--hover: $color-white;
 $chips-small-bg: $color-zinc-800-50;
 $chips-small-bg--hover: $color-zinc-700;
 $chips-small-text: $color-zinc-400;
@@ -200,8 +202,8 @@ $video-card-dropdown-icon--hover: $color-white;
 $video-card-secondary: $color-zinc-500;
 $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;
+$video-card-user-text: $color-zinc-500;
+$video-card-user-bg: $color-zinc-800;
 $video-card-progress-bg: $mono-white-50;
 $video-card-progress-fill: $color-indigo-500;
 $video-card-remaining: $color-indigo-400;
@@ -698,6 +700,7 @@ $filter-popup--active: $color-zinc-400;
 $filter-popup-active-bg: $color-zinc-800;
 $filter-popup-quick-title: $color-zinc-400;
 $filter-popup-group-border: $color-zinc-800;
+$filter-popup-summary-arrow: $color-zinc-400;
 $filter-popup-summary-description: $color-zinc-500;
 $filter-popup-active-chip-bg: $color-indigo-600;
 $filter-popup-active-chip-bg--hover: $color-indigo-500;

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

@@ -72,7 +72,9 @@ $chips-text: $color-gray-700;
 $chips-text--hover: $color-gray-900;
 $chips-text--active: $color-white;
 $chips-micro-bg: $color-gray-300;
+$chips-micro-bg--hover: $color-gray-400;
 $chips-micro-text: $color-gray-700;
+$chips-micro-text--hover: $color-gray-900;
 $chips-small-bg: $color-gray-300;
 $chips-small-bg--hover: $color-gray-400;
 $chips-small-text: $color-gray-700;
@@ -749,6 +751,7 @@ $filter-popup--active: $color-gray-400;
 $filter-popup-active-bg: transparent;
 $filter-popup-quick-title: $color-gray-400;
 $filter-popup-group-border: transparent;
+$filter-popup-summary-arrow: $color-gray-400;
 $filter-popup-summary-description: $color-gray-500;
 $filter-popup-active-chip-bg: $color-indigo-600;
 $filter-popup-active-chip-bg--hover: $color-indigo-500;

package/assets/scss/vars/_tokens.scss

@@ -21,7 +21,7 @@
   // ─── Project-specific ───
   --chips-height: 32px;
   --chips-height-small: 24px;
-  --chips-height-micro: 20px;
+  --chips-height-micro: 24px;
   --transition: var(--default-transition-duration) var(--default-transition-timing-function);
   --header-height: 64px;
   --control-min-width: 126px;

package/assets/scss/vars/_vars.scss

@@ -3,6 +3,7 @@ $spacing: 4px;
 // ─── Border radius ───
 $radius: 10px;
 $radius-small: 4px;
+$radius-6: 6px;
 $radius-md: 8px;
 $radius-lg: 10px;
 $radius-12: 12px;

package/components/card/collections-more.vue

@@ -118,7 +118,7 @@ const images = computed(() => {
 }
 
 .card-collections-more__count {
-  @include font-2xl;
+  @include font-3xl;
 
   font-weight: 700;
   color: $collections-more-count;

package/components/card/dropdown/index.vue

@@ -31,7 +31,7 @@
         v-if="showWatchLater"
         :class="className"
         type="button"
-        @click="toggleWatchLater(card.guid)"
+        @click="toggleWatchLater(card.guid, card.title)"
       >
         <UiIcon
           name="clock"
@@ -43,7 +43,7 @@
         v-if="showFavorites"
         :class="className"
         type="button"
-        @click="toggleFavorite(card.guid)"
+        @click="toggleFavorite(card.guid, card.title)"
       >
         <UiIcon
           name="heart-stroke"

package/components/card/playlist.vue

@@ -55,7 +55,7 @@
           >
             <UiIcon
               name="thumbs-up"
-              size="12"
+              size="14"
             />
             {{ $n(card.likes, 'compact') }}
           </span>
@@ -73,7 +73,7 @@
         <p class="card-playlist__created">
           <UiIcon
             name="date"
-            size="12"
+            size="14"
           />
           {{ formatDate(card.created) }}
         </p>
@@ -83,7 +83,7 @@
           v-if="avatar"
           :src="avatar"
           :alt="card.username"
-          class="card-playlist__avatar _from-xs"
+          class="card-collections-more__count _from-xs"
           width="36"
           height="36"
           sizes="36px"
@@ -292,7 +292,7 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
 .card-playlist__wrapper {
   display: grid;
   align-items: center;
-  padding: 16px;
+  padding: 12px;
 }
 
 .card-playlist__wrapper-header {
@@ -300,7 +300,7 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   align-items: center;
   justify-content: space-between;
   column-gap: 24px;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .card-playlist__wrapper.--top {
@@ -407,8 +407,8 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   --line-clamp: 1;
 
   color: $playlist-card-tags;
-  padding-top: 12px;
-  margin-top: 12px;
+  padding-top: 8px;
+  margin-top: 8px;
   border-top: 1px solid $playlist-card-tags-border;
 }
 
@@ -456,7 +456,6 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   grid-template-columns: auto 1fr;
   column-gap: 12px;
   align-items: start;
-  margin-bottom: 12px;
 }
 
 .card-playlist__content-wrapper {

package/components/card/video/actions.vue

@@ -7,7 +7,7 @@
       class="card-video-actions__btn --active"
       type="button"
       aria-pressed="true"
-      @click="toggleFavorite(card.guid)"
+      @click="toggleFavorite(card.guid, card.title)"
     >
       <UiIcon
         name="heart"
@@ -22,7 +22,7 @@
       :aria-pressed="later"
       :class="['card-video-actions__btn', '--watch-later', { '--active': later }]"
       type="button"
-      @click="toggleWatchLater(card.guid)"
+      @click="toggleWatchLater(card.guid, card.title)"
     >
       <UiIcon
         :name="later ? 'clock-filled' : 'clock'"

package/components/card/video/index.vue

@@ -388,7 +388,7 @@ $dropdown-column: 18px;
 
 .card-video__wrapper {
   display: grid;
-  grid-template-columns: 1fr $dropdown-column;
+  grid-template-columns: minmax(0, 1fr) $dropdown-column;
   align-items: start;
   align-content: center;
   color: $video-card-secondary;
@@ -398,14 +398,14 @@ $dropdown-column: 18px;
   }
 
   @include from-cq($layout-breakpoint) {
-    column-gap: 8px;
-    grid-template-columns: 32px 1fr $dropdown-column;
+    column-gap: 12px;
+    grid-template-columns: 36px minmax(0, 1fr) $dropdown-column;
   }
 }
 
 .--avatar .card-video__wrapper {
-  column-gap: 8px;
-  grid-template-columns: 32px 1fr $dropdown-column;
+  column-gap: 12px;
+  grid-template-columns: 36px minmax(0, 1fr) $dropdown-column;
 }
 
 .--avatar .card-video__title {
@@ -434,7 +434,7 @@ $dropdown-column: 18px;
   }
 
   .--no-channel .card-video__wrapper {
-    grid-template-columns: 1fr $dropdown-column;
+    grid-template-columns: minmax(0, 1fr) $dropdown-column;
   }
 
   .--no-channel .card-video__title {
@@ -452,7 +452,7 @@ $dropdown-column: 18px;
 }
 
 .--mini .card-video__wrapper {
-  grid-template-columns: 1fr $dropdown-column;
+  grid-template-columns: minmax(0, 1fr) $dropdown-column;
 }
 
 /* Без строки канала и тегов вторая строка грида не нужна — иначе аватар и «троеточие» растягиваются. */
@@ -511,6 +511,7 @@ $dropdown-column: 18px;
   display: flex;
   align-items: center;
   grid-row: 2;
+  min-width: 0;
   margin: 6px 0 0;
   font-weight: 400;
   color: $video-card-secondary;
@@ -520,6 +521,14 @@ $dropdown-column: 18px;
   }
 }
 
+/* На узкой карточке (две колонки на телефоне) «канал · время» в строку не встают, а нешрикуемое
+   время задаёт колонке min-content и разносит грид — оставляем только время просмотра */
+@include to-cq($layout-breakpoint) {
+  .card-video__meta .card-video__channel-title {
+    display: none;
+  }
+}
+
 .card-video__meta .card-video__channel-title + .card-video__watched::before {
   content: '·';
   margin-inline: 6px;
@@ -530,6 +539,9 @@ $dropdown-column: 18px;
   align-items: center;
   column-gap: 4px;
   flex-shrink: 0;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .card-video__watched.--remaining {
@@ -585,23 +597,23 @@ $dropdown-column: 18px;
 
   @include from-cq($layout-breakpoint) {
     grid-column: 2;
-    margin-top: 8px;
+    margin-top: 10px;
   }
 }
 
 .card-video__tags-wrapper {
-  max-height: calc( var(--chips-height-micro) * 2 + 2px);
+  max-height: calc( var(--chips-height-micro) * 2 + 8px);
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
-  gap: 2px;
+  gap: 8px;
 }
 
 .card-video__user {
   @include font-xs;
 
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   display: grid;
   place-content: center;
   font-weight: 700;

package/components/filter/popup.vue

@@ -288,6 +288,7 @@ const { t } = useI18n();
 
 .filter-popup__summary-arrow {
   flex-shrink: 0;
+  color: $filter-popup-summary-arrow;
   transition: transform var(--transition);
 }
 

package/components/grid/videos.vue

@@ -72,22 +72,9 @@ const lazyItems = computed(() => props.items.slice(eagerCount.value + IDLE_COUNT
 
 <style lang="scss">
 .grid-videos {
-  position: relative;
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(2, 1fr);
-
-  @include from-br(xs) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  @include from-br(sm) {
-    gap: 24px;
-  }
+  @include video-card-grid;
 
-  @include from-br(md) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  position: relative;
 }
 
 .grid-videos__idle,

package/components/layout/burger.vue

@@ -260,6 +260,7 @@ router.afterEach(() => {
 
 .layout-burger__menu:last-child {
   padding-bottom: 12px;
+  margin-bottom: 4px;
 }
 
 .layout-burger__niche {

package/components/layout/extra-links.vue

@@ -1,11 +1,14 @@
 <template>
   <nav class="layout-extra-links">
+    <!-- active-class указывает на базовый класс, а не на '': пустую строку NuxtLink считает
+         falsy и подставляет дефолты router-link-active, а они зависят от текущего роута и
+         ломают гидрацию лениво гидрируемого футера. Дубль класса Vue схлопывает. -->
     <NuxtLink
       v-for="(item, index) in additionalLinksItems"
       :key="`s-additional-link-${index}`"
       :to="generateLink(item.name)"
-      active-class=""
-      exact-active-class=""
+      active-class="layout-extra-links__link"
+      exact-active-class="layout-extra-links__link"
       class="layout-extra-links__link"
       @click="emit('close')"
     >{{ $t(`additional_link.${item.title}`) }}</NuxtLink>

package/components/layout/logo.vue

@@ -1,9 +1,12 @@
 <template>
+  <!-- active-class указывает на базовый класс, а не на '': пустую строку NuxtLink считает
+       falsy и подставляет дефолты router-link-active, а они зависят от текущего роута и
+       ломают гидрацию лениво гидрируемого футера. Дубль класса Vue схлопывает. -->
   <NuxtLink
     :class="{'layout-logo--glow': glow}"
     :to="generateLink('/')"
-    active-class=""
-    exact-active-class=""
+    active-class="layout-logo"
+    exact-active-class="layout-logo"
     class="layout-logo"
     @click="onLogoClick"
   >

package/components/library/feed.vue

@@ -201,6 +201,10 @@ const ageText = computed(() => {
   row-gap: 12px;
   align-items: center;
   margin-bottom: 20px;
+
+  @include from-br(sm) {
+    align-items: start;
+  }
 }
 
 .library-feed__header.--without-avatar {

package/components/section/collections.vue

@@ -8,7 +8,7 @@
       <UiSectionTitle
         :title="t('collections_by')"
         title-tag="h2"
-        size="xl"
+        variant="section"
       >
         <span class="section-collections__badge">{{ t('editorial') }}</span>
       </UiSectionTitle>
@@ -86,7 +86,7 @@ const restThumbs = computed(() => {
   align-items: center;
   justify-content: space-between;
   column-gap: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .section-collections__badge {

package/components/section/swiper-cards.vue

@@ -6,7 +6,7 @@
         :title="title || t('top_models')"
         :count="count ?? items.length"
         :icon="icon"
-        :size="size"
+        :variant="variant"
         class="section-swiper-cards__title"
         title-tag="h2"
       />
@@ -70,8 +70,8 @@ withDefaults(defineProps<{
   /** Счётчик в шапке; по умолчанию — число карточек */
   count?: string | number
   icon?: string
-  /** Размер заголовка секции — см. `UiSectionTitle` */
-  size?: 'lg' | 'xl'
+  /** Вариант заголовка — см. `UiSectionTitle` */
+  variant?: 'page' | 'section'
   placeholderAvatar?: string
   /** Карточки только с аватаром и названием, без счётчика роликов */
   withoutCount?: boolean

package/components/ui/chips.vue

@@ -184,11 +184,16 @@ const name = computed(() => {
   @include font-xs;
 
   padding-block: 4px;
-  padding-inline: 8px;
+  padding-inline: 10px;
   height: var(--chips-height-micro);
-  border-radius: 4px;
+  border-radius: $radius-6;
   background-color: $chips-micro-bg;
   color: $chips-micro-text;
+
+  @include hover(background-color, color) {
+    background-color: $chips-micro-bg--hover;
+    color: $chips-micro-text--hover;
+  }
 }
 
 .ui-chips.--not-capitalize {

package/components/ui/dropdown.vue

@@ -89,6 +89,8 @@ onClickOutside(dropdownRef, () => {
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();
 
+const { registerOverlay, releaseOverlay } = useOverlayStack();
+
 const breakpoints = CSS_BREAKPOINTS;
 const { isTablet } = checkDeviceWidth(breakpoints);
 
@@ -126,17 +128,22 @@ function close() {
 }
 
 watch(open, (val) => {
-  if (!isTablet.value) return;
   if (val) {
+    if (!isTablet.value) return;
     scrollLock();
+    // На мобиле меню — модальный шит с анимацией, поэтому он тоже участник стека
+    // оверлеев: попап, открытый из него, не должен появляться с анимацией.
+    nextTick(() => registerOverlay(menuRef.value));
   } else {
-    scrollUnlock();
+    if (isTablet.value) scrollUnlock();
+    releaseOverlay(menuRef.value);
   }
 });
 
 onBeforeUnmount(() => {
   if (open.value && isTablet.value) {
     scrollUnlock();
+    releaseOverlay(menuRef.value);
   }
 });
 
@@ -373,25 +380,27 @@ defineExpose({ openDropdown, open });
   }
 }
 
+/* Гейты `--no-*-anim` вешает useOverlayStack: шит не анимируется, если он открывается
+   поверх попапа или закрывается, отдавая место другому оверлею. */
 @include to-br(md) {
-  .ui-dropdown-enter-active,
-  .ui-dropdown-leave-active {
+  .ui-dropdown__menu:where(:not(.--no-enter-anim)).ui-dropdown-enter-active,
+  .ui-dropdown__menu:where(:not(.--no-leave-anim)).ui-dropdown-leave-active {
     transition: transform 300ms ease;
   }
 
-  .ui-dropdown-enter-from {
+  .ui-dropdown__menu:where(:not(.--no-enter-anim)).ui-dropdown-enter-from {
     transform: translateY(100%);
   }
 
-  .ui-dropdown-enter-to {
+  .ui-dropdown__menu:where(:not(.--no-enter-anim)).ui-dropdown-enter-to {
     transform: translateY(0);
   }
 
-  .ui-dropdown-leave-from {
+  .ui-dropdown__menu:where(:not(.--no-leave-anim)).ui-dropdown-leave-from {
     transform: translateY(0);
   }
 
-  .ui-dropdown-leave-to {
+  .ui-dropdown__menu:where(:not(.--no-leave-anim)).ui-dropdown-leave-to {
     transform: translateY(100%);
   }
 }

package/components/ui/expand-row.vue

@@ -219,10 +219,6 @@ onBeforeUnmount(() => {
   height: var(--chips-height-micro);
 }
 
-.ui-expand-row.--micro .ui-expand-row__wrapper {
-  gap: 4px;
-}
-
 .ui-expand-row__button.--more {
   text-transform: capitalize;
 }

package/components/ui/popup.vue

@@ -75,6 +75,8 @@ const { scrollLock, scrollUnlock } = useGlobalScrollLock();
 
 const { snackbarText, isSnackBarInPopup, enterPopup, leavePopup } = useSnackbar();
 
+const { registerOverlay, releaseOverlay } = useOverlayStack();
+
 const popupRef = ref();
 const emit = defineEmits<{
   (eventName: 'update:modelValue', value: boolean): void
@@ -95,6 +97,7 @@ const props = defineProps<{
 onMounted(() => {
   enterPopup();
   scrollLock();
+  registerOverlay(popupRef.value);
   if (props.notModal) {
     popupRef.value.show();
   } else {
@@ -106,6 +109,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   leavePopup();
   scrollUnlock();
+  releaseOverlay(popupRef.value);
 });
 
 function close() {
@@ -351,14 +355,14 @@ function closeByBackdropClick(event: Event) {
   padding: 20px;
 }
 
-.ui-popup.--drawer {
-  &.v-enter-active,
-  &.v-leave-active {
+/* Появление анимируется только у первого оверлея в стеке, закрытие — только у последнего
+   (см. useOverlayStack): иначе на переходе попап→попап диалоги едут навстречу друг другу. */
+.ui-popup.--drawer:where(:not(.--no-enter-anim)) {
+  &.v-enter-active {
     transition: transform 300ms ease;
   }
 
-  &.v-enter-active::backdrop,
-  &.v-leave-active::backdrop {
+  &.v-enter-active::backdrop {
     transition: opacity 300ms ease;
   }
 
@@ -373,6 +377,16 @@ function closeByBackdropClick(event: Event) {
   &.v-enter-to {
     transform: translateX(0);
   }
+}
+
+.ui-popup.--drawer:where(:not(.--no-leave-anim)) {
+  &.v-leave-active {
+    transition: transform 300ms ease;
+  }
+
+  &.v-leave-active::backdrop {
+    transition: opacity 300ms ease;
+  }
 
   &.v-leave-from {
     transform: translateX(0);
@@ -387,10 +401,9 @@ function closeByBackdropClick(event: Event) {
   }
 }
 
-.ui-popup.--sheet {
+.ui-popup.--sheet:where(:not(.--no-enter-anim)) {
   @include to-br(sm) {
-    &.v-enter-active,
-    &.v-leave-active {
+    &.v-enter-active {
       transition: transform 300ms ease;
     }
 
@@ -401,6 +414,14 @@ function closeByBackdropClick(event: Event) {
     &.v-enter-to {
       transform: translateY(0);
     }
+  }
+}
+
+.ui-popup.--sheet:where(:not(.--no-leave-anim)) {
+  @include to-br(sm) {
+    &.v-leave-active {
+      transition: transform 300ms ease;
+    }
 
     &.v-leave-from {
       transform: translateY(0);

package/components/ui/section-title.vue

@@ -38,16 +38,16 @@ const props = withDefaults(defineProps<{
   title: string
   icon?: string
   img?: string
-  /** `lg` — страничный заголовок (18px, капс); `xl` — заголовок секции (20px, без капса) */
-  size?: 'lg' | 'xl'
+  /** `page` — страничный заголовок (18px, капс, 700); `section` — заголовок секции (18px, без капса, 600) */
+  variant?: 'page' | 'section'
 }>(), {
   titleTag: 'h1',
-  size: 'lg'
+  variant: 'page'
 });
 
 const titleClass = computed(() => [
   'ui-section-title__title',
-  props.size === 'xl' ? '--xl' : '_title'
+  props.variant === 'section' ? '--section' : '_title'
 ]);
 </script>
 
@@ -59,8 +59,8 @@ const titleClass = computed(() => [
   vertical-align: middle;
 }
 
-.ui-section-title__title.--xl {
-  @include font-xl;
+.ui-section-title__title.--section {
+  @include font-lg;
 
   font-weight: 600;
 }

package/composables/__tests__/use-overlay-stack.test.ts

@@ -0,0 +1,110 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { useOverlayStack } from '../use-overlay-stack';
+
+const NO_ENTER = '--no-enter-anim';
+const NO_LEAVE = '--no-leave-anim';
+
+let frames: Array<() => void> = [];
+
+function flushFrames() {
+  const queued = frames;
+  frames = [];
+  queued.forEach((cb) => cb());
+}
+
+function createOverlay() {
+  const el = document.createElement('dialog');
+  document.body.appendChild(el);
+
+  return el;
+}
+
+describe('useOverlayStack', () => {
+  beforeEach(() => {
+    frames = [];
+    vi.stubGlobal('requestAnimationFrame', (cb: () => void) => {
+      frames.push(cb);
+
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    flushFrames();
+    document.body.innerHTML = '';
+    vi.unstubAllGlobals();
+  });
+
+  it('первый оверлей анимируется в обе стороны', () => {
+    const { registerOverlay } = useOverlayStack();
+    const el = createOverlay();
+
+    registerOverlay(el);
+
+    expect(el.classList.contains(NO_ENTER)).toBe(false);
+    expect(el.classList.contains(NO_LEAVE)).toBe(false);
+  });
+
+  it('второй оверлей открывается без анимации появления', () => {
+    const { registerOverlay } = useOverlayStack();
+    const first = createOverlay();
+    const second = createOverlay();
+
+    registerOverlay(first);
+    registerOverlay(second);
+
+    expect(second.classList.contains(NO_ENTER)).toBe(true);
+  });
+
+  it('пока оверлеев больше одного, закрытие не анимируется ни у одного', () => {
+    const { registerOverlay } = useOverlayStack();
+    const first = createOverlay();
+    const second = createOverlay();
+
+    registerOverlay(first);
+    registerOverlay(second);
+
+    expect(first.classList.contains(NO_LEAVE)).toBe(true);
+    expect(second.classList.contains(NO_LEAVE)).toBe(true);
+  });
+
+  it('уходящий оверлей остаётся в стеке до конца кадра — сменщик успевает открыться без анимации', () => {
+    const { registerOverlay, releaseOverlay } = useOverlayStack();
+    const closing = createOverlay();
+    const opening = createOverlay();
+
+    registerOverlay(closing);
+    releaseOverlay(closing);
+    registerOverlay(opening);
+
+    expect(opening.classList.contains(NO_ENTER)).toBe(true);
+    expect(closing.classList.contains(NO_LEAVE)).toBe(true);
+  });
+
+  it('оставшийся последним снова закрывается с анимацией', () => {
+    const { registerOverlay, releaseOverlay } = useOverlayStack();
+    const closing = createOverlay();
+    const opening = createOverlay();
+
+    registerOverlay(closing);
+    releaseOverlay(closing);
+    registerOverlay(opening);
+    flushFrames();
+
+    expect(opening.classList.contains(NO_LEAVE)).toBe(false);
+  });
+
+  it('оверлей, удалённый из DOM без релиза, не блокирует анимации следующему', () => {
+    const { registerOverlay } = useOverlayStack();
+    const leaked = createOverlay();
+    const next = createOverlay();
+
+    registerOverlay(leaked);
+    leaked.remove();
+    registerOverlay(next);
+
+    expect(next.classList.contains(NO_ENTER)).toBe(false);
+    expect(next.classList.contains(NO_LEAVE)).toBe(false);
+  });
+});

package/composables/__tests__/use-video-collections.test.ts

@@ -0,0 +1,75 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { useVideoCollections } from '../use-video-collections';
+import { useSnackbar } from '../use-snackbar';
+
+describe('useVideoCollections', () => {
+  beforeEach(() => {
+    useNuxtApp().payload.state = {};
+    vi.useFakeTimers();
+    useSnackbar().resetSnackbar();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('добавляет в «смотреть позже» и показывает снекбар с кнопкой отмены', () => {
+    const { watchLater, isWatchLater, toggleWatchLater } = useVideoCollections();
+    const { snackbarText, snackbarIcon, snackbarHighlight, snackbarActionText } = useSnackbar();
+
+    toggleWatchLater('guid-1', 'Video title');
+
+    expect(watchLater.value).toEqual([ 'guid-1' ]);
+    expect(isWatchLater('guid-1')).toBe(true);
+    expect(snackbarText.value).toBe('added');
+    expect(snackbarIcon.value).toBe('clock');
+    expect(snackbarHighlight.value).toBe('Video title');
+    expect(snackbarActionText.value).toBe('undo');
+  });
+
+  it('удаление показывает снекбар «removed»', () => {
+    const { watchLater, toggleWatchLater } = useVideoCollections();
+    const { snackbarText } = useSnackbar();
+
+    toggleWatchLater('guid-1', 'Video title');
+    toggleWatchLater('guid-1', 'Video title');
+
+    expect(watchLater.value).toEqual([]);
+    expect(snackbarText.value).toBe('removed');
+  });
+
+  it('избранное показывает снекбар с иконкой сердца', () => {
+    const { favorites, isFavorite, toggleFavorite } = useVideoCollections();
+    const { snackbarIcon, snackbarText } = useSnackbar();
+
+    toggleFavorite('guid-2', 'Another title');
+
+    expect(favorites.value).toEqual([ 'guid-2' ]);
+    expect(isFavorite('guid-2')).toBe(true);
+    expect(snackbarIcon.value).toBe('heart');
+    expect(snackbarText.value).toBe('added');
+  });
+
+  it('отмена возвращает список и не показывает новый снекбар', () => {
+    const { favorites, toggleFavorite } = useVideoCollections();
+    const { runSnackbarAction, snackbarText } = useSnackbar();
+
+    toggleFavorite('guid-2', 'Another title');
+    runSnackbarAction();
+
+    expect(favorites.value).toEqual([]);
+    expect(snackbarText.value).toBe('');
+  });
+
+  it('отмена удаления возвращает ролик обратно', () => {
+    const { watchLater, toggleWatchLater } = useVideoCollections();
+    const { runSnackbarAction } = useSnackbar();
+
+    toggleWatchLater('guid-3', 'Third title');
+    toggleWatchLater('guid-3', 'Third title');
+    runSnackbarAction();
+
+    expect(watchLater.value).toEqual([ 'guid-3' ]);
+  });
+});

package/composables/use-overlay-stack.ts

@@ -0,0 +1,58 @@
+const NO_ENTER_ANIM_CLASS = '--no-enter-anim';
+const NO_LEAVE_ANIM_CLASS = '--no-leave-anim';
+
+// Элементы, а не счётчик: класс вешается прямо на DOM. Уходящий компонент управлять
+// своим `:class` уже не может — Vue гасит его реактивный эффект в unmount, до конца
+// leave-транзишена, поэтому ре-рендер по реактивному флагу не случится.
+const overlays = new Set<HTMLElement>();
+
+function syncLeaveAnimation() {
+  const chained = overlays.size > 1;
+  overlays.forEach((el) => el.classList.toggle(NO_LEAVE_ANIM_CLASS, chained));
+}
+
+/**
+ * Стек открытых оверлеев (попапы и мобильные шиты дропдауна). Нужен, чтобы анимация
+ * появления играла только у первого оверлея, а анимация закрытия — только у последнего:
+ * при переходе попап→попап уходящий и приходящий диалоги ехали бы навстречу друг другу
+ * и картинка скакала бы.
+ */
+export const useOverlayStack = () => {
+  /**
+   * Решение по анимации появления принимается один раз и дальше не меняется: состав
+   * стека успеет измениться до того, как браузер прочитает transition уходящего.
+   */
+  function registerOverlay(el?: HTMLElement | null) {
+    if (!import.meta.client || !el) return;
+
+    overlays.forEach((item) => {
+      if (!item.isConnected) overlays.delete(item);
+    });
+
+    el.classList.toggle(NO_ENTER_ANIM_CLASS, overlays.size > 0);
+    overlays.add(el);
+    syncLeaveAnimation();
+  }
+
+  /**
+   * Выпуск отложен на кадр: следующий оверлей монтируется позже unmount-хука уходящего
+   * (а ленивый — ещё и через микротаск). Убрать элемент из стека сразу — уходящий не
+   * успеет узнать, что ему на смену открывают другой попап, и проиграет закрытие.
+   */
+  function releaseOverlay(el?: HTMLElement | null) {
+    if (!import.meta.client || !el) return;
+
+    const release = () => {
+      overlays.delete(el);
+      syncLeaveAnimation();
+    };
+
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(release);
+    } else {
+      release();
+    }
+  }
+
+  return { registerOverlay, releaseOverlay };
+};

package/composables/use-video-collections.ts

@@ -7,17 +7,39 @@ export const useVideoCollections = () => {
   const favorites = useState<string[]>('video-collections-favorites', () => []);
   const watchLater = useState<string[]>('video-collections-watch-later', () => []);
 
+  const { show } = useSnackbar();
+
+  /** Возвращает true, если ролик добавлен, и false — если убран. */
   function toggle(list: Ref<string[]>, guid: string) {
-    list.value = list.value.includes(guid)
-      ? list.value.filter(item => item !== guid)
-      : [ ...list.value, guid ];
+    const added = !list.value.includes(guid);
+
+    list.value = added
+      ? [ ...list.value, guid ]
+      : list.value.filter(item => item !== guid);
+
+    return added;
+  }
+
+  // Снекбар показывается только на исходное действие: откат возвращает список как был,
+  // повторно сообщать об этом нечего — иначе отмена сама выглядит как новое изменение.
+  function notify(added: boolean, title: string, icon: string, undo: () => void) {
+    show(added ? 'added' : 'removed', {
+      icon,
+      highlight: title,
+      onAction: undo,
+    });
   }
 
   const isFavorite = (guid: string) => favorites.value.includes(guid);
   const isWatchLater = (guid: string) => watchLater.value.includes(guid);
 
-  const toggleFavorite = (guid: string) => toggle(favorites, guid);
-  const toggleWatchLater = (guid: string) => toggle(watchLater, guid);
+  const toggleFavorite = (guid: string, title = '') => {
+    notify(toggle(favorites, guid), title, 'heart', () => toggle(favorites, guid));
+  };
+
+  const toggleWatchLater = (guid: string, title = '') => {
+    notify(toggle(watchLater, guid), title, 'clock', () => toggle(watchLater, guid));
+  };
 
   return {
     favorites,

package/package.json

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

package/pages/following.vue

@@ -17,7 +17,7 @@
       :header-link-text="t('following.all_models')"
       all-link="/library/models"
       icon="user"
-      size="xl"
+      variant="section"
       placeholder-avatar="/img/model-placeholder.webp"
       class="following__section"
       without-count
@@ -32,7 +32,7 @@
       :header-link-text="t('following.all_channels')"
       all-link="/library/channels"
       icon="play-circle"
-      size="xl"
+      variant="section"
       placeholder-avatar="/img/logo-placeholder.svg"
       class="following__section"
       without-count
@@ -45,7 +45,7 @@
           :count="t('following.updates', { count: categoriesUpdates })"
           icon="grid"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <!-- На мобиле плитки «все» в гриде нет, поэтому ссылка вынесена в шапку -->
@@ -79,7 +79,7 @@
           :count="t('following.updates', { count: playlistsUpdates })"
           icon="playlist"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <UiLink

package/pages/history.vue

@@ -55,7 +55,7 @@
           class="history__group-header"
           icon="video-camera"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <div class="history__grid">
@@ -238,19 +238,9 @@ const breadcrumbs = [
 }
 
 .history__grid {
-  position: relative;
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(2, 1fr);
-
-  @include from-br(sm) {
-    gap: 24px;
-    grid-template-columns: repeat(3, 1fr);
-  }
+  @include video-card-grid;
 
-  @include from-br(md) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  position: relative;
 }
 
 .ui-pagination.history__pagination {

package/pages/library/index.vue

@@ -25,14 +25,14 @@
           :title="t('library.continue_watching')"
           icon="history"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <UiLink
           :to="generateLink('/history')"
-          theme="secondary"
+          theme="simple"
         >
-          {{ t('library.view_all_history') }}
+          {{ t('library.history') }}
           <UiIcon
             name="arrow-right"
             size="16"
@@ -61,7 +61,7 @@
           :title="t('library.collections')"
           icon="layers"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
       </header>
 
@@ -86,12 +86,12 @@
           :title="t('library.following')"
           icon="plus"
           title-tag="h2"
-          size="xl"
+          variant="section"
         />
 
         <UiLink
           :to="generateLink('/following')"
-          theme="secondary"
+          theme="simple"
         >
           {{ t('library.whats_new', { count: newTotal }) }}
           <UiIcon

package/pages/playlists/index.vue

@@ -13,7 +13,7 @@
         v-if="h1"
         :title="h1"
         :count="publicData.items.length"
-        icon="list"
+        icon="playlist"
       />
 
       <UiLink
@@ -25,7 +25,7 @@
           name="playlist"
           size="16"
         />
-        {{ $t('my_playlists') }}
+        {{ $t('my_playlists') }} (3)
         <UiIcon
           name="arrow-right"
           size="16"
@@ -39,7 +39,7 @@
       :title="$t('user_playlists')"
       class="playlists__title"
       title-tag="h2"
-      size="xl"
+      variant="section"
     />
 
     <SectionNavLinks
@@ -117,7 +117,7 @@ const breadcrumbs = [
   flex-direction: column;
   align-items: flex-start;
   row-gap: 12px;
-  margin-bottom: 24px;
+  margin-bottom: 32px;
 
   @include from-br(xm) {
     flex-direction: row;
@@ -132,7 +132,7 @@ const breadcrumbs = [
 }
 
 .playlists__title {
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .playlists__navigation {