itube-specs 0.0.915 → 0.0.917

package/assets/icons/common/web-cam.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="6.5"></circle><circle cx="12" cy="9" r="2.5"></circle><path d="M12 15.5V19"></path><path d="M8 20h8"></path></svg>

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

@@ -42,7 +42,7 @@ $nav-border--active: $color-indigo-500-50;
 $nav-border--hover: transparent;
 $nav-border: $color-zinc-700-50;
 $nav-icon: $color-zinc-400;
-$nav-icon-accent: $color-red-400;
+$nav-icon-accent: $color-emerald-400;
 $nav-icon--active: $color-zinc-400;
 $nav-container-bg: $color-black;
 $nav-down-icon: $color-zinc-500;
@@ -867,6 +867,17 @@ $playlist-card-placeholder-text: $color-zinc-400;
 $playlist-card-placeholder-bg: $color-zinc-700;
 $playlist-card-dropdown-icon: $color-zinc-500;
 $playlist-card-dropdown-icon--hover: $color-white;
+$playlist-card-visibility-icon: $color-zinc-400;
+$playlist-card-delete-text: $color-red-400;
+
+// ─── My playlists empty state ───
+$playlists-empty-border: $color-zinc-800;
+$playlists-empty-title: $color-white;
+$playlists-empty-text: $color-zinc-400;
+$playlists-empty-chip-bg: $color-zinc-800;
+$playlists-empty-chip-text: $color-zinc-300;
+$playlists-empty-chip-icon: $color-zinc-400;
+$playlists-empty-arrow: $color-zinc-600;
 
 // ─── Collections section ───
 $collections-badge-text: $color-indigo-300;

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

@@ -895,6 +895,17 @@ $playlist-card-placeholder-text: $color-gray-700;
 $playlist-card-placeholder-bg: $color-gray-300;
 $playlist-card-dropdown-icon: $color-gray-600;
 $playlist-card-dropdown-icon--hover: $color-gray-900;
+$playlist-card-visibility-icon: $color-gray-500;
+$playlist-card-delete-text: $color-red-400;
+
+// ─── My playlists empty state ───
+$playlists-empty-border: $color-gray-300;
+$playlists-empty-title: $color-gray-900;
+$playlists-empty-text: $color-gray-600;
+$playlists-empty-chip-bg: $color-gray-100;
+$playlists-empty-chip-text: $color-gray-700;
+$playlists-empty-chip-icon: $color-gray-500;
+$playlists-empty-arrow: $color-gray-400;
 
 // ─── Collections section ───
 $collections-badge-text: $color-indigo-600;

package/components/card/playlist.vue

@@ -33,19 +33,18 @@
           size="16"
         />
       </UiLabel>
-
-      <UiLabel
-        v-if="card.playlistType === 'private'"
-        :text="t('private')"
-        class="card-playlist__private"
-        theme="backdrop"
-      >
-        <UiIcon
-          name="lock"
-          size="16"
-        />
-      </UiLabel>
     </NuxtLink>
+
+    <!-- Кнопка живёт снаружи ссылки-обложки: button внутри a — невалидная разметка -->
+    <UiFollowBtn
+      v-if="showFollow"
+      :following="following"
+      :name="card.name"
+      class="card-playlist__follow"
+      size="s"
+      @toggle="toggle(card.id)"
+    />
+
     <div class="card-playlist__wrapper">
       <div class="card-playlist__wrapper-header">
         <p class="card-playlist__numbers">
@@ -75,7 +74,8 @@
             name="date"
             size="14"
           />
-          {{ formatDate(card.created) }}
+          <span class="card-playlist__updated">{{ t('library.updated') }}</span>
+          <span>{{ formatDate(card.created) }}</span>
         </p>
       </div>
       <div class="card-playlist__content">
@@ -98,6 +98,17 @@
           :to="generateLink(`/playlists/${card.id}/${card.firstVideoId}`)"
           class="card-playlist__title"
         >
+          <!-- У своих плейлистов приватность видна у названия: значок вместо плашки на обложке -->
+          <span
+            v-if="own"
+            :title="visibilityTitle"
+            class="card-playlist__visibility"
+          >
+            <UiIcon
+              :name="PLAYLIST_TYPE_ICON[card.playlistType]"
+              size="14"
+            />
+          </span>
           <span class="card-playlist__name">{{ card.name }}</span>
           <span
             v-if="card.newCount"
@@ -124,7 +135,7 @@
               >
                 <UiIcon
                   name="dots-vertical"
-                  size="16"
+                  size="18"
                 />
               </button>
             </template>
