itube-specs 0.0.994 → 0.0.996

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

@@ -814,19 +814,23 @@ $info-grid-item-warning: $color-red-400;
 $info-grid-item-icon: $color-zinc-400;
 $info-grid-plain-text: $color-zinc-400;
 
-// ─── Info (model) ───
-$info-border: $color-zinc-800-50;
-$info-bg: $color-zinc-900-50;
+// ─── Info ───
 $info-img-bg: $color-zinc-800;
 $info-img-border: $color-zinc-700;
 $info-description: $color-zinc-400;
-$info-parameters-border: $color-zinc-800-50;
-$info-parameters-text: $color-zinc-500;
-$info-parameters-text--hover: $color-zinc-300;
-$info-parameters-also: $color-zinc-400;
-$info-parameters-also-title: $color-zinc-500;
-$info-parameters-born: $color-zinc-400;
-$info-parameters-born-icon: $color-zinc-500;
+
+// ─── Info model ───
+$info-model-border: $color-zinc-800-50;
+$info-model-bg: $color-zinc-900-50;
+$info-model-img-bg: $color-zinc-800;
+$info-model-description: $color-zinc-400;
+$info-model-footer-border: $color-zinc-800-50;
+$info-model-more-text: $color-zinc-500;
+$info-model-more-text--hover: $color-zinc-300;
+$info-model-also: $color-zinc-400;
+$info-model-also-title: $color-zinc-500;
+$info-model-born: $color-zinc-400;
+$info-model-born-icon: $color-zinc-500;
 
 // ─── Info socials ───
 $info-socials-bg: $color-zinc-800;

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

@@ -15,6 +15,7 @@ $button-variant-overrides: (
   filter-reset: muted,
   playlist-button: secondary,
   info-button: secondary,
+  info-model-button: secondary,
   interface-button: secondary,
 );
 
@@ -840,19 +841,23 @@ $info-grid-item-warning: $color-red-400;
 $info-grid-item-icon: $color-gray-400;
 $info-grid-plain-text: $color-gray-600;
 
-// ─── Info (model) ───
-$info-border: transparent;
-$info-bg: $color-gray-200;
+// ─── Info ───
 $info-img-bg: $color-gray-300;
 $info-img-border: transparent;
 $info-description: $color-gray-600;
-$info-parameters-border: $color-gray-300;
-$info-parameters-text: $color-gray-600;
-$info-parameters-text--hover: $color-gray-600;
-$info-parameters-also: $color-gray-600;
-$info-parameters-also-title: $color-gray-600;
-$info-parameters-born: $color-gray-600;
-$info-parameters-born-icon: $color-gray-600;
+
+// ─── Info model ───
+$info-model-border: transparent;
+$info-model-bg: $color-gray-200;
+$info-model-img-bg: $color-gray-300;
+$info-model-description: $color-gray-600;
+$info-model-footer-border: $color-gray-300;
+$info-model-more-text: $color-gray-600;
+$info-model-more-text--hover: $color-gray-600;
+$info-model-also: $color-gray-600;
+$info-model-also-title: $color-gray-600;
+$info-model-born: $color-gray-600;
+$info-model-born-icon: $color-gray-600;
 
 // ─── Info socials ───
 $info-socials-bg: $color-white;

package/components/info/grid.vue

@@ -43,7 +43,7 @@
             >
               <!-- Флаг декоративный: страна названа в `value.title` ниже -->
               <img
-                v-if="item.name === 'nationality_iso_codes' && isoCodes"
+                v-if="item.name === 'nationality_iso_codes' && isoCodes?.[vIndex]"
                 :src="`/icons/flags/${isoCodes[vIndex]}.svg`"
                 class="info-grid__item-flag"
                 width="20"
@@ -71,7 +71,7 @@ import type { IGroupedParameter, IGroupedParameterItem } from '../../types';
 
 defineProps<{
   groups: IGroupedParameter[]
-  isoCodes?: string
+  isoCodes?: string[]
 }>();
 
 const PLAIN_GROUP_ITEM_NAMES = ['turnons'];

package/components/info/main.vue

@@ -1,11 +1,6 @@
-<!-- Инфо-карточка: аватар, заголовок, соцсети, описание, параметры -->
+<!-- Инфо-карточка канала/категории: аватар, заголовок, описание. Модель — `InfoModel` -->
 <template>
