itube-specs 0.0.865 → 0.0.868

package/README.md

@@ -63,13 +63,15 @@ npm run lint:css     # Stylelint по **/*.{scss,vue}
 npm run lint:css:fix # Stylelint --fix
 npm run check:themes # сверяет наборы имён токенов во всех темах
 npm run check:styles # компилирует стили каждого SFC каждой темой (~1.5s)
+npm run check:breakpoints # сверяет JS-зеркало брейкпоинтов с $brkpnts в SCSS
 npm run test         # vitest однократно
 npm run patch        # npm version patch — бамп версии перед публикацией
 ```
 
 Pre-commit (husky + lint-staged): на закоммиченных файлах прогоняются `eslint --fix` и `stylelint --fix`.
-Если в коммите есть `assets/scss/themes/**`, гоняется `check:themes`; если любой `.vue` или `assets/scss/**` —
-`check:styles`. Оба есть и в CI, в шаге Lint.
+Если в коммите есть `assets/scss/themes/**`, гоняется `check:themes`; если любой `.vue` или
+`assets/scss/**` — `check:styles`; если пара файлов брейкпоинтов — `check:breakpoints`. Все три есть и в
+CI, в шаге Lint.
 ⚠️ **Шаблоны `.vue` не типизируются вообще.** Обычный `tsc` их не читает, а `vue-tsc` не подключён (накопился
 бэклог ошибок в шаблонах, подключение — отдельная задача). Значит чистый `tsc` ничего не говорит про выражения
 в шаблоне: арифметика над строковым union, неверный тип пропа, переименованное поле пройдут молча.
@@ -87,7 +89,8 @@ runtime/       # runtime-значения и хелперы (barrel index.ts)
   constants/   # доменные `as const` (Niche, PlaylistType, AdSpotType, …)
   utils/       # чистые хелперы, cleaners/, converters/
 types/         # .d.ts типы (barrel index.d.ts — с расширением .d.ts в реэкспортах)
-lib/           # статические scheme/config-данные (barrel index.ts): scheme/*, css-breakpoints
+lib/           # продуктовые статические данные (barrel index.ts): scheme/*, *-items, *-scheme
+config/        # build-time конфиг для приложения (barrel index.ts): themes, css-breakpoints
 middleware/    # глобальные: auth.global, normalize.global, age.global
 plugins/       # SSR/клиент: country/countries/mobile (SSR), services.client, sentry.client, adv
 server/        # BFF: api/** (тонкие прокси к внешнему API), utils/metrics, plugins/*, tasks
@@ -173,7 +176,7 @@ ad-конфиг), теперь читается из `runtimeConfig.public` (з
 ## Что живёт в слое, а что в приложении
 
 - **Слой:** компоненты, composables, API-сервисы, доменные утилиты, runtime-константы/хелперы, типы,
-  `lib/` (scheme, css-breakpoints), middleware (`auth`/`normalize`/`age`), SSR-плагины
+  `lib/` (продуктовые данные), `config/` (темы, брейкпоинты), middleware (`auth`/`normalize`/`age`), SSR-плагины
   (`country`/`mobile`/`services`/`sentry`/`adv`), BFF-хендлеры `server/api/**` — всё site-agnostic.
 - **Приложение:** только per-site — **значения** config (флаги/реклама/локали) через `runtimeConfig.public`
   (слой держит пустые контейнеры-заглушки), i18n-локали, `public/` и **выбор темы** (`theme:` в

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

@@ -338,6 +338,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;

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

@@ -395,6 +395,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;

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/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.865",
+  "version": "0.0.868",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {