itube-specs 0.0.896 → 0.0.898

package/assets/icons/common/bell.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>

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

@@ -1,3 +1,8 @@
+@mixin font-4xs {
+  font-size: 10px;
+  line-height: 1;
+}
+
 @mixin font-3xs {
   font-size: 11px;
   line-height: 1;

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

@@ -148,7 +148,7 @@ $popup-auth-size: 32px;
 $popup-auth-icon: $color-indigo-900;
 $popup-auth-icon-bg: $color-indigo-600;
 $popup-border: $color-zinc-800;
-$popup-footer-border: transparent;
+$popup-footer-border: $color-zinc-800;
 $popup-text: $color-white;
 $popup-scrollbar: $color-zinc-800;
 $popup-close-icon: $color-zinc-400;
@@ -327,15 +327,29 @@ $playlist-edit-icon: $color-indigo-600;
 $playlist-delete-video-icon: $color-indigo-600;
 
 // ─── Popular card ───
-$card-round-size: 96px;
 $card-round-text: $color-zinc-200;
 $card-round-text--hover: $color-indigo-400;
 $card-round-subtext: $color-zinc-500;
 $card-round-border: $color-zinc-700;
 $card-round-border--hover: $color-zinc-500;
-$card-round-all-bg: $color-night;
-$card-round-all-bg--hover: $color-night;
-$card-round-all-text: $color-zinc-400;
+
+// ─── View all (плитка «смотреть все» в конце ленты) ───
+$view-all-gradient-from: $color-indigo-500-10;
+$view-all-gradient-via: $color-zinc-800-50;
+$view-all-gradient-to: $color-zinc-800-50;
+$view-all-dots: $color-indigo-400-10;
+$view-all-border: $color-zinc-700-70;
+$view-all-border--hover: $color-zinc-600;
+$view-all-icon: $color-indigo-300;
+$view-all-icon-bg: $color-indigo-500-20;
+$view-all-icon-border: $color-indigo-500-40;
+$view-all-text: $color-white;
+$view-all-note: $color-zinc-400;
+
+// ─── New-badge (карточки на странице подписок) ───
+$card-new-badge-bg: $color-indigo-600;
+$card-new-badge-text: $color-white;
+$card-new-badge-ring: $main-bg;
 
 // ─── Language ───
 $language-text: $color-zinc-300;
@@ -386,14 +400,14 @@ $burger-close-bg: $color-zinc-700;
 $burger-close-text: $color-zinc-300;
 
 // ─── Burger menu item ───
-$burger-menu-item-text: $color-zinc-300;
-$burger-menu-item-icon: $color-zinc-400;
-$burger-menu-item-bg--active: $color-indigo-600-20;
-$burger-menu-item-text--active: $color-white;
-$burger-menu-item-icon--active: $color-indigo-400;
-$burger-menu-item-accent-icon: $nav-icon-accent;
-$burger-menu-item-child-text: $color-zinc-400;
-$burger-menu-item-child-icon: $color-zinc-500;
+$burger-item-text: $color-zinc-300;
+$burger-item-icon: $color-zinc-400;
+$burger-item-bg--active: $color-indigo-600-20;
+$burger-item-text--active: $color-white;
+$burger-item-icon--active: $color-indigo-400;
+$burger-item-accent-icon: $nav-icon-accent;
+$burger-item-child-text: $color-zinc-400;
+$burger-item-child-icon: $color-zinc-500;
 
 // ─── Header ───
 $header-bg: $color-black;
@@ -405,6 +419,14 @@ $header-language-menu-bg: $color-night;
 $header-language-menu-border: $color-zinc-800;
 $header-language-menu-item--hover: $color-zinc-800-50;
 
+// ─── notifications ───
+$notifications-icon: $color-zinc-300;
+$notifications-icon--mobile: $color-zinc-200;
+$notifications-icon--hover: $color-white;
+$notifications-badge-bg: $color-indigo-600;
+$notifications-badge-text: $color-white;
+$notifications-badge-ring: $color-black;
+
 // ─── Header user ───
 $header-user-trigger-icon: $color-zinc-400;
 $header-user-dropdown-bg: $color-night;
@@ -469,6 +491,8 @@ $button-secondary-text: $color-zinc-400;
 $button-secondary-text--active: $color-white;
 $button-secondary-border: $color-zinc-700-50;
 $button-secondary-border--active: $color-indigo-500;
+$button-simple-text: $color-white;
+$button-simple-text--hover: $color-zinc-300;
 $button-muted-bg: $color-zinc-800;
 $button-muted-text: $color-zinc-300;
 $button-muted-bg--hover: $color-zinc-700;
@@ -707,7 +731,7 @@ $search-item-highlight: $color-white;
 $search-item-count: $color-zinc-600;
 
 // ─── Search input ───
-$search-input-icon: $color-zinc-400;
+$search-input-icon: $color-white;
 $search-input-clear: $color-zinc-500;
 $search-input-clear--hover: $color-zinc-300;
 
@@ -894,15 +918,6 @@ $grouped-category-icon: $color-zinc-500;
 $grouped-footer-text: $color-zinc-500;
 $grouped-section-border: $color-zinc-800;
 
-// ─── Page: search ───
-$search-show-all-bg: $color-zinc-800-50;
-$search-show-all-border: $color-zinc-700;
-$search-show-all-text: $color-zinc-500;
-$search-show-all-border--hover: $color-indigo-500;
-$search-show-all-text--hover: $color-indigo-400;
-$search-show-all-number: $color-zinc-400;
-$search-show-all-number--hover: $color-indigo-400;
-
 // ─── Page: profile ───
 $profile-bg: $color-zinc-900-50;
 $profile-text: $color-white;

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

@@ -384,15 +384,29 @@ $playlist-edit-icon: $color-indigo-600;
 $playlist-delete-video-icon: $color-indigo-600;
 
 // ─── Popular card ───
-$card-round-size: 96px;
 $card-round-text: $color-gray-700;
 $card-round-text--hover: $color-gray-700;
 $card-round-subtext: $color-gray-600;
 $card-round-border: $color-white;
 $card-round-border--hover: $color-white;
-$card-round-all-bg: $color-gray-300;
-$card-round-all-bg--hover: $color-gray-400;
-$card-round-all-text: $color-gray-700;
+
+// ─── View all (плитка «смотреть все» в конце ленты) ───
+$view-all-gradient-from: $color-indigo-500-10;
+$view-all-gradient-via: $color-gray-200-50;
+$view-all-gradient-to: $color-gray-300-50;
+$view-all-dots: $color-indigo-400-10;
+$view-all-border: $color-gray-300;
+$view-all-border--hover: $color-gray-400;
+$view-all-icon: $color-indigo-600;
+$view-all-icon-bg: $color-indigo-500-10;
+$view-all-icon-border: $color-indigo-500-20;
+$view-all-text: $color-gray-900;
+$view-all-note: $color-gray-600;
+
+// ─── New-badge (карточки на странице подписок) ───
+$card-new-badge-bg: $color-indigo-600;
+$card-new-badge-text: $color-white;
+$card-new-badge-ring: $main-bg;
 
 // ─── Language ───
 $language-text: $color-white;
@@ -443,14 +457,14 @@ $burger-close-bg: $color-slate-750;
 $burger-close-text: $color-white;
 
 // ─── Burger menu item ───
-$burger-menu-item-text: $color-white;
-$burger-menu-item-icon: $color-gray-400;
-$burger-menu-item-bg--active: $color-slate-750;
-$burger-menu-item-text--active: $color-white;
-$burger-menu-item-icon--active: $color-gray-400;
-$burger-menu-item-accent-icon: $color-red-400;
-$burger-menu-item-child-text: $color-gray-400;
-$burger-menu-item-child-icon: $color-gray-400;
+$burger-item-text: $color-white;
+$burger-item-icon: $color-gray-400;
+$burger-item-bg--active: $color-slate-750;
+$burger-item-text--active: $color-white;
+$burger-item-icon--active: $color-gray-400;
+$burger-item-accent-icon: $color-red-400;
+$burger-item-child-text: $color-gray-400;
+$burger-item-child-icon: $color-gray-400;
 
 // ─── Header ───
 $header-bg: $color-slate-800;
@@ -461,6 +475,12 @@ $header-language-angle--hover: $color-gray-300;
 $header-language-menu-bg: $color-slate-850;
 $header-language-menu-border: $color-white-10;
 $header-language-menu-item--hover: $color-white-5;
+$notifications-icon: $color-gray-300;
+$notifications-icon--mobile: $color-gray-200;
+$notifications-icon--hover: $color-white;
+$notifications-badge-bg: $color-indigo-600;
+$notifications-badge-text: $color-white;
+$notifications-badge-ring: $color-slate-800;
 
 // ─── Header user ───
 $header-user-trigger-icon: $color-gray-500;
@@ -526,6 +546,8 @@ $button-secondary-text: $color-gray-700;
 $button-secondary-text--active: $color-white;
 $button-secondary-border: transparent;
 $button-secondary-border--active: $color-indigo-soft;
+$button-simple-text: $color-gray-900;
+$button-simple-text--hover: $color-indigo-600;
 $button-muted-bg: transparent;
 $button-muted-text: $color-gray-300;
 $button-muted-bg--hover: $color-slate-750;
@@ -924,15 +946,6 @@ $grouped-category-icon: $color-gray-500;
 $grouped-footer-text: $color-gray-500;
 $grouped-section-border: $color-gray-200;
 
-// ─── Page: search ───
-$search-show-all-bg: $color-gray-300;
-$search-show-all-border: $color-gray-300;
-$search-show-all-text: $color-gray-500;
-$search-show-all-border--hover: $color-gray-100;
-$search-show-all-text--hover: $color-gray-500;
-$search-show-all-number: $color-gray-700;
-$search-show-all-number--hover: $color-gray-700;
-
 // ─── Page: profile ───
 $profile-bg: $color-gray-200;
 $profile-text: $color-gray-900;

package/assets/scss/vars/_palette.scss

@@ -50,6 +50,7 @@ $color-indigo-100: lab(91.7827% 2.2585 -12.3844); // #e0e7ff
 $color-indigo-200: lab(84.6841% 5.3654 -22.7191); // #c7d2fe
 $color-indigo-300: lab(74.0235% 8.54138 -41.6075); // #a4b3ff
 $color-indigo-400: lab(59.866% 22.4834 -64.4485); // #7d87ff
+$color-indigo-400-10: lab(59.866% 22.4834 -64.4485 / 10%);
 $color-indigo-500: lab(48.295% 38.3129 -81.9673); // #625fff
 $color-indigo-500-10: lab(48.295% 38.3129 -81.9673 / 10%);
 $color-indigo-500-20: lab(48.295% 38.3129 -81.9673 / 20%);

package/assets/scss/vars/_tokens.scss

@@ -28,6 +28,7 @@
   --container-padding-inline: 8px;
   --aside-videos-aspect-ratio: 403/593;
   --popup-padding-bottom-mobile: 32px;
+  --card-round-size: 80px;
 
   @include from-br(xs) {
     --container-padding-inline: 16px;
@@ -40,5 +41,6 @@
     --header-height: 71px;
     --control-min-width: 296px;
     --max-width-container: 1600px;
+    --card-round-size: 96px;
   }
 }

