itube-specs 0.0.896 → 0.0.898

package/components/layout/notifications.vue

@@ -0,0 +1,79 @@
+<!-- Колокольчик уведомлений в шапке: ссылка на подписки + счётчик обновлений. Данные пока заглушка -->
+<template>
+  <NuxtLink
+    :to="generateLink('/following')"
+    :aria-label="t('notifications')"
+    :title="t('notifications')"
+    class="layout-notifications"
+  >
+    <UiIcon
+      class="layout-notifications__icon"
+      name="bell"
+      size="24"
+    />
+    <span
+      v-if="count > 0"
+      class="layout-notifications__badge"
+    >{{ badge }}</span>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import { getFollowingUpdatesTotal } from '../../stubs/library-follows';
+
+const MAX_COUNT = 99;
+
+const { t } = useI18n();
+const { generateLink } = useGenerateLink();
+
+const count = computed(() => getFollowingUpdatesTotal());
+
+const badge = computed(() => count.value > MAX_COUNT ? `${MAX_COUNT}+` : `${count.value}`);
+</script>
+
+<style lang="scss">
+/* Бейдж лежит в потоке и наезжает на иконку отрицательным отступом: разряды уходят
+   вправо, растягивая контрол. Место под «99+» не резервируется, а зазор от края
+   бейджа до соседа в шапке одинаков при любом числе — его держит $badge-inset. */
+$padding: 8px;
+$badge-inset: 2px;
+$badge-overlap: 10px;
+$badge-raise: 6px;
+
+.layout-notifications {
+  display: inline-flex;
+  align-items: center;
+  padding: $padding $badge-inset $padding $padding;
+  color: $notifications-icon;
+
+  /* На мобиле это такой же тап-контрол, как бургер рядом */
+  @include to-br(sm) {
+    color: $notifications-icon--mobile;
+  }
+
+  @include hover(color) {
+    color: $notifications-icon--hover;
+  }
+}
+
+.layout-notifications__badge {
+  @include font-4xs;
+
+  /* Левым краем на верхний правый угол иконки, дальше растёт вправо */
+  position: relative;
+  z-index: $z-index-plus;
+  display: grid;
+  place-content: center;
+  align-self: flex-start;
+  min-width: 16px;
+  height: 16px;
+  margin-top: -$badge-raise;
+  margin-left: -$badge-overlap;
+  padding-inline: 4px;
+  font-weight: 700;
+  color: $notifications-badge-text;
+  background-color: $notifications-badge-bg;
+  border-radius: $radius-full;
+  box-shadow: 0 0 0 2px $notifications-badge-ring;
+}
+</style>

package/components/section/swiper-cards.vue

@@ -1,13 +1,29 @@
 <!-- Горизонтальный свайпер аватаров моделей с заголовком и ссылкой «все» -->
 <template>
   <section class="section-swiper-cards">
-    <UiSectionTitle
-      :title="title || t('top_models')"
-      :count="items.length"
-      class="section-swiper-cards__title"
-      icon="user"
-      title-tag="h2"
-    />
+    <header class="section-swiper-cards__header">
+      <UiSectionTitle
+        :title="title || t('top_models')"
+        :count="count ?? items.length"
+        :icon="icon"
+        class="section-swiper-cards__title"
+        title-tag="h2"
+      />
+
+      <!-- На мобиле плитки «все» в ленте нет, поэтому ссылка вынесена в шапку -->
+      <UiLink
+        v-if="allLink"
+        :to="generateLink(allLink)"
+        class="section-swiper-cards__link _to-sm"
+        theme="simple"
+      >
+        {{ headerLinkText ?? allLinkText }}
+        <UiIcon
+          name="arrow-right"
+          size="16"
+        />
+      </UiLink>
+    </header>
     <div class="section-swiper-cards__grid">
       <UiSwiper
         :items="items"
@@ -17,6 +33,7 @@
           <CardRound
             :card="item"
             :placeholder-avatar="placeholderAvatar"
+            :without-count="withoutCount"
             class="section-swiper-cards__card"
           />
         </template>
@@ -24,11 +41,12 @@
           v-if="allLink"
           #append
         >
-          <NuxtLink
-            :to="generateLink(allLink ?? '/')"
-            class="section-swiper-cards__all"
-          >{{ allLinkText }}
-          </NuxtLink>
+          <UiViewAll
+            :to="allLink ?? '/'"
+            :text="allLinkText ?? ''"
+            :note="allLinkNote"
+            mini
+          />
         </template>
       </UiSwiper>
     </div>
@@ -38,14 +56,25 @@
 <script setup lang="ts">
 import type { IRoundCard } from '../../types';
 
