itube-specs 0.0.910 → 0.0.912

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

@@ -300,18 +300,18 @@ $like-bar-bg: $color-zinc-700;
 $like-bar-likes: $color-zinc-500;
 
 // ─── Playlist input ───
-$playlist-input-label: $color-white;
-$playlist-input-toggle-icon: $color-zinc-500;
-$playlist-input-toggle-icon--active: $color-zinc-400;
-$playlist-input-hint-text: $color-zinc-900;
-$playlist-input-hint-bg: $color-zinc-600;
-$playlist-input-hint-bg--hover: $color-zinc-500;
+$playlist-input-bg: $color-zinc-900;
 $playlist-input-back: $color-zinc-500;
 $playlist-input-back--hover: $color-white;
-$playlist-input-tooltip-highlight: $color-white;
-$playlist-input-delete-text: $color-red-400;
-$playlist-input-delete-bg: $color-red-500-10;
-$playlist-input-delete-bg--hover: $color-red-500-20;
+$playlist-input-back-bg: $color-zinc-800;
+$playlist-input-back-bg--hover: $color-zinc-700;
+
+// ─── Playlist visibility ───
+$playlist-visibility-icon: $color-zinc-400;
+$playlist-visibility-hint-text: $color-zinc-900;
+$playlist-visibility-hint-bg: $color-zinc-600;
+$playlist-visibility-hint-bg--hover: $color-zinc-500;
+$playlist-visibility-tooltip-highlight: $color-white;
 
 // ─── Playlist add ───
 $playlist-add-item-bg--hover: $color-zinc-800-50;
@@ -324,8 +324,10 @@ $playlist-add-item-edit: $color-zinc-500;
 $playlist-add-item-edit--hover: $color-white;
 
 // ─── Playlist edit ───
-$playlist-edit-border: $color-zinc-800;
-$playlist-edit-icon: $color-indigo-600;
+$playlist-edit-delete-text: $color-red-400;
+$playlist-edit-delete-text--hover: $color-red-300;
+$playlist-edit-confirm-highlight: $color-white;
+$playlist-edit-confirm-note: $color-zinc-500;
 
 // ─── Playlist delete video ───
 $playlist-delete-video-icon: $color-indigo-600;
@@ -554,7 +556,7 @@ $select-border--active: $color-indigo-500;
 
 // ─── Toggle ───
 $toggle-bg: $color-zinc-700;
-$toggle-bg--active: $color-emerald-500;
+$toggle-bg--active: $color-zinc-500;
 $toggle-handle: $mono-white-50;
 $toggle-handle--active: $mono-white-100;
 $toggle-text--disabled: $mono-white-25;
@@ -980,7 +982,6 @@ $contacts-link: $color-indigo-400;
 $contacts-link--hover: $color-indigo-300;
 
 // ─── Page: playlists ───
-$page-playlists-border: $color-zinc-800;
 
 // ─── Page: channels ───
 $page-channels-border: $color-zinc-800;
@@ -1001,10 +1002,11 @@ $library-item-icon-border--hover: $color-indigo-500-40;
 $library-item-title: $color-white;
 $library-item-title--hover: $color-indigo-400;
 $library-item-subtitle: $color-zinc-500;
-$library-item-badge-bg: $color-indigo-600-90;
-$library-item-badge-text: $color-white;
-$library-item-badge-bordered-border: $color-zinc-600;
-$library-item-badge-bordered-text: $color-zinc-400;
+$library-item-avatar-bg: $color-zinc-700;
+$library-item-avatar-text: $color-zinc-200;
+$library-item-avatar-border: $color-zinc-900;
+$library-item-rest-bg: $color-zinc-800;
+$library-item-rest-text: $color-zinc-400;
 
 // ─── Library feed (блок подписки: модель / канал / категория) ───
 $library-feed-bg: $color-zinc-900-40;
@@ -1023,6 +1025,8 @@ $library-feed-age: $color-zinc-500;
 $library-feed-meta: $color-zinc-500;
 $library-feed-meta-dot: $color-zinc-600;
 $library-feed-title: $color-zinc-500;
