itube-specs 0.0.897 → 0.0.899

package/components/layout/logo.vue

@@ -2,14 +2,16 @@
   <NuxtLink
     :class="{'layout-logo--glow': glow}"
     :to="generateLink('/')"
+    active-class=""
+    exact-active-class=""
     class="layout-logo"
     @click="onLogoClick"
   >
     <img
       class="layout-logo__image"
       src="/img/logo.svg"
-      width="144"
-      height="24"
+      width="120"
+      height="20"
       alt="gay.cool"
     >
   </NuxtLink>
@@ -38,4 +40,11 @@ function onLogoClick() {
     opacity: 0.9;
   }
 }
+
+.layout-logo__image {
+  @include from-br(sm) {
+    width: 144px;
+    height: 24px;
+  }
+}
 </style>

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,30 @@
 <!-- Горизонтальный свайпер аватаров моделей с заголовком и ссылкой «все» -->
 <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"
+        :size="size"
+        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 +34,7 @@
           <CardRound
             :card="item"
             :placeholder-avatar="placeholderAvatar"
+            :without-count="withoutCount"
             class="section-swiper-cards__card"
           />
         </template>
@@ -24,11 +42,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 +57,27 @@
 <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
+  /** Размер заголовка секции — см. `UiSectionTitle` */
+  size?: 'lg' | 'xl'
   placeholderAvatar?: string
-}>();
+  /** Карточки только с аватаром и названием, без счётчика роликов */
+  withoutCount?: boolean
+}>(), {
+  icon: 'user'
+});
 
 const { t } = useI18n();
 const { generateLink } = useGenerateLink();
@@ -58,12 +90,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 +116,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/section-title.vue

@@ -10,18 +10,19 @@
     >
     <h1
       v-if="titleTag === 'h1'"
-      class="ui-section-title__title _title"
+      :class="titleClass"
     >{{ title }}</h1>
     <h2
       v-else-if="titleTag === 'h2'"
-      class="ui-section-title__title _title"
+      :class="titleClass"
     >{{ title }}</h2>
     <h3
       v-else-if="titleTag === 'h3'"
-      class="ui-section-title__title _title"
+      :class="titleClass"
     >{{ title }}</h3>
+    <!-- Без счётчика остаётся тот же чип, только с одной иконкой -->
     <UiCount
-      v-if="count"
+      v-if="count || icon"
       :icon="icon"
       class="ui-section-title__count"
     >{{ count }}</UiCount>
@@ -29,15 +30,23 @@
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   count?: string | number
   titleTag?: string
   title: string
   icon?: string
   img?: string
+  /** `lg` — страничный заголовок (18px, капс); `xl` — заголовок секции (20px, без капса) */
+  size?: 'lg' | 'xl'
 }>(), {
-  titleTag: 'h1'
+  titleTag: 'h1',
+  size: 'lg'
 });
+
+const titleClass = computed(() => [
+  'ui-section-title__title',
+  props.size === 'xl' ? '--xl' : '_title'
+]);
 </script>
 
 <style lang="scss">
@@ -48,6 +57,12 @@ withDefaults(defineProps<{
   vertical-align: middle;
 }
 
+.ui-section-title__title.--xl {
+  @include font-xl;
+
+  font-weight: 600;
+}
+
 .ui-section-title__flag,
 .ui-section-title__count.ui-count {
   display: inline-flex;

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/lib/scheme/profile-navigation-items.ts

@@ -10,33 +10,6 @@ export const profileNavigationItems = [
     title: 'library',
     icon: 'library',
     group: 1,
-    childs: [
-      {
-        value: '/user/profile?edit=true',
-        title: 'videos',
-        icon: 'video-camera',
-      },
-      {
-        value: '/user/profile?edit=true',
-        title: 'watch_later',
-        icon: 'time',
-      },
-      {
-        value: '/user/profile?edit=true',
-        title: 'playlists',
-        icon: 'list',
-      },
-      {
-        value: '/user/profile?edit=true',
-        title: 'models',
-        icon: 'user',
-      },
-      {
-        value: '/user/profile?edit=true',
-        title: 'channels',
-        icon: 'play-circle',
-      },
-    ]
   },
   {
     value: '/user/settings',

package/package.json

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