itube-specs 0.0.893 → 0.0.895

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

@@ -964,18 +964,22 @@ $library-item-badge-text: $color-white;
 $library-item-badge-bordered-border: $color-zinc-600;
 $library-item-badge-bordered-text: $color-zinc-400;
 
-// ─── Library model (блок подписки на модель) ───
-$library-model-bg: $color-zinc-900-40;
-$library-model-border: $color-zinc-800;
-$library-model-avatar-border: $color-zinc-700;
-$library-model-avatar-border--hover: $color-zinc-500;
-$library-model-name: $color-white;
-$library-model-name--hover: $color-indigo-400;
-$library-model-badge-bg: $color-indigo-600;
-$library-model-badge-text: $color-white;
-$library-model-tags: $color-zinc-400;
-$library-model-meta: $color-zinc-500;
-$library-model-meta-dot: $color-zinc-600;
+// ─── Library feed (блок подписки: модель / канал / категория) ───
+$library-feed-bg: $color-zinc-900-40;
+$library-feed-border: $color-zinc-800;
+$library-feed-fade: $color-zinc-950;
+$library-feed-avatar-border: $color-zinc-700;
+$library-feed-avatar-border--hover: $color-zinc-500;
+$library-feed-initials: $color-zinc-400;
+$library-feed-initials-gradient-from: $color-zinc-700;
+$library-feed-initials-gradient-to: $color-zinc-800;
+$library-feed-name: $color-white;
+$library-feed-name--hover: $color-indigo-400;
+$library-feed-badge-bg: $color-indigo-600;
+$library-feed-badge-text: $color-white;
+$library-feed-meta: $color-zinc-500;
+$library-feed-meta-dot: $color-zinc-600;
+$library-feed-title: $color-zinc-500;
 
 // ─── Page: library ───
 $page-library-heading: $color-white;

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

@@ -994,18 +994,22 @@ $library-item-badge-text: $color-white;
 $library-item-badge-bordered-border: $color-gray-300;
 $library-item-badge-bordered-text: $color-gray-600;
 
-// ─── Library model (блок подписки на модель) ───
-$library-model-bg: $color-gray-100;
-$library-model-border: transparent;
-$library-model-avatar-border: $color-gray-300;
-$library-model-avatar-border--hover: $color-indigo-500-50;
-$library-model-name: $color-gray-900;
-$library-model-name--hover: $color-indigo-600;
-$library-model-badge-bg: $color-indigo-600;
-$library-model-badge-text: $color-white;
-$library-model-tags: $color-gray-600;
-$library-model-meta: $color-gray-500;
-$library-model-meta-dot: $color-gray-400;
+// ─── Library feed (блок подписки: модель / канал / категория) ───
+$library-feed-bg: $color-gray-100;
+$library-feed-border: transparent;
+$library-feed-fade: $color-gray-100;
+$library-feed-avatar-border: $color-gray-300;
+$library-feed-avatar-border--hover: $color-indigo-500-50;
+$library-feed-initials: $color-gray-600;
+$library-feed-initials-gradient-from: $color-gray-200;
+$library-feed-initials-gradient-to: $color-gray-300;
+$library-feed-name: $color-gray-900;
+$library-feed-name--hover: $color-indigo-600;
+$library-feed-badge-bg: $color-indigo-600;
+$library-feed-badge-text: $color-white;
+$library-feed-meta: $color-gray-500;
+$library-feed-meta-dot: $color-gray-400;
+$library-feed-title: $color-gray-500;
 
 // ─── Page: library ───
 $page-library-heading: $color-gray-900;

package/components/library/feed.vue

