itube-specs 0.0.904 → 0.0.911

package/assets/icons/common/playlist.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 5H3"></path><path d="M10 12H3"></path><path d="M10 19H3"></path><path d="M15 12.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997a1 1 0 0 1-1.517-.86z"></path></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12H3"></path><path d="M16 6H3"></path><path d="M12 18H3"></path><path d="m16 12 5 3-5 3v-6Z"></path></svg>

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

@@ -43,7 +43,7 @@ $nav-border--hover: transparent;
 $nav-border: $color-zinc-700-50;
 $nav-icon: $color-zinc-400;
 $nav-icon-accent: $color-red-400;
-$nav-icon--active: $nav-text--active;
+$nav-icon--active: $color-zinc-400;
 $nav-container-bg: $color-black;
 $nav-down-icon: $color-zinc-500;
 $nav-menu-bg: $color-zinc-900;
@@ -105,7 +105,7 @@ $count-bg: $color-zinc-800;
 $count-text: $color-zinc-400;
 
 // ─── Search ───
-$search-bg: $color-zinc-800;
+$search-bg: $color-zinc-800-50;
 $search-text: $color-white;
 $search-bg--mobile: $color-zinc-800;
 $search-border--active--mobile: $color-indigo-500;
@@ -119,7 +119,7 @@ $search-button-bg: $color-indigo-600;
 $search-button-bg--hover: $color-indigo-500;
 $search-max-width: 500px;
 $search-max-width-md: 672px;
-$search-mobile-bg: $mono-black-95;
+$search-mobile-bg: $color-neutral-940-95;
 $search-mobile-border: $color-zinc-800;
 $search-mobile-decorate: $mono-black-50;
 $search-mobile-button: $color-zinc-200;
@@ -468,18 +468,29 @@ $dropdown-crest: $color-zinc-500;
 $dropdown-separator: $color-zinc-800-60;
 
 // ─── Snackbar ───
+$snackbar-bg: $color-zinc-800;
+$snackbar-border: $color-zinc-700;
 $snackbar-text: $color-zinc-200;
-$snackbar-close: $color-zinc-500;
-$snackbar-close--hover: $color-zinc-300;
-$snackbar-close-bg--hover: $color-zinc-700;
-$snackbar-success: $color-green-200;
-$snackbar-success-bg: $color-green-925;
-$snackbar-success-icon: $color-green-300;
-$snackbar-success-icon-bg: $color-green-800;
-$snackbar-error: $color-red-200;
-$snackbar-error-bg: $color-red-925;
-$snackbar-error-icon: $color-red-300;
-$snackbar-error-icon-bg: $color-red-800;
+$snackbar-highlight: $color-white;
+$snackbar-icon: $color-zinc-300;
+$snackbar-icon-bg: $color-zinc-700-60;
+$snackbar-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+$snackbar-action-bg: $color-indigo-600;
+$snackbar-action-bg--hover: $color-indigo-500;
+$snackbar-action-text: $color-white;
+
+// ─── Follow button ───
+$follow-btn-bg: $color-indigo-600;
+$follow-btn-bg--hover: $color-indigo-500;
+$follow-btn-border: $color-indigo-500;
+$follow-btn-border--hover: $color-indigo-500;
+$follow-btn-text: $color-white;
+$follow-btn-following-bg: $color-zinc-800;
+$follow-btn-following-bg--hover: $color-red-600;
+$follow-btn-following-border: $color-zinc-800;
+$follow-btn-following-border--hover: $color-red-500;
+$follow-btn-following-text: $color-white;
+$follow-btn-following-text--hover: $color-white;
 
 // ─── Button ───
 $button-primary-bg: $color-indigo-600;
@@ -854,6 +865,18 @@ $playlist-card-placeholder-bg: $color-zinc-700;
 $playlist-card-dropdown-icon: $color-zinc-500;
 $playlist-card-dropdown-icon--hover: $color-white;
 
+// ─── Collections section ───
+$collections-badge-text: $color-indigo-300;
+$collections-badge-bg: $color-indigo-500-20;
+$collections-badge-border: $color-indigo-500-40;
+$collections-more-bg: $color-zinc-800;
+$collections-more-border: $color-zinc-800-50;
+$collections-more-border--hover: $color-zinc-700;
+$collections-more-scrim: $color-black-50;
+$collections-more-scrim--hover: $color-black-42;
+$collections-more-count: $color-white;
+$collections-more-text: $color-zinc-200;
+
 // ─── Channel card ───
 $channel-card-border: $color-zinc-800-50;
 $channel-card-bg: $color-zinc-800-50;