+$library-feed-open: $color-zinc-400;
+$library-feed-open--hover: $color-white;
 
 // ─── Page: library ───
 $page-library-toggle-text: $color-zinc-300;

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

@@ -357,18 +357,18 @@ $like-bar-bg: $color-slate-700;
 $like-bar-likes: $color-gray-500;
 
 // ─── Playlist input ───
-$playlist-input-label: $color-white;
-$playlist-input-toggle-icon: $color-gray-500;
-$playlist-input-toggle-icon--active: $color-gray-400;
-$playlist-input-hint-text: $color-gray-900;
-$playlist-input-hint-bg: $color-gray-600;
-$playlist-input-hint-bg--hover: $color-gray-500;
+$playlist-input-bg: $color-slate-900;
 $playlist-input-back: $color-gray-400;
 $playlist-input-back--hover: $color-white;
-$playlist-input-tooltip-highlight: $color-white;
-$playlist-input-delete-text: $color-red-400;
-$playlist-input-delete-bg: $color-red-500-10;
-$playlist-input-delete-bg--hover: $color-red-500-20;
+$playlist-input-back-bg: $color-slate-750;
+$playlist-input-back-bg--hover: $color-slate-700;
+
+// ─── Playlist visibility ───
+$playlist-visibility-icon: $color-gray-400;
+$playlist-visibility-hint-text: $color-gray-900;
+$playlist-visibility-hint-bg: $color-gray-600;
+$playlist-visibility-hint-bg--hover: $color-gray-500;
+$playlist-visibility-tooltip-highlight: $color-white;
 
 // ─── Playlist add ───
 $playlist-add-item-bg--hover: $color-slate-750;
@@ -381,8 +381,10 @@ $playlist-add-item-edit: $color-gray-400;
 $playlist-add-item-edit--hover: $color-white;
 
 // ─── Playlist edit ───
-$playlist-edit-border: transparent;
-$playlist-edit-icon: $color-indigo-600;
+$playlist-edit-delete-text: $color-red-400;
+$playlist-edit-delete-text--hover: $color-red-300;
+$playlist-edit-confirm-highlight: $color-white;
+$playlist-edit-confirm-note: $color-gray-500;
 
 // ─── Playlist delete video ───
 $playlist-delete-video-icon: $color-indigo-600;
@@ -1008,7 +1010,6 @@ $contacts-link: $color-indigo-400;
 $contacts-link--hover: $color-indigo-300;
 
 // ─── Page: playlists ───
-$page-playlists-border: transparent;
 
 // ─── Page: channels ───
 $page-channels-border: transparent;
@@ -1029,10 +1030,11 @@ $library-item-icon-border--hover: transparent;
 $library-item-title: $color-gray-900;
 $library-item-title--hover: $color-indigo-600;
 $library-item-subtitle: $color-gray-500;
-$library-item-badge-bg: $color-indigo-600;
-$library-item-badge-text: $color-white;
-$library-item-badge-bordered-border: $color-gray-300;
-$library-item-badge-bordered-text: $color-gray-600;
+$library-item-avatar-bg: $color-gray-300;
+$library-item-avatar-text: $color-gray-700;
+$library-item-avatar-border: $color-gray-100;
+$library-item-rest-bg: $color-gray-200;
+$library-item-rest-text: $color-gray-600;
 
 // ─── Library feed (блок подписки: модель / канал / категория) ───
 $library-feed-bg: $color-gray-100;
@@ -1051,6 +1053,8 @@ $library-feed-age: $color-gray-500;
 $library-feed-meta: $color-gray-500;
 $library-feed-meta-dot: $color-gray-400;
 $library-feed-title: $color-gray-500;
+$library-feed-open: $color-gray-600;
+$library-feed-open--hover: $color-gray-900;
 
 // ─── Page: library ───
 $page-library-toggle-text: $color-gray-700;

package/components/auth/register.vue