-  <div
-    :class="{
-      '--model': isModel,
-    }"
-    class="info-main"
-  >
+  <div class="info-main">
     <div
       :class="{
         '--img': card.img,
@@ -13,7 +8,7 @@
       class="info-main__content"
     >
       <UiImg
-        v-if="card.img || isModel"
+        v-if="card.img"
         :src="currentImage || placeholder"
         :avif-src="currentAvifSrc"
         :alt="title"
@@ -54,89 +49,19 @@
         </div>
       </div>
 
-      <InfoSocials
-        v-if="socialItems && socialItems.length > 0"
-        :items="socialItems"
-        :known-icons="knownIcons"
-        class="info-main__social"
-        icon-size="16"
-      />
-      <p
-        v-if="card.akaNames"
-        class="info-main__also"
-      >
-        <span class="info-main__also-title">{{ $t('also_known_as') }}&nbsp;</span>
-        <span class="info-main__also-text">{{ card.akaNames }}</span>
-      </p>
-      <p
-        v-if="card.birthSummary"
-        class="info-main__born"
-      >
-        <UiIcon
-          class="info-main__born-title-icon"
-          name="geo"
-          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="isoCodeToCountryName(item, locale)"
-          class="info-main__born-flag"
-          width="20"
-          height="14"
-        >
-      </p>
       <p
         v-if="cardDescription"
         class="info-main__description"
       >{{ cardDescription }}</p>
     </div>
 
-    <div
-      v-if="card.parameters && card.parameters.length > 0"
-      class="info-main__parameters"
-    >
-      <div
-        v-if="isParameterShow"
-        class="info-main__parameters-wrapper"
-      >
-        <InfoGrid
-          :groups="groupedParameters"
-          :iso-codes="card.nationalityIsoCodes"
-        />
-      </div>
-      <div class="info-main__parameters-wrapper">
-        <button
-          class="info-main__parameters-button"
-          type="button"
-          @click="showParameters"
-        >
-          {{ isParameterShow ? t('show_less') : t('show_more') }}
-          <UiIcon
-            :class="{'--more': isParameterShow}"
-            class="info-main__parameters-button-icon"
-            name="angle-down"
-            size="12"
-          />
-        </button>
-      </div>
-    </div>
-
     <ShareMain v-model="isShareOpen">
       <template
         v-if="type"
         #card
       >
-        <CardModelMini
-          v-if="isModel"
-          :card="shareModelCard"
-        />
         <CardChannelMini
-          v-else-if="type === 'channel'"
+          v-if="type === 'channel'"
           :card="shareChannelCard"
         />
         <CardCategoryMini
@@ -152,44 +77,27 @@
 import { AuthSteps } from '../../runtime';
 import type {
   ICardInfo,
-  IGroupedParameter,
-  ILinkItem,
-  IModelCard,
   IChannelCard,
   ICategoryCard
 } from '../../types';
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 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, locale } = useI18n();
+const { t } = useI18n();
 
 const props = defineProps<{
   card: ICardInfo
   title?: string
-  type?: 'model' | 'channel' | 'category'
+  type?: 'channel' | 'category'
   videosCount?: number
 }>();
 
-const groupedParameters = computed<IGroupedParameter[]>(() =>
-  groupParametersByGroup(props.card.parameters ?? []),
-);
-
-const isModel = computed(() => props.type === 'model');
-
 const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const isShareOpen = ref(false);
 
 const { isAuthorized } = useUser(AuthorizationApiService);
 const { openAuthPopup } = useAuthPopup();
-const isParameterShow = ref(false);
-
-function showParameters() {
-  isParameterShow.value = !isParameterShow.value;
-}
-
 const authPopupText = 'register_first';
 
 /** Заглушка вместо ручки подписки: состояние живёт только в компоненте, на бэк ничего не уходит */
@@ -203,53 +111,16 @@ function onFollowClick() {
   }
 }
 