@@ -0,0 +1,340 @@
+<!-- Блок подписки (модель / канал / категория): шапка с аватаром, тегами и счётчиками + лента роликов -->
+<template>
+  <article class="library-feed">
+    <header class="library-feed__header">
+      <NuxtLink
+        :to="item.to"
+        :title="item.title"
+        class="library-feed__avatar-link"
+      >
+        <UiImg
+          v-if="currentAvatar"
+          :src="currentAvatar"
+          :alt="item.title"
+          :loading="priority ? 'eager' : 'lazy'"
+          :priority="priority"
+          class="library-feed__avatar"
+          width="96"
+          height="96"
+          sizes="96px"
+          @error="avatarError = true"
+        />
+        <span
+          v-else
+          class="library-feed__avatar library-feed__initials"
+        >{{ initials }}</span>
+      </NuxtLink>
+
+      <div class="library-feed__info">
+        <div class="library-feed__heading">
+          <NuxtLink
+            :to="item.to"
+            class="library-feed__name"
+          >
+            {{ item.title }}
+            <img
+              v-if="item.country"
+              :alt="item.country.title"
+              :title="`${t('birthplace_country')}: ${item.country.title}`"
+              :src="`/icons/flags/${item.country.name}.svg`"
+              class="library-feed__flag"
+              width="20"
+              height="14"
+            >
+          </NuxtLink>
+
+          <span
+            v-if="item.newCount"
+            class="library-feed__badge"
+          >{{ t('library.new_count', { count: item.newCount }) }}</span>
+        </div>
+
+        <LazyUiExpandRow
+          v-if="item.tags && item.tags.length"
+          :items="item.tags"
+          class="library-feed__tags"
+          hydrate-on-visible
+          micro
+        />
+
+        <p class="library-feed__meta">
+          <span
+            v-for="(entry, index) in item.meta"
+            :key="`meta-${index}`"
+            class="library-feed__meta-item"
+          >
+            <UiIcon
+              v-if="entry.icon"
+              :name="entry.icon"
+              size="14"
+            />
+            {{ entry.text }}
+          </span>
+        </p>
+      </div>
+
+      <div class="library-feed__actions _from-sm">
+        <UiBtn
+          :theme="following ? 'secondary' : 'primary'"
+          class="library-feed__follow"
+          @click="emit('toggle-follow', item)"
+        >
+          <UiIcon
+            :name="following ? 'check' : 'plus'"
+            size="16"
+          />
+          {{ following ? t('library.following_state') : t('follow') }}
+        </UiBtn>
+
+        <UiLink
+          :to="item.to"
+          theme="secondary"
+        >
+          {{ videosText }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </div>
+    </header>
+
+    <h3
+      v-if="item.feedTitle"
+      class="library-feed__feed-title"
+    >{{ item.feedTitle }}</h3>
+
+    <div class="library-feed__grid">
+      <CardVideo
+        v-for="(video, index) in item.videos"
+        :key="video.guid"
+        :card="video"
+        :loading="priority && index < 3 ? 'eager' : 'lazy'"
+        :priority="priority && index < 3"
+        compact
+      />
+    </div>
+
+    <UiLink
+      :to="item.to"
+      theme="secondary"
+      class="library-feed__all _to-sm"
+      wide
+    >
+      {{ videosText }}
+      <UiIcon
+        name="arrow-right"
+        size="16"
+      />
+    </UiLink>
+  </article>
+</template>
+
+<script setup lang="ts">
+import type { ILibraryFeedItem } from '../../types';
+
+const props = defineProps<{
+  item: ILibraryFeedItem
+  following?: boolean
+  priority?: boolean
+}>();
+
+const emit = defineEmits<{
+  (eventName: 'toggle-follow', item: ILibraryFeedItem): void,
+}>();
+
+const { t } = useI18n();
+
+const avatarError = ref(false);
+
+const currentAvatar = computed(() => avatarError.value ? undefined : props.item.avatarUrl);
+
+/** Заглушка вместо аватара: «Top To Bottom» → TTB, «Bareback» → B. */
+const initials = computed(() => props.item.title
+  .split(/\s+/)
+  .slice(0, 3)
+  .map(word => word.charAt(0))
+  .join('')
+  .toUpperCase());
+
+const videosText = computed(() => t('plural.videos', props.item.videosCount));
+</script>
+
+<style lang="scss">
+.library-feed {
+  /* Растушёвка «ещё» у тегов уходит в фон карточки, а не страницы */
+  --expand-row-fade-end: #{$library-feed-fade};
+
+  padding: 16px;
+  background-color: $library-feed-bg;
+  border: 1px solid $library-feed-border;
+  border-radius: $radius-xl;
+
+  @include from-br(sm) {
+    padding: 20px;
+  }
+}
+
+.library-feed__header {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 16px;
+  row-gap: 12px;
+  align-items: start;
+  margin-bottom: 20px;
+
+  @include from-br(sm) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+}
+
+.library-feed__avatar {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  object-position: center 30%;
+  border-radius: $radius-full;
+  border: 2px solid $library-feed-avatar-border;
+
+  @include from-br(sm) {
+    width: 96px;
+    height: 96px;
+    transition: var(--transition) border-color;
+  }
+}
+
+@include from-br(sm) {
+  .library-feed__avatar-link:is(:hover, :focus-visible) .library-feed__avatar {
+    border-color: $library-feed-avatar-border--hover;
+  }
+}
+
+.library-feed__initials {
+  @include font-lg;
+
+  display: grid;
+  place-content: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: $library-feed-initials;
+  background: linear-gradient(to bottom right, $library-feed-initials-gradient-from, $library-feed-initials-gradient-to);
+}
+
+.library-feed__info {
+  min-width: 0;
+}
+
+.library-feed__heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 10px;
+  row-gap: 6px;
+}
+
+.library-feed__name {
+  @include font-lg;
+
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: $library-feed-name;
+
+  @include from-br(sm) {
+    transition: var(--transition) color;
+  }
+
+  @include hover(color) {
+    color: $library-feed-name--hover;
+  }
+}
+
+.library-feed__flag {
+  flex-shrink: 0;
+  border-radius: 2px;
+}
+
+.library-feed__badge {
+  @include font-xs;
+
+  flex-shrink: 0;
+  font-weight: 600;
+  white-space: nowrap;
+  padding-block: 4px;
+  padding-inline: 10px;
+  color: $library-feed-badge-text;
+  background-color: $library-feed-badge-bg;
+  border-radius: $radius-full;
+}
+
+.library-feed__tags {
+  margin-top: 8px;
+}
+
+.library-feed__meta {
+  @include font-sm;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 8px;
+  row-gap: 4px;
+  margin-top: 8px;
+  color: $library-feed-meta;
+}
+
+.library-feed__meta-item {
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+}
+
+.library-feed__meta-item:not(:last-child)::after {
+  content: '·';
+  margin-inline-start: 2px;
+  color: $library-feed-meta-dot;
+}
+
+.library-feed__actions {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+.library-feed__follow {
+  min-width: 124px;
+}
+
+.library-feed__feed-title {
+  @include font-sm;
+
+  margin: 0 0 12px;
+  font-weight: 400;
+  color: $library-feed-title;
+}
+
+.library-feed__grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, 1fr);
+
+  @include from-br(xm) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @include from-br(sm) {
+    gap: 24px 16px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @include from-br(md) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+.library-feed__all {
+  margin-top: 16px;
+}
+</style>

package/components/library/follows.vue

@@ -0,0 +1,147 @@
+<!-- Список подписок «Библиотеки»: сортировка, блоки лент, подтверждение отписки -->
+<template>
+  <div class="library-follows">
+    <UiSectionTitle
+      :title="title"
+      :count="items.length"
+      :icon="icon"
+      class="library-follows__title"
+    />
+
+    <div class="library-follows__sort">
+      <UiBtn
+        v-for="option in sortItems"
+        :key="option.name"
+        :theme="sort === option.name ? 'primary' : 'secondary'"
+        @click="sort = option.name"
+      >{{ option.title }}</UiBtn>
+    </div>
+
+    <div
+      v-if="sortedItems.length > 0"
+      class="library-follows__list"
+    >
+      <LibraryFeed
+        v-for="(item, index) in sortedItems"
+        :key="item.guid"
+        :item="item"
+        :following="isFollowing(item)"
+        :priority="index === 0"
+        @toggle-follow="onToggleFollow"
+      />
+    </div>
+
+    <UiEmptyState
+      v-else
+      without-reset
+    />
+
+    <UiConfirm
+      v-model="isUnfollowOpen"
+      :title="t('library.unfollow_title', { name: pendingUnfollow?.title })"
+      :confirm-text="t('library.unfollow_confirm')"
+      @confirm="onUnfollowConfirm"
+    >
+      <p class="library-follows__confirm">{{ t('library.unfollow_text') }}</p>
+    </UiConfirm>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ILibraryFeedItem } from '../../types';
+
+const LibrarySort = {
+  New: 'new',
+  Alphabet: 'alphabet',
+} as const;
+
+type LibrarySortValue = typeof LibrarySort[keyof typeof LibrarySort];
+
+const props = defineProps<{
+  items: ILibraryFeedItem[]
+  title: string
+  icon: string
+}>();
+
+const { t } = useI18n();
+
+const sort = ref<LibrarySortValue>(LibrarySort.New);
+
+const sortItems = computed(() => [
+  { name: LibrarySort.New, title: t('library.sort_new_first') },
+  { name: LibrarySort.Alphabet, title: t('library.sort_alphabet') },
+]);
+
+/**
+ * «Сначала новые» — по числу непросмотренных новинок, а не по дате обновления: подписка
+ * с тремя новыми роликами важнее свежей, но с одним. Порядок равных сохраняет сортировка.
+ */
+const sortedItems = computed(() => {
+  const items = [...props.items];
+
+  return sort.value === LibrarySort.Alphabet
+    ? items.sort((a, b) => a.title.localeCompare(b.title))
+    : items.sort((a, b) => b.newCount - a.newCount);
+});
+
+const unfollowed = ref<string[]>([]);
+
+function isFollowing(item: ILibraryFeedItem) {
+  return !unfollowed.value.includes(item.guid);
+}
+
+/** Сущность, для которой открыт попап отписки. */
+const pendingUnfollow = ref<ILibraryFeedItem | null>(null);
+
+const isUnfollowOpen = computed({
+  get: () => pendingUnfollow.value !== null,
+  set: value => {
+    if (!value) pendingUnfollow.value = null;
+  },
+});
+
+/** Подписка — сразу, отписка — только через подтверждение: она сносит ленту обновлений. */
+function onToggleFollow(item: ILibraryFeedItem) {
+  if (isFollowing(item)) {
+    pendingUnfollow.value = item;
+    return;
+  }
+
+  unfollowed.value = unfollowed.value.filter(guid => guid !== item.guid);
+}
+
+function onUnfollowConfirm() {
+  if (!pendingUnfollow.value) return;
+
+  unfollowed.value = [...unfollowed.value, pendingUnfollow.value.guid];
+  pendingUnfollow.value = null;
+}
+</script>
+
+<style lang="scss">
+.library-follows__title {
+  margin-bottom: 16px;
+}
+
+.library-follows__sort {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.library-follows__list {
+  display: grid;
+  row-gap: 24px;
+}
+
+.library-follows__confirm {
+  @include font-sm;
+
+  max-width: 400px;
+  margin: 0 auto;
+  text-align: center;
+  color: $page-library-confirm-text;
+}
+</style>

package/components/ui/expand-row.vue

@@ -5,6 +5,7 @@
       { '--expand-show': isExpandOpened },
       { '--alphabet': alphabet },
       { '--mobile-expand': mobileExpand },
+      { '--micro': micro },
     ]"
     class="ui-expand-row"
   >
@@ -27,12 +28,13 @@
           :alphabet="alphabet"
           is-link
           :mini="mini"
+          :micro="micro"
         />
       </slot>
       <div
         v-if="!hideMore"
         v-show="isElementsOverflow"
-        :class="{'--small': mini}"
+        :class="{'--small': mini, '--micro': micro}"
         class="ui-expand-row__more-wrapper"
       >
         <UiChips
@@ -41,6 +43,7 @@
             icon: isExpandOpened ? 'minus' : 'plus',
           }"
           :mini="mini"
+          :micro="micro"
           class="ui-expand-row__button --more"
           @click="onMoreClick"
         />
@@ -57,6 +60,7 @@ defineProps<{
   alphabet?: boolean;
   hideMore?: boolean;
   mini?: boolean;
+  micro?: boolean;
   mobileExpand?: boolean;
   preText?: string;
 }>();
@@ -167,6 +171,12 @@ onBeforeUnmount(() => {
   }
 }
 
+/* Обрезка идёт по высоте одной строки, а она зависит от размера чипса — иначе из-под края
+   выглядывает следующий ряд. Правило стоит до `--expand-show`: у них равная специфичность. */
+.ui-expand-row.--micro {
+  max-height: var(--chips-height-micro);
+}
+
 .ui-expand-row__wrapper {
   display: inline-flex;
   flex-wrap: wrap;
@@ -193,7 +203,7 @@ onBeforeUnmount(() => {
   height: var(--chips-height);
   z-index: $z-index-plus;
   padding-left: 40px;
-  background: linear-gradient(90deg, $expand-row-fade-start 0%, $expand-row-fade-end 22.64%);
+  background: linear-gradient(90deg, $expand-row-fade-start 0%, var(--expand-row-fade-end, #{$expand-row-fade-end}) 22.64%);
 }
 
 .ui-expand-row__more-wrapper.--small {
@@ -204,6 +214,15 @@ onBeforeUnmount(() => {
   }
 }
 
+.ui-expand-row__more-wrapper.--micro {
+  top: 0;
+  height: var(--chips-height-micro);
+}
+
+.ui-expand-row.--micro .ui-expand-row__wrapper {
+  gap: 4px;
+}
+
 .ui-expand-row__button.--more {
   text-transform: capitalize;
 }

package/package.json

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

package/pages/library/categories.vue

@@ -0,0 +1,61 @@
+<!-- Подписки на категории: широкие показывают лучшее за неделю, узкие — новинки. Данные пока заглушка -->
+<template>
+  <div class="_page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <LibraryFollows
+      :items="items"
+      :title="t('library.my_categories')"
+      icon="grid"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getLibraryCategoriesStub } from '../../stubs/library-follows';
+import { convertString, formatDate } from '../../runtime';
+import type { IBreadcrumbItem, ILibraryFeedItem } from '../../types';
+
+const { t } = useI18n();
+const { generateLink } = useGenerateLink();
+
+const items = computed<ILibraryFeedItem[]>(() => getLibraryCategoriesStub().map(category => ({
+  guid: category.guid,
+  title: category.title,
+  to: generateLink(`/categories/${convertString().toSlug(category.title)}`),
+  newCount: category.newCount,
+  meta: [
+    { icon: 'video-camera', text: String(category.videosCount) },
+    { icon: 'date', text: t('library.updated_at', { date: formatDate(category.lastVideoAddedAt) }) },
+  ],
+  videosCount: category.videosCount,
+  // Нечего показать в новинках — лента откатывается на лучшее за неделю
+  feedTitle: category.newCount ? t('library.latest') : t('library.top_this_week'),
+  videos: category.videos,
+})));
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('library.my_categories')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.library')}`,
+    to: '/library',
+  },
+  {
+    name: `${t('library.my_categories')}`,
+  },
+] as IBreadcrumbItem[];
+</script>