@@ -171,10 +171,6 @@ async function submit() {
 
     await useUser(AuthorizationApiService).register(form.value);
 
-    // Создаем сразу Favorites плейлист, возможно костыль убрать когда будет нормальная логика с беком
-    // const { FAVORITES_KEY } = useFavorites();
-    // await PlaylistsApiService.postPlaylist(FAVORITES_KEY, PlaylistType.Private);
-
     useAuthPopup().closeAuthPopup();
     show('Registration success');
   } catch (err) {

package/components/library/feed.vue

@@ -49,7 +49,7 @@
 
           <span
             v-if="item.newCount"
-            class="library-feed__badge _from-sm"
+            class="library-feed__badge"
           >{{ t('library.new_count', { count: item.newCount }) }}</span>
         </div>
 
@@ -108,10 +108,28 @@
       </div>
     </header>
 
-    <!-- <h3
-      v-if="item.feedTitle"
-      class="library-feed__feed-title"
-    >{{ item.feedTitle }}</h3> -->
+    <!-- На мобиле ссылки на сущность в шапке нет — она уезжает сюда, в строку над лентой -->
+    <div
+      v-if="item.feedTitle || item.openText"
+      class="library-feed__feed-head _to-sm"
+    >
+      <p
+        v-if="item.feedTitle"
+        class="library-feed__feed-title"
+      >{{ item.feedTitle }}</p>
+
+      <NuxtLink
+        v-if="item.openText"
+        :to="item.to"
+        class="library-feed__open"
+      >
+        {{ item.openText }}
+        <UiIcon
+          name="arrow-right"
+          size="16"
+        />
+      </NuxtLink>
+    </div>
 
     <div class="library-feed__grid">
       <CardVideo
@@ -123,19 +141,6 @@
         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>
 
@@ -329,13 +334,38 @@ const ageText = computed(() => {
   column-gap: 8px;
 }
 
-// .library-feed__feed-title {
-//   @include font-sm;
+.library-feed__feed-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 12px;
+  margin-bottom: 8px;
+}
+
+.library-feed__feed-title {
+  @include font-sm;
+
+  margin: 0;
+  font-weight: 400;
+  color: $library-feed-title;
+}
+
+/* Заголовка может не быть (лента без подписи) — ссылка всё равно держится правого края */
+.library-feed__open {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  white-space: nowrap;
+  color: $library-feed-open;
 
-//   margin: 0 0 12px;
-//   font-weight: 400;
-//   color: $library-feed-title;
-// }
+  @include hover(color) {
+    color: $library-feed-open--hover;
+  }
+}
 
 .library-feed__grid {
   display: grid;

package/components/library/item.vue

@@ -1,4 +1,4 @@
-<!-- Карточка-ссылка библиотеки: иконка-плитка, счётчик, заголовок и опциональный бейдж -->
+<!-- Карточка-ссылка библиотеки: иконка-плитка, ряд аватарок «что внутри» (десктоп), заголовок и счётчик -->
 <template>
   <NuxtLink
     :to="to"
@@ -8,55 +8,76 @@
       <span class="library-item__icon">
         <UiIcon
           :name="icon"
-          size="20"
+          size="22"
         />
       </span>
-      <span
-        v-if="subtitle"
-        class="library-item__subtitle _truncate"
-      >{{ subtitle }}</span>
-    </span>
 
-    <span class="library-item__footer">
-      <h3 class="library-item__title">{{ title }}</h3>
       <span
-        v-if="badge"
-        :class="`--${badgeTheme}`"
-        class="library-item__badge"
+        v-if="avatars && avatars.length"
+        class="library-item__preview"
       >
-        {{ badge }}
         <span
-          v-if="badgeNote"
-          class="library-item__badge-note _from-xs"
-        >{{ badgeNote }}</span>
+          v-for="(avatar, index) in avatars"
+          :key="`${avatar.title}-${index}`"
+          :style="{ zIndex: avatars.length - index }"
+          :title="avatar.title"
+          class="library-item__avatar"
+        >
+          <UiImg
+            v-if="avatar.avatarUrl && !failedAvatars.includes(index)"
+            :src="avatar.avatarUrl"
+            :alt="avatar.title"
+            class="library-item__photo"
+            width="40"
+            height="40"
+            @error="failedAvatars.push(index)"
+          />
+          <span
+            v-else
+            class="library-item__initials"
+          >{{ getNameInitials(avatar.title) }}</span>
+        </span>
+
+        <span
+          v-if="restCount"
+          class="library-item__rest"
+        >+{{ restCount }}</span>
       </span>
     </span>
+
+    <h3 class="library-item__title">{{ title }}</h3>
+
+    <span
+      v-if="subtitle"
+      class="library-item__subtitle"
+    >{{ subtitle }}</span>
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+import { getNameInitials } from '../../utils/player-channel/get-name-initials';
+import type { ILibraryItemAvatar } from '../../types';
+
+defineProps<{
   to: string
   icon: string
   title: string
-  /** Счётчик справа от иконки: «128 videos», «3 private · 1 public» */
+  /** Счётчик под заголовком: «128 videos», «3 private · 1 public» */
   subtitle?: string
-  /** Бейдж у заголовка: «3 new», «+214» */
-  badge?: string
-  /** Хвост бейджа, скрытый на мобиле: «this week» */
-  badgeNote?: string
-  badgeTheme?: 'accent' | 'bordered'
-}>(), {
-  badgeTheme: 'accent'
-});
+  /** Первые подписки внутри раздела — ряд аватарок, виден только на широкой карточке */
+  avatars?: ILibraryItemAvatar[]
+  /** Сколько подписок не влезло в ряд: плашка «+8» в его хвосте */
+  restCount?: number
+}>();
+
+const failedAvatars = ref<number[]>([]);
 </script>
 
 <style lang="scss">
 .library-item {
+  container-type: inline-size;
   display: flex;
   flex-direction: column;
-  row-gap: 32px;
-  justify-content: space-between;
   padding: 20px;
   background-color: $library-item-bg;
   border: 1px solid $library-item-border;
@@ -71,16 +92,17 @@ withDefaults(defineProps<{
 .library-item__head {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  column-gap: 8px;
+  column-gap: 12px;
+  min-height: 44px;
+  margin-bottom: 32px;
 }
 
 .library-item__icon {
   display: grid;
   place-content: center;
   flex-shrink: 0;
-  width: 44px;
-  height: 44px;
+  width: 48px;
+  height: 48px;
   color: $library-item-icon;
   background-color: $library-item-icon-bg;
   border: 1px solid $library-item-icon-border;
@@ -98,18 +120,70 @@ withDefaults(defineProps<{
   }
 }
 
+/* Ряд аватарок занимает больше половины карточки: показываем, только когда она реально широкая */
+.library-item__preview {
+  display: none;
+}
+
+@include from-br(sm) {
+  @include from-cq(220px) {
+    .library-item__preview {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.library-item__avatar,
+.library-item__rest {
+  display: grid;
+  place-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border: 2px solid $library-item-avatar-border;
+  border-radius: $radius-full;
+}
+
+.library-item__avatar {
+  background-color: $library-item-avatar-bg;
+}
+
+.library-item__avatar:not(:first-child),
+.library-item__rest {
+  margin-inline-start: -11px;
+}
+
+.library-item__photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 30%;
+}
+
+.library-item__initials {
+  @include font-3xs;
+
+  font-weight: 700;
+  color: $library-item-avatar-text;
+}
+
+.library-item__rest {
+  @include font-3xs;
+
+  font-weight: 600;
+  color: $library-item-rest-text;
+  background-color: $library-item-rest-bg;
+}
+
 .library-item__subtitle {
   @include font-sm;
 
+  margin-top: 4px;
   color: $library-item-subtitle;
 }
 
-.library-item__footer {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-}
-
 .library-item__title {
   @include font-base;
 
@@ -127,26 +201,4 @@ withDefaults(defineProps<{
     color: $library-item-title--hover;
   }
 }
-
-.library-item__badge {
-  @include font-3xs;
-
-  flex-shrink: 0;
-  font-weight: 600;
-  white-space: nowrap;
-  padding-block: 2px;
-  padding-inline: 8px;
-  border: 1px solid transparent;
-  border-radius: $radius-full;
-}
-
-.library-item__badge.--accent {
-  color: $library-item-badge-text;
-  background-color: $library-item-badge-bg;
-}
-
-.library-item__badge.--bordered {
-  color: $library-item-badge-bordered-text;
-  border-color: $library-item-badge-bordered-border;
-}
 </style>