itube-specs 0.0.923 → 0.0.927

package/DOCS/STYLES.md

@@ -120,8 +120,17 @@ Text-only elements (`title`, `name`, `subtext`, `description`, `label`, `count`)
   `font-size`/`line-height`.
 - Breakpoints: `@include from-br(sm)`, `to-br(xs)`. Container: `from-cq($bp)`. JS mirror of `$brkpnts` in
   `config/`, guarded by `check:breakpoints`.
+- `$brkpnts` holds layout tiers only — points the whole page frame turns on, needed by many components. A
+  one-off threshold of a single block (how many columns fit, where a word wraps) stays a px literal next to
+  that block: `from-br`/`to-br` take a number too.
+- Card grids (videos, channels, playlists, categories) all key off `mixins/_cards-grid.scss` — one ladder
+  1 → 2 (370px) → 3 (900px) → 4 (1440px). Take columns from `@include cards-grid-columns`, set `display` and
+  `gap` yourself; don't hand-roll a per-grid column ladder or an `auto-fill` variant.
+- `$brkpnt-burger` (= `sd`, 1024px) is the burger ↔ desktop-menu line: below it the nav and the right half of
+  the header collapse into the burger. Header, nav, search, niche, language and `--header-height` key off this
+  variable, not off `sm` — move the line here, not per file. Utility classes: `._to-sd` / `._from-sd`.
 
 **All mixins** (auto-injected, never `@use`): `font-4xs|3xs|xs|2xs|sm|md|base|lg|xl|2xl|3xl|4xl`,
 `from-br|to-br`, `from-cq|to-cq`, `hover`, `surface`, `button-variant`, `page|page-title|page-footer-links`,
-`video-card|video-card-grid|video-card-poster`, `area-point`. Signatures — SCSS-mixins table in the app's
+`cards-grid-columns`, `video-card|video-card-grid|video-card-poster`, `area-point`. Signatures — SCSS-mixins table in the app's
 `DOCS/CATALOG.md`.

package/assets/scss/base/_utils.scss

@@ -6,6 +6,9 @@
 // Виден только ниже sm (960px), на sm и шире скрыт.
 @include from-br(sm) { ._to-sm { display: none !important; } }
 
+// Виден только ниже sd (1024px, граница бургера), на sd и шире скрыт.
+@include from-br(sd) { ._to-sd { display: none !important; } }
+
 // Виден только ниже md (1350px), на md и шире скрыт.
 @include from-br(md) { ._to-md { display: none !important; } }
 
@@ -18,6 +21,9 @@
 // Виден с sm (960px) и шире, ниже скрыт.
 @include to-br(sm) { ._from-sm { display: none !important; } }
 
+// Виден с sd (1024px, граница бургера) и шире, ниже скрыт.
+@include to-br(sd) { ._from-sd { display: none !important; } }
+
 // Виден с md (1350px) и шире, ниже скрыт.
 @include to-br(md) { ._from-md { display: none !important; } }
 

package/assets/scss/layout/_layout.scss

@@ -17,7 +17,7 @@
   padding-block: 12px;
   border-bottom: 1px solid $layout-header-border;
 