@@ -978,15 +1001,15 @@ $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;
 $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;
@@ -1001,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

@@ -523,18 +523,29 @@ $dropdown-crest: $color-gray-400;
 $dropdown-separator: $color-slate-750;
 
 // ─── Snackbar ───
+$snackbar-bg: $color-slate-800;
+$snackbar-border: $color-slate-750;
 $snackbar-text: $color-gray-200;
-$snackbar-close: $color-gray-500;
-$snackbar-close--hover: $color-gray-300;
-$snackbar-close-bg--hover: $color-slate-700;
-$snackbar-success: $color-green-200;
-$snackbar-success-bg: $color-green-925;
-$snackbar-success-icon: $color-green-300;
-$snackbar-success-icon-bg: $color-green-800;
-$snackbar-error: $color-red-200;
-$snackbar-error-bg: $color-red-925;
-$snackbar-error-icon: $color-red-300;
-$snackbar-error-icon-bg: $color-red-800;
+$snackbar-highlight: $color-white;
+$snackbar-icon: $color-gray-300;
+$snackbar-icon-bg: $color-slate-700;
+$snackbar-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+$snackbar-action-bg: $color-indigo-600;
+$snackbar-action-bg--hover: $color-indigo-500;
+$snackbar-action-text: $color-white;
+
+// ─── Follow button ───
+$follow-btn-bg: $color-indigo-600;
+$follow-btn-bg--hover: $color-indigo-500;
+$follow-btn-border: $color-indigo-500;
+$follow-btn-border--hover: $color-indigo-500;
+$follow-btn-text: $color-white;
+$follow-btn-following-bg: $color-gray-300;
+$follow-btn-following-bg--hover: $color-red-500;
+$follow-btn-following-border: $color-gray-300;
+$follow-btn-following-border--hover: $color-red-500;
+$follow-btn-following-text: $color-gray-700;
+$follow-btn-following-text--hover: $color-white;
 
 // ─── Button ───
 $button-primary-bg: $color-indigo-600;
@@ -882,6 +893,18 @@ $playlist-card-placeholder-bg: $color-gray-300;
 $playlist-card-dropdown-icon: $color-gray-600;
 $playlist-card-dropdown-icon--hover: $color-gray-900;
 
+// ─── Collections section ───
+$collections-badge-text: $color-indigo-600;
+$collections-badge-bg: $color-indigo-500-10;
+$collections-badge-border: $color-indigo-500-20;
+$collections-more-bg: $color-gray-300;
+$collections-more-border: $color-gray-300;
+$collections-more-border--hover: $color-gray-400;
+$collections-more-scrim: $color-black-45;
+$collections-more-scrim--hover: $color-black-32;
+$collections-more-count: $color-white;
+$collections-more-text: $color-white;
+
 // ─── Channel card ───
 $channel-card-border: transparent;
 $channel-card-bg: $color-gray-100;
@@ -1006,15 +1029,15 @@ $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;
 $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;
@@ -1029,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/assets/scss/vars/_palette.scss

@@ -22,6 +22,7 @@ $color-zinc-750: lab(21.3843% .9572 -2.5207); // #333337
 $color-zinc-700: lab(26.8019% 1.35387 -4.68303); // #3f3f46
 $color-zinc-700-80: lab(26.8019% 1.35387 -4.68303 / 80%); // zinc-700 / 70%
 $color-zinc-700-70: lab(26.8019% 1.35387 -4.68303 / 70%); // zinc-700 / 70%
+$color-zinc-700-60: lab(26.8019% 1.35387 -4.68303 / 60%); // zinc-700 / 60%
 $color-zinc-700-50: lab(26.8019% 1.35387 -4.68303 / 50%); // zinc-700 / 50%
 $color-zinc-700-30: lab(26.8019% 1.35387 -4.68303 / 30%); // zinc-700 / 50%
 $color-zinc-650: lab(31.3256% 2.0703 -5.3354); // #494952
@@ -65,6 +66,10 @@ $color-indigo-800: lab(26.6645% 37.9804 -68.6402); // #372aac
 $color-indigo-900: lab(23.3911% 24.6978 -50.4718); // #312c85
 $color-indigo-950: lab(12.9255% 18.7583 -31.0075); // #1e1a4d
 
