itube-specs 0.0.866 → 0.0.869

package/assets/scss/base/_hacks.scss

@@ -13,8 +13,8 @@ select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
   box-shadow: 0 0 0 1000px transparent inset !important;
-  -webkit-text-fill-color: $input-autofill-text !important;
-  color: $input-autofill-text !important;
+  -webkit-text-fill-color: var(--input-autofill-text, #{$input-autofill-text}) !important;
+  color: var(--input-autofill-text, #{$input-autofill-text}) !important;
   border: none !important;
   transition: background-color 5000s ease-in-out 0s !important;
   font-size: inherit !important;

package/assets/scss/mixins/_surface.scss

@@ -37,7 +37,8 @@ $surface-roles: (
   control-bg: (--input-bg, --select-bg),
   control-compact-bg: (--input-s-bg,),
   control-bg--disabled: (--input-bg--disabled,),
-  control-text: (--input-text, --select-text),
+  control-text: (--input-text, --input-autofill-text, --select-text),
+  control-compact-text: (--input-s-text,),
   control-text--disabled: (--input-text--disabled,),
   control-placeholder: (--input-placeholder, --select-placeholder),
   control-label: (--input-label, --select-label),

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

@@ -77,10 +77,10 @@ $input-label: $color-zinc-400;
 $input-icon: inherit;
 $input-pre-icon: $color-zinc-500;
 $input-s-bg: $color-zinc-800;
+$input-s-text: $color-white;
 $input-s-border: transparent;
 $input-s-border--focus: $color-zinc-600;
 $input-text--disabled: $color-zinc-400;
-$input-text--error: $color-red-500;
 $input-border--error: $color-red-500;
 $input-autofill-text: $color-white;
 $input-button-text: $color-zinc-500;
@@ -218,8 +218,6 @@ $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 channel ───
 $video-channel-bg: $color-zinc-800-60;
@@ -338,6 +336,18 @@ $language-value-text: $color-white;
 $language-description: $color-zinc-500;
 $language-empty-text: $color-zinc-300;
 
+// ─── Niche ───
+$niche-trigger-text: $color-zinc-400;
+$niche-angle--hover: $color-white;
+$niche-title: $color-zinc-500;
+$niche-value-text: $color-white;
+$niche-menu-bg: $color-night;
+$niche-menu-border: $color-zinc-800;
+$niche-item-text: $color-zinc-300;
+$niche-item-bg--hover: $color-zinc-800;
+$niche-item-text--current: $color-white;
+$niche-item-bg--current: $color-zinc-700;
+
 // ─── Footer language ───
 $footer-language-bg: $color-zinc-800-50;
 $footer-language-bg--hover: $color-zinc-700;
@@ -416,9 +426,7 @@ $dropdown-crest: $color-zinc-500;
 $dropdown-separator: $color-zinc-800-60;
 
 // ─── Snackbar ───
-$snackbar-bg: $color-zinc-800;
 $snackbar-text: $color-zinc-200;
-$snackbar-border: $color-zinc-700;
 $snackbar-close: $color-zinc-500;
 $snackbar-close--hover: $color-zinc-300;
 $snackbar-close-bg--hover: $color-zinc-700;
@@ -516,7 +524,6 @@ $radio-bg: $color-zinc-800;
 $radio-border--checked: $color-indigo-600;
 $radio-bg--checked: $color-indigo-600;
 $radio-label: $color-white;
-$radio-label--hover: $color-zinc-300;
 $radio-description: $color-zinc-500;
 $radio-border--disabled: $color-zinc-800;
 $radio-text--disabled: $color-zinc-400;
@@ -588,9 +595,6 @@ $expand-row-pre-text: $color-zinc-500;
 $full-description-text: $color-zinc-400;
 $full-description-bg: $color-zinc-800-50;
 
-// ─── Swiper items ───
-$swiper-items-all-text: $color-zinc-400;
-
 // ─── Report ───
 $report-category-border: $color-zinc-800;
 $report-category-bg--hover: $color-zinc-800-50;
@@ -600,9 +604,6 @@ $report-text: $color-zinc-400;
 $report-required: $color-red-500;
 $report-text--error: $color-red-500;
 
-// ─── Model filters ───
-$model-filters-border: $color-zinc-800;
-
 // ─── Share ───
 $share-cancel-border: $color-zinc-800;
 $share-button-copy-bg: $color-zinc-800;
@@ -677,10 +678,6 @@ $player-menu-scene-time: $color-zinc-500;            // text-zinc-500
 $player-menu-scene-time--current: $color-zinc-200;   // text-zinc-200
 $player-menu-section-title: $color-zinc-400;
 
-// ─── Filter page ───
-$filter-page-group-title: $color-white;
-$filter-page-group-border: $color-zinc-800;
-
 // ─── Search ───
 $search-close-bg: $color-zinc-700;
 $search-close-text: $color-zinc-300;
@@ -716,10 +713,8 @@ $filters-main-bg--hover: $color-zinc-700-70;
 
 // ─── Info grid ───
 $info-grid-group-title: $color-zinc-300;
-$info-grid-item-bg: $color-zinc-700-50;
 $info-grid-item-border: $color-zinc-700-50;
 $info-grid-item-bg--hover: $color-zinc-700-30;
-$info-grid-item-border--hover: $color-zinc-600;
 $info-grid-item-title: $color-zinc-500;
 $info-grid-item-title-bg: $color-zinc-900;
 $info-grid-item-value-bg: $color-zinc-900;
@@ -727,7 +722,6 @@ $info-grid-item-value-bg--link: $color-zinc-700-50;
 $info-grid-item-value-link-bg--hover: $color-zinc-700-50;
 $info-grid-item-value--link: $color-white;
 $info-grid-item-value-border: $color-zinc-700-50;
-$info-grid-item-values: $color-white;
 $info-grid-item-success: $color-green-400;
 $info-grid-item-warning: $color-red-400;
 $info-grid-item-icon: $color-zinc-400;
@@ -771,7 +765,6 @@ $shadow-color--active: $mono-black-42; // тень при drag
 
 // ─── Page models ───
 $page-models-popular-border: $color-zinc-800;
-$page-models-categories-border: $color-zinc-800-50;
 
 // ─── Page model videos ───
 $page-model-videos-section-border: $color-zinc-800-50;
@@ -797,7 +790,6 @@ $model-card-params-footer: $color-zinc-500;
 $model-card-name: $color-zinc-200;
 $model-card-name--hover: $color-indigo-400;
 $model-card-count: $color-zinc-500;
-$model-card-divider: $color-zinc-700;
 
 // ─── Playlist card ───
 $playlist-card-bg: $color-zinc-800-50;
@@ -884,7 +876,6 @@ $native-card-secondary: $color-zinc-500;
 
 // ─── Page: grouped categories ───
 $grouped-highlight-border: $color-zinc-800;
-$grouped-separator: $color-zinc-800;
 $grouped-category-icon: $color-zinc-500;
 $grouped-footer-text: $color-zinc-500;
 $grouped-section-border: $color-zinc-800;
@@ -932,16 +923,6 @@ $contacts-wrapper-bg: $color-zinc-900;
 $contacts-link: $color-indigo-400;
 $contacts-link--hover: $color-indigo-300;
 
-// ─── Page: playlist ───
-$page-playlist-edit: $color-zinc-500;
-$page-playlist-edit-border: $color-zinc-800;
-$page-playlist-header-border: $color-zinc-800;
-$page-playlist-avatar-bg: $color-indigo-600;
-$page-playlist-avatar-text: $color-white;
-$page-playlist-user-name: $color-zinc-400;
-$page-playlist-private-bg: $color-zinc-800-60;
-$page-playlist-like-bg: $color-zinc-900;
-
 // ─── Page: playlists ───
 $page-playlists-border: $color-zinc-800;
 

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

@@ -87,14 +87,14 @@ $input-label: $color-gray-700;
 $input-icon: $color-gray-500;
 $input-pre-icon: $color-gray-500;
 $input-s-bg: $color-slate-750;
+$input-s-text: $color-white;
 $input-s-border: transparent;
 $input-s-border--focus: $color-indigo-soft;
 $input-text--disabled: $color-gray-400;
-$input-text--error: $color-red-500;
 $input-border--error: $color-red-500;
-$input-autofill-text: $color-white;
+$input-autofill-text: $color-gray-900;
 $input-button-text: $color-gray-500;
-$input-button-text--hover: $color-white;
+$input-button-text--hover: $color-gray-500;
 
 // ─── Surfaces ("островки") ───
 // Только отличия от базовых токенов. Подложки нет в карте — нет и оверрайда.
@@ -207,7 +207,7 @@ $popup-auth-icon-bg: $color-indigo-600;
 $popup-border: transparent;
 $popup-footer-border: $color-slate-750;
 $popup-text: $color-white;
-$popup-scrollbar: $color-gray-800;
+$popup-scrollbar: $color-gray-400;
 $popup-close-icon: $color-gray-400;
 $popup-close-icon--hover: $color-white;
 
@@ -275,8 +275,6 @@ $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 channel ───
 $video-channel-bg: $color-gray-200;
@@ -395,6 +393,18 @@ $language-value-text: $color-white;
 $language-description: $color-gray-500;
 $language-empty-text: $color-gray-400;
 
+// ─── Niche ───
+$niche-trigger-text: $color-gray-500;
+$niche-angle--hover: $color-gray-300;
+$niche-title: $color-gray-400;
+$niche-value-text: $color-white;
+$niche-menu-bg: $color-slate-850;
+$niche-menu-border: $color-white-10;
+$niche-item-text: $color-gray-300;
+$niche-item-bg--hover: $color-slate-750;
+$niche-item-text--current: $color-white;
+$niche-item-bg--current: $color-indigo-soft;
+
 // ─── Footer language ───
 $footer-language-bg: $color-slate-750;
 $footer-language-bg--hover: $color-slate-700;
@@ -473,9 +483,7 @@ $dropdown-crest: $color-gray-400;
 $dropdown-separator: $color-slate-750;
 
 // ─── Snackbar ───
-$snackbar-bg: $color-slate-750;
 $snackbar-text: $color-gray-200;
-$snackbar-border: $color-slate-700;
 $snackbar-close: $color-gray-500;
 $snackbar-close--hover: $color-gray-300;
 $snackbar-close-bg--hover: $color-slate-700;
@@ -556,8 +564,8 @@ $checkbox-border: $color-gray-400;
 $checkbox-color: $color-white;
 $checkbox-bg--checked: $color-indigo-soft;
 $checkbox-border--checked: $color-indigo-600;
-$checkbox-label: $color-gray-400;
-$checkbox-label--hover: $color-gray-300;
+$checkbox-label: $color-gray-700;
+$checkbox-label--hover: $color-gray-500;
 $checkbox-description: $color-gray-500;
 $checkbox-border--disabled: transparent;
 $checkbox-text--disabled: $color-gray-400;
@@ -569,7 +577,6 @@ $radio-bg: transparent;
 $radio-border--checked: $color-indigo-soft;
 $radio-bg--checked: $color-indigo-soft;
 $radio-label: $color-gray-700;
-$radio-label--hover: $color-gray-300;
 $radio-description: $color-gray-500;
 $radio-border--disabled: $color-slate-700;
 $radio-text--disabled: $color-gray-400;
@@ -641,9 +648,6 @@ $expand-row-pre-text: $color-gray-500;
 $full-description-text: $color-gray-600;
 $full-description-bg: $color-gray-100;
 
-// ─── Swiper items ───
-$swiper-items-all-text: $color-gray-400;
-
 // ─── Report ───
 $report-category-border: $color-slate-700;
 $report-category-bg--hover: $color-slate-750;
@@ -653,9 +657,6 @@ $report-text: $color-gray-400;
 $report-required: $color-red-500;
 $report-text--error: $color-red-500;
 
-// ─── Model filters ───
-$model-filters-border: transparent;
-
 // ─── Share ───
 $share-cancel-border: transparent;
 $share-button-copy-bg: $color-slate-750;
@@ -730,10 +731,6 @@ $player-menu-scene-time: $color-gray-500;            // text-zinc-500
 $player-menu-scene-time--current: $color-gray-200;   // text-zinc-200
 $player-menu-section-title: $color-gray-400;
 
-// ─── Filter page ───
-$filter-page-group-title: $color-white;
-$filter-page-group-border: transparent;
-
 // ─── Filters main ───
 $filters-main-slider-bg: $color-night;
 $filters-main-slider-border: transparent;
@@ -746,10 +743,8 @@ $filters-main-bg--hover: $button-secondary-bg--hover;
 
 // ─── Info grid ───
 $info-grid-group-title: $color-gray-600;
-$info-grid-item-bg: $color-white;
 $info-grid-item-border: $color-gray-300;
 $info-grid-item-bg--hover: $color-slate-700;
-$info-grid-item-border--hover: $color-gray-600;
 $info-grid-item-title: $color-gray-500;
 $info-grid-item-title-bg: $color-white;
 $info-grid-item-value-bg: $color-gray-100;
@@ -757,7 +752,6 @@ $info-grid-item-value-bg--link: $color-slate-700;
 $info-grid-item-value-link-bg--hover: $color-slate-750;
 $info-grid-item-value--link: $color-white;
 $info-grid-item-value-border: $color-gray-300;
-$info-grid-item-values: $color-white;
 $info-grid-item-success: $color-green-400;
 $info-grid-item-warning: $color-red-400;
 $info-grid-item-icon: $color-gray-400;
@@ -801,7 +795,6 @@ $shadow-color--active: $mono-black-42; // тень при drag
 
 // ─── Page models ───
 $page-models-popular-border: transparent;
-$page-models-categories-border: transparent;
 
 // ─── Page model videos ───
 $page-model-videos-section-border: transparent;
@@ -827,7 +820,6 @@ $model-card-params-footer: $color-gray-600;
 $model-card-name: $color-gray-900;
 $model-card-name--hover: $model-card-name;
 $model-card-count: $color-gray-600;
-$model-card-divider: $color-gray-400;
 
 // ─── Playlist card ───
 $playlist-card-bg: $color-gray-100;
@@ -871,8 +863,8 @@ $channel-card-mini-name: $color-white;
 $channel-card-mini-info: $color-gray-400;
 
 // ─── Playlist card mini ───
-$playlist-card-mini-empty-gradient-from: $color-gray-700;
-$playlist-card-mini-empty-gradient-to: $color-gray-800;
+$playlist-card-mini-empty-gradient-from: $color-slate-700;
+$playlist-card-mini-empty-gradient-to: $color-slate-750;
 $playlist-card-mini-empty-text: $color-white;
 $playlist-card-mini-name: $color-white;
 $playlist-card-mini-user: $color-gray-500;
@@ -908,13 +900,12 @@ $auth-register-link--hover: $color-indigo-blue;
 $auth-register-login: $color-gray-400;
 
 // ─── Native card ───
-$native-card-bg: $color-black;
+$native-card-bg: $color-slate-800;
 $native-card-primary: $color-gray-400;
 $native-card-secondary: $color-gray-500;
 
 // ─── Page: grouped categories ───
 $grouped-highlight-border: transparent;
-$grouped-separator: $color-gray-800;
 $grouped-category-icon: $color-gray-500;
 $grouped-footer-text: $color-gray-500;
 $grouped-section-border: $color-gray-200;
@@ -962,16 +953,6 @@ $contacts-wrapper-bg: $color-gray-200;
 $contacts-link: $color-indigo-400;
 $contacts-link--hover: $color-indigo-300;
 
-// ─── Page: playlist ───
-$page-playlist-edit: $color-gray-500;
-$page-playlist-edit-border: $color-slate-700;
-$page-playlist-header-border: $color-slate-700;
-$page-playlist-avatar-bg: $color-indigo-600;
-$page-playlist-avatar-text: $color-white;
-$page-playlist-user-name: $color-gray-400;
-$page-playlist-private-bg: $color-slate-750;
-$page-playlist-like-bg: $color-slate-800;
-
 // ─── Page: playlists ───
 $page-playlists-border: transparent;
 

package/components/layout/burger.vue

@@ -68,6 +68,11 @@
         </div>
       </nav>
 
+      <LayoutNiche
+        class="layout-burger__niche"
+        icon-size="20"
+      />
+
       <LayoutLanguage
         class="layout-burger__language"
         icon-size="20"
@@ -257,6 +262,10 @@ router.afterEach(() => {
   padding-bottom: 12px;
 }
 
+.layout-burger__niche {
+  margin-bottom: 12px;
+}
+
 .layout-burger__close {
   position: fixed;
   top: 16px;

package/components/layout/header.vue

@@ -10,6 +10,11 @@
       glow
       class="layout-header__logo"
     />
+    <LayoutNiche
+      class="layout-header__niche _from-sm"
+      icon-size="20"
+    />
+
     <div
       ref="languageRef"
       class="layout-header__language _from-sm"
@@ -135,7 +140,7 @@ $breakpoint: sm;
   width: 100%;
 
   @include from-br(sm) {
-    grid-template-columns: auto 1fr auto auto;
+    grid-template-columns: auto 1fr auto auto auto;
   }
 }
 
@@ -180,7 +185,14 @@ $breakpoint: sm;
 .layout-header__user,
 .layout-header__sign-up {
   @include from-br(sm) {
-    grid-column: 4;
+    grid-column: 5;
+    grid-row: 1;
+  }
+}
+
+.layout-header__niche {
+  @include from-br(sm) {
+    grid-column: 3;
     grid-row: 1;
   }
 }
@@ -194,7 +206,7 @@ $breakpoint: sm;
 .layout-header__language {
   @include from-br(sm) {
     position: relative;
-    grid-column: 3;
+    grid-column: 4;
     grid-row: 1;
   }
 }

package/components/layout/niche.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    v-if="niches.length > 1"
+    ref="nicheRef"
+    class="layout-niche"
+    @keydown.esc="isOpen = false"
+  >
+    <button
+      :class="{'--open': isOpen}"
+      :aria-expanded="isOpen"
+      :aria-label="$t('niche')"
+      class="layout-niche__trigger"
+      type="button"
+      @click="isOpen = !isOpen"
+    >
+      <UiIcon
+        :name="currentNiche.icon"
+        :size="iconSize"
+        class="layout-niche__icon"
+      />
+      <span class="layout-niche__current _to-sm">
+        <span>{{ $t('niche') }}:&nbsp;</span>
+        <span class="layout-niche__text">{{ $t(currentNiche.label) }}</span>
+      </span>
+      <UiIcon
+        class="layout-niche__angle"
+        name="angle-down"
+        size="12"
+      />
+    </button>
+    <ul
+      v-if="isOpen"
+      class="layout-niche__list"
+    >
+      <li
+        v-for="item in niches"
+        :key="`niche-${item.name}`"
+      >
+        <button
+          :class="{'--current': item.name === currentNiche.name}"
+          :aria-current="item.name === currentNiche.name ? 'true' : undefined"
+          class="layout-niche__item"
+          type="button"
+          @click="select(item.name)"
+        >
+          <UiIcon
+            :name="item.icon"
+            class="layout-niche__item-icon"
+            size="20"
+          />
+          {{ $t(item.label) }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core';
+import type { Niche } from '../../runtime';
+
+withDefaults(defineProps<{
+      iconSize?: string
+    }>(), {
+      iconSize: '20'
+    }
+);
+
+const { niches, currentNiche, changeNiche } = useNiches();
+
+const nicheRef = ref<HTMLElement>();
+const isOpen = ref(false);
+
+onClickOutside(nicheRef, () => {
+  isOpen.value = false;
+});
+
+function select(name: Niche) {
+  isOpen.value = false;
+  changeNiche(name);
+}
+</script>
+
+<style lang="scss">
+.layout-niche {
+  display: grid;
+
+  @include from-br(sm) {
+    position: relative;
+  }
+}
+
+.layout-niche__trigger {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: start;
+  column-gap: 6px;
+  padding: 6px 8px;
+  color: $niche-trigger-text;
+
+  @include to-br(sm) {
+    grid-template-columns: auto 1fr auto;
+    width: 100%;
+    padding: 10px 16px;
+    column-gap: 16px;
+  }
+}
+
+.layout-niche__current {
+  @include font-sm;
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  color: $niche-title;
+}
+
+.layout-niche__text {
+  color: $niche-value-text;
+  font-weight: 500;
+}
+
+.layout-niche__angle {
+  pointer-events: none;
+  transition: transform var(--transition), color var(--transition);
+}
+
+.layout-niche__trigger:hover .layout-niche__angle {
+  color: $niche-angle--hover;
+}
+
+.layout-niche__trigger.--open .layout-niche__angle {
+  transform: rotate(180deg);
+}
+
+.layout-niche__list {
+  display: grid;
+
+  @include from-br(sm) {
+    position: absolute;
+    right: 0;
+    bottom: -8px;
+    z-index: $z-index-plus;
+    min-width: 180px;
+    padding: 8px;
+    background-color: $niche-menu-bg;
+    border: 1px solid $niche-menu-border;
+    border-radius: $radius-xl;
+    transform: translateY(100%);
+  }
+}
+
+.layout-niche__item {
+  @include font-sm;
+
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  align-items: center;
+  column-gap: 12px;
+  width: 100%;
+  padding: 10px 16px;
+  color: $niche-item-text;
+  text-align: start;
+  border-radius: $radius-lg;
+
+  @include hover(background-color) {
+    background-color: $niche-item-bg--hover;
+  }
+
+  @include from-br(sm) {
+    padding: 8px 10px;
+  }
+}
+
+.layout-niche__item.--current {
+  color: $niche-item-text--current;
+  background-color: $niche-item-bg--current;
+}
+</style>

package/components/search/input.vue

@@ -121,12 +121,16 @@ $icon-size: 16px;
   padding-block: 12px;
 
   @include to-br(sm) {
+    --input-autofill-text: #{$search-text--mobile};
+
     color: $search-text--mobile;
   }
 
   @include from-br(sm) {
     @include font-sm;
 
+    --input-autofill-text: #{$search-text};
+
     color: $search-text;
   }
 }

package/components/ui/input.vue

@@ -336,6 +336,11 @@ const normalizedValue = computed(() => {
   color: var(--input-pre-icon, #{$input-pre-icon});
 }
 
+.ui-input.ui-input--s {
+  --input-text: var(--input-s-text, #{$input-s-text});
+  --input-autofill-text: var(--input-s-text, #{$input-s-text});
+}
+
 .ui-input.ui-input--s .ui-input__input {
   padding: 8px 16px;
   background-color: var(--input-s-bg, #{$input-s-bg});

package/composables/use-niches.ts

@@ -0,0 +1,47 @@
+import type { Niche } from '../runtime';
+import { NicheHelper } from '../utils/niche-helper';
+
+/** Иконка из assets/icons/common под каждую нишу. */
+const NICHE_ICONS: Record<Niche, string> = {
+  straight: 'hetero',
+  gay: 'gay',
+  shemale: 'shemale',
+};
+
+export interface INicheItem {
+  name: Niche,
+  icon: string,
+  /** Ключ i18n с названием ниши */
+  label: string,
+}
+
+/**
+ * Ниши сайта для переключателя: список из per-site конфига проекта (appConfig.niches),
+ * текущая — из useState('niche') с фолбэком на дефолтную нишу окружения.
+ */
+export const useNiches = () => {
+  const defaultNiche = NicheHelper.getSiteDefaultNiche();
+  const current = useState<Niche>('niche', () => defaultNiche);
+  const localePath = useLocalePath();
+
+  const niches = computed<INicheItem[]>(() =>
+    ((useAppConfig().niches as Niche[]) || []).map(name => ({
+      name,
+      icon: NICHE_ICONS[name] || 'earth',
+      label: `niches.${name}`,
+    })));
+
+  const currentNiche = computed(() => niches.value.find(item => item.name === current.value) || niches.value[0]);
+
+  /**
+   * Ниша влияет и на роутинг (префикс пути), и на заголовок X-Niche в SSR-запросах,
+   * поэтому переключение — полной перезагрузкой на корень выбранной ниши.
+   */
+  function changeNiche(name: Niche) {
+    if (name === current.value) return;
+    current.value = name;
+    window.location.href = localePath(name === defaultNiche ? '/' : `/${name}`);
+  }
+
+  return { niches, currentNiche, changeNiche };
+};

package/package.json

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

package/pages/categories/index.vue

@@ -117,17 +117,6 @@ const breadcrumbs = [
   }
 }
 
-.grouped__options-separate {
-  display: block;
-  width: 1px;
-  height: 24px;
-  background-color: $grouped-separator;
-
-  @include from-br(sm) {
-    height: 32px;
-  }
-}
-
 .grouped__loading {
   --size: 24px;