-  @include from-br(sm) {
+  @include from-br($brkpnt-burger) {
     padding-inline: 32px;
     padding-block: 12px;
   }

package/assets/scss/mixins/_badge.scss

@@ -0,0 +1,18 @@
+@use 'font-sizes' as *;
+@use 'vars' as *;
+
+// Плашка с кодом локали в переключателях языка (шапка, футер, список языков).
+// Цвета не задаёт — фон и текст ставит вызывающий компонент своими токенами.
+@mixin locale-badge {
+  @include font-xs;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: $radius-small;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}

package/assets/scss/mixins/_breakpoints.scss

@@ -1,19 +1,40 @@
 @use 'sass:map';
 @use 'sass:list';
+@use 'sass:math';
 @use 'sass:meta';
 
-// Брейкпоинты соответствуют брейкпоинтам vuetify https://v2.vuetifyjs.com/en/features/breakpoints/
+// Тиры раскладки. Сюда попадают только точки, вокруг которых перестраивается общий каркас
+// страницы, и потому нужные многим компонентам. Разовый порог одного блока (сколько колонок
+// влезло, где переносится слово) держим литералом рядом с этим блоком — from-br/to-br
+// принимают и число в px.
 
 $brkpnts: (
   xs: 475px,
   xm: 650px,
   sm: 960px,
+  sd: 1024px,
   md: 1350px,
   ml: 1500px,
   lg: 1792px,
   xl: 2560px,
 );
 
+/**
+  Граница «бургер ↔ десктопное меню»: ниже неё навигация и правая часть шапки свёрнуты
+  в бургер, выше — разложены в шапку и в строку навигации под ней. Отдельная переменная,
+  а не литерал `sd`, чтобы двигать эту границу, не перебирая шапку по файлам.
+ */
+$brkpnt-burger: sd;
+
+// Литерал-порог можно писать и как 370, и как 370px — приводим к px.
+@function _to-px($bp) {
+  @if math.is-unitless($bp) {
+    @return $bp * 1px;
+  }
+
+  @return $bp;
+}
+
 /**
   Mobile first брейкпоинты
   @include from-br(sm) { ... }
@@ -27,7 +48,7 @@ $brkpnts: (
       @content;
     }
   } @else if meta.type-of($bp) == 'number' {
-    $pixelyzed: $bp * 1px;
+    $pixelyzed: _to-px($bp);
 
     @media (min-width: $pixelyzed) {
       @content;
@@ -49,7 +70,7 @@ $brkpnts: (
       @content;
     }
   } @else if meta.type-of($bp) == 'number' {
-    $pixelyzed: $bp * 1px - 1px;
+    $pixelyzed: _to-px($bp) - 1px;
 
     @media (max-width: $pixelyzed) {
       @content;

package/assets/scss/mixins/_cards-grid.scss

@@ -0,0 +1,32 @@
+@use 'breakpoints' as *;
+
+/**
+  Пороги плотности сеток карточек — тумб, каналов, плейлистов, категорий. Это не тиры
+  раскладки, а ответ на вопрос «сколько карточек влезает по ширине», поэтому литералы,
+  а не ключи $brkpnts: 900px и 1440px намеренно не совпадают с sm/md и в общую карту не идут.
+ */
+$cards-grid-2-cols: 370px;
+$cards-grid-3-cols: 900px;
+$cards-grid-4-cols: 1440px;
+
+/**
+  Колонки сетки карточек: 1, 2 с 370px, 3 с 900px, 4 с 1440px. Только grid-template-columns —
+  `display` и `gap` остаются на вызывающей стороне, они у сеток разные.
+  minmax(0, 1fr) обязателен, не `1fr`: нешринкуемая мета-строка (карточка истории) задаёт
+  колонке min-content, из-за которого грид вылезает за контейнер на телефоне.
+ */
+@mixin cards-grid-columns {
+  grid-template-columns: minmax(0, 1fr);
+
+  @include from-br($cards-grid-2-cols) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include from-br($cards-grid-3-cols) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @include from-br($cards-grid-4-cols) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}

package/assets/scss/mixins/_index.scss

@@ -1,7 +1,9 @@
 @forward 'font-sizes';
 @forward 'accessibility';
+@forward 'badge';
 @forward 'breakpoints';
 @forward 'button';
+@forward 'cards-grid';
 @forward 'page';
 @forward 'surface';
 @forward 'video-card';

package/assets/scss/mixins/_page.scss

@@ -13,11 +13,15 @@
 
 // Заголовок страницы: font-lg, uppercase, 700. В разметке — глобальный класс `._title`.
 @mixin page-title {
-  @include font-lg;
+  @include font-base;
 
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   font-weight: 700;
+
+  @include from-br(xm) {
+    @include font-lg;
+  }
 }
 
 // Блок SEO-ссылок внизу страницы: прижат к низу (margin-top: auto) и отбит линией.

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

@@ -1,4 +1,5 @@
 @use 'breakpoints' as *;
+@use 'cards-grid' as *;
 @use 'font-sizes' as *;
 @use 'vars' as *;
 
@@ -10,27 +11,16 @@
   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 cards-grid-columns;
 
   @include from-br(sm) {
     gap: 24px;
   }
-
-  @include from-br(md) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
 }
 
 // Постер карточки: 16/9, скруглённый, с обрезкой — база для абсолютных бейджей поверх.

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

