itube-specs 0.0.946 → 0.0.948

package/components/card/category.vue

@@ -21,14 +21,15 @@
         <div class="card-category__wrapper-header">
           <span class="card-category__title">
             {{ card.title }}
+            <!-- Флаг декоративный: страна уже названа в заголовке рядом -->
             <img
               v-if="card.icon"
               :src="`/icons/flags/${card.icon}.svg`"
-              :alt="card.icon"
               class="card-category__icon"
               width="17"
               height="17"
               loading="lazy"
+              alt=""
             >
           </span>
           <span

package/components/card/model-mini.vue

@@ -13,10 +13,12 @@
     <div class="card-model-mini__wrapper">
       <p class="card-model-mini__name">
         {{ card.title }}
+        <!-- Название страны текстом рядом не продублировано, поэтому оно в `alt`.
+        Форма как в CardModel: `name` — код для файла флага, `title` — читаемое имя. -->
         <img
-          v-if="card.country"
-          :alt="card.country"
-          :src="`/icons/flags/${card.country}.svg`"
+          v-if="card.country?.name"
+          :alt="card.country.title"
+          :src="`/icons/flags/${card.country.name}.svg`"
           class="card-model-mini__flag"
           width="16"
           height="12"

package/components/category/list.vue

@@ -9,14 +9,15 @@
       class="category-list__link"
     >
       {{ category.title }}
+      <!-- Флаг декоративный: страна уже названа в тексте ссылки -->
       <img
         v-if="category.icon"
         :src="`/icons/flags/${category.icon}.svg`"
-        :alt="category.icon"
         class="category-list__link-image"
         width="17"
         height="17"
         loading="lazy"
+        alt=""
       >
     </NuxtLink>
     <NuxtLink

package/components/info/grid.vue

@@ -41,13 +41,14 @@
               ]"
               class="info-grid__item-value"
             >
+              <!-- Флаг декоративный: страна названа в `value.title` ниже -->
               <img
                 v-if="item.name === 'nationality_iso_codes' && isoCodes"
                 :src="`/icons/flags/${isoCodes[vIndex]}.svg`"
-                :alt="isoCodes[vIndex]"
                 class="info-grid__item-flag"
                 width="20"
                 height="14"
+                alt=""
               >
               <UiIcon
                 v-else-if="item.icon"

package/components/info/main.vue

@@ -77,11 +77,13 @@
           size="14"
         />
         <span class="info-main__born-text">{{ card.birthSummary }}</span>
+        <!-- Национальность нигде больше не подписана — флаг единственный её носитель,
+        поэтому в `alt` идёт название страны, а не ISO-код. -->
         <img
           v-for="(item, index) in card.nationalityIsoCodes"
           :key="`nationalityIsoCodes-${index}`"
           :src="`/icons/flags/${item}.svg`"
-          :alt="item"
+          :alt="isoCodeToCountryName(item, locale)"
           class="info-main__born-flag"
           width="20"
           height="14"
@@ -157,8 +159,9 @@ import type {
 } from '../../types';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 import { groupParametersByGroup } from '../../utils/info-main/group-parameters-by-group';