+// Neutral gray (untinted — no zinc blue tint)
+$color-neutral-940: lab(3.6355% 0 0); // #0d0d0d
+$color-neutral-940-95: lab(3.6355% 0 0 / 95%); // #0d0d0d / 95%
+
 // Monochrome black (opacity variants)
 $mono-black-100: lab(0% 0 0);
 $mono-black-95: lab(0% 0 0 / 95%);

package/assets/scss/vars/_vars.scss

@@ -5,6 +5,7 @@ $radius: 10px;
 $radius-small: 4px;
 $radius-md: 8px;
 $radius-lg: 10px;
+$radius-12: 12px;
 $radius-xl: 14px;
 $radius-2xl: 16px;
 $radius-full: 9999px;

package/components/auth/login.vue

@@ -94,7 +94,7 @@ function onCreateClick() {
 
 const loading = ref(false);
 
-const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
+const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
 
 async function login() {
   resetSnackbar();
@@ -115,7 +115,7 @@ async function login() {
       loading.value = true;
       await useUser(AuthorizationApiService).login(form.value);
       useAuthPopup().closeAuthPopup();
-      showSuccess('Welcome back!');
+      show('Welcome back!');
     } catch (error) {
       setErrorState(error);
     } finally {

package/components/auth/recovery.vue

@@ -70,7 +70,7 @@ function onLoginClick() {
 
 const loading = ref(false);
 
-const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
+const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
 
 // Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
 onMounted(async () => {
@@ -97,7 +97,7 @@ async function submit() {
     form.value.token = await getRecaptchaToken('password_reset');
     await useUser(AuthorizationApiService).password(form.value);
     useAuthPopup().closeAuthPopup();
-    showSuccess('Check your email');
+    show('Check your email');
   } catch (error) {
     setErrorState(error);
   } finally {

package/components/auth/register.vue

@@ -129,7 +129,7 @@ function onLoginClick() {
 
 const loading = ref(false);
 
-const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
+const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
 // Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
 onMounted(async () => {
   try {
@@ -176,7 +176,7 @@ async function submit() {
     // await PlaylistsApiService.postPlaylist(FAVORITES_KEY, PlaylistType.Private);
 
     useAuthPopup().closeAuthPopup();
-    showSuccess('Registration success');
+    show('Registration success');
   } catch (err) {
     setErrorState(err);
     console.error('Ошибка reCAPTCHA или регистрации:', err);

package/components/card/collections-more.vue

@@ -0,0 +1,133 @@
+<!-- Плитка «показать ещё» в сетке коллекций: 16 размытых обложек сеткой 4×4, поверх счётчик и подпись -->
+<template>
+  <NuxtLink
+    :to="generateLink(to)"
+    class="card-collections-more"
+  >
+    <span
+      v-if="images.length > 0"
+      class="card-collections-more__thumbs"
+      aria-hidden="true"
+    >
+      <UiImg
+        v-for="(src, index) in images"
+        :key="`collections-more-thumb-${index}`"
+        :src="src"
+        :width="ThumbSize.Small.split('x')[0]"
+        :height="ThumbSize.Small.split('x')[1]"
+        alt=""
+        class="card-collections-more__thumb"
+      />
+    </span>
+
+    <span class="card-collections-more__content">
+      <span
+        v-if="count"
+        class="card-collections-more__count"
+      >+{{ count }}</span>
+      <span class="card-collections-more__text">{{ text }}</span>
+    </span>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import { ThumbSize } from '../../runtime';
+import type { IThumbUrls } from '../../types';
+
+const props = defineProps<{
+  to: string
+  text: string
+  /** Обложки для мозаики: лишние отбрасываем, если меньше 16 — повторяем по кругу */
+  thumbs?: IThumbUrls[]
+  /** Сколько коллекций осталось за кадром — «+18» */
+  count?: number
+}>();
+
+const { generateLink } = useGenerateLink();
+
+/** Ячеек в мозаике — сетка 4×4 */
+const CELLS = 16;
+
+const images = computed(() => {
+  const sources = (props.thumbs || [])
+    .map(thumb => thumb?.webp?.[ThumbSize.Small])
+    .filter((src): src is string => Boolean(src));
+
+  if (sources.length === 0) return [];
+
+  /* добиваем по кругу, чтобы мозаика всегда была полной, а не с дырами */
+  return Array.from({ length: CELLS }, (_, index) => sources[index % sources.length]);
+});
+</script>
+
+<style lang="scss">
+.card-collections-more {
+  position: relative;
+  display: grid;
+  place-content: center;
+  min-height: 240px;
+  padding: 12px;
+  overflow: hidden;
+  text-align: center;
+  border-radius: $radius-xl;
+  border: 1px solid $collections-more-border;
+  background-color: $collections-more-bg;
+
+  @include hover(border-color) {
+    border-color: $collections-more-border--hover;
+
+    &::after {
+      background-color: $collections-more-scrim--hover;
+    }
+  }
+
+  /* затемнение поверх обложек — псевдоэлементом, без отдельной ноды-оверлея */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: $collections-more-scrim;
+    transition: var(--transition) background-color;
+  }
+}
+
+.card-collections-more__thumbs {
+  position: absolute;
+  inset: 0;
+  display: grid;
+
+  /* minmax(0, 1fr), иначе auto-минимум трека = min-content картинки и сетка распирает блок */
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+  gap: 2px;
+  filter: blur(12px);
+  transform: scale(1.1);
+}
+
+.card-collections-more__thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-collections-more__content {
+  position: relative;
+  z-index: $z-index-plus;
+  display: grid;
+  row-gap: 2px;
+}
+
+.card-collections-more__count {
+  @include font-2xl;
+
+  font-weight: 700;
+  color: $collections-more-count;
+}
+
+.card-collections-more__text {
+  @include font-sm;
+
+  font-weight: 500;
+  color: $collections-more-text;
+}
+</style>

package/components/card/playlist.vue

@@ -107,7 +107,10 @@
         <p class="card-playlist__user">
           {{ card.username }}
         </p>
-        <div class="card-playlist__content-wrapper">
+        <div
+          v-if="!noActions"
+          class="card-playlist__content-wrapper"
+        >
           <UiDropdown
             ref="dropdownRef"
             right
@@ -177,6 +180,8 @@ import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 const props = defineProps<{
   card: IPlaylistCard
   topPlaylists?: boolean
+  /** Без меню «три точки» — вместе с ним уходят share и report */
+  noActions?: boolean
   priority?: boolean
 }>();
 

package/components/grid/playlists.vue

@@ -6,6 +6,7 @@
       :key="`user-playlist-${index}`"
       :card="item"
       :top-playlists="topPlaylists"
+      :no-actions="noActions"
       :priority="priority && index === 0"
       @share="onShare"
     />
@@ -32,6 +33,8 @@ import type { IPlaylistCard } from '../../types';
 defineProps<{
   items: IPlaylistCard[]
   topPlaylists?: boolean
+  /** Скрыть меню карточки (три точки: share/report) — например у редакционных подборок */
+  noActions?: boolean
   priority?: boolean
 }>();
 

package/components/info/main.vue

@@ -30,19 +30,6 @@
             class="info-main__count"
             icon="video-camera"
           >{{ videosCount || card.videosCount }}</UiCount>
-          <UiBtn
-            v-if="featureFlags.FeatureFollowEnabled"
-            theme="muted"
-            class="info-main__header-button"
-            size="s"
-            @click="onFollowClick"
-          >
-            <UiIcon
-              name="plus"
-              size="16"
-            />
-            {{ t('follow') }}
-          </UiBtn>
           <UiBtn
             theme="muted"
             size="s"
@@ -55,6 +42,14 @@
             />
             {{ t('share') }}
           </UiBtn>
+          <UiFollowBtn
+            v-if="featureFlags.FeatureFollowEnabled"
+            :following="isFollowing"
+            :name="title"
+            class="info-main__header-follow"
+            size="s"
+            @toggle="onFollowClick"
+          />
         </div>
       </div>
 
@@ -190,9 +185,12 @@ function showParameters() {
 
 const authPopupText = 'register_first';
 
+/** Заглушка вместо ручки подписки: состояние живёт только в компоненте, на бэк ничего не уходит */
+const isFollowing = ref(false);
+
 function onFollowClick() {
   if (isAuthorized.value) {
-    console.log('чото делать');
+    isFollowing.value = !isFollowing.value;
   } else {
     openAuthPopup(AuthSteps.Login, authPopupText);
   }
@@ -464,4 +462,10 @@ const socialItems = computed<ILinkItem[]>(() => {
 .info-main__header-button {
   @include button-variant(info-button);
 }
+
+.info-main__header-follow {
+  @include to-br(sm) {
+    margin-inline-start: auto;
+  }
+}
 </style>