-defineProps<{
+withDefaults(defineProps<{
   items: IRoundCard[]
   onlyGrid?: boolean
   allLink?: string
   allLinkText?: string
+  /** Вторая строка в плитке «все» — «16 models» */
+  allLinkNote?: string
+  /** Подпись ссылки в шапке («All models»); по умолчанию — как в плитке */
+  headerLinkText?: string
   title?: string
+  /** Счётчик в шапке; по умолчанию — число карточек */
+  count?: string | number
+  icon?: string
   placeholderAvatar?: string
-}>();
+  /** Карточки только с аватаром и названием, без счётчика роликов */
+  withoutCount?: boolean
+}>(), {
+  icon: 'user'
+});
 
 const { t } = useI18n();
 const { generateLink } = useGenerateLink();
@@ -58,12 +87,22 @@ const { generateLink } = useGenerateLink();
   min-width: 0;
 }
 
+.section-swiper-cards__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  margin-bottom: 16px;
+}
+
+/* text-transform здесь не нужен: капс и трекинг заголовку даёт его собственный
+   `._title`, а на корне он красил заодно и чип счётчика («6 UPDATES»). */
 .section-swiper-cards__title {
   @include font-lg;
+}
 
-  margin-bottom: 16px;
-  text-transform: uppercase;
-  letter-spacing: var(--tracking-wide);
+.section-swiper-cards__link {
+  flex-shrink: 0;
 }
 
 .section-swiper-cards .section-swiper-cards__card {
@@ -74,24 +113,16 @@ const { generateLink } = useGenerateLink();
   min-width: 0;
 }
 