+import { isoCodeToCountryName } from '../../utils/iso-code-to-country-name';
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const props = defineProps<{
   card: ICardInfo
@@ -211,13 +214,26 @@ function getParameter(name: string) {
   return props.card.parameters?.find(p => p.name === name)?.values?.[ 0 ]?.name;
 }
 
+/**
+ * `IModelCard.country` — пара «код файла флага + читаемое имя», как её отдаёт
+ * cleanModelCard. Раньше сюда уезжал целиком массив `nationalityIsoCodes`: у модели с
+ * двумя национальностями путь к флагу выходил `/icons/flags/us,gb.svg`, а у модели без
+ * национальностей пустой массив проходил `v-if` и давал битую картинку. Берём первый код.
+ */
+const shareCountry = computed(() => {
+  const iso = props.card.nationalityIsoCodes?.[0] || '';
+  if (!iso) return undefined;
+
+  return { name: iso, title: isoCodeToCountryName(iso, locale.value) };
+});
+
 const shareModelCard = computed<IModelCard>(() => ({
   title: props.card.title,
   videosCount: props.card.videosCount,
   thumbUrl: props.card.img || '',
   guid: props.card.guid || '',
   parameters: [],
-  country: props.card.nationalityIsoCodes || '',
+  country: shareCountry.value,
   age: getParameter('age'),
 }));
 

package/components/layout/language.vue

@@ -132,6 +132,7 @@
 
 <script setup lang="ts">
 import type { ISelectItem } from '../../types';
+import { isoCodeToCountryName } from '../../utils/iso-code-to-country-name';
 
 const { locale, locales } = useI18n();
 const switchLocalePath = useSwitchLocalePath();
@@ -143,20 +144,46 @@ defineProps<{
 }>();
 
 const {
+  code: clientCountryCode,
   icon: clientCountryIcon,
-  name: clientCountryName,
+  place: clientCountryPlace,
   flagSrc: clientCountryFlag,
   countriesItems,
   setCountry,
   loadCountries,
 } = useClientCountry();
 
+// Именительный падеж считает ICU, своей таблицы имён нет. Пустой `place` = служебный код
+// гео-заголовка (`XX`, `T1`, `AP`), такую «страну» не подписываем.
+const clientCountryName = computed(() => (
+  clientCountryPlace.value ? isoCodeToCountryName(clientCountryCode.value, locale.value) : ''
+));
+
 const isCountryOpen = ref(false);
 const countryValue = ref('');
+
+// Список стран приходит с API только по-английски — подписываем его тем же ICU-словарём,
+// что и текущую страну, и пересортировываем коллатором: порядок с бэка — английский
+// алфавит. Нераспознанный код `isoCodeToCountryName` вернёт как есть — тогда имя с API.
+const localizedCountries = computed(() => {
+  const collator = new Intl.Collator(locale.value);
+
+  return countriesItems.value
+    .map((item) => {
+      const code = (item.key || '').toUpperCase();
+      const name = isoCodeToCountryName(code, locale.value);
+      const title = name === code ? item.title : name;
+      return { ...item, title, value: title, apiTitle: item.title };
+    })
+    .sort((a, b) => collator.compare(a.title, b.title));
+});
+
+// Ищем и по английскому имени: привычка набирать `germany` не должна ломаться на ru-локали
 const filteredCountries = computed(() => {
-  if (!countryValue.value) return countriesItems.value;
+  if (!countryValue.value) return localizedCountries.value;
   const query = countryValue.value.toLowerCase();
-  return countriesItems.value.filter(item => item.title.toLowerCase().includes(query));
+  return localizedCountries.value.filter(item => item.title.toLowerCase().includes(query)
+    || item.apiTitle.toLowerCase().includes(query));
 });
 
 function onCountryToggle(e: Event) {

package/composables/__tests__/use-client-country.test.ts

@@ -9,7 +9,8 @@ vi.mock('../../services/api/dictionaries.service', () => ({
 }));
 
 const setCode = (code: string) => useState<string>('clientCountryCode', () => '').value = code;
-const setResolvedName = (name: string) => useState<string>('clientCountryName', () => '').value = name;
+/** Признак реальной страны: ставит SSR-плагин из lib/countries */
+const setPlace = (place: string) => useState<string>('clientCountryPlace', () => '').value = place;
 
 describe('useClientCountry', () => {
   beforeEach(() => {
@@ -17,17 +18,17 @@ describe('useClientCountry', () => {
     getCountries.mockReset();
   });
 
-  it('без кода не отдаёт ни флаг, ни имя', () => {
-    const { icon, name, flagSrc } = useClientCountry();
+  it('без кода не отдаёт ни флаг, ни обстоятельство места', () => {
+    const { icon, place, flagSrc } = useClientCountry();
 
     expect(icon.value).toBe('');
-    expect(name.value).toBe('');
+    expect(place.value).toBe('');
     expect(flagSrc.value).toBe('');
   });
 
   it('строит иконку и путь к флагу из кода', () => {
     setCode('ad');
-    setResolvedName('Andorra');
+    setPlace('в Андорре');
     const { icon, flagSrc } = useClientCountry();
 
     expect(icon.value).toBe('ad');
@@ -36,7 +37,7 @@ describe('useClientCountry', () => {
 
   it('нормализует код: регистр и пробелы', () => {
     setCode(' AD ');
-    setResolvedName('Andorra');
+    setPlace('в Андорре');
     const { icon, flagSrc } = useClientCountry();
 
     expect(icon.value).toBe('ad');
@@ -45,7 +46,7 @@ describe('useClientCountry', () => {
 
   it('учитывает страны, где код флага отличается от ISO-кода', () => {
     setCode('cn');
-    setResolvedName('China');
+    setPlace('в Китае');
     const { icon, flagSrc } = useClientCountry();
 
     expect(icon.value).toBe('zh');
@@ -53,19 +54,28 @@ describe('useClientCountry', () => {
   });
 
   it('не показывает флаг для служебного кода, которого нет в словаре', () => {
-    // Cloudflare отдаёт XX для неизвестного IP и T1 для Tor — файла такого флага нет
+    // Cloudflare отдаёт XX для неизвестного IP и T1 для Tor — файла такого флага нет.
+    // Реальность страны определяет непустой `place`: по Intl.DisplayNames не проверить,
+    // она вернёт `XX` как `XX`, а `US` в en-локали — как `US`
     setCode('xx');
-    const { icon, name, flagSrc } = useClientCountry();
+    const { icon, place, flagSrc } = useClientCountry();
 
     expect(icon.value).toBe('xx');
-    expect(name.value).toBe('');
+    expect(place.value).toBe('');
     expect(flagSrc.value).toBe('');
   });
 
-  it('имя следует за кодом и не может остаться от другой страны', async () => {
+  it('обстоятельство места берёт из состояния, поставленного SSR', () => {
+    setCode('cz');
+    setPlace('в Чехии');
+    const { place } = useClientCountry();
+
+    expect(place.value).toBe('в Чехии');
+  });
+
+  it('загруженный список стран флаг не ломает', async () => {
     setCode('ad');
-    // имя, доставшееся от предыдущей страны — именно этот рассинхрон ловим
-    setResolvedName('USA');
+    setPlace('в Андорре');
     getCountries.mockResolvedValue({
       countries: [
         { title: 'Andorra', isoCodes: ['AD', 'AND'] },
@@ -73,30 +83,20 @@ describe('useClientCountry', () => {
       ],
     });
 
-    const { name, flagSrc, loadCountries } = useClientCountry();
+    const { 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('выбор страны меняет и код, и имя', () => {
+  it('выбор страны меняет код и флаг', () => {
     setCode('ad');
-    setResolvedName('Andorra');
-    const { code, name, flagSrc, setCountry } = useClientCountry();
+    setPlace('в Андорре');
+    const { code, 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');
   });
 

package/composables/use-client-country.ts

@@ -7,17 +7,23 @@ const COOKIE_OPTS = { maxAge: 60 * 60 * 24 * 365, path: '/', secure: true, sameS
 
 /**
  * Единый источник страны клиента: ISO-код (гео-заголовок прокси или ручной выбор
- * в селекторе), иконка флага и локализованное имя.
+ * в селекторе), иконка флага и обстоятельство места для заголовков.
  *
- * Имя всегда резолвится ОТ ТЕКУЩЕГО кода — своего кеша у него нет. Раньше имя
- * лежало в отдельной куке `clientCountryName` рядом с парной `clientCountryNameCode`,
- * и пара могла разъехаться: заголовок писал одну страну, флаг и селектор показывали
- * другую (реальный кейс на проде: `clientCountryName=USA` при коде `ad`).
+ * Всё резолвится ОТ ТЕКУЩЕГО кода — своего кеша нет. Раньше имя страны лежало в отдельной
+ * куке `clientCountryName` рядом с парной `clientCountryNameCode`, и пара могла разъехаться:
+ * заголовок писал одну страну, флаг и селектор показывали другую (реальный кейс на проде:
+ * `clientCountryName=USA` при коде `ad`).
+ *
+ * Имени тут нет намеренно: именительный падеж один в один отдаёт `Intl.DisplayNames`, см.
+ * utils/iso-code-to-country-name.ts — потребитель зовёт её со своей локалью.
  */
 export const useClientCountry = () => {
   const code = useState<string>('clientCountryCode', () => '');
-  const resolvedName = useState<string>('clientCountryName', () => '');
   const countriesItems = useState<ISelectItem[]>('countriesItems', () => []);
+  // Обстоятельство места («в Чехии») ставит только SSR-плагин из lib/countries: косвенных
+  // падежей и артиклей в ECMA-402 нет. Ручной выбор страны в селекторе перезагружает
+  // страницу, поэтому клиенту словарь не нужен.
+  const place = useState<string>('clientCountryPlace', () => '');
   const codeCookie = useCookie<string | null>('clientCountryCode', COOKIE_OPTS);
 
   /** ISO-код → имя файла флага (у части стран код локали отличается от кода страны) */
@@ -28,22 +34,18 @@ export const useClientCountry = () => {
 
   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` : ''));
+  // Флаг только для страны, которая есть в словаре: гео-заголовок умеет присылать служебные
+  // коды (Cloudflare `XX` для неизвестного IP и `T1` для Tor, MaxMind `AP`) — файла такого
+  // флага нет, вышла бы битая картинка. Непустой `place` и есть этот признак: по
+  // `Intl.DisplayNames` не проверить, она вернёт `XX` как `XX`, а `US` в en-локали — как `US`.
+  const flagSrc = computed(() => (icon.value && place.value ? `/icons/flags/${icon.value}.svg` : ''));
 
-  /** Ручной выбор страны в селекторе: наружу переживает перезагрузку только код. */
+  /**
+   * Ручной выбор страны в селекторе: наружу переживает перезагрузку только код. `place`
+   * пересчитает следующий SSR — layout/language.vue тут же уходит в `location.href`.
+   */
   const setCountry = (item: ISelectItem) => {
     code.value = item.key || '';
-    resolvedName.value = item.title;
     codeCookie.value = code.value || null;
   };
 
@@ -69,5 +71,5 @@ export const useClientCountry = () => {
     }
   };
 
-  return { code, icon, name, flagSrc, countriesItems, setCountry, loadCountries };
+  return { code, icon, place, flagSrc, countriesItems, setCountry, loadCountries };
 };

package/lib/countries/__tests__/countries.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest';
+import { getCountryPlace } from '../index';
+import en from '../en.json';
+
+describe('getCountryPlace', () => {
+  it('отдаёт обстоятельство места с предлогом и падежом', async () => {
+    expect(await getCountryPlace('cz', 'ru')).toBe('в Чехии');
+    expect(await getCountryPlace('cu', 'ru')).toBe('на Кубе');
+    expect(await getCountryPlace('fr', 'ru')).toBe('во Франции');
+  });
+
+  it('учитывает артикли и сочленённые предлоги других локалей', async () => {
+    expect(await getCountryPlace('us', 'en')).toBe('in the United States');
+    expect(await getCountryPlace('ph', 'de')).toBe('auf den Philippinen');
+    expect(await getCountryPlace('us', 'it')).toBe('negli Stati Uniti');
+    expect(await getCountryPlace('us', 'fr')).toBe('aux États-Unis');
+  });
+
+  it('для локалей без предлога отдаёт именительный падеж — частица живёт в шаблоне', async () => {
+    expect(await getCountryPlace('cz', 'ja')).toBe('チェコ');
+    expect(await getCountryPlace('cz', 'ko')).toBe('체코');
+    expect(await getCountryPlace('cz', 'zh')).toBe('捷克');
+  });
+
+  it('нормализует код: регистр и пробелы', async () => {
+    expect(await getCountryPlace(' CZ ', 'ru')).toBe('в Чехии');
+  });
+
+  it('на пустом и служебном коде отдаёт пустую строку', async () => {
+    expect(await getCountryPlace('', 'ru')).toBe('');
+    // Cloudflare XX (неизвестный IP) и T1 (Tor), MaxMind AP — не ISO-страны
+    expect(await getCountryPlace('xx', 'ru')).toBe('');
+    expect(await getCountryPlace('t1', 'ru')).toBe('');
+    expect(await getCountryPlace('ap', 'ru')).toBe('');
+  });
+
+  it('неизвестную локаль резолвит английским словарём', async () => {
+    expect(await getCountryPlace('cz', 'pt')).toBe('in Czechia');
+  });
+
+  it('словари покрывают все локали одним набором кодов', async () => {
+    const codes = Object.keys(en).sort();
+
+    for (const locale of ['de', 'es', 'fr', 'it', 'ja', 'ko', 'ru', 'zh']) {
+      const { default: places } = await import(`../${locale}.json`);
+
+      expect(Object.keys(places).sort(), locale).toEqual(codes);
+    }
+  });
+
+  it('именительного падежа не держит — его отдаёт ICU один в один', async () => {
+    for (const locale of ['de', 'en', 'es', 'fr', 'it', 'ja', 'ko', 'ru', 'zh']) {
+      const { default: places } = await import(`../${locale}.json`);
+      const displayNames = new Intl.DisplayNames([locale], { type: 'region' });
+      const missing = Object.keys(places).filter(code => !displayNames.of(code.toUpperCase()));
+
+      expect(missing, locale).toEqual([]);
+    }
+  });
+});