itube-specs 0.0.897 → 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/package.json

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

package/pages/following.vue

@@ -0,0 +1,201 @@
+<!-- Подписки: что нового у моделей, каналов, категорий и плейлистов. Данные пока заглушка -->
+<template>
+  <div class="following _page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <h1 class="_title">{{ t('following.title') }}</h1>
+
+    <SectionSwiperCards
+      :items="models"
+      :count="t('following.updates', { count: modelsUpdates })"
+      :title="t('models')"
+      :all-link-text="t('following.view_all')"
+      :all-link-note="t('plural.models', models.length)"
+      :header-link-text="t('following.all_models')"
+      all-link="/library/models"
+      icon="user"
+      placeholder-avatar="/img/model-placeholder.webp"
+      class="following__section"
+      without-count
+    />
+
+    <SectionSwiperCards
+      :items="channels"
+      :count="t('following.updates', { count: channelsUpdates })"
+      :title="t('channels')"
+      :all-link-text="t('following.view_all')"
+      :all-link-note="t('plural.channels', channels.length)"
+      :header-link-text="t('following.all_channels')"
+      all-link="/library/channels"
+      icon="play-circle"
+      placeholder-avatar="/img/logo-placeholder.svg"
+      class="following__section"
+      without-count
+    />
+
+    <section class="following__section">
+      <header class="following__header">
+        <UiSectionTitle
+          :title="t('categories')"
+          :count="t('following.updates', { count: categoriesUpdates })"
+          icon="grid"
+          title-tag="h2"
+        />
+
+        <!-- На мобиле плитки «все» в гриде нет, поэтому ссылка вынесена в шапку -->
+        <UiLink
+          :to="generateLink('/library/categories')"
+          class="following__link _to-sm"
+          theme="simple"
+        >
+          {{ t('following.all_categories') }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </header>
+
+      <GridCategories :categories="categories">
+        <UiViewAll
+          :text="t('following.view_all')"
+          :note="t('plural.categories', categories.length)"
+          class="_from-sm"
+          to="/library/categories"
+        />
+      </GridCategories>
+    </section>
+
+    <section class="following__section">
+      <header class="following__header">
+        <UiSectionTitle
+          :title="t('playlists')"
+          :count="t('following.updates', { count: playlistsUpdates })"
+          icon="playlist"
+          title-tag="h2"
+        />
+
+        <UiLink
+          :to="generateLink('/playlists')"
+          class="following__link _to-sm"
+          theme="simple"
+        >
+          {{ t('following.all_playlists') }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </header>
+
+      <GridPlaylists :items="playlists">
+        <UiViewAll
+          :text="t('following.view_all')"
+          :note="t('plural.playlists', playlists.length)"
+          class="_from-sm"
+          to="/playlists"
+        />
+      </GridPlaylists>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getLibraryCategoriesStub,
+  getLibraryChannelsStub,
+  getLibraryModelsStub,
+  getLibraryPlaylistsStub
+} from '../stubs/library-follows';
+import { convertString } from '../runtime';
+import type { IBreadcrumbItem, ICategoryCard, IRoundCard } from '../types';
+
+const { t } = useI18n();
+const { generateLink } = useGenerateLink();
+
+/** Сначала те, у кого больше новинок — ради этого страница и открывается. */
+const byNewCount = <T extends { newCount: number }>(items: T[]) => [...items].sort((a, b) => b.newCount - a.newCount);
+
+const sumUpdates = (items: { newCount: number }[]) => items.reduce((total, item) => total + item.newCount, 0);
+
+const modelsStub = computed(() => byNewCount(getLibraryModelsStub()));
+const channelsStub = computed(() => byNewCount(getLibraryChannelsStub()));
+const categoriesStub = computed(() => byNewCount(getLibraryCategoriesStub()));
+const playlists = computed(() => byNewCount(getLibraryPlaylistsStub()));
+
+const models = computed<IRoundCard[]>(() => modelsStub.value.map(model => ({
+  title: model.title,
+  primaryImageUrl: model.avatarUrl,
+  videosCount: model.videosCount,
+  link: `/models/${convertString().toSlug(model.title)}`,
+  newCount: model.newCount,
+})));
+
+const channels = computed<IRoundCard[]>(() => channelsStub.value.map(channel => ({
+  title: channel.title,
+  primaryImageUrl: channel.avatarUrl ?? '',
+  videosCount: channel.videosCount,
+  link: `/channels/${convertString().toSlug(channel.title)}`,
+  newCount: channel.newCount,
+})));
+
+const categories = computed<ICategoryCard[]>(() => categoriesStub.value.map(category => ({
+  guid: category.guid,
+  name: convertString().toSlug(category.title),
+  title: category.title,
+  videosCount: category.videosCount,
+  thumbUrls: category.videos[0]?.thumbUrls,
+  newCount: category.newCount,
+})));
+
+const modelsUpdates = computed(() => sumUpdates(modelsStub.value));
+const channelsUpdates = computed(() => sumUpdates(channelsStub.value));
+const categoriesUpdates = computed(() => sumUpdates(categoriesStub.value));
+const playlistsUpdates = computed(() => sumUpdates(playlists.value));
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('library.following')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('library.following')}`,
+  },
+] as IBreadcrumbItem[];
+</script>
+
+<style lang="scss">
+.following__section {
+  margin-bottom: 48px;
+}
+
+.following__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 16px;
+  margin-bottom: 16px;
+}
+
+.following__link {
+  flex-shrink: 0;
+}
+
+/* Плитка «смотреть все» часто оказывается одна в новом ряду: без равных рядов
+   ряд сжимается по её контенту и она выходит ниже карточек. */
+.following .grid-categories,
+.following .grid-playlists {
+  grid-auto-rows: 1fr;
+}
+</style>

package/pages/library/index.vue

@@ -97,13 +97,16 @@
           {{ t('library.following') }}
         </h2>
 
-        <UiBtn theme="secondary">
+        <UiLink
+          :to="generateLink('/following')"
+          theme="secondary"
+        >
           {{ t('library.whats_new', { count: newTotal }) }}
           <UiIcon
             name="arrow-right"
             size="16"
           />
-        </UiBtn>
+        </UiLink>
       </header>
 
       <ul class="library__grid">