-const placeholders: Record<string, string> = {
-  model: '/img/model-placeholder-square.webp',
-  channel: '/img/logo-placeholder.svg',
-};
-/** У канала заглушка — svg, avif-пары у неё нет. */
-const avifPlaceholders: Record<string, string | undefined> = {
-  model: '/img/model-placeholder-square.avif',
-};
-const placeholderType = computed(() => props.type || 'channel');
-const placeholder = computed(() => placeholders[ placeholderType.value ]);
+/** Заглушка — svg, avif-пары у неё нет. */
+const placeholder = '/img/logo-placeholder.svg';
 const imageError = ref(false);
 const isFallback = computed(() => imageError.value || !props.card.img);
-const currentImage = computed(() => (isFallback.value ? placeholder.value : props.card.img));
+const currentImage = computed(() => (isFallback.value ? placeholder : props.card.img));
 
 /** `.info-main__img` — 80px до sm, 96px дальше. `auto` впереди — см. `UiImg`. */
 const IMG_SIZES = `auto, (max-width: ${CSS_BREAKPOINTS.sm - 1}px) 80px, 96px`;
 
-const currentAvifSrc = computed(() => (
-  isFallback.value ? avifPlaceholders[ placeholderType.value ] : props.card.imgAvifUrl
-));
-
-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: shareCountry.value,
-  age: getParameter('age'),
-}));
+const currentAvifSrc = computed(() => (isFallback.value ? undefined : props.card.imgAvifUrl));
 
 const shareChannelCard = computed<IChannelCard>(() => ({
   guid: props.card.guid || '',
@@ -270,28 +141,12 @@ const shareCategoryCard = computed<ICategoryCard>(() => ({
   videosCount: props.card.videosCount,
 }));
 
-const knownIcons = ['facebook', 'instagram', 'tiktok', 'twitter', 'x', 'youtube', 'snapchat'];
-
 const cardDescription = computed(() => props.card?.description);
 
 const title = computed(() => props.title || props.card?.title);
-
-const socialItems = computed<ILinkItem[]>(() => {
-  return Object.entries(props.card?.social || {}).map(([key, value]: [string, string]) => ({
-    name: value,
-    title: key,
-    icon: key,
-  }));
-});
 </script>
 
 <style lang="scss">
-.info-main.--model {
-  border: 1px solid $info-border;
-  border-radius: $radius-xl;
-  background-color: $info-bg;
-}
-
 .info-main__content {
   display: grid;
   column-gap: 16px;
@@ -299,16 +154,6 @@ const socialItems = computed<ILinkItem[]>(() => {
   align-items: start;
 }
 
-.info-main.--model .info-main__content {
-  padding: 16px;
-  grid-template-columns: auto 1fr;
-
-  @include from-br(sm) {
-    padding: 20px;
-  }
-
-}
-
 .info-main__content.--img {
   grid-template-columns: auto 1fr;
 }
@@ -330,15 +175,10 @@ const socialItems = computed<ILinkItem[]>(() => {
 
     width: var(--size);
     height: var(--size);
-    grid-row: 1/6;
+    grid-row: 1/3;
   }
 }
 
-.info-main__wrapper {
-  display: grid;
-  align-content: start;
-}
-
 .info-main__header-wrapper {
   @include to-br(sm) {
     display: flex;
@@ -385,11 +225,6 @@ const socialItems = computed<ILinkItem[]>(() => {
   flex-shrink: 0;
 }
 
-.info-main__social {
-  margin-top: 8px;
-  grid-column: 2;
-}
-
 .info-main__description {
   @include font-sm;
 
@@ -402,95 +237,6 @@ const socialItems = computed<ILinkItem[]>(() => {
   }
 }
 
-.--avatar .info-main__description {
-  @include from-br(sm) {
-    grid-column: 2;
-  }
-}
-
-.info-main__parameters-wrapper {
-  padding: 20px;
-  border-top: 1px solid $info-parameters-border;
-
-  @include from-br(sm) {
-    grid-column: 1/-1;
-  }
-}
-
-.info-main__parameters-button {
-  @include font-sm;
-
-  display: flex;
-  margin: 0 auto;
-  align-items: center;
-  flex-wrap: nowrap;
-  column-gap: 4px;
-  color: $info-parameters-text;
-
-  @include hover(color) {
-    color: $info-parameters-text--hover;
-  }
-}
-
-.info-main__parameters-button-icon {
-  transition: var(--transition) transform;
-}
-
-.info-main__parameters-button-icon.--more {
-  transform: rotate(180deg);
-}
-
-.info-main__also {
-  @include font-sm;
-
-  color: $info-parameters-also;
-  margin-top: 16px;
-
-  @include to-br(sm) {
-    grid-column: 1/-1;
-  }
-}
-
-.info-main__also-title {
-  color: $info-parameters-also-title;
-}
-
-.info-main__born {
-  @include font-sm;
-
-  color: $info-parameters-born;
-  margin-top: 8px;
-
-  @include to-br(sm) {
-    grid-column: 1/-1;
-  }
-}
-
-.info-main__born-title {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  column-gap: 6px;
-}
-
-.info-main__born-title-icon {
-  display: inline-block;
-  margin-right: 6px;
-  color: $info-parameters-born-icon;
-  vertical-align: middle;
-}
-
-.info-main__born-text {
-  display: inline;
-  vertical-align: middle;
-}
-
-.info-main__born-flag {
-  display: inline;
-  margin-left: 6px;
-  vertical-align: middle;
-}
-
 .info-main__header-button {
   @include button-variant(info-button);
 }

package/components/info/model.vue

@@ -0,0 +1,475 @@
+<!-- Инфо-карточка модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, параметры с «Show more» -->
+<template>
+  <section class="info-model">
+    <div class="info-model__content">
+      <div class="info-model__aside">
+        <UiImg
+          :src="currentImage"
+          :avif-src="currentAvifSrc"
+          :alt="card.title"
+          :sizes="IMG_SIZES"
+          class="info-model__img"
+          width="240"
+          height="320"
+          priority
+          @error="imageError = true"
+        />
+        <p
+          v-if="card.akaNames"
+          class="info-model__also"
+        >
+          <span class="info-model__also-title">{{ t('also_known_as') }}&nbsp;</span>
+          <span class="info-model__also-text">{{ card.akaNames }}</span>
+        </p>
+        <InfoSocials
+          v-if="socialItems.length > 0"
+          :items="socialItems"
+          :known-icons="KNOWN_ICONS"
+          class="info-model__social"
+          icon-size="16"
+        />
+      </div>
+
+      <header class="info-model__header">
+        <h1 class="info-model__title">{{ card.title }}</h1>
+        <div class="info-model__actions">
+          <UiCount
+            class="info-model__count"
+            icon="video-camera"
+          >{{ $n(videosCount || card.videosCount, 'compact') }}</UiCount>
+          <UiBtn
+            :aria-label="t('share')"
+            :title="t('share')"
+            theme="muted"
+            size="s"
+            class="info-model__share"
+            @click="isShareOpen = true"
+          >
+            <UiIcon
+              name="share"
+              size="16"
+            />
+            <span class="info-model__share-text">{{ t('share') }}</span>
+          </UiBtn>
+          <UiFollowBtn
+            v-if="featureFlags.FeatureFollowEnabled"
+            :following="isFollowing"
+            :name="card.title"
+            class="info-model__follow"
+            size="s"
+            @toggle="onFollowClick"
+          />
+        </div>
+      </header>
+
+      <p
+        v-if="card.birthSummary"
+        class="info-model__born"
+      >
+        <UiIcon
+          class="info-model__born-icon"
+          name="geo"
+          size="14"
+        />
+        <span class="info-model__born-text">{{ card.birthSummary }}</span>
+        <!-- Национальность нигде больше не подписана — флаг единственный её носитель,
+        поэтому в `alt` идёт название страны, а не ISO-код. -->
+        <img
+          v-for="(item, index) in card.nationalityIsoCodes"
+          :key="`nationalityIsoCodes-${index}`"
+          :src="`/icons/flags/${item}.svg`"
+          :alt="isoCodeToCountryName(item, locale)"
+          class="info-model__born-flag"
+          width="20"
+          height="14"
+        >
+      </p>
+
+      <p
+        v-if="card.description"
+        :class="{'_truncate': !isExpanded}"
+        class="info-model__description"
+      >{{ card.description }}</p>
+
+      <InfoGrid
+        v-if="mainGroups.length > 0"
+        :groups="mainGroups"
+        :iso-codes="card.nationalityIsoCodes"
+        class="info-model__parameters"
+      />
+
+      <InfoGrid
+        v-if="extraGroups.length > 0"
+        :class="{'--collapsed': !isExpanded}"
+        :groups="extraGroups"
+        :iso-codes="card.nationalityIsoCodes"
+        class="info-model__parameters-extra"
+      />
+    </div>
+
+    <footer
+      v-if="hasMore"
+      class="info-model__footer"
+    >
+      <button
+        :aria-expanded="isExpanded"
+        class="info-model__more"
+        type="button"
+        @click="isExpanded = !isExpanded"
+      >
+        {{ isExpanded ? t('show_less') : t('show_more') }}
+        <UiIcon
+          :class="{'--expanded': isExpanded}"
+          class="info-model__more-icon"
+          name="angle-down"
+          size="12"
+        />
+      </button>
+    </footer>
+
+    <ShareMain v-model="isShareOpen">
+      <template #card>
+        <CardModelMini :card="shareModelCard"/>
+      </template>
+    </ShareMain>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { AuthSteps } from '../../runtime';
+import type { ICardInfo, IGroupedParameter, ILinkItem, IModelCard } from '../../types';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
+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 props = defineProps<{
+  card: ICardInfo
+  videosCount?: number
+}>();
+
+const { t, locale } = useI18n();
+
+const featureFlags = useRuntimeConfig().public.featureFlags;
+
+const KNOWN_ICONS = ['facebook', 'instagram', 'tiktok', 'twitter', 'x', 'youtube', 'snapchat'];
+
+const PLACEHOLDER = '/img/model-placeholder-portrait.webp';
+const PLACEHOLDER_AVIF = '/img/model-placeholder-portrait.avif';
+
+/** `.info-model__img` — 160px до sm, 240px дальше. `auto` впереди — см. `UiImg`. */
+const IMG_SIZES = `auto, (max-width: ${CSS_BREAKPOINTS.sm - 1}px) 160px, 240px`;
+
+const imageError = ref(false);
+const isFallback = computed(() => imageError.value || !props.card.portraitImg);
+const currentImage = computed(() => (isFallback.value ? PLACEHOLDER : props.card.portraitImg));
+const currentAvifSrc = computed(() => (isFallback.value ? PLACEHOLDER_AVIF : props.card.portraitAvifUrl));
+
+const socialItems = computed<ILinkItem[]>(() => (
+  Object.entries(props.card.social || {}).map(([key, value]) => ({
+    name: value || '',
+    title: key,
+    icon: key,
+  }))
+));
+
+const groupedParameters = computed<IGroupedParameter[]>(() =>
+  groupParametersByGroup(props.card.parameters ?? []),
+);
+
+/** Первая группа видна всегда; вторая свёрнутой видна только с sm, остальные — после «Show more». */
+const mainGroups = computed(() => groupedParameters.value.slice(0, 1));
+
+const isExpanded = ref(false);
+
+const extraGroups = computed(() => (
+  isExpanded.value ? groupedParameters.value.slice(1) : groupedParameters.value.slice(1, 2)
+));
+
+const hasMore = computed(() => groupedParameters.value.length > 1 || Boolean(props.card.description));
+
+const isShareOpen = ref(false);
+
+const { isAuthorized } = useUser(AuthorizationApiService);
+const { openAuthPopup } = useAuthPopup();
+
+/** Заглушка вместо ручки подписки: состояние живёт только в компоненте, на бэк ничего не уходит */
+const isFollowing = ref(false);
+
+function onFollowClick() {
+  if (isAuthorized.value) {
+    isFollowing.value = !isFollowing.value;
+  } else {
+    openAuthPopup(AuthSteps.Login, 'register_first');
+  }
+}
+
+function getParameter(name: string) {
+  return props.card.parameters?.find(p => p.name === name)?.values?.[ 0 ]?.name;
+}
+
+/**
+ * `IModelCard.country` — пара «код файла флага + читаемое имя», как её отдаёт
+ * cleanModelCard. Берём первый код: у модели с двумя национальностями целый массив дал бы
+ * путь `/icons/flags/us,gb.svg`, а пустой массив — битую картинку.
+ */
+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: shareCountry.value,
+  age: getParameter('age'),
+}));
+</script>
+
+<style lang="scss">
+.info-model {
+  border: 1px solid $info-model-border;
+  border-radius: $radius-xl;
+  background-color: $info-model-bg;
+}
+
+.info-model__content {
+  display: grid;
+  grid-template-columns: 160px minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    'aside header'
+    'aside parameters'
+    'born born'
+    'description description'
+    'extra extra';
+  column-gap: 16px;
+  padding: 16px;
+
+  @include from-br(sm) {
+    grid-template-columns: 240px minmax(0, 1fr);
+    grid-template-rows: auto auto auto auto 1fr;
+    grid-template-areas:
+      'aside header'
+      'aside born'
+      'aside description'
+      'aside parameters'
+      'aside extra';
+    padding: 20px;
+  }
+}
+
+.info-model__aside {
+  grid-area: aside;
+  align-self: start;
+}
+
+.info-model__img {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 3/4;
+  border-radius: $radius-lg;
+  object-fit: cover;
+  background-color: $info-model-img-bg;
+}
+
+.info-model__also {
+  @include font-xs;
+
+  margin-top: 8px;
+  color: $info-model-also;
+  line-height: 1.625;
+
+  @include from-br(sm) {
+    @include font-sm;
+
+    line-height: 1.625;
+  }
+}
+
+.info-model__also-title {
+  color: $info-model-also-title;
+}
+
+.info-model__social {
+  margin-top: 8px;
+
+  @include from-br(sm) {
+    margin-top: 12px;
+  }
+}
+
+.info-model__header {
+  display: grid;
+  grid-area: header;
+  row-gap: 8px;
+  margin-bottom: 8px;
+
+  @include from-br(sm) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 12px;
+  }
+}
+
+.info-model__title {
+  @include font-base;
+
+  min-width: 0;
+  font-weight: 700;
+  line-height: 1.25;
+  text-transform: uppercase;
+  overflow-wrap: break-word;
+
+  @include from-br(sm) {
+    @include font-lg;
+  }
+}
+
+.info-model__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  @include from-br(sm) {
+    display: contents;
+  }
+}
+
+.info-model__count {
+  padding: 7px 12px;
+  flex-shrink: 0;
+}
+
+.info-model__share {
+  @include button-variant(info-model-button);
+
+  @include to-br(sm) {
+    width: 36px;
+    padding: 0;
+  }
+}
+
+.info-model__share-text {
+  @include to-br(sm) {
+    display: none;
+  }
+}
+
+.info-model__follow {
+  margin-inline-start: auto;
+}
+
+.info-model__born {
+  @include font-sm;
+
+  grid-area: born;
+  margin-top: 20px;
+  color: $info-model-born;
+
+  @include from-br(sm) {
+    margin-top: 0;
+    margin-bottom: 12px;
+  }
+}
+
+.info-model__born-icon {
+  display: inline-block;
+  margin-right: 6px;
+  color: $info-model-born-icon;
+  vertical-align: middle;
+}
+
+.info-model__born-text {
+  vertical-align: middle;
+}
+
+.info-model__born-flag {
+  display: inline;
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
+.info-model__description {
+  @include font-sm;
+
+  --line-clamp: 2;
+
+  grid-area: description;
+  margin-top: 16px;
+  line-height: 1.625;
+  color: $info-model-description;
+
+  @include from-br(sm) {
+    margin-top: 0;
+  }
+}
+
+.info-model__parameters {
+  grid-area: parameters;
+  align-self: start;
+  margin-top: 16px;
+
+  @include from-br(sm) {
+    margin-top: 20px;
+  }
+}
+
+.info-model__parameters .info-grid__item-title {
+  @include to-br(sm) {
+    display: none;
+  }
+}
+
+.info-model__parameters .info-grid__item:not(.--link) .info-grid__item-value {
+  @include to-br(sm) {
+    border-left: none;
+  }
+}
+
+.info-model__parameters-extra {
+  grid-area: extra;
+  margin-top: 20px;
+}
+
+.info-model__parameters-extra.--collapsed {
+  @include to-br(sm) {
+    display: none;
+  }
+}
+
+.info-model__footer {
+  display: flex;
+  justify-content: center;
+  padding: 12px 20px;
+  border-top: 1px solid $info-model-footer-border;
+}
+
+.info-model__more {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+  color: $info-model-more-text;
+
+  @include hover(color) {
+    color: $info-model-more-text--hover;
+  }
+}
+
+.info-model__more-icon {
+  transition: var(--transition) transform;
+}
+
+.info-model__more-icon.--expanded {
+  transform: rotate(180deg);
+}
+</style>

package/components/view/model-videos.vue

@@ -1,14 +1,12 @@
 <!-- Страница видео модели: инфо, теги, грид видео, пагинация, похожие -->
 <template>
   <div class="view-model-videos _page _container">
-    <InfoMain
+    <InfoModel
       v-if="cardInfo && isFirstPage && !isFilteredPage"
       :key="`info-${cardInfo.title}`"
       :card="cardInfo"
-      :title="title"
       :videos-count="infoVideosCount"
       class="view-model-videos__info"
-      type="model"
     />
 
     <UiSectionTitle

package/package.json

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

package/runtime/utils/cleaners/__tests__/clean-model-info.test.ts

@@ -9,7 +9,12 @@ describe('cleanModelInfo', () => {
       social: '@model',
       videos_count: 50,
       video_thumb_urls: { webp: { '320x180': 'https://img.com/s.webp' } },
-      portraits: { dark: { square: { width: 256, height: 256, webp: 'https://cdn/sq.webp', avif: 'https://cdn/sq.avif' } } },
+      portraits: {
+        dark: {
+          square: { width: 256, height: 256, webp: 'https://cdn/sq.webp', avif: 'https://cdn/sq.avif' },
+          tall: { width: 480, height: 640, webp: 'https://cdn/tall.webp', avif: 'https://cdn/tall.avif' },
+        },
+      },
       parameters: 'height: 170',
       long_description: 'long desc',
       bio: 'bio text',
@@ -31,6 +36,8 @@ describe('cleanModelInfo', () => {
     expect(result.videosCount).toBe(50);
     expect(result.img).toBe('https://cdn/sq.webp');
     expect(result.imgAvifUrl).toBe('https://cdn/sq.avif');
+    expect(result.portraitImg).toBe('https://cdn/tall.webp');
+    expect(result.portraitAvifUrl).toBe('https://cdn/tall.avif');
     expect(result.parameters).toBe('height: 170');
     expect(result.fullDescription).toBe('long desc');
     expect(result.relatedNames).toEqual(['Model B']);
@@ -52,6 +59,7 @@ describe('cleanModelInfo', () => {
     expect(result.social).toBeUndefined();
     expect(result.videosCount).toBe(0);
     expect(result.img).toBe('');
+    expect(result.portraitImg).toBe('');
     expect(result.parameters).toEqual([]);
     expect(result.fullDescription).toBe('');
     expect(result.relatedNames).toEqual([]);

package/runtime/utils/cleaners/clean-model-info.ts

@@ -3,7 +3,7 @@ import { pickPortraitVariant } from '../pick-portrait-variant';
 
 /** Нормализует сырые данные страницы модели к типу ICardInfo. */
 export const cleanModelInfo = (card: IRawModelInfo, theme?: string): ICardInfo => {
-  // В шапке страницы аватар круглый, поэтому берём квадратный кроп.
+  // `tall` — в шапку страницы, `square` — в мини-карточку шаринга и круглые аватары.
   const portrait = pickPortraitVariant(card.portraits, theme);
 
   return {
@@ -13,6 +13,8 @@ export const cleanModelInfo = (card: IRawModelInfo, theme?: string): ICardInfo =
     videosCount: card.videos_count || 0,
     img: portrait?.square?.webp || '',
     imgAvifUrl: portrait?.square?.avif,
+    portraitImg: portrait?.tall?.webp || '',
+    portraitAvifUrl: portrait?.tall?.avif,
     parameters: card.parameters || [],
     fullDescription: card.long_description || '',
     relatedNames: card.relatedNames || [],

package/types/card-info.d.ts

@@ -24,6 +24,9 @@ export interface ICardInfo {
   social?: {
     [key: string]: string | undefined;
   };
+  /** Портретный кроп 3:4 для шапки страницы модели; `img` остаётся квадратным. */
+  portraitImg?: string;
+  portraitAvifUrl?: string;
   parameters?: IParameterModel[]
   relatedNames?: string[]
   akaNames: string;