itube-specs 0.0.911 → 0.0.913

package/components/playlist/main.vue

@@ -1,4 +1,11 @@
 <template>
+  <!-- Затемнение общее на весь флоу: у диалогов бэкдроп прозрачный, иначе при смене
+       попапа их подложки складываются и фон моргает. -->
+  <div
+    v-if="isPlaylistAdd || isPlaylistEditOpen"
+    class="playlist-main__decorate"
+  />
+
   <PlaylistAdd
     :loading-post-playlist="loadingPostPlaylist"
     :loading-user-playlists="loadingUserPlaylists"
@@ -6,18 +13,14 @@
     :user-playlists="data"
     @execute-user-playlists="getUserPlaylists"
     @save-video-to-playlist="saveVideoToPlaylist"
-    @edit-playlist="saveEditPlaylist"
-    @delete-playlist="deletePlaylist"
   />
 
   <PlaylistEdit
-    :loading-edit-videos="loadingPlaylistsVideos"
     :loading-playlist-delete="loadingPlaylistDelete"
     :loading-playlists="loadingUserPlaylists"
     :loading-refresh="loadingRefresh"
     @delete-playlist="deletePlaylist"
     @save-edit="saveEditPlaylist"
-    @open-edit="openEdit"
   />
 
   <PlaylistDeleteVideo
@@ -29,16 +32,17 @@
 
 <script setup lang="ts">
 import { PlaylistsApiService } from '../../services/api/playlists.service';
-import type { Language } from '../../runtime';
-import { AsyncData, PlaylistType } from '../../runtime';
+import type { Language, PlaylistType } from '../../runtime';
+import { AsyncData } from '../../runtime';
 import { useI18n } from 'vue-i18n';
 import type { IPlaylistVideoFormType, IPlaylistShort } from '../../types';
 
 const { locale } = useI18n();
 
-const route = useRoute();
+const { isPlaylistAdd } = usePlaylistAdd();
+const { isPlaylistEditOpen } = usePlaylistEdit();
 