package/components/card/category.vue

@@ -31,7 +31,14 @@
               loading="lazy"
             >
           </span>
-          <span class="card-category__count">
+          <span
+            v-if="card.newCount"
+            class="card-category__badge"
+          >{{ $t('library.new_count', { count: card.newCount }) }}</span>
+          <span
+            v-else
+            class="card-category__count"
+          >
             <UiIcon
               name="video-camera"
               size="14"
@@ -155,4 +162,18 @@ const slug = computed(() => {
   grid-template-columns: 1fr auto;
   align-items: center;
 }
+
+.card-category__badge {
+  @include font-3xs;
+
+  display: grid;
+  place-content: center;
+  height: 20px;
+  padding-inline: 6px;
+  font-weight: 700;
+  white-space: nowrap;
+  color: $card-new-badge-text;
+  background-color: $card-new-badge-bg;
+  border-radius: $radius-full;
+}
 </style>

package/components/card/playlist.vue

@@ -98,7 +98,11 @@
           :to="generateLink(`/playlists/${card.id}/${card.firstVideoId}`)"
           class="card-playlist__title"
         >
-          {{ card.name }}
+          <span class="card-playlist__name">{{ card.name }}</span>
+          <span
+            v-if="card.newCount"
+            class="card-playlist__badge"
+          >{{ t('library.new_count', { count: card.newCount }) }}</span>
         </NuxtLink>
         <p class="card-playlist__user">
           {{ card.username }}
@@ -306,18 +310,27 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
 .card-playlist__title {
   @include font-sm;
 
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
   max-width: 100%;
   color: $playlist-card-title;
   font-weight: 500;
+  min-width: 0;
 
   @include hover(color) {
     color: $playlist-card-title--hover;
   }
 }
 
+/* Обрезается название, а бейдж рядом остаётся целым */
+.card-playlist__name {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .card-playlist__user {
   @include font-xs;
 
@@ -451,6 +464,21 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   column-gap: 4px;
 }
 
+.card-playlist__badge {
+  @include font-3xs;
+
+  display: grid;
+  place-content: center;
+  flex-shrink: 0;
+  height: 20px;
+  padding-inline: 6px;
+  font-weight: 700;
+  white-space: nowrap;
+  color: $card-new-badge-text;
+  background-color: $card-new-badge-bg;
+  border-radius: $radius-full;
+}
+
 .card-playlist__dropdown {
   color: $playlist-card-dropdown-icon;
 

package/components/card/round.vue

@@ -15,13 +15,21 @@
       sizes="96px"
       @error="onImageError"
     />
+    <span
+      v-if="card.newCount"
+      :title="t('library.new_count', { count: card.newCount })"
+      class="card-round__badge"
+    >{{ card.newCount }}</span>
     <p class="card-round__title">
       {{ card.title }}
       <!--      <ClientOnly>-->
       <!--        <SCountry class="card-round__info-country"/>-->
       <!--      </ClientOnly>-->
     </p>
-    <p class="card-round__count">
+    <p
+      v-if="!withoutCount"
+      class="card-round__count"
+    >
       <UiIcon
         name="cam"
         size="12"
@@ -39,10 +47,13 @@ const props = withDefaults(defineProps<{
   loading?: 'eager' | 'lazy'
   priority?: boolean
   placeholderAvatar?: string
+  /** Только аватар и название — без счётчика роликов (страница подписок) */
+  withoutCount?: boolean
 }>(), {
   loading: 'lazy'
 });
 
+const { t } = useI18n();
 const { generateLink } = useGenerateLink();
 
 const fallbackImage = props.placeholderAvatar;
@@ -59,16 +70,49 @@ function onImageError() {
 </script>
 
 <style lang="scss">
+/* Заход бейджа внутрь круга. На мобиле меньше: аватар там 80px против 96px, а сам
+   бейдж не уменьшается — при одинаковом отступе он садится заметно глубже. */
+$badge-inset: 8px;
+$badge-inset--mobile: 4px;
+
 .card-round {
+  position: relative;
   display: grid;
   justify-content: center;
   justify-items: center;
-  padding: 2px;
 }
 
+.card-round__badge {
+  @include font-3xs;
+
+  /* Аватар занимает всю ширину карточки, поэтому отступ от её края = заход в круг */
+  position: absolute;
+  top: $badge-inset;
+  right: $badge-inset;
+  z-index: $z-index-plus;
+  display: grid;
+  place-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding-inline: 6px;
+  font-weight: 700;
+  color: $card-new-badge-text;
+  background-color: $card-new-badge-bg;
+  border-radius: $radius-full;
+  box-shadow: 0 0 0 2px $card-new-badge-ring;
+
+  @include to-br(sm) {
+    top: $badge-inset--mobile;
+    right: $badge-inset--mobile;
+  }
+}
+
+/* Размер задаёт ширина, высоту считает aspect-ratio: с жёсткими width/height
+   глобальный `img { max-width: 100% }` срезал только ширину и круг выходил овалом. */
 .card-round__img {
-  width: $card-round-size;
-  height: $card-round-size;
+  width: 100%;
+  max-width: var(--card-round-size);
+  height: auto;
   margin-bottom: 8px;
   aspect-ratio: 1/1;
   border-radius: $radius-full;

package/components/filter/main.vue

@@ -27,14 +27,10 @@
               :disabled="!isFiltered"
               theme="secondary"
               class="filter-main__reset"
-              wide
-              size="l"
               @click="reset"
             >{{ $t('reset_all') }}
             </UiBtn>
             <UiBtn
-              wide
-              size="l"
               theme="primary"
               @click="saveResult"
             >{{ $t('apply') }}{{ activeCount ? ` (${activeCount})` : '' }}
@@ -303,8 +299,8 @@ function reset() {
 
 <style lang="scss">
 .filter-main__footer-buttons {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  display: flex;
+  justify-content: space-between;
   column-gap: 8px;
 }
 

package/components/filter/model.vue

@@ -33,17 +33,13 @@
         <template #footer>
           <div class="filter-model__footer-buttons">
             <UiBtn
-              wide
               :disabled="!isPendingFiltered"
-              size="l"
               class="filter-model__reset"
               theme="secondary"
               @click="onResetClick"
             >{{ t('reset_all') }}
             </UiBtn>
             <UiBtn
-              wide
-              size="l"
               theme="primary"
               @click="onApplyClick"
             >{{ t('apply') }}{{ pendingChipsItems.length ? ` (${pendingChipsItems.length})` : '' }}
@@ -234,8 +230,8 @@ function onApplyClick() {
 }
 
 .filter-model__footer-buttons {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  display: flex;
+  justify-content: space-between;
   column-gap: 8px;
 }
 

package/components/grid/playlists.vue

@@ -10,6 +10,8 @@
       @share="onShare"
     />
 
+    <slot/>
+
     <ShareMain
       v-model="isShareOpen"
       :url="shareUrl"

package/components/layout/burger-item.vue

@@ -92,7 +92,7 @@ function isCurrent(link: string) {
   column-gap: 16px;
   place-items: center start;
   padding: 10px 16px;
-  color: $burger-menu-item-text;
+  color: $burger-item-text;
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
@@ -100,29 +100,29 @@ function isCurrent(link: string) {
 }
 
 .layout-burger-item__link.router-link-active {
-  background-color: $burger-menu-item-bg--active;
+  background-color: $burger-item-bg--active;
   border-radius: $radius;
-  color: $burger-menu-item-text--active;
+  color: $burger-item-text--active;
 }
 
 .layout-burger-item__link.router-link-active .layout-burger-item__icon {
-  color: $burger-menu-item-icon--active;
+  color: $burger-item-icon--active;
 }
 
 .layout-burger-item__icon {
-  color: $burger-menu-item-icon;
+  color: $burger-item-icon;
   flex-shrink: 0;
 }
 
 .layout-burger-item__icon.--accent {
-  color: $burger-menu-item-accent-icon;
+  color: $burger-item-accent-icon;
 }
 
 .layout-burger-item__link.--child {
   @include font-sm;
 
   padding-left: 48px;
-  color: $burger-menu-item-child-text;
+  color: $burger-item-child-text;
 }
 
 .layout-burger-item__angle {
@@ -135,6 +135,6 @@ function isCurrent(link: string) {
 }
 
 .layout-burger-item__link.--child .layout-burger-item__icon {
-  color: $burger-menu-item-child-icon;
+  color: $burger-item-child-icon;
 }
 </style>

package/components/layout/extra-links.vue

@@ -4,6 +4,8 @@
       v-for="(item, index) in additionalLinksItems"
       :key="`s-additional-link-${index}`"
       :to="generateLink(item.name)"
+      active-class=""
+      exact-active-class=""
       class="layout-extra-links__link"
       @click="emit('close')"
     >{{ $t(`additional_link.${item.title}`) }}</NuxtLink>

package/components/layout/header.vue

@@ -15,6 +15,8 @@
       icon-size="20"
     />
 
+    <LayoutNotifications class="layout-header__notifications"/>
+
     <div
       ref="languageRef"
       class="layout-header__language _from-sm"
@@ -134,7 +136,13 @@ $breakpoint: sm;
   width: 100%;
 
   @include from-br(sm) {
-    grid-template-columns: auto 1fr auto auto auto;
+    grid-template-columns: auto 1fr auto auto auto auto;
+  }
+
+  /* поиск | лого | колокольчик | бургер — 1fr держит лого по центру */
+  @include to-br(sm) {
+    grid-template-columns: auto 1fr auto auto;
+    column-gap: 4px;
   }
 }
 
@@ -143,6 +151,10 @@ $breakpoint: sm;
     grid-column: 1;
     grid-row: 1;
   }
+
+  @include to-br(sm) {
+    justify-self: center;
+  }
 }
 
 .layout-header__burger {
@@ -151,6 +163,13 @@ $breakpoint: sm;
   place-content: center;
   color: $header-burger-icon;
 
+  /* Такой же внутренний отступ, как у колокольчика рядом — чтобы бейдж не прилипал
+     к бургеру; отрицательный margin возвращает иконку на край контейнера */
+  @include to-br(sm) {
+    padding: 8px;
+    margin-right: -8px;
+  }
+
   &::after {
     @include area-point;
   }
@@ -179,7 +198,7 @@ $breakpoint: sm;
 .layout-header__user,
 .layout-header__sign-up {
   @include from-br(sm) {
-    grid-column: 5;
+    grid-column: 6;
     grid-row: 1;
   }
 }
@@ -197,10 +216,17 @@ $breakpoint: sm;
   margin: 0 16px;
 }
 
+.layout-header__notifications {
+  @include from-br(sm) {
+    grid-column: 4;
+    grid-row: 1;
+  }
+}
+
 .layout-header__language {
   @include from-br(sm) {
     position: relative;
-    grid-column: 4;
+    grid-column: 5;
     grid-row: 1;
   }
 }

package/components/layout/logo.vue

@@ -2,14 +2,16 @@
   <NuxtLink
     :class="{'layout-logo--glow': glow}"
     :to="generateLink('/')"
+    active-class=""
+    exact-active-class=""
     class="layout-logo"
     @click="onLogoClick"
   >
     <img
       class="layout-logo__image"
       src="/img/logo.svg"
-      width="144"
-      height="24"
+      width="120"
+      height="20"
       alt="gay.cool"
     >
   </NuxtLink>
@@ -38,4 +40,11 @@ function onLogoClick() {
     opacity: 0.9;
   }
 }
+
+.layout-logo__image {
+  @include from-br(sm) {
+    width: 144px;
+    height: 24px;
+  }
+}
 </style>