@@ -367,6 +367,8 @@ $language-icon: $color-zinc-400;
 $language--current: $color-zinc-500;
 $language-title: $color-zinc-500;
 $language-item-text: $color-zinc-300;
+$language-code-bg: $color-zinc-700;
+$language-code-text: $color-zinc-200;
 $language-item-bg--hover: $color-zinc-800;
 $language-item-text--current: $color-white;
 $language-item-bg--current: $color-zinc-700;
@@ -390,11 +392,12 @@ $niche-item-bg--current: $color-zinc-700;
 $footer-language-bg: $color-zinc-800-50;
 $footer-language-bg--hover: $color-zinc-700;
 $footer-language-text: $color-zinc-400;
-$footer-language-menu-bg: $color-zinc-800;
-$footer-language-menu-border: $color-zinc-700;
-$footer-language-item-text: $color-zinc-300;
-$footer-language-item-bg--active: $color-indigo-600-20;
-$footer-language-item-text--active: $color-indigo-400;
+$footer-language-badge-bg: $color-zinc-800;
+$footer-language-badge-text: $color-zinc-200;
+$footer-language-menu-bg: $color-night;
+$footer-language-menu-border: $color-zinc-800;
+$footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
+$footer-language-menu-item--hover: $color-zinc-800-50;
 
 // ─── Burger ───
 $burger-backdrop: $mono-black-50;
@@ -422,9 +425,12 @@ $header-bg: $color-black;
 $header-burger-icon: $color-zinc-200;
 $header-user-icon: $color-zinc-500;
 $header-language-trigger: $color-zinc-400;
-$header-language-angle--hover: $color-white;
+$header-language-trigger--hover: $color-white;
+$header-language-badge-bg: $color-zinc-800;
+$header-language-badge-text: $color-zinc-200;
 $header-language-menu-bg: $color-night;
 $header-language-menu-border: $color-zinc-800;
+$header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
 $header-language-menu-item--hover: $color-zinc-800-50;
 
 // ─── notifications ───
@@ -540,6 +546,10 @@ $swiper-nav-bg--hover: transparent;
 $swiper-nav-text: $color-white;
 $swiper-nav-shadow: transparent;
 
+// ─── Section swiper cards ───
+$section-swiper-cards-link: $color-zinc-400;
+$section-swiper-cards-link--hover: $color-white;
+
 // ─── Select ───
 $select-icon: $color-zinc-400;
 $select-bg: $color-zinc-800-60;

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

@@ -424,6 +424,8 @@ $language-icon: $color-gray-400;
 $language--current: $color-gray-400;
 $language-title: $color-gray-400;
 $language-item-text: $color-gray-300;
+$language-code-bg: $color-slate-700;
+$language-code-text: $color-white;
 $language-item-bg--hover: $color-white-5;
 $language-item-text--current: $color-white;
 $language-item-bg--current: $color-slate-750;
@@ -447,11 +449,12 @@ $niche-item-bg--current: $color-indigo-soft;
 $footer-language-bg: $color-slate-750;
 $footer-language-bg--hover: $color-slate-700;
 $footer-language-text: $color-white;
-$footer-language-menu-bg: $color-slate-750;
-$footer-language-menu-border: $color-slate-700;
-$footer-language-item-text: $color-gray-300;
-$footer-language-item-bg--active: $color-indigo-soft;
-$footer-language-item-text--active: $color-white;
+$footer-language-badge-bg: $color-slate-850;
+$footer-language-badge-text: $color-white;
+$footer-language-menu-bg: $color-slate-850;
+$footer-language-menu-border: $color-white-10;
+$footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
+$footer-language-menu-item--hover: $color-white-5;
 
 // ─── Burger ───
 $burger-backdrop: $mono-black-50;
@@ -479,9 +482,12 @@ $header-bg: $color-slate-800;
 $header-burger-icon: $color-gray-200;
 $header-user-icon: $color-gray-500;
 $header-language-trigger: $color-gray-500;