@@ -135,39 +146,65 @@
               />
             </template>
             <template #items="className">
-              <button
-                :class="className"
-                type="button"
-                @click="toggleFavorite(card.id, card.name)"
-              >
-                <UiIcon
-                  name="heart-stroke"
-                  size="16"
-                />
-                {{ favoritesLabel }}
-              </button>
-              <button
-                :class="className"
-                type="button"
-                @click="emit('share', card)"
-              >
-                <UiIcon
-                  name="share"
-                  size="16"
-                />
-                {{ t('share') }}
-              </button>
-              <button
-                :class="className"
-                type="button"
-                @click="onReport"
-              >
-                <UiIcon
-                  name="flag"
-                  size="16"
-                />
-                {{ t('report') }}
-              </button>
+              <template v-if="own">
+                <button
+                  :class="className"
+                  type="button"
+                  @click="openPlaylistEdit(PlaylistStep.Edit, false, card)"
+                >
+                  <UiIcon
+                    name="edit"
+                    size="16"
+                  />
+                  {{ t('playlist.edit') }}
+                </button>
+                <button
+                  :class="[className, 'card-playlist__delete']"
+                  type="button"
+                  @click="openPlaylistEdit(PlaylistStep.Delete, false, card)"
+                >
+                  <UiIcon
+                    name="trash-bin"
+                    size="16"
+                  />
+                  {{ t('playlist.delete') }}
+                </button>
+              </template>
+              <template v-else>
+                <button
+                  :class="className"
+                  type="button"
+                  @click="toggleFollow(card.id, card.name)"
+                >
+                  <UiIcon
+                    :name="shownFollowing ? 'minus' : 'plus'"
+                    size="16"
+                  />
+                  {{ followLabel }}
+                </button>
+                <button
+                  :class="className"
+                  type="button"
+                  @click="emit('share', card)"
+                >
+                  <UiIcon
+                    name="share"
+                    size="16"
+                  />
+                  {{ t('share') }}
+                </button>
+                <button
+                  :class="className"
+                  type="button"
+                  @click="onReport"
+                >
+                  <UiIcon
+                    name="flag"
+                    size="16"
+                  />
+                  {{ t('report') }}
+                </button>
+              </template>
             </template>
           </UiDropdown>
         </div>
@@ -183,7 +220,7 @@
 </template>
 
 <script setup lang="ts">
-import { formatDate, ThumbSize } from '../../runtime';
+import { formatDate, PLAYLIST_TYPE_ICON, PlaylistStep, PlaylistType, ThumbSize } from '../../runtime';
 import type { IPlaylistCard, IProfileData, IThumbUrls } from '../../types';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
@@ -191,8 +228,12 @@ import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 const props = defineProps<{
   card: IPlaylistCard
   topPlaylists?: boolean
-  /** Без меню «три точки» — вместе с ним уходят избранное, share и report */
+  /** Без меню «три точки» — вместе с ним уходят подписка, share и report */
   noActions?: boolean
+  /** Кнопка подписки поверх обложки — список подписок в библиотеке */
+  showFollow?: boolean
+  /** Свой плейлист: приватность значком у названия, в меню — правка и удаление вместо подписки */
+  own?: boolean
   priority?: boolean
 }>();
 
