itube-specs 0.0.941 → 0.0.946

package/README.md

@@ -64,6 +64,9 @@ 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 i18n:check   # отчёт по общим переводам (не гейт)
+npm run i18n:sheet:export # общие локали → i18n/i18n.csv для переводчика
+npm run i18n:sheet:import # i18n/i18n.csv → общие локали
 npm run test         # vitest однократно
 npm run patch        # npm version patch — бамп версии перед публикацией
 ```
@@ -90,6 +93,7 @@ runtime/       # runtime-значения и хелперы (barrel index.ts)
   utils/       # чистые хелперы, cleaners/, converters/
 types/         # .d.ts типы (barrel index.d.ts — с расширением .d.ts в реэкспортах)
 lib/           # продуктовые статические данные (barrel index.ts): scheme/*, *-items, *-scheme
+i18n/locales/  # общие переводы, по файлу на локаль (см. «Переводы»)
 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
@@ -156,6 +160,78 @@ assets/scss/themes/dark/_theme.scss
 
 ---
 
+## Переводы
+
+Ключи разделены на два набора, как темы: общая часть здесь, пер-сайтовая в приложении.
+
+| | |
+|---|---|
+| Слой, `i18n/locales/*.json` | обвязка интерфейса, одинаковая на всех сайтах: навигация, сортировки и фильтры, кнопки-глаголы, пагинация, плеер, авторизация, снекбары, формы репорта и контактов, ошибки, плюрали, длительности, единицы, атрибуты модели |
+| Приложение, `i18n/locales/*.json` | только пер-сайтовое: SEO (`meta.*`, `h1_*`, `*_footer_text`, карты `*_footer_links`), нишевая лексика и брендовые формулировки, плюс точечные оверрайды общих ключей |
+
+Граница проходит по **значению, а не по имени ключа**: `all_categories` («Alphabetical A-Z») — общий,
+`main_categories` («All Gay Porn Categories (A-Z)») — сайтовый, хотя имена похожи.
+
+### Как склеивается
+
+`@nuxtjs/i18n` мержит локали слоёв сам, вручную ничего подключать не надо. Файл слоя попадает в `files`
+локали раньше проектного, значит грузится первым, а проектный ложится поверх. Мерж глубокий, поэтому
+приложение может перекрыть **один ключ внутри общей группы**, не переобъявляя всю группу.
+
+Направление одно: приложение всегда сильнее. Слой не может «дожать» значение — если сайт держит свой ключ,
+победит он.
+
+Коды локалей выводятся из имён файлов здесь (`zh-CN.json` → `zh`), поэтому набор файлов слоя —
+канонический. Код, которого нет в `LOCALES` приложения, всё равно доедет до него лишней локалью, так что
+наборы должны совпадать.
+
+### Куда добавлять новый ключ
+
+- Строка видна на всех сайтах → сюда, в **начало** `i18n/locales/en-US.json` («выше — новее»), дальше
+  обычный цикл: коммит → `npm run patch` → пуш → мерж и публикация → в приложении `npm run spec`.
+- Строка про нишу, бренд или SEO → в приложение, слой не трогаем.
+
+⚠️ **Не копировать общий ключ в приложение «чтобы был».** Дубль с тем же значением ничего не меняет, но
+замораживает перевод: правки в слое до этого сайта уже никогда не доедут. `i18n:check` в приложении зовёт
+такое мёртвым оверрайдом и показывает списком.
+
+### CSV-мост (работа с переводчиком)
+
+Переводы никогда не правятся руками по локалям — только через CSV. Скрипты живут здесь
+(`scripts/i18n-sheet.mjs`, `scripts/i18n-check.mjs`), берут пути от cwd и публикуются в пакете, поэтому
+один и тот же код обслуживает оба набора: здесь `npm run i18n:*` работает с общими ключами, в приложении
+те же команды зовут копию из `node_modules/itube-specs/scripts/` и работают с его собственными. У каждого
+набора свой `i18n/i18n.csv` (в git не хранится, пересобирается экспортом).
+
+1. `npm run i18n:sheet:export` — собирает CSV: колонка `key`, дальше по колонке на локаль, `en` первой.
+   Новые ключи (заполнен только `en`) поднимаются наверх файла — переводчику сразу видно TODO.
+2. Переводчик правит в Excel / Numbers / Google Sheets и сохраняет обратно **в CSV** (`.numbers`/`.xlsx`
+   не читаются). Разделитель определяется сам — `,`, `;` или таб, редакторы пишут по-разному.
+3. `npm run i18n:sheet:import` — раскладывает значения назад. Каждый файл пересобирается в своём порядке
+   ключей (минимальный diff), непереведённый ключ остаётся **отсутствующим**, а не подменяется английским,
+   чтобы отчёт продолжал его показывать.
+4. `npm run i18n:check` — отчёт, не гейт: рассинхрон с эталоном `en-US`, мёртвые оверрайды, а в приложении
+   ещё и SEO keyword-ссылки.
+
+Удаление ключей едет от `en-US`: импорт выкидывает лист, которого больше нет в эталоне, так что устаревший
+CSV не воскресит удалённый ключ.
+
+Важное следствие двух наборов: непереведённый **общий** ключ чинится в CSV слоя — в CSV приложения он не
+появится вовсе. Отчёт приложения такие ключи показывает отдельным блоком «не переведено в слое» и не
+считает их своим рассинхроном.
+
+### Что мимо CSV
+
+`*_footer_links` в приложении — это карты «keyword → URL категории», а не строки: сам ключ локализован
+(en: `twinks`, ru: `твинки`), наборы по локалям разные by design. Они исключены из CSV и из сверки ключей,
+курирует их разработчик/SEO прямо в JSON. Проверяется другое: каждый keyword должен встречаться в парном
+`*_footer_text`, иначе ссылка не отрендерится — это и гоняет `i18n:check` в приложении.
+
+Правила плюрализации (`i18n/plurals.ts`) и `numberFormats` остаются в приложении, хотя сами строки
+`plural.*` общие: правила задаются на уровне локали, а не ключа.
+
+---
+
 ## Импорты
 
 Внутри слоя — **относительные пути** (`../../runtime`, `../types`, `../../services/api/...`), никогда не

package/assets/scss/base/_global.scss

@@ -34,6 +34,21 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+// В корейском слова разделены пробелами, но браузер по умолчанию всё равно рвёт строку
+// посреди слова — keep-all запрещает разрыв между слогами, break-word остаётся страховкой
+// от переполнения на длинных ссылках. Китайский и японский трогать не надо: там перенос
+// между любыми двумя знаками — норма языка (clreq, JLReq), а не дефект.
+html[lang^='ko'] body {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+// Японский умеет лучше: Chromium разбивает строку по границам фраз собственным словарём.
+// Где значение не поддержано, оно игнорируется и остаётся штатный японский перенос.
+html[lang^='ja'] body {
+  word-break: auto-phrase;
+}
+
 main {
   background-color: $main-bg;
 }

package/components/card/channel-mini.vue

@@ -24,7 +24,7 @@
             name="video-camera"
             size="14"
           />
-          {{ card.videosCount }}
+          {{ $n(card.videosCount, 'compact') }}
         </span>
         <span
           v-if="featureFlags.FeatureFollowEnabled"

package/components/card/model-mini.vue

@@ -31,7 +31,7 @@
             name="video-camera"
             size="14"
           />
-          {{ card.videosCount }}
+          {{ $n(card.videosCount, 'compact') }}
         </span>
         <span
           v-if="card.age"

package/components/card/playlist-mini.vue

@@ -28,7 +28,7 @@
           name="video-camera"
           size="16"
         />
-        {{ card.videosCount }}
+        {{ $n(card.videosCount, 'compact') }}
       </span>
     </div>
   </div>

package/components/card/round.vue

@@ -34,7 +34,7 @@
         name="cam"
         size="12"
       />
-      <span class="card-round__count-text">{{ card.videosCount }}</span>
+      <span class="card-round__count-text">{{ $n(card.videosCount, 'compact') }}</span>
     </p>
   </NuxtLink>
 </template>

package/components/card/video/actions.vue

@@ -4,6 +4,7 @@
     <button
       v-if="showFavorites && favorite"
       :aria-label="t('video_actions.remove_aria', { title: card.title, name: t('favorites') })"
+      :title="t('video_actions.remove_favorites')"
       class="card-video-actions__btn --active"
       type="button"
       aria-pressed="true"
@@ -19,6 +20,7 @@
       :aria-label="later
         ? t('video_actions.remove_aria', { title: card.title, name: t('video_submenu.watch_later') })
         : t('video_actions.add_aria', { title: card.title, name: t('video_submenu.watch_later') })"
+      :title="later ? t('video_actions.remove_watch_later') : t('video_actions.add_watch_later')"
       :aria-pressed="later"
       :class="['card-video-actions__btn', '--watch-later', { '--active': later }]"
       type="button"

package/components/filter/btn.vue

@@ -3,7 +3,7 @@
   <UiBtn
     :size="size"
     :theme="theme"
-    :title="t('filter')"
+    :title="label"
     class="filter-btn"
     aria-label="Filter"
     @click="emit('update:modelValue', true)"
@@ -12,11 +12,10 @@
       name="adjustments-horizontal"
       size="16"
     />
-    <span class="_from-sm">{{ t('filter') }}
-    </span>
+    <span class="_from-sm">{{ label }}</span>
     <span
       v-if="count > 0"
-      class="filter-btn__count"
+      class="filter-btn__count _to-sm"
     >{{ mobileCount }}</span>
   </UiBtn>
 </template>
@@ -38,6 +37,8 @@ const emit = defineEmits<{
 const { t } = useI18n();
 
 const mobileCount = computed(() => props.count > 9 ? '9+' : props.count);
+
+const label = computed(() => props.count > 0 ? t('plural.filter', props.count) : t('filter'));
 </script>
 
 <style lang="scss">

package/components/filter/popup.vue

@@ -83,7 +83,7 @@
             class="filter-popup__summary-arrow"
           />
           <span class="filter-popup__summary-title">{{ group.title }}</span>
-          <span class="filter-popup__summary-count">{{ t('filter_popup.fields', { count: group.count ?? group.fields.length }) }}</span>
+          <span class="filter-popup__summary-count">{{ t('plural.filter', group.count ?? group.fields.length) }}</span>
           <span
             v-if="group.description"
             class="filter-popup__summary-description"

package/components/info/main.vue

@@ -29,7 +29,7 @@
           <UiCount
             class="info-main__count"
             icon="video-camera"
-          >{{ videosCount || card.videosCount }}</UiCount>
+          >{{ $n(videosCount || card.videosCount, 'compact') }}</UiCount>
           <UiBtn
             theme="muted"
             size="s"

package/components/library/feed.vue

@@ -159,7 +159,7 @@ const emit = defineEmits<{
   (eventName: 'toggle-follow', item: ILibraryFeedItem): void,
 }>();
 
-const { t } = useI18n();
+const { t, n } = useI18n();
 
 const avatarError = ref(false);
 
@@ -173,7 +173,7 @@ const initials = computed(() => props.item.title
   .join('')
   .toUpperCase());
 
-const videosText = computed(() => t('plural.videos', props.item.videosCount));
+const videosText = computed(() => t('plural.videos', { n: n(props.item.videosCount, 'compact') }, props.item.videosCount));
 
 const parametersText = computed(() => (props.item.parameters ?? []).filter(Boolean).join(' · '));
 

package/components/player/follow.vue

@@ -14,7 +14,7 @@
     />
     <div class="player-follow__wrapper">
       <p class="player-follow__title">{{ card.name }}</p>
-      <p class="player-follow__count">{{ $t('plural.videos', Number(card.videosCount)) }}</p>
+      <p class="player-follow__count">{{ $t('plural.videos', { n: $n(card.videosCount, 'compact') }, card.videosCount) }}</p>
     </div>
     <UiBtn
       v-if="featureFlags.FeatureFollowEnabled"

package/components/playlist/add.vue

@@ -52,7 +52,7 @@
                     name="video-camera"
                     size="14"
                   />
-                  {{ item.videosCount }}
+                  {{ $n(item.videosCount, 'compact') }}
                 </span>
               </div>
               <button

package/components/playlist/edit.vue

@@ -16,7 +16,7 @@
       <strong>{{ selectedPlaylist?.name }}</strong>
     </i18n-t>
     <p class="playlist-edit__confirm-note">
-      {{ $t('playlist.confirm_delete_note', { videos: $t('plural.videos', selectedPlaylist?.videosCount ?? 0) }) }}
+      {{ $t('playlist.confirm_delete_note', { videos: $t('plural.videos', { n: $n(selectedPlaylist?.videosCount ?? 0, 'compact') }, selectedPlaylist?.videosCount ?? 0) }) }}
     </p>
   </UiConfirm>
 

package/components/search/item.vue

@@ -24,7 +24,7 @@
     <span
       v-if="item.videosCount"
       class="search-item__count"
-    >{{ item.videosCount }}</span>
+    >{{ $n(item.videosCount, 'compact') }}</span>
   </NuxtLink>
 </template>
 

package/components/ui/section-title.vue

@@ -25,7 +25,7 @@
       v-if="count || icon"
       :icon="icon"
       class="ui-section-title__count"
-    >{{ count }}</UiCount>
+    >{{ formattedCount }}</UiCount>
     <!-- Доп. бейдж рядом с заголовком (например «editorial») -->
     <slot/>
   </div>
@@ -45,6 +45,12 @@ const props = withDefaults(defineProps<{
   variant: 'page'
 });
 
+const { n } = useI18n();
+
+const formattedCount = computed(() => (
+  typeof props.count === 'number' ? n(props.count, 'compact') : props.count
+));
+
 const titleClass = computed(() => [
   'ui-section-title__title',
   props.variant === 'section' ? '--section' : '_title'

package/components/view/model-videos.vue

@@ -13,7 +13,7 @@
 
     <UiSectionTitle
       v-else-if="isFilteredPage"
-      :count="data?.total ? $n(data.total, 'compact') : 0"
+      :count="data?.total"
       :title="title"
       class="view-model-videos__title _title"
       icon="video-camera"
@@ -66,7 +66,7 @@
       class="view-model-videos__other"
     >
       <UiSectionTitle
-        :count="props.dataOther ? $n(props.dataOther?.total, 'compact') : 0"
+        :count="props.dataOther?.total"
         :title="otherItemsTitle"
         class="view-model-videos__other-title"
         title-tag="h2"

package/components/view/videos.vue

@@ -4,7 +4,7 @@
     <header class="view-videos__header">
       <UiSectionTitle
         v-if="title"
-        :count="data?.total && $n(data?.total, 'compact')"
+        :count="data?.total"
         :title="title"
         :img="flagImg"
         class="view-videos__title"

package/components/view/webcams.vue

@@ -208,7 +208,7 @@ const sections = computed<ISwitcherItem[]>(() => [
     name: 'webcams',
     title: t('webcams.sections.webcams'),
     icon: 'webcam',
-    subtitle: props.data?.total ? t('webcams.online_short', { count: n(props.data.total) }) : '',
+    subtitle: props.data?.total ? t('webcams.online_short', { count: n(props.data.total, 'compact') }) : '',
   },
 ]);
 

package/components/webcam/counters.vue

@@ -16,7 +16,7 @@
       class="webcam-counters__item"
     >
       <span class="webcam-counters__pulse"/>
-      {{ t('webcams.online_now', { count: $n(total) }) }}
+      {{ t('webcams.online_now', { count: $n(total, 'compact') }) }}
     </span>
 
     <span

package/composables/use-route-query-categories.ts

@@ -0,0 +1,25 @@
+import { CategoriesApiService } from '../services/api/categories.service';
+import { convertQueryCategories, convertString } from '../runtime';
+
+/**
+ * Перечисление выбранных категорий для заголовка страницы — на языке текущей локали.
+ *
+ * В query лежит английский слаг категории, переводы есть только в группах с бека, поэтому
+ * при активном фильтре список групп догружается в SSR (тот же ленивый стейт, что у чипсов
+ * фильтра, `load()` идемпотентен — лишнего запроса не будет). Пустая строка, если фильтр не стоит.
+ */
+export const useRouteQueryCategories = async () => {
+  const route = useRoute();
+  const { data: groups, load } = useFetchGroupsCategoriesLazy(CategoriesApiService.getGroupsCategories);
+
+  watch(() => route.query[ 'categories' ], value => {
+    if (value) load();
+  });
+
+  if (route.query[ 'categories' ]) await load();
+
+  return computed(() => {
+    if (!route.query[ 'categories' ]) return '';
+    return convertString().toCapitalize(convertQueryCategories(route, groups.value));
+  });
+};