-$header-language-angle--hover: $color-gray-300;
+$header-language-trigger--hover: $color-gray-300;
+$header-language-badge-bg: $color-slate-750;
+$header-language-badge-text: $color-white;
 $header-language-menu-bg: $color-slate-850;
 $header-language-menu-border: $color-white-10;
+$header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
 $header-language-menu-item--hover: $color-white-5;
 $notifications-icon: $color-gray-300;
 $notifications-icon--mobile: $color-gray-200;
@@ -591,6 +597,10 @@ $swiper-nav-bg: $color-white;
 $swiper-nav-bg--hover: $color-gray-300;
 $swiper-nav-shadow: $mono-black-10;
 
+// ─── Section swiper cards ───
+$section-swiper-cards-link: $color-gray-600;
+$section-swiper-cards-link--hover: $color-gray-900;
+
 // ─── Select ───
 $select-bg: $color-white;
 $select-icon: $color-gray-500;

package/assets/scss/vars/_tokens.scss

@@ -38,9 +38,13 @@
     --container-padding-inline: 24px;
     --chips-height: 32px;
     --chips-height-small: 28px;
-    --header-height: 71px;
     --control-min-width: 296px;
     --max-width-container: 1600px;
     --card-round-size: 96px;
   }
+
+  // Высота шапки меняется вместе с её раскладкой, а не на общем тире sm.
+  @include from-br($brkpnt-burger) {
+    --header-height: 71px;
+  }
 }

package/components/grid/categories.vue

@@ -1,4 +1,4 @@
-<!-- Адаптивная сетка карточек категорий (auto-fill) -->
+<!-- Сетка карточек категорий, 1-4 колонки -->
 <template>
   <div class="grid-categories">
     <CardCategory