@@ -216,21 +257,29 @@ const userProfileData = computed(() => useState<IProfileData>('profileData').val
 
 const { isAuthorized } = useUser(AuthorizationApiService);
 
-const { isFavorite, toggleFavorite } = usePlaylistCollections();
+const { isFollowing, toggleFollow, toggle } = usePlaylistFollow();
 
-const favorite = computed(() => isFavorite(props.card.id));
+const { openPlaylistEdit } = usePlaylistEdit();
 
-// Тем же кликом, что переключает коллекцию, меню закрывается. Если менять надпись сразу, она
+const isPrivate = computed(() => props.card.playlistType === PlaylistType.Private);
+
+const visibilityTitle = computed(() => isPrivate.value
+  ? t('playlist.private_playlist')
+  : t('playlist.public_playlist'));
+
+const following = computed(() => isFollowing(props.card.id));
+
+// Тем же кликом, что переключает подписку, меню закрывается. Если менять надпись сразу, она
 // дёргается прямо во время анимации закрытия, поэтому в меню живёт снапшот состояния — он
 // догоняет реальное только к следующему открытию, когда пункт всё равно перерисовывается с нуля.
-const shownFavorite = ref(favorite.value);
+const shownFollowing = ref(following.value);
 
-const favoritesLabel = computed(() => shownFavorite.value
-  ? t('video_actions.remove_favorites')
-  : t('video_actions.add_favorites'));
+const followLabel = computed(() => shownFollowing.value
+  ? t('unfollow')
+  : t('follow'));
 
 watch(() => dropdownRef.value?.open, (isOpen) => {
-  if (isOpen) shownFavorite.value = favorite.value;
+  if (isOpen) shownFollowing.value = following.value;
 });
 
 const avatar = computed(() => {
@@ -261,9 +310,14 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
 </script>
 
 <style lang="scss">
+// Ниже этой ширины в мета-строку не влезает «Updated» рядом с лайками, просмотрами и датой
+$updated-word-width: 240px;
+
 .card-playlist {
+  position: relative;
   display: grid;
   width: 100%;
+  container-type: inline-size;
   align-items: start;
   align-content: start;
   border-radius: $radius-xl;
@@ -423,10 +477,26 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   color: $playlist-card-empty-text;
 }
 
-.card-playlist__private {
+.card-playlist__visibility {
+  display: grid;
+  flex-shrink: 0;
+  color: $playlist-card-visibility-icon;
+}
+
+/* Дропдаун красит свои пункты и иконки сам, поэтому селектор адресный — иначе «удалить» не красное */
+.ui-dropdown__menu-items > .card-playlist__delete.ui-dropdown__item {
+  color: $playlist-card-delete-text;
+}
+
+.ui-dropdown__menu-items > .card-playlist__delete.ui-dropdown__item .ui-icon {
+  color: inherit;
+}
+
+.card-playlist__follow {
   position: absolute;
-  right: 8px;
   top: 8px;
+  right: 8px;
+  z-index: $z-index-plus;
 }
 
 .card-playlist__tags {
@@ -467,6 +537,12 @@ const avatarPlaceholder = computed(() => props.card.username.charAt(0));
   color: $playlist-card-meta;
 }
 
+@include to-cq($updated-word-width) {
+  .card-playlist__updated {
+    display: none;
+  }
+}
+
 .card-playlist__avatar.--placeholder {
   @include font-xs;
 

package/components/grid/playlists.vue

@@ -7,6 +7,8 @@
       :card="item"
       :top-playlists="topPlaylists"
       :no-actions="noActions"
+      :show-follow="showFollow"
+      :own="own"
       :priority="priority && index === 0"
       @share="onShare"
     />
@@ -35,6 +37,10 @@ defineProps<{
   topPlaylists?: boolean
   /** Скрыть меню карточки (три точки: share/report) — например у редакционных подборок */
   noActions?: boolean
+  /** Кнопка подписки поверх обложки — список подписок в библиотеке */
+  showFollow?: boolean
+  /** Свои плейлисты: приватность значком у названия, в меню — правка и удаление */
+  own?: boolean
   priority?: boolean
 }>();
 

package/components/library/collection.vue

@@ -0,0 +1,92 @@
+<!-- Коллекция видео («Избранное», «Смотреть позже»): счётчик, сортировка, сетка карточек -->
+<template>
+  <div class="library-collection">
+    <UiSectionTitle
+      :title="title"
+      :count="total"
+      :icon="icon"
+      class="library-collection__title"
+    />
+
+    <SectionNavLinks
+      :items="sortCollections"
+      class="library-collection__sort"
+      theme="secondary"
+    />
+
+    <div
+      v-if="pageItems.length > 0"
+      class="library-collection__grid"
+    >
+      <CardVideo
+        v-for="(item, index) in pageItems"
+        :key="item.guid"
+        :card="item"
+        :priority="index < 4"
+        :loading="index < 4 ? 'eager' : 'lazy'"
+      />
+    </div>
+
+    <UiEmptyState
+      v-else
+      without-reset
+    />
+
+    <UiPagination
+      v-if="allPages > 1"
+      :key="`pagination-${allPages}`"
+      :total="allPages"
+      class="library-collection__pagination _pagination"
+      arrow-icon
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { sortCollections } from '../../lib';
+import type { IVideoCard } from '../../types';
+
+const PER_PAGE = 24;
+
+const props = defineProps<{
+  /** Ролики коллекции в порядке добавления, свежие первыми — «недавние» это сортировка по умолчанию */
+  items: IVideoCard[]
+  title: string
+  icon: string
+}>();
+
+const route = useRoute();
+
+const sortedItems = computed(() => route.query['sort'] === 'az'
+  ? [ ...props.items ].sort((a, b) => a.title.localeCompare(b.title))
+  : props.items);
+
+const total = computed(() => sortedItems.value.length);
+const allPages = computed(() => Math.ceil(total.value / PER_PAGE));
+
+const pageItems = computed(() => {
+  const page = Math.min(Math.max(Number(route.query['page']) || 1, 1), allPages.value || 1);
+  return sortedItems.value.slice((page - 1) * PER_PAGE, page * PER_PAGE);
+});
+</script>
+
+<style lang="scss">
+.library-collection__title {
+  margin-bottom: 24px;
+}
+
+.library-collection__sort {
+  margin-bottom: 32px;
+}
+
+.library-collection__grid {
+  @include video-card-grid;
+
+  position: relative;
+}
+
+.ui-pagination.library-collection__pagination {
+  margin-top: auto;
+  margin-bottom: 40px;
+}
+</style>

package/components/playlist/edit.vue

@@ -94,7 +94,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (eventName: 'delete-playlist', eventValue: string): void
+  (eventName: 'delete-playlist', eventValue: { id: string, name?: string }): void
   (eventName: 'save-edit', eventValue: {
     id: string
     playlistName: string
@@ -135,16 +135,14 @@ const id = computed(() => selectedPlaylist.value?.id ?? (route.params[ 'playlist
 
 const playlistsData = useState<IPlaylistData>(`data-${AsyncData.PlaylistById}-${id.value}`);
 
-async function onDeleteClick() {
-  try {
-    const name = selectedPlaylist.value?.name;
+// Сначала закрываем попап, потом сообщаем об удалении: снекбар с undo показывает владелец
+// запроса (PlaylistMain), и всплыть он должен уже в макете, а не в закрывающемся диалоге.
+function onDeleteClick() {
+  const playlistId = id.value || '';
+  const name = selectedPlaylist.value?.name;
 
-    emit('delete-playlist', id.value || '');
-    goBack();
-    show('deleted', { icon: 'trash-bin', highlight: name });
-  } catch {
-    console.log('error delete');
-  }
+  goBack();
+  emit('delete-playlist', { id: playlistId, name });
 }
 
 async function onSaveClick() {

package/components/playlist/main.vue

@@ -10,7 +10,7 @@
     :loading-post-playlist="loadingPostPlaylist"
     :loading-user-playlists="loadingUserPlaylists"
     :loading-post-video="loadingPostVideo"
-    :user-playlists="data"
+    :user-playlists="userPlaylists"
     @execute-user-playlists="getUserPlaylists"
     @save-video-to-playlist="saveVideoToPlaylist"
   />
@@ -35,12 +35,14 @@ import { PlaylistsApiService } from '../../services/api/playlists.service';
 import type { Language, PlaylistType } from '../../runtime';
 import { AsyncData } from '../../runtime';
 import { useI18n } from 'vue-i18n';
-import type { IPlaylistVideoFormType, IPlaylistShort } from '../../types';
+import type { IPlaylistCard, IPlaylistVideoFormType, IPlaylistShort, PaginatedResponse } from '../../types';
 
 const { locale } = useI18n();
 
 const { isPlaylistAdd } = usePlaylistAdd();
 const { isPlaylistEditOpen } = usePlaylistEdit();
+const { show } = useSnackbar();
+const { isPendingDelete, markPendingDelete, unmarkPendingDelete } = usePlaylistDelete();
 
 const route = useRoute();
 
@@ -68,6 +70,11 @@ const {
 } = useApiAction(PlaylistsApiService.deletePlaylist);
 const { execute: executeRefresh, loading: loadingRefresh } = useApiAction(PlaylistsApiService.refreshPlaylist);
 
+/** Плейлисты с ещё не отправленным удалением в попапе добавления не показываем. */
+const userPlaylists = computed<PaginatedResponse<IPlaylistCard> | null>(() => data.value
+  ? { ...data.value, items: data.value.items.filter(item => !isPendingDelete(item.id)) }
+  : null);
+
 async function getUserPlaylists() {
   await executeUserPlaylists([locale.value as Language], AsyncData.GetPlaylists);
 }
@@ -107,9 +114,28 @@ async function deleteVideo(event: {
   }, locale.value as Language], `${AsyncData.GetPlaylistsVideo}-${event.playlistId}`);
 }
 
-async function deletePlaylist(event: string) {
-  await executeDeletePlaylist([event]);
+async function commitDeletePlaylist(id: string) {
+  await executeDeletePlaylist([id]);
   await executeUserPlaylists([locale.value as Language], AsyncData.GetPlaylists);
+  // Метку снимаем только после ответа: до него плейлист ещё в списке и всплыл бы обратно.
+  unmarkPendingDelete(id);
+}
+
+/**
+ * Удаление оптимистичное: карточка скрывается сразу, а запрос уходит, когда закроется снекбар,
+ * то есть окно отмены истекло. Undo просто снимает метку, и карточка возвращается на место.
+ * Удаления идут независимо друг от друга: у каждого свой id, поэтому несколько подряд
+ * не путаются, а рефетч после соседнего удаления не показывает уже «удалённые» плейлисты.
+ */
+function deletePlaylist(event: { id: string, name?: string }) {
+  markPendingDelete(event.id);
+
+  show('deleted', {
+    icon: 'trash-bin',
+    highlight: event.name,
+    onAction: () => unmarkPendingDelete(event.id),
+    onDismiss: () => commitDeletePlaylist(event.id),
+  });
 }
 
 async function saveEditPlaylist(event: {

package/composables/__tests__/use-playlist-delete.test.ts

@@ -0,0 +1,38 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach } from 'vitest';
+import { usePlaylistDelete } from '../use-playlist-delete';
+
+describe('usePlaylistDelete', () => {
+  beforeEach(() => {
+    useNuxtApp().payload.state = {};
+  });
+
+  it('метка скрывает плейлист и не дублируется', () => {
+    const { pendingIds, isPendingDelete, markPendingDelete } = usePlaylistDelete();
+
+    markPendingDelete('playlist-1');
+    markPendingDelete('playlist-1');
+
+    expect(pendingIds.value).toEqual([ 'playlist-1' ]);
+    expect(isPendingDelete('playlist-1')).toBe(true);
+    expect(isPendingDelete('playlist-2')).toBe(false);
+  });
+
+  it('снятие метки не задевает соседние удаления', () => {
+    const { pendingIds, markPendingDelete, unmarkPendingDelete } = usePlaylistDelete();
+
+    markPendingDelete('playlist-1');
+    markPendingDelete('playlist-2');
+    unmarkPendingDelete('playlist-1');
+
+    expect(pendingIds.value).toEqual([ 'playlist-2' ]);
+  });
+
+  it('снятие несуществующей метки ничего не ломает', () => {
+    const { pendingIds, unmarkPendingDelete } = usePlaylistDelete();
+
+    unmarkPendingDelete('playlist-1');
+
+    expect(pendingIds.value).toEqual([]);
+  });
+});

package/composables/__tests__/use-playlist-follow.test.ts

@@ -0,0 +1,54 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { usePlaylistFollow } from '../use-playlist-follow';
+import { useSnackbar } from '../use-snackbar';
+
+describe('usePlaylistFollow', () => {
+  beforeEach(() => {
+    useNuxtApp().payload.state = {};
+    vi.useFakeTimers();
+    useSnackbar().resetSnackbar();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('подписка добавляет плейлист и не показывает снекбар', () => {
+    const { follows, isFollowing, toggleFollow } = usePlaylistFollow();
+    const { snackbarText } = useSnackbar();
+
+    toggleFollow('playlist-1', 'Playlist name');
+
+    expect(follows.value).toEqual([ 'playlist-1' ]);
+    expect(isFollowing('playlist-1')).toBe(true);
+    expect(snackbarText.value).toBe('');
+  });
+
+  it('отписка показывает снекбар с кнопкой отмены', () => {
+    const { follows, isFollowing, toggleFollow } = usePlaylistFollow();
+    const { snackbarText, snackbarIcon, snackbarHighlight, snackbarActionText } = useSnackbar();
+
+    toggleFollow('playlist-1', 'Playlist name');
+    toggleFollow('playlist-1', 'Playlist name');
+
+    expect(follows.value).toEqual([]);
+    expect(isFollowing('playlist-1')).toBe(false);
+    expect(snackbarText.value).toBe('unfollowed');
+    expect(snackbarIcon.value).toBe('minus');
+    expect(snackbarHighlight.value).toBe('Playlist name');
+    expect(snackbarActionText.value).toBe('undo');
+  });
+
+  it('отмена возвращает подписку и не показывает новый снекбар', () => {
+    const { follows, toggleFollow } = usePlaylistFollow();
+    const { runSnackbarAction, snackbarText } = useSnackbar();
+
+    toggleFollow('playlist-2', 'Another name');
+    toggleFollow('playlist-2', 'Another name');
+    runSnackbarAction();
+
+    expect(follows.value).toEqual([ 'playlist-2' ]);
+    expect(snackbarText.value).toBe('');
+  });
+});