itube-specs 0.0.868 → 0.0.870

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;
@@ -428,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;
@@ -528,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;
@@ -600,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;
@@ -612,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;
@@ -689,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;
@@ -728,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;
@@ -739,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;
@@ -783,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;
@@ -809,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;
@@ -896,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;
@@ -944,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;
@@ -485,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;
@@ -568,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;
@@ -581,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;
@@ -653,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;
@@ -665,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;
@@ -742,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;
@@ -758,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;
@@ -769,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;
@@ -813,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;
@@ -839,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;
@@ -883,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;
@@ -920,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;
@@ -974,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/header.vue

@@ -27,8 +27,8 @@
         @click="showLanguageMenu"
       >
         <img
-          v-if="clientCountryIcon"
-          :src="`/icons/flags/${clientCountryIcon}.svg`"
+          v-if="clientCountryFlag"
+          :src="clientCountryFlag"
           :alt="clientCountryIcon"
           class="layout-header__language-icon"
           width="24"
@@ -96,14 +96,8 @@
 import { AuthSteps } from '../../runtime';
 import { onClickOutside } from '@vueuse/core';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
-import { isoCodeMap } from '../../utils/iso-code-map';
 
-const clientCountryCode = useState<string>('clientCountryCode', () => '');
-const clientCountryIcon = computed(() => {
-  const code = clientCountryCode.value;
-  if (!code) return '';
-  return isoCodeMap[code] || code;
-});
+const { icon: clientCountryIcon, flagSrc: clientCountryFlag } = useClientCountry();
 
 const burgerShow = ref(false);
 const showLanguage = ref(false);

package/components/layout/language.vue

@@ -42,9 +42,9 @@
     >
       <summary class="layout-language__summary">
         <img
-          v-if="clientCountryIcon"
+          v-if="clientCountryFlag"
           :alt="clientCountryName"
-          :src="`/icons/flags/${clientCountryIcon}.svg`"
+          :src="clientCountryFlag"
           class="layout-language__icon"
           width="20"
           height="20"
@@ -109,8 +109,6 @@
 
 <script setup lang="ts">
 import type { ISelectItem } from '../../types';
-import { isoCodeMap } from '../../utils/iso-code-map';
-import { DictionariesApiService } from '../../services/api/dictionaries.service';
 
 const { locale, locales } = useI18n();
 const switchLocalePath = useSwitchLocalePath();
@@ -119,22 +117,14 @@ defineProps<{
   iconSize: string
 }>();
 
-const countriesItems = useState<ISelectItem[]>('countriesItems', () => []);
-const clientCountryCode = useState<string>('clientCountryCode', () => '');
-
-const clientCountryIcon = computed(() => {
-  const code = clientCountryCode.value;
-  if (!code) return '';
-  return isoCodeMap[code] || code;
-});
-
-const clientCountryNameState = useState<string>('clientCountryName', () => '');
-
-const clientCountryName = computed(() => {
-  if (!clientCountryIcon.value) return '';
-  const fromList = countriesItems.value.find(item => item.icon === clientCountryIcon.value)?.value;
-  return fromList || clientCountryNameState.value || '';
-});
+const {
+  icon: clientCountryIcon,
+  name: clientCountryName,
+  flagSrc: clientCountryFlag,
+  countriesItems,
+  setCountry,
+  loadCountries,
+} = useClientCountry();
 
 const isCountryOpen = ref(false);
 const countryValue = ref('');
@@ -144,26 +134,6 @@ const filteredCountries = computed(() => {
   return countriesItems.value.filter(item => item.title.toLowerCase().includes(query));
 });
 