-const { favoritesId, favoritesFirstVideoId, FAVORITES_KEY } = useFavorites();
+const route = useRoute();
 
 const {
   data,
@@ -68,22 +72,6 @@ async function getUserPlaylists() {
   await executeUserPlaylists([locale.value as Language], AsyncData.GetPlaylists);
 }
 
-watch(data, (val) => {
-  if (!val) return;
-  const fav = val.items?.find(item => item.name === FAVORITES_KEY);
-  favoritesId.value = fav?.id ?? null;
-  favoritesFirstVideoId.value = fav?.firstVideoId ?? null;
-}, { immediate: true });
-
-async function ensureFavoritesPlaylist(): Promise<string | null> {
-  const existing = data.value?.items?.find(item => item.name === FAVORITES_KEY);
-  if (existing) return existing.id;
-
-  await executePostPlaylist([FAVORITES_KEY, PlaylistType.Private]);
-  await executeUserPlaylists([locale.value as Language], AsyncData.GetPlaylists);
-  return data.value?.items?.find(item => item.name === FAVORITES_KEY)?.id ?? null;
-}
-
 async function saveVideoToPlaylist(event: {
   form: IPlaylistVideoFormType,
   id: string,
@@ -98,16 +86,6 @@ async function saveVideoToPlaylist(event: {
     if (newId) playlistIds.push(newId);
   }
 
-  const favIdx = playlistIds.indexOf(FAVORITES_KEY);
-  if (favIdx !== -1) {
-    const favId = await ensureFavoritesPlaylist();
-    if (favId) {
-      playlistIds[favIdx] = favId;
-    } else {
-      playlistIds.splice(favIdx, 1);
-    }
-  }
-
   const form = { ...event.form, playlistId: playlistIds };
   await executePostPlaylistVideo([form]);
 
@@ -145,11 +123,14 @@ async function saveEditPlaylist(event: {
     page: 1,
   }, locale.value as Language], `${AsyncData.GetPlaylistsVideo}-${event.id}`);
 }
+</script>
 
-async function openEdit(id: string) {
-  await executeVideos(
-      [id, { page: 1 }, locale.value as Language],
-      `${AsyncData.GetPlaylistsVideo}-${id}`
-  );
+<style lang="scss">
+.playlist-main__decorate {
+  position: fixed;
+  inset: 0;
+  z-index: $z-index-popup;
+  backdrop-filter: blur($blur-sm);
+  background-color: $popup-decorate-bg;
 }
-</script>
+</style>

package/components/playlist/visibility.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="playlist-visibility">
+    <UiToggle
+      :model-value="modelValue === PlaylistType.Public"
+      @update:model-value="emit('update:modelValue', $event ? PlaylistType.Public : PlaylistType.Private)"
+    >
+      <span class="playlist-visibility__label">
+        <UiIcon
+          :name="PLAYLIST_TYPE_ICON[PlaylistType.Public]"
+          class="playlist-visibility__icon"
+          size="16"
+        />
+        {{ $t('public') }}
+      </span>
+    </UiToggle>
+    <UiTooltip
+      class="playlist-visibility__tooltip"
+      right
+    >
+      <template #trigger>
+        <span class="playlist-visibility__hint">?</span>
+      </template>
+      <p class="playlist-visibility__text">
+        <span
+          aria-hidden="true"
+          class="playlist-visibility__toggle --on"
+        />
+        <span><strong>{{ $t('playlist.public_on') }}</strong> — {{ $t('playlist.public_on_hint') }}</span>
+      </p>
+      <p class="playlist-visibility__text">
+        <span
+          aria-hidden="true"
+          class="playlist-visibility__toggle"
+        />
+        <span><strong>{{ $t('playlist.public_off') }}</strong> — {{ $t('playlist.public_off_hint') }}</span>
+      </p>
+    </UiTooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PLAYLIST_TYPE_ICON, PlaylistType } from '../../runtime';
+
+defineProps<{
+  modelValue: PlaylistType
+}>();
+
+const emit = defineEmits<{
+  (eventName: 'update:modelValue', value: PlaylistType): void
+}>();
+</script>
+
+<style lang="scss">
+.playlist-visibility {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.playlist-visibility__label {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+.playlist-visibility__icon {
+  color: $playlist-visibility-icon;
+}
+
+.playlist-visibility__tooltip {
+  margin-left: 0;
+}
+
+.playlist-visibility__tooltip .ui-tooltip__content {
+  width: 288px;
+}
+
+.playlist-visibility__hint {
+  @include font-xs;
+
+  display: inline-grid;
+  place-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: $radius-full;
+  color: $playlist-visibility-hint-text;
+  background-color: $playlist-visibility-hint-bg;
+  font-weight: 700;
+  line-height: 1;
+  cursor: help;
+  flex-shrink: 0;
+
+  @include hover(background-color) {
+    background-color: $playlist-visibility-hint-bg--hover;
+  }
+}
+
+.playlist-visibility__text {
+  @include font-xs;
+
+  display: flex;
+  align-items: start;
+  column-gap: 10px;
+  line-height: 1.5;
+}
+
+.playlist-visibility__text:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.playlist-visibility__text strong {
+  color: $playlist-visibility-tooltip-highlight;
+  font-weight: 700;
+}
+
+.playlist-visibility__toggle {
+  position: relative;
+  flex-shrink: 0;
+  width: 28px;
+  height: 16px;
+  margin-top: 2px;
+  border-radius: $radius-full;
+  background-color: $toggle-bg;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: $toggle-handle;
+  }
+}
+
+.playlist-visibility__toggle.--on {
+  background-color: $toggle-bg--active;
+
+  &::after {
+    left: auto;
+    right: 2px;
+    background-color: $toggle-handle--active;
+  }
+}
+</style>

package/components/section/collections.vue

@@ -8,7 +8,7 @@
       <UiSectionTitle
         :title="t('collections_by')"
         title-tag="h2"
-        size="xl"
+        variant="section"
       >
         <span class="section-collections__badge">{{ t('editorial') }}</span>
       </UiSectionTitle>
@@ -86,7 +86,7 @@ const restThumbs = computed(() => {
   align-items: center;
   justify-content: space-between;
   column-gap: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .section-collections__badge {

package/components/section/swiper-cards.vue

@@ -6,7 +6,7 @@
         :title="title || t('top_models')"
         :count="count ?? items.length"
         :icon="icon"
-        :size="size"
+        :variant="variant"
         class="section-swiper-cards__title"
         title-tag="h2"
       />
@@ -70,8 +70,8 @@ withDefaults(defineProps<{
   /** Счётчик в шапке; по умолчанию — число карточек */
   count?: string | number
   icon?: string
-  /** Размер заголовка секции — см. `UiSectionTitle` */
-  size?: 'lg' | 'xl'
+  /** Вариант заголовка — см. `UiSectionTitle` */
+  variant?: 'page' | 'section'
   placeholderAvatar?: string
   /** Карточки только с аватаром и названием, без счётчика роликов */
   withoutCount?: boolean

package/components/ui/chips.vue

@@ -184,11 +184,16 @@ const name = computed(() => {
   @include font-xs;
 
   padding-block: 4px;
-  padding-inline: 8px;
+  padding-inline: 10px;
   height: var(--chips-height-micro);
-  border-radius: 4px;
+  border-radius: $radius-6;
   background-color: $chips-micro-bg;
   color: $chips-micro-text;
+
+  @include hover(background-color, color) {
+    background-color: $chips-micro-bg--hover;
+    color: $chips-micro-text--hover;
+  }
 }
 
 .ui-chips.--not-capitalize {

package/components/ui/confirm.vue

@@ -4,12 +4,16 @@
     <LazyUiPopup
       v-if="modelValue"
       :model-value="modelValue"
+      :transparent-backdrop="transparentBackdrop"
+      class="ui-confirm"
       sheet
       @update:model-value="emit('update:modelValue', $event)"
     >
       <template #title>{{ title }}</template>
 
-      <slot/>
+      <div class="ui-confirm__body">
+        <slot/>
+      </div>
 
       <template #footer>
         <div class="ui-confirm__buttons">
@@ -41,6 +45,7 @@ defineProps<{
   title: string
   confirmText: string
   loading?: boolean
+  transparentBackdrop?: boolean
 }>();
 
 const emit = defineEmits<{
@@ -50,12 +55,19 @@ const emit = defineEmits<{
 </script>
 
 <style lang="scss">
+/* Паддинг на своей обёртке, а не на .ui-popup__content: у sheet-варианта он обнулён
+   селектором из четырёх классов, перебивать который дороже, чем задать отступ самому. */
+.ui-confirm .ui-popup__content {
+  padding: 0;
+}
+
+.ui-confirm__body {
+  padding: 24px;
+}
+
 .ui-confirm__buttons {
   display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 12px;
-
-  @include from-br(sm) {
-    grid-template-columns: 1fr 1fr;
-  }
 }
 </style>

package/components/ui/dropdown.vue

@@ -89,6 +89,8 @@ onClickOutside(dropdownRef, () => {
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();
 
+const { registerOverlay, releaseOverlay } = useOverlayStack();
+
 const breakpoints = CSS_BREAKPOINTS;
 const { isTablet } = checkDeviceWidth(breakpoints);
 
@@ -126,17 +128,22 @@ function close() {
 }
 
 watch(open, (val) => {
-  if (!isTablet.value) return;
   if (val) {
+    if (!isTablet.value) return;
     scrollLock();
+    // На мобиле меню — модальный шит с анимацией, поэтому он тоже участник стека
+    // оверлеев: попап, открытый из него, не должен появляться с анимацией.
+    nextTick(() => registerOverlay(menuRef.value));
   } else {
-    scrollUnlock();
+    if (isTablet.value) scrollUnlock();
+    releaseOverlay(menuRef.value);
   }
 });
 
 onBeforeUnmount(() => {
   if (open.value && isTablet.value) {
     scrollUnlock();
+    releaseOverlay(menuRef.value);
   }
 });
 
@@ -373,25 +380,27 @@ defineExpose({ openDropdown, open });
   }
 }
 
+/* Гейты `--no-*-anim` вешает useOverlayStack: шит не анимируется, если он открывается
+   поверх попапа или закрывается, отдавая место другому оверлею. */
 @include to-br(md) {
-  .ui-dropdown-enter-active,
-  .ui-dropdown-leave-active {
+  .ui-dropdown__menu:where(:not(.--no-enter-anim)).ui-dropdown-enter-active,
+  .ui-dropdown__menu:where(:not(.--no-leave-anim)).ui-dropdown-leave-active {
     transition: transform 300ms ease;
   }
 
-  .ui-dropdown-enter-from {
+  .ui-dropdown__menu:where(:not(.--no-enter-anim)).ui-dropdown-enter-from {
     transform: translateY(100%);
   }
 
-  .ui-dropdown-enter-to {
+  .ui-dropdown__menu:where(:not(.--no-enter-anim)).ui-dropdown-enter-to {
     transform: translateY(0);
   }
 
-  .ui-dropdown-leave-from {
+  .ui-dropdown__menu:where(:not(.--no-leave-anim)).ui-dropdown-leave-from {
     transform: translateY(0);
   }
 
-  .ui-dropdown-leave-to {
+  .ui-dropdown__menu:where(:not(.--no-leave-anim)).ui-dropdown-leave-to {
     transform: translateY(100%);
   }
 }

package/components/ui/expand-row.vue

@@ -219,10 +219,6 @@ onBeforeUnmount(() => {
   height: var(--chips-height-micro);
 }
 
-.ui-expand-row.--micro .ui-expand-row__wrapper {
-  gap: 4px;
-}
-
 .ui-expand-row__button.--more {
   text-transform: capitalize;
 }

package/components/ui/popup.vue

@@ -73,7 +73,9 @@ import { onBackdropClick } from '../../runtime';
 
 const { scrollLock, scrollUnlock } = useGlobalScrollLock();
 
-const { resetSnackbar } = useSnackbar();
+const { snackbarText, isSnackBarInPopup, enterPopup, leavePopup } = useSnackbar();
+
+const { registerOverlay, releaseOverlay } = useOverlayStack();
 
 const popupRef = ref();
 const emit = defineEmits<{
@@ -93,9 +95,9 @@ const props = defineProps<{
 }>();
 
 onMounted(() => {
-  isSnackBarInPopup.value = true;
-  resetSnackbar();
+  enterPopup();
   scrollLock();
+  registerOverlay(popupRef.value);
   if (props.notModal) {
     popupRef.value.show();
   } else {
@@ -105,8 +107,9 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  isSnackBarInPopup.value = false;
+  leavePopup();
   scrollUnlock();
+  releaseOverlay(popupRef.value);
 });
 
 function close() {
@@ -118,8 +121,6 @@ function closeByBackdropClick(event: Event) {
   const target = event.target as HTMLDialogElement;
   onBackdropClick(target, close);
 }
-
-const { snackbarText, isSnackBarInPopup } = useSnackbar();
 </script>
 
 <style lang="scss">
@@ -167,7 +168,7 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
 
     margin: $margin-block auto;
     max-height: calc(100vh - $margin-block * 2);
-    min-width: $popup-min-width;
+    min-width: var(--popup-min-width, #{$popup-min-width});
   }
 
   @include to-br(sm) {
@@ -354,14 +355,14 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
   padding: 20px;
 }
 
-.ui-popup.--drawer {
-  &.v-enter-active,
-  &.v-leave-active {
+/* Появление анимируется только у первого оверлея в стеке, закрытие — только у последнего
+   (см. useOverlayStack): иначе на переходе попап→попап диалоги едут навстречу друг другу. */
+.ui-popup.--drawer:where(:not(.--no-enter-anim)) {
+  &.v-enter-active {
     transition: transform 300ms ease;
   }
 
-  &.v-enter-active::backdrop,
-  &.v-leave-active::backdrop {
+  &.v-enter-active::backdrop {
     transition: opacity 300ms ease;
   }
 
@@ -376,6 +377,16 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
   &.v-enter-to {
     transform: translateX(0);
   }
+}
+
+.ui-popup.--drawer:where(:not(.--no-leave-anim)) {
+  &.v-leave-active {
+    transition: transform 300ms ease;
+  }
+
+  &.v-leave-active::backdrop {
+    transition: opacity 300ms ease;
+  }
 
   &.v-leave-from {
     transform: translateX(0);
@@ -390,10 +401,9 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
   }
 }
 
-.ui-popup.--sheet {
+.ui-popup.--sheet:where(:not(.--no-enter-anim)) {
   @include to-br(sm) {
-    &.v-enter-active,
-    &.v-leave-active {
+    &.v-enter-active {
       transition: transform 300ms ease;
     }
 
@@ -404,6 +414,14 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
     &.v-enter-to {
       transform: translateY(0);
     }
+  }
+}
+
+.ui-popup.--sheet:where(:not(.--no-leave-anim)) {
+  @include to-br(sm) {
+    &.v-leave-active {
+      transition: transform 300ms ease;
+    }
 
     &.v-leave-from {
       transform: translateY(0);

package/components/ui/section-title.vue

@@ -38,16 +38,16 @@ const props = withDefaults(defineProps<{
   title: string
   icon?: string
   img?: string
-  /** `lg` — страничный заголовок (18px, капс); `xl` — заголовок секции (20px, без капса) */
-  size?: 'lg' | 'xl'
+  /** `page` — страничный заголовок (18px, капс, 700); `section` — заголовок секции (18px, без капса, 600) */
+  variant?: 'page' | 'section'
 }>(), {
   titleTag: 'h1',
-  size: 'lg'
+  variant: 'page'
 });
 
 const titleClass = computed(() => [
   'ui-section-title__title',
-  props.size === 'xl' ? '--xl' : '_title'
+  props.variant === 'section' ? '--section' : '_title'
 ]);
 </script>
 
@@ -59,8 +59,8 @@ const titleClass = computed(() => [
   vertical-align: middle;
 }
 
-.ui-section-title__title.--xl {
-  @include font-xl;
+.ui-section-title__title.--section {
+  @include font-lg;
 
   font-weight: 600;
 }