itube-specs 0.0.902 → 0.0.910

package/assets/icons/common/flag.svg

@@ -1 +1 @@
-<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zm0 7v-7"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"></path></svg>

package/assets/icons/common/heart-stroke.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart w-5 h-5" aria-hidden="true"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>

package/assets/icons/common/heart.svg

@@ -1 +1 @@
-<svg fill="currentColor" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"/></svg>
+<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>

package/assets/icons/common/share.svg

@@ -1 +1 @@
-<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98m-.01-10.98-6.82 3.98"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg>

package/assets/icons/common/thumbs-down-filled.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"></path><path d="M17 14V2"></path></svg>

package/assets/icons/common/thumbs-down.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88M17 14V2"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"></path><path d="M17 14V2"></path></svg>

package/assets/icons/common/thumbs-up-filled.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path><path d="M7 10v12"></path></svg>

package/assets/icons/common/thumbs-up.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88M7 10v12"/></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path><path d="M7 10v12"></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;
@@ -230,6 +230,13 @@ $video-info-description-text: $color-zinc-400;
 // ─── Video interface ───
 $video-interface-button-bg: $color-zinc-800;
 $video-interface-button-text: $color-zinc-400;
+$video-interface-button-bg--hover: $color-zinc-700;
+$video-interface-button-text--hover: $color-white;
+$video-interface-button-bg--active: $color-zinc-700;
+$video-interface-button-text--active: $color-white;
+$video-interface-mobile-icon: $color-white;
+$video-interface-mobile-label: $color-zinc-300;
+$video-interface-mobile-border: $color-zinc-800;
 
 // ─── Video channel ───
 $video-channel-bg: $color-zinc-800-60;
@@ -283,11 +290,12 @@ $video-playlist-header-button-text--active: $color-indigo-400;
 $video-playlist-header-button-bg--active: $color-indigo-500-10;
 
 // ─── Like ───
-$like-text: $color-zinc-400;
 $like-icon: $color-zinc-400;
-$like-text--hover: $color-white;
-$like-icon--active: $color-green-500;
-$like-icon-dislike--active: $color-red-500;
+$like-icon--hover: $color-white;
+$like-icon--active: $color-white;
+$like-count: $color-zinc-500;
+$like-mobile-icon: $color-white;
+$like-mobile-count: $color-zinc-300;
 $like-bar-bg: $color-zinc-700;
 $like-bar-likes: $color-zinc-500;
 
@@ -460,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;
@@ -846,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,7 +1009,6 @@ $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;

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

@@ -287,6 +287,13 @@ $video-info-description-text: $color-gray-700;
 // ─── Video interface ───
 $video-interface-button-bg: $color-slate-750;
 $video-interface-button-text: $color-gray-400;
+$video-interface-button-bg--hover: $color-slate-700;
+$video-interface-button-text--hover: $color-white;
+$video-interface-button-bg--active: $color-slate-700;
+$video-interface-button-text--active: $color-white;
+$video-interface-mobile-icon: $color-gray-900;
+$video-interface-mobile-label: $color-gray-500;
+$video-interface-mobile-border: $color-gray-200;
 
 // ─── Video channel ───
 $video-channel-bg: $color-gray-200;
@@ -340,11 +347,12 @@ $video-playlist-header-button-text--active: $color-indigo-soft;
 $video-playlist-header-button-bg--active: $color-indigo-500-10;
 
 // ─── Like ───
-$like-text: $color-gray-400;
 $like-icon: $color-gray-500;
-$like-text--hover: $color-gray-900;
-$like-icon--active: $color-green-500;
-$like-icon-dislike--active: $color-red-500;
+$like-icon--hover: $color-gray-900;
+$like-icon--active: $color-gray-900;
+$like-count: $color-gray-400;
+$like-mobile-icon: $color-gray-900;
+$like-mobile-count: $color-gray-500;
 $like-bar-bg: $color-slate-700;
 $like-bar-likes: $color-gray-500;
 
@@ -515,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;
@@ -874,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,7 +1037,6 @@ $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;

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>