-.section-swiper-cards__all {
-  @include font-sm;
-
-  display: grid;
-  place-content: center;
-  width: $card-round-size;
-  height: $card-round-size;
-  aspect-ratio: 1/1;
-  border-radius: $radius-full;
-  object-fit: cover;
-  border: 2px solid $card-round-border;
-  background-color: $card-round-all-bg;
-  color: $card-round-all-text;
-  text-align: center;
+/* Слайд ровно по круглой карточке: 80px на мобиле, 96px с sm */
+.section-swiper-cards .ui-swiper__slide {
+  width: var(--card-round-size);
+}
 
-  @include hover(border-color, background-color) {
-    border-color: $card-round-border--hover;
-    background-color: $card-round-all-bg--hover;
+/* Плитка «все» — только с sm, на мобиле её роль играет ссылка в шапке */
+.section-swiper-cards .ui-swiper__slide--append {
+  @include to-br(sm) {
+    display: none;
   }
 }
+
 </style>

package/components/ui/btn.vue

@@ -161,4 +161,19 @@ const slotText = computed(() => {
     background-color: var(--button-bg--hover, #{$button-warning-bg--hover});
   }
 }
+
+/* Без подложки, рамки и паддингов — обычная текстовая ссылка с иконкой */
+.ui-btn.--simple {
+  min-height: 0;
+  padding: 0;
+  column-gap: 4px;
+  color: var(--button-text, #{$button-simple-text});
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 0;
+
+  @include hover(color) {
+    color: var(--button-text--hover, #{$button-simple-text--hover});
+  }
+}
 </style>

package/components/ui/popup.vue

@@ -313,10 +313,6 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
 .ui-popup__footer {
   padding: 16px 20px;
   border-top: 1px solid $popup-footer-border;
-
-  @include from-br(sm) {
-    padding: 16px 24px;
-  }
 }
 
 .ui-popup[open].--drawer {

package/components/ui/swiper.vue

@@ -97,6 +97,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+/* Запас под ring ховера карточек: у трека overflow-x: auto, а значит по спецификации
+   и overflow-y становится auto — без запаса тень обрезается по всем краям. */
+$ring-room: 4px;
+
 .ui-swiper {
   position: relative;
 
@@ -113,8 +117,13 @@ onMounted(() => {
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
+  padding-block: $ring-room;
   padding-inline: var(--container-padding-inline);
 
+  /* Без scroll-padding mandatory-снап считает точкой привязки сам край скроллпорта
+     и на старте подтягивает первую карточку под padding — она липнет к краю вьюпорта. */
+  scroll-padding-inline: var(--container-padding-inline);
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -123,9 +132,12 @@ onMounted(() => {
     gap: 8px;
   }
 
+  /* Отрицательный margin гасит боковой запас, чтобы первая карточка осталась по краю */
   @include from-br(sm) {
     gap: 16px;
-    padding-inline: 0;
+    padding-inline: $ring-room;
+    scroll-padding-inline: $ring-room;
+    margin-inline: -$ring-room;
   }
 }
 
@@ -144,7 +156,7 @@ $nav-gap: 4px;
     $size: 40px;
 
     position: absolute;
-    top: calc(var(--slide-width) / 2);
+    top: calc(var(--slide-width) / 2 + #{$ring-room});
     transform: translateY(-50%);
     z-index: calc($z-index-plus + 2);
     display: grid;
@@ -165,15 +177,18 @@ $nav-gap: 4px;
       background-color: $swiper-nav-bg--hover;
     }
 
+    /* Трек вылезает за .ui-swiper на $ring-room, поэтому градиент уводим на
+       ($nav-gap + $ring-room) — иначе между затемнением и краем свайпера
+       остаётся полоска непокрытых карточек. */
     &::before {
       position: absolute;
       content: '';
       top: 50%;
-      right: $nav-gap * -1;
+      right: -($nav-gap + $ring-room);
       transform: translateY(-50%);
       display: block;
       width: 64px;
-      height: var(--slide-width);
+      height: calc(var(--slide-width) + #{$ring-room * 2});
       background: linear-gradient(270deg, $swiper-fade 0%, $swiper-fade-end 100%);
     }
 

package/components/ui/view-all.vue

@@ -0,0 +1,113 @@
+<!-- Плитка-ссылка «смотреть все» в конце ленты: точечная текстура, стрелка и подпись. mini — круглая, под свайпер аватаров -->
+<template>
+  <NuxtLink
+    :class="{'--mini': mini}"
+    :to="generateLink(to)"
+    class="ui-view-all"
+  >
+    <span
+      v-if="!mini"
+      class="ui-view-all__icon"
+    >
+      <UiIcon
+        name="arrow-right"
+        size="20"
+      />
+    </span>
+
+    <span class="ui-view-all__content">
+      <span class="ui-view-all__text">{{ text }}</span>
+      <span
+        v-if="note"
+        class="ui-view-all__note"
+      >{{ note }}</span>
+    </span>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  to: string
+  text: string
+  /** Вторая строка: «16 models» */
+  note?: string
+  /** Круглый вариант в размер аватар-карточки — для свайпера */
+  mini?: boolean
+}>();
+
+const { generateLink } = useGenerateLink();
+</script>
+
+<style lang="scss">
+.ui-view-all {
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  row-gap: 12px;
+  padding: 12px;
+  text-align: center;
+  border: 1px solid $view-all-border;
+  border-radius: $radius-xl;
+
+  /* точки поверх градиента — двумя слоями, без отдельной ноды-оверлея */
+  background-image:
+    radial-gradient(circle, $view-all-dots 1px, transparent 1px),
+    linear-gradient(to bottom right in oklab, $view-all-gradient-from, $view-all-gradient-via, $view-all-gradient-to);
+  background-size: 14px 14px, cover;
+
+  @include hover(border-color) {
+    border-color: $view-all-border--hover;
+  }
+}
+
+.ui-view-all__icon {
+  display: grid;
+  place-content: center;
+  width: 40px;
+  height: 40px;
+  color: $view-all-icon;
+  background-color: $view-all-icon-bg;
+  border: 1px solid $view-all-icon-border;
+  border-radius: $radius-full;
+}
+
+.ui-view-all__content {
+  display: grid;
+  row-gap: 2px;
+}
+
+.ui-view-all__text {
+  @include font-sm;
+
+  font-weight: 600;
+  color: $view-all-text;
+}
+
+.ui-view-all__note {
+  @include font-xs;
+
+  color: $view-all-note;
+}
+
+.ui-view-all.--mini {
+  width: var(--card-round-size);
+  height: var(--card-round-size);
+  padding: 8px;
+  row-gap: 0;
+  border-width: 2px;
+  border-color: $card-round-border;
+  border-radius: $radius-full;
+  background-size: 12px 12px, cover;
+
+  @include hover(border-color) {
+    border-color: $card-round-border--hover;
+  }
+}
+
+.ui-view-all.--mini .ui-view-all__text,
+.ui-view-all.--mini .ui-view-all__note {
+  @include font-xs;
+
+  line-height: 1.2;
+}
+</style>

package/composables/use-meta.ts

@@ -1,9 +1,27 @@
-import { computed, unref } from 'vue';
-import type { Ref } from 'vue';
+import { computed, toValue } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
 import { useRoute } from 'vue-router';
-import type { INavLinkItem } from '../types';
+import type { INavLinkItem, IPageSeo } from '../types';
 
-type MetaOptions = {
+type MetaText = MaybeRefOrGetter<string | undefined>;
+
+type MetaParams = {
+  /** функция перевода (i18n) */
+  t: (key: string, params?: Record<string, unknown>) => string
+  /** ключ страницы в `meta.*` (например 'videos', 'models') */
+  pageKey: string
+  /** название бренда для подстановки в мета */
+  brandName: string
+  /** опции сортировки — задают уровень `meta.<page>.<sort>.*` в ключах */
+  sortOptions?: INavLinkItem[]
+  /** подстановка `{text}` — основной текст (slug, имя и т.д.) */
+  text?: MetaText
+  /** подстановка `{secondText}` */
+  secondText?: MetaText
+  /** подстановка `{thirdText}` */
+  thirdText?: MetaText
+  /** подстановка `{fourText}` */
+  fourthText?: MetaText
   /**
    * Подменяет i18n-ключ заголовка (по умолчанию 'h1') — вызывается с фактической
    * сортировкой, потому что варианты заголовка есть не у каждой из них.
@@ -11,21 +29,19 @@ type MetaOptions = {
    * висячий предлог (`… Videos in ` без страны).
    */
   h1Key?: (sortType: string) => string
+  /**
+   * Мета от API (поле `seo` в ответе листинга). Каждое непустое поле перебивает
+   * свой i18n-шаблон; чего API не отдал — остаётся на i18n. Бренд бэкенд уже
+   * подставляет сам, а номер страницы — нет, поэтому суффикс пагинации
+   * дописываем здесь.
+   */
+  seo?: MaybeRefOrGetter<IPageSeo | null | undefined>
 };
 
 /**
 * Генерирует реактивные meta (title, description) и h1 с учётом сортировки, страницы и i18n-ключей.
-* @param t - функция перевода (i18n)
-* @param page - ключ страницы для i18n (например 'videos', 'models')
-* @param brandName - название бренда для подстановки в мета
-* @param sortOptions - опции сортировки (если есть)
-* @param text - основной текст (slug, имя и т.д.)
-* @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?: INavLinkItem[], text?: Ref<string>, secondText?: Ref<string>, thirdText?: Ref<string>, fourthText?: Ref<string>, options?: MetaOptions) {
+export function useMeta({ t, pageKey, brandName, sortOptions, text, secondText, thirdText, fourthText, h1Key, seo }: MetaParams) {
   const route = useRoute();
 
   const sortType = computed(() => {
@@ -36,37 +52,60 @@ export function useMeta(t: (key: string, params?: Record<string, unknown>) => st
     return queryValue && values?.includes(queryValue) ? queryValue : defaultValue;
   });
 
+  const pageSuffix = computed(() => {
+    const pageNumber = route.query?.['page'] ? Number(route.query['page']) : 1;
+    return pageNumber === 1 ? '' : ` ${t('page')} ${pageNumber}`;
+  });
+
   function getPath(key: string) {
-    const plainSlug = unref(text);
-    const secondTextValue = unref(secondText);
-    const thirdTextValue = unref(thirdText);
-    const fourTextValue = unref(fourthText);
-    const pageNumber = computed(() => route.query?.['page'] ? Number(route.query['page']) : 1);
-    const pageText = unref(pageNumber) === 1 ? null : ` ${t('page')} ${unref(pageNumber)}`;
+    const pageText = pageSuffix.value;
 
     return t(
-      `meta.${page}.${sortOptions && sortOptions.length > 0 ? `${sortType.value}.` : ''}${key}`,
+      `meta.${pageKey}.${sortOptions && sortOptions.length > 0 ? `${sortType.value}.` : ''}${key}`,
       {
-        text: plainSlug,
-        secondText: secondTextValue,
-        thirdText: thirdTextValue,
-        fourText: fourTextValue,
+        text: toValue(text),
+        secondText: toValue(secondText),
+        thirdText: toValue(thirdText),
+        fourText: toValue(fourthText),
         brandName: `| ${brandName}`, //черточка '|' нужна обязательно
         page: pageText,
       }
     );
   }
 
-  const metaTitle = computed(() => getPath('title'));
-  const h1 = computed(() => getPath(options?.h1Key?.(sortType.value) || 'h1'));
+  const apiSeo = computed(() => toValue(seo) || null);
+
+  /**
+   * Дописывает « Page N» так же, как это делают i18n-шаблоны — перед брендом,
+   * который бэкенд уже приклеил через `|`.
+   */
+  function withPageSuffix(value: string) {
+    const suffix = pageSuffix.value;
+    if (!suffix) return value;
+
+    const brandIndex = value.lastIndexOf(' | ');
+    return brandIndex === -1
+      ? `${value}${suffix}`
+      : `${value.slice(0, brandIndex)}${suffix}${value.slice(brandIndex)}`;
+  }
+
+  const metaTitle = computed(() => {
+    const apiTitle = apiSeo.value?.title;
+    return apiTitle ? withPageSuffix(apiTitle) : getPath('title');
+  });
+
+  const h1 = computed(() => apiSeo.value?.h1 || getPath(h1Key?.(sortType.value) || 'h1'));
 
   const meta = computed(() => {
-    const description = getPath('meta_description');
+    const apiDescription = apiSeo.value?.description;
+    const description = apiDescription ? `${apiDescription}${pageSuffix.value}` : getPath('meta_description');
+    const keywords = apiSeo.value?.keywords;
 
     return {
       title: metaTitle.value,
       meta: [
         { name: 'description', content: description },
+        ...(keywords ? [{ name: 'keywords', content: keywords }] : []),
         { property: 'og:title', content: metaTitle.value },
         { property: 'og:description', content: description },
         { name: 'twitter:title', content: metaTitle.value },

package/package.json

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

package/pages/2257.vue

@@ -64,7 +64,7 @@ const { t } = useI18n();
 const { generateLink } = useGenerateLink();
 const pagePureName = useGetPureRouteName();
 const { brandName, emails } = useAppConfig();
-const { meta, h1 } = useMeta(t, pagePureName, brandName);
+const { meta, h1 } = useMeta({ t, pageKey: pagePureName, brandName });
 
 watchEffect(() => {
   useHead(meta.value);

package/pages/categories/all.vue

@@ -68,7 +68,7 @@ const [
 ]);
 
 const pagePureName = useGetPureRouteName();
-const { meta, h1 } = useMeta(t, pagePureName, useAppConfig().brandName);
+const { meta, h1 } = useMeta({ t, pageKey: pagePureName, brandName: useAppConfig().brandName });
 
 watchEffect(() => {
   useHead(meta.value);

package/pages/categories/index.vue

@@ -69,7 +69,7 @@ const { t } = useI18n();
 const { generateLink } = useGenerateLink();
 
 const pagePureName = useGetPureRouteName();
-const { meta, h1 } = useMeta(t, pagePureName, useAppConfig().brandName);
+const { meta, h1 } = useMeta({ t, pageKey: pagePureName, brandName: useAppConfig().brandName });
 
 watchEffect(() => {
   useHead(meta.value);

package/pages/categories/letter/[slug].vue

@@ -59,7 +59,13 @@ const slug = computed(() => route.params[ 'slug' ] as string || '');
 
 const pagePureName = useGetPureRouteName();
 const metaTitle = computed(() => convertString().toCapitalize(slug.value));
-const { meta, h1 } = useMeta(t, pagePureName, useAppConfig().brandName, [], metaTitle);
+const { meta, h1 } = useMeta({
+  t,
+  pageKey: pagePureName,
+  brandName: useAppConfig().brandName,
+  sortOptions: [],
+  text: metaTitle,
+});
 
 watchEffect(() => {
   useHead(meta.value);

package/pages/channels/[channel].vue

@@ -117,7 +117,14 @@ const routeQueryCategories = computed(() => {
 
 const {
   meta
-} = useMeta(t, pageName, useAppConfig().brandName, sortItemsDefault, metaTitle, routeQueryCategories);
+} = useMeta({
+  t,
+  pageKey: pageName,
+  brandName: useAppConfig().brandName,
+  sortOptions: sortItemsDefault,
+  text: metaTitle,
+  secondText: routeQueryCategories,
+});
 
 watchEffect(() => {
   useHead(meta.value);

package/pages/channels/index.vue

@@ -102,7 +102,12 @@ const items = computed(() => {
 });
 
 const pagePureName = useGetPureRouteName();
-const { meta, h1 } = useMeta(t, pagePureName, useAppConfig().brandName, sortChannels);
+const { meta, h1 } = useMeta({
+  t,
+  pageKey: pagePureName,
+  brandName: useAppConfig().brandName,
+  sortOptions: sortChannels,
+});
 
 watchEffect(() => {
   useHead(meta.value);

package/pages/confirm/registration/[token].vue

@@ -61,7 +61,7 @@ onMounted(() => {
 });
 
 const pagePureName = useGetPureRouteName();
-const { meta } = useMeta(t, pagePureName, useAppConfig().brandName);
+const { meta } = useMeta({ t, pageKey: pagePureName, brandName: useAppConfig().brandName });
 
 watchEffect(() => {
   useHead(meta.value);