@@ -22,15 +22,12 @@ defineProps<{
 
 <style lang="scss">
 .grid-categories {
-  --min-width: 150px;
-
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
 
-  @include from-br(sm) {
-    --min-width: 250px;
+  @include cards-grid-columns;
 
+  @include from-br(sm) {
     gap: 16px;
   }
 }

package/components/grid/channels.vue

@@ -1,4 +1,4 @@
-<!-- Сетка карточек каналов, 2-4 колонки -->
+<!-- Сетка карточек каналов, 1-4 колонки -->
 <template>
   <div
     id="anchor"
@@ -28,16 +28,6 @@ defineProps<{
   display: grid;
   gap: 24px;
 
-  @include from-br(xs) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @include from-br(sm) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  @include from-br(md) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  @include cards-grid-columns;
 }
 </style>

package/components/grid/playlists.vue

@@ -1,4 +1,4 @@
-<!-- Сетка карточек плейлистов, 2-4 колонки; попап шаринга — один на список -->
+<!-- Сетка карточек плейлистов, 1-4 колонки; попап шаринга — один на список -->
 <template>
   <div class="grid-playlists">
     <CardPlaylist
@@ -64,12 +64,6 @@ function onShare(card: IPlaylistCard) {
   display: grid;
   gap: 24px;
 
-  @include from-br(xs) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @include from-br(sm) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  @include cards-grid-columns;
 }
 </style>

package/components/layout/burger.vue

@@ -74,6 +74,7 @@
       />
 
       <LayoutLanguage
+        burger
         class="layout-burger__language"
         icon-size="20"
       />
@@ -117,13 +118,13 @@ const { isAuthorized } = useUser(AuthorizationApiService);
 const burgerRef = ref();
 
 const breakpoints = CSS_BREAKPOINTS;
-const { isMobile } = checkDeviceWidth(breakpoints);
+const { isBurgerMenu } = checkDeviceWidth(breakpoints);
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();
 
 watch(() => props.modelValue, (value) => {
   if (value) {
-    if (isMobile.value) {
+    if (isBurgerMenu.value) {
       burgerRef.value.showModal();
       scrollLock();
     } else {
@@ -132,7 +133,7 @@ watch(() => props.modelValue, (value) => {
   } else {
     burgerRef.value.close();
 
-    if (isMobile.value) {
+    if (isBurgerMenu.value) {
       scrollUnlock();
     }
   }

package/components/layout/footer-language.vue

@@ -4,56 +4,37 @@
     class="layout-footer-language"
   >
     <button
+      :class="{'--open': isMenuShow}"
+      :aria-label="$t('language')"
       class="layout-footer-language__button"
       type="button"
       @click="handler"
     >
-      <img
-        :src="`/icons/flags/${locale}.svg`"
-        :alt="locale"
-        class="layout-language__item-icon"
-        width="20"
-        height="16"
-      >
-      {{ localeName }}
+      <UiIcon
+        class="layout-footer-language__icon"
+        name="earth"
+        size="16"
+      />
+      <span class="layout-footer-language__badge">{{ locale }}</span>
       <UiIcon
         class="layout-footer-language__angle"
         name="angle-down"
         size="12"
       />
     </button>
-    <div
+    <LazyLayoutLanguage
       v-if="isMenuShow"
       class="layout-footer-language__menu"
-    >
-      <a
-        v-for="(item, index) in enabledLocales"
-        :key="`header-language-${index}`"
-        :class="{'--active': locale === item.code}"
-        :href="switchLocalePath(item.code)"
-        :hreflang="item.value as string"
-        :lang="item.language"
-        class="layout-footer-language__menu-item"
-        @click.prevent="handleSwitch(item.code)"
-      >
-        <img
-          :src="`/icons/flags/${item.code}.svg`"
-          :alt="item.code"
-          class="layout-footer-language__icon"
-          width="20"
-          height="16"
-        >
-        {{ item.name }}
-      </a>
-    </div>
+      icon-size="20"
+      @change="isMenuShow = false"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core';
 
-const { locale, locales, setLocale } = useI18n();
-const switchLocalePath = useSwitchLocalePath();
+const { locale } = useI18n();
 
 const menuRef = ref();
 const isMenuShow = ref(false);
@@ -65,17 +46,6 @@ onClickOutside(menuRef, () => {
 function handler() {
   isMenuShow.value = !isMenuShow.value;
 }
-
-const enabledLocales = useEnabledLocales();
-
-const localeName = computed(() => locales.value.find(item => item.code === locale.value)?.name || 'English');
-
-const handleSwitch = (newLocale: string) => {
-  const code = newLocale as Parameters<typeof setLocale>[0];
-  isMenuShow.value = false;
-  setLocale(code);
-  setTimeout(() => window.location.href = switchLocalePath(code), 100);
-};
 </script>
 
 <style lang="scss">
@@ -100,32 +70,38 @@ const handleSwitch = (newLocale: string) => {
   }
 }
 
+.layout-footer-language__badge {
+  @include locale-badge;
+
+  background-color: $footer-language-badge-bg;
+  color: $footer-language-badge-text;
+}
+
+.layout-footer-language__angle {
+  transition: var(--transition) transform;
+}
+
+.layout-footer-language__button.--open .layout-footer-language__angle {
+  transform: rotate(180deg);
+}
+
 .layout-footer-language__menu {
   position: absolute;
-  top: -8px;
+  bottom: calc(100% + 8px);
   left: 50%;
   z-index: $z-index-tooltip;
-  transform: translate(-50%, -100%);
-  border-radius: $radius;
-  width: 192px;
+  transform: translateX(-50%);
+  border-radius: $radius-xl;
+  width: 288px;
   border: 1px solid $footer-language-menu-border;
   background-color: $footer-language-menu-bg;
+  box-shadow: $footer-language-menu-shadow;
   overflow: hidden;
 }
 
-.layout-footer-language__menu-item {
-  @include font-sm;
-
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 12px;
-  align-items: center;
-  color: $footer-language-item-text;
-  padding: 10px 16px;
-}
-
-.layout-footer-language__menu-item.--active {
-  background-color: $footer-language-item-bg--active;
-  color: $footer-language-item-text--active;
+.layout-footer-language__menu .layout-language__summary {
+  @include hover(background-color) {
+    background-color: $footer-language-menu-item--hover;
+  }
 }
 </style>

package/components/layout/header-user.vue

@@ -156,7 +156,7 @@ function openChilds() {
 </script>
 
 <style lang="scss">
-@include from-br(sm) {
+@include from-br($brkpnt-burger) {
   .layout-header-user {
     position: relative;
   }