-const isCountryLoading = ref(false);
-
-// Список стран не приходит в payload (см. plugins/countries.server.ts) — догружаем
-// его лениво на клиенте при первом открытии селектора.
-async function loadCountries() {
-  if (countriesItems.value.length || isCountryLoading.value) return;
-  isCountryLoading.value = true;
-  try {
-    const data = await DictionariesApiService.getCountries();
-    countriesItems.value = (data?.countries ?? []).map((item) => {
-      const iso = item.isoCodes[0].toLowerCase();
-      return { title: item.title, value: item.title, icon: isoCodeMap[iso] || iso, key: iso };
-    });
-  } catch {
-    // оставляем пустым — следующее открытие попробует снова
-  } finally {
-    isCountryLoading.value = false;
-  }
-}
-
 function onCountryToggle(e: Event) {
   isCountryOpen.value = (e.target as HTMLDetailsElement).open;
   if (isCountryOpen.value) loadCountries();
@@ -191,18 +161,10 @@ function changeLocale(locale: string) {
   window.location.href = switchLocalePath(locale);
 }
 
-const COUNTRY_COOKIE_OPTS = { maxAge: 60 * 60 * 24 * 365, path: '/', secure: true, sameSite: 'lax' as const };
-const countryCookie = useCookie('clientCountryCode', COUNTRY_COOKIE_OPTS);
-const countryNameCookie = useCookie('clientCountryName', COUNTRY_COOKIE_OPTS);
-const countryNameCodeCookie = useCookie('clientCountryNameCode', COUNTRY_COOKIE_OPTS);
-
-function changeCountry(item: ISelectItem) {
-  const code = item.key || '';
-  clientCountryCode.value = code;
-  clientCountryNameState.value = item.value;
-  countryCookie.value = code;
-  countryNameCookie.value = item.value;
-  countryNameCodeCookie.value = code;
+async function changeCountry(item: ISelectItem) {
+  setCountry(item);
+  // куку пишет вотчер useCookie — ждём флаш, иначе навигация может срезать запись
+  await nextTick();
   window.location.href = '/';
 }
 </script>

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/__tests__/use-client-country.test.ts

@@ -0,0 +1,121 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useClientCountry } from '../use-client-country';
+
+const getCountries = vi.fn();
+
+vi.mock('../../services/api/dictionaries.service', () => ({
+  DictionariesApiService: { getCountries: () => getCountries() },
+}));
+
+const setCode = (code: string) => useState<string>('clientCountryCode', () => '').value = code;
+const setResolvedName = (name: string) => useState<string>('clientCountryName', () => '').value = name;
+
+describe('useClientCountry', () => {
+  beforeEach(() => {
+    useNuxtApp().payload.state = {};
+    getCountries.mockReset();
+  });
+
+  it('без кода не отдаёт ни флаг, ни имя', () => {
+    const { icon, name, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('');
+    expect(name.value).toBe('');
+    expect(flagSrc.value).toBe('');
+  });
+
+  it('строит иконку и путь к флагу из кода', () => {
+    setCode('ad');
+    setResolvedName('Andorra');
+    const { icon, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('ad');
+    expect(flagSrc.value).toBe('/icons/flags/ad.svg');
+  });
+
+  it('нормализует код: регистр и пробелы', () => {
+    setCode(' AD ');
+    setResolvedName('Andorra');
+    const { icon, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('ad');
+    expect(flagSrc.value).toBe('/icons/flags/ad.svg');
+  });
+
+  it('учитывает страны, где код флага отличается от ISO-кода', () => {
+    setCode('cn');
+    setResolvedName('China');
+    const { icon, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('zh');
+    expect(flagSrc.value).toBe('/icons/flags/zh.svg');
+  });
+
+  it('не показывает флаг для служебного кода, которого нет в словаре', () => {
+    // Cloudflare отдаёт XX для неизвестного IP и T1 для Tor — файла такого флага нет
+    setCode('xx');
+    const { icon, name, flagSrc } = useClientCountry();
+
+    expect(icon.value).toBe('xx');
+    expect(name.value).toBe('');
+    expect(flagSrc.value).toBe('');
+  });
+
+  it('имя следует за кодом и не может остаться от другой страны', async () => {
+    setCode('ad');
+    // имя, доставшееся от предыдущей страны — именно этот рассинхрон ловим
+    setResolvedName('USA');
+    getCountries.mockResolvedValue({
+      countries: [
+        { title: 'Andorra', isoCodes: ['AD', 'AND'] },
+        { title: 'USA', isoCodes: ['US', 'USA'] },
+      ],
+    });
+
+    const { name, flagSrc, loadCountries } = useClientCountry();
+    await loadCountries();
+
+    expect(name.value).toBe('Andorra');
+    expect(flagSrc.value).toBe('/icons/flags/ad.svg');
+  });
+
+  it('до загрузки списка берёт имя, отрезолвленное на сервере', () => {
+    setCode('ad');
+    setResolvedName('Andorra');
+    const { name } = useClientCountry();
+
+    expect(name.value).toBe('Andorra');
+  });
+
+  it('выбор страны меняет и код, и имя', () => {
+    setCode('ad');
+    setResolvedName('Andorra');
+    const { code, name, flagSrc, setCountry } = useClientCountry();
+
+    setCountry({ title: 'USA', value: 'USA', icon: 'us', key: 'us' });
+
+    expect(code.value).toBe('us');
+    expect(name.value).toBe('USA');
+    expect(flagSrc.value).toBe('/icons/flags/us.svg');
+  });
+
+  it('не перезапрашивает список, если он уже загружен', async () => {
+    getCountries.mockResolvedValue({ countries: [{ title: 'Andorra', isoCodes: ['AD'] }] });
+    const { loadCountries } = useClientCountry();
+
+    await loadCountries();
+    await loadCountries();
+
+    expect(getCountries).toHaveBeenCalledTimes(1);
+  });
+
+  it('падение запроса оставляет список пустым — следующее открытие попробует снова', async () => {
+    getCountries.mockRejectedValue(new Error('500'));
+    const { countriesItems, loadCountries } = useClientCountry();
+
+    await loadCountries();
+
+    expect(countriesItems.value).toEqual([]);
+  });
+});

package/composables/use-client-country.ts

@@ -0,0 +1,73 @@
+import type { ISelectItem } from '../types';
+import { isoCodeMap } from '../utils/iso-code-map';
+import { DictionariesApiService } from '../services/api/dictionaries.service';
+
+/** Ручной выбор страны переживает перезагрузку год — читает его server/middleware/country.ts */
+const COOKIE_OPTS = { maxAge: 60 * 60 * 24 * 365, path: '/', secure: true, sameSite: 'lax' as const };
+
+/**
+ * Единый источник страны клиента: ISO-код (гео-заголовок прокси или ручной выбор
+ * в селекторе), иконка флага и локализованное имя.
+ *
+ * Имя всегда резолвится ОТ ТЕКУЩЕГО кода — своего кеша у него нет. Раньше имя
+ * лежало в отдельной куке `clientCountryName` рядом с парной `clientCountryNameCode`,
+ * и пара могла разъехаться: заголовок писал одну страну, флаг и селектор показывали
+ * другую (реальный кейс на проде: `clientCountryName=USA` при коде `ad`).
+ */
+export const useClientCountry = () => {
+  const code = useState<string>('clientCountryCode', () => '');
+  const resolvedName = useState<string>('clientCountryName', () => '');
+  const countriesItems = useState<ISelectItem[]>('countriesItems', () => []);
+  const codeCookie = useCookie<string | null>('clientCountryCode', COOKIE_OPTS);
+
+  /** ISO-код → имя файла флага (у части стран код локали отличается от кода страны) */
+  const toIcon = (value: string) => {
+    const iso = value.trim().toLowerCase();
+    return iso ? isoCodeMap[iso] || iso : '';
+  };
+
+  const icon = computed(() => toIcon(code.value));
+
+  // Список стран догружается лениво на клиенте (см. layout/language.vue) — если он
+  // уже есть, имя берём из него: там оно точно совпадает с текущим кодом.
+  const name = computed(() => {
+    if (!icon.value) return '';
+    return countriesItems.value.find(item => item.icon === icon.value)?.title || resolvedName.value;
+  });
+
+  // Флаг только для страны, которую смогли назвать: гео-заголовок умеет отдавать
+  // служебные коды (Cloudflare `XX` для неизвестного IP и `T1` для Tor, MaxMind `AP`),
+  // их нет ни в словаре стран, ни среди файлов флагов — вышла бы битая картинка.
+  const flagSrc = computed(() => (icon.value && name.value ? `/icons/flags/${icon.value}.svg` : ''));
+
+  /** Ручной выбор страны в селекторе: наружу переживает перезагрузку только код. */
+  const setCountry = (item: ISelectItem) => {
+    code.value = item.key || '';
+    resolvedName.value = item.title;
+    codeCookie.value = code.value || null;
+  };
+
+  const isLoading = ref(false);
+
+  /**
+   * Полный список стран в payload не кладётся (см. plugins/countries.server.ts) —
+   * догружаем лениво на клиенте, когда открыли селектор.
+   */
+  const loadCountries = async () => {
+    if (countriesItems.value.length || isLoading.value) return;
+    isLoading.value = true;
+    try {
+      const data = await DictionariesApiService.getCountries();
+      countriesItems.value = (data?.countries ?? []).map((item) => {
+        const iso = item.isoCodes[0].toLowerCase();
+        return { title: item.title, value: item.title, icon: toIcon(iso), key: iso };
+      });
+    } catch {
+      // оставляем пустым — следующее открытие попробует снова
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  return { code, icon, name, flagSrc, countriesItems, setCountry, loadCountries };
+};

package/composables/use-meta.ts

@@ -3,6 +3,16 @@ import type { Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import type { IChipsItem } from '../types';
 
+type MetaOptions = {
+  /**
+   * Подменяет i18n-ключ заголовка (по умолчанию 'h1') — вызывается с фактической
+   * сортировкой, потому что варианты заголовка есть не у каждой из них.
+   * Нужен, когда подставляемого текста может не быть и в шаблоне остаётся
+   * висячий предлог (`… Videos in ` без страны).
+   */
+  h1Key?: (sortType: string) => string
+};
+
 /**
 * Генерирует реактивные meta (title, description) и h1 с учётом сортировки, страницы и i18n-ключей.
 * @param t - функция перевода (i18n)
@@ -13,8 +23,9 @@ import type { IChipsItem } from '../types';
 * @param secondText - второй подставляемый текст
 * @param thirdText - третий подставляемый текст
 * @param fourthText - четвёртый подставляемый текст
+* @param options - уточнения (подмена ключа h1)
 */
-export function useMeta(t: (key: string, params?: Record<string, unknown>) => string, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>) {
+export function useMeta(t: (key: string, params?: Record<string, unknown>) => string, page: string, brandName: string, sortOptions?: IChipsItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>, options?: MetaOptions) {
   const route = useRoute();
 
   const sortType = computed(() => {
@@ -46,7 +57,7 @@ export function useMeta(t: (key: string, params?: Record<string, unknown>) => st
   }
 
   const metaTitle = computed(() => getPath('title'));
-  const h1 = computed(() => getPath('h1'));
+  const h1 = computed(() => getPath(options?.h1Key?.(sortType.value) || 'h1'));
 
   const meta = computed(() => {
     const description = getPath('meta_description');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.868",
+  "version": "0.0.870",
   "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;
 

package/pages/index.vue

@@ -21,9 +21,8 @@ import { convertQueryCategories, convertString, AsyncData } from '../runtime';
 import { VideosApiService } from '../services/api/videos.service';
 import { ModelsApiService } from '../services/api/models.service';
 import { CategoriesApiService } from '../services/api/categories.service';
-import { isoCodeMap } from '../utils/iso-code-map';
 import { sortItemsDefault } from '../lib';
-import type { ISelectItem, IChipsItem } from '../types';
+import type { IChipsItem } from '../types';
 
 const { t } = useI18n();
 
@@ -62,28 +61,28 @@ const routeQueryCategories = computed(() => {
   return '';
 });
 
-const clientCountryCode = useState<string>('clientCountryCode', () => '');
-const countriesItems = useState<ISelectItem[]>('countriesItems', () => []);
-const clientCountryNameState = useState<string>('clientCountryName', () => '');
+const clientCountry = useClientCountry();
 
-const countryName = computed(() => {
-  if (route.query['sort']) return '';
-  const code = clientCountryCode.value;
-  if (!code) return '';
-  const icon = isoCodeMap[code] || code;
-  const fromList = countriesItems.value.find(item => item.icon === icon)?.title;
-  return fromList || clientCountryNameState.value || '';
-});
+// Страна в заголовке уместна только на дефолтной сортировке (в остальных шаблонах
+// её нет) — при явной сортировке гасим и подпись, и флаг.
+const isCountryShown = computed(() => !route.query['sort'] && !!clientCountry.name.value);
 
-const { meta, h1 } = useMeta(t, pageName, useAppConfig().brandName, sortItemsDefault, routeQueryCategories, countryName);
+const countryName = computed(() => (isCountryShown.value ? clientCountry.name.value : ''));
 
-const countryFlagImg = computed(() => {
-  if (route.query['sort']) return undefined;
-  const code = clientCountryCode.value;
-  if (!code) return undefined;
-  const icon = isoCodeMap[code] || code;
-  return `/icons/flags/${icon}.svg`;
-});
+const { meta, h1 } = useMeta(
+  t,
+  pageName,
+  useAppConfig().brandName,
+  sortItemsDefault,
+  routeQueryCategories,
+  countryName,
+  undefined,
+  undefined,
+  // Страну не определили — берём заголовок без неё, иначе останется висячий предлог.
+  { h1Key: sortType => (sortType === 'trending' && !countryName.value ? 'h1_no_country' : 'h1') },
+);
+
+const countryFlagImg = computed(() => (isCountryShown.value ? clientCountry.flagSrc.value : undefined));
 
 watchEffect(() => {
   useHead(meta.value);

package/plugins/countries.server.ts

@@ -1,45 +1,32 @@
 // SSR-плагин: по ISO-коду клиента резолвит имя страны в useState('clientCountryName')
 // для гео-заголовка. Полный список стран в payload не кладётся (его лениво догружает
-// селектор языка на клиенте). Результат кэшируется в куку и в память процесса.
-import type { ICountries, ISelectItem } from '../types';
-import { isoCodeMap } from '../utils/iso-code-map';
+// селектор языка на клиенте). Результат кэшируется в память процесса.
+import type { ICountries } from '../types';
 
-const COOKIE_OPTS = { maxAge: 60 * 60 * 24 * 365, path: '/', secure: true, sameSite: 'lax' as const };
+/** Опции легаси-кук — нужны только чтобы их погасить (см. ниже) */
+const LEGACY_COOKIE_OPTS = { path: '/', secure: true, sameSite: 'lax' as const };
 
-type CountriesCache = {
-  items: ISelectItem[];
-  nameByIso: Map<string, string>;
-};
+const cache = new Map<string, Promise<Map<string, string> | null>>();
 
-const cache = new Map<string, Promise<CountriesCache | null>>();
-
-function buildCache(data: ICountries): CountriesCache {
-  const items: ISelectItem[] = [];
+function buildNameByIso(data: ICountries): Map<string, string> {
   const nameByIso = new Map<string, string>();
 
   for (const item of data.countries) {
-    const iso = item.isoCodes[0].toLowerCase();
-    items.push({
-      title: item.title,
-      value: item.title,
-      icon: isoCodeMap[iso] || iso,
-      key: iso,
-    });
     for (const code of item.isoCodes) {
       nameByIso.set(code.toLowerCase(), item.title);
     }
   }
-  return { items, nameByIso };
+  return nameByIso;
 }
 
-function getCountries(language: string, domain: string): Promise<CountriesCache | null> {
+function getNameByIso(language: string, domain: string): Promise<Map<string, string> | null> {
   const key = `${language}|${domain}`;
   let promise = cache.get(key);
   if (!promise) {
     promise = $fetch<ICountries>('/api/dictionaries/countries', {
       headers: { 'x-language': language, 'x-domain': domain },
     })
-      .then(data => (data?.countries?.length ? buildCache(data) : null))
+      .then(data => (data?.countries?.length ? buildNameByIso(data) : null))
       .catch(() => {
         cache.delete(key);
         return null;
@@ -51,34 +38,29 @@ function getCountries(language: string, domain: string): Promise<CountriesCache
 
 export default defineNuxtPlugin(async () => {
   const event = useRequestEvent();
-  const code = (event?.context?.clientCountryCode as string | undefined) || '';
+  const code = ((event?.context?.clientCountryCode as string | undefined) || '').trim().toLowerCase();
 
   const countryName = useState<string>('clientCountryName', () => '');
 
+  // Имя страны больше не кешируется в куках: пара `clientCountryName` +
+  // `clientCountryNameCode` умела разъезжаться с кодом страны (заголовок писал одну
+  // страну, флаг и селектор показывали другую), а выигрыш был только в одном
+  // сетевом запросе на холодный процесс. Старые куки гасим, чтобы не висели год.
+  const legacyName = useCookie<string | null>('clientCountryName', LEGACY_COOKIE_OPTS);
+  const legacyNameCode = useCookie<string | null>('clientCountryNameCode', LEGACY_COOKIE_OPTS);
+  if (legacyName.value) legacyName.value = null;
+  if (legacyNameCode.value) legacyNameCode.value = null;
+
   // Резолвим только имя текущей страны для гео-заголовка. Полный список стран
   // НЕ кладём в useState (не сериализуем в payload) — language.vue догружает
   // его лениво на клиенте при открытии селектора.
   if (!code) return;
 
-  const codeCookie = useCookie<string>('clientCountryNameCode', COOKIE_OPTS);
-  const nameCookie = useCookie<string>('clientCountryName', COOKIE_OPTS);
-
-  // Тёплая кука → имя уже известно, серверный фетч стран не нужен.
-  if (nameCookie.value && codeCookie.value === code) {
-    countryName.value = nameCookie.value;
-    return;
-  }
-
   const language = useRequestHeaders(['x-language'])['x-language'] ?? '';
   const domain = useRuntimeConfig().public.xDomain as string;
 
-  const result = await getCountries(language, domain);
-  if (!result) return;
+  const nameByIso = await getNameByIso(language, domain);
+  if (!nameByIso) return;
 
-  const name = result.nameByIso.get(code.toLowerCase());
-  if (name) {
-    countryName.value = name;
-    nameCookie.value = name;
-    codeCookie.value = code;
-  }
+  countryName.value = nameByIso.get(code) || '';
 });

package/server/middleware/country.ts

@@ -1,10 +1,10 @@
 // Определяет страну клиента и кладёт ISO-код в event.context.clientCountryCode:
-// сначала из cookie `clientCountryCode`, иначе из заголовков прокси (Cloudflare
-// `cf-ipcountry` / `x-country-code` / `x-country`).
+// сначала из cookie `clientCountryCode` (ручной выбор в селекторе), иначе из
+// заголовков прокси (Cloudflare `cf-ipcountry` / `x-country-code` / `x-country`).
 export default defineEventHandler((event) => {
   const cookie = getCookie(event, 'clientCountryCode');
   if (cookie) {
-    event.context.clientCountryCode = cookie;
+    event.context.clientCountryCode = cookie.trim().toLowerCase();
     return;
   }