itube-specs 0.0.935 → 0.0.938

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

@@ -225,11 +225,10 @@ $video-card-action-bg--hover: $color-zinc-800;
 $video-card-action-border: $color-zinc-800-60;
 $video-card-action-icon: $color-zinc-300;
 $video-card-action-active-bg: $color-zinc-800;
-$video-card-action-active-bg--hover: $color-red-600;
 $video-card-action-active-border: $color-zinc-800;
 $video-card-action-active-border--hover: $color-red-600;
+$video-card-action-active-ring--hover: 0 0 0 2px $color-red-600;
 $video-card-action-active-icon: $color-white;
-$video-card-action-active-icon--hover: $color-white;
 
 // ─── Video card dropdown ───
 $video-card-dropdown-size--hover: 1;
@@ -704,11 +703,18 @@ $seo-footer-bg: $color-zinc-800-50;
 $empty-text: $color-zinc-500;
 
 // ─── Filter chips ───
-$filter-chips-border: $color-zinc-700;
-$filter-chips-bg: $color-zinc-800;
+$filter-chips-border: $color-zinc-700-50;
+$filter-chips-border--hover: $color-zinc-600;
+$filter-chips-bg: $color-zinc-800-60;
 $filter-chips-text: $color-zinc-300;
-$filter-chips-bg--hover: $color-zinc-700;
+
+// на ховер тут ведёт рамка, фон остаётся прежним
+$filter-chips-bg--hover: $color-zinc-800-60;
 $filter-chips-close: $color-zinc-500;
+$filter-chips-close--hover: $color-white;
+$filter-chips-label: $color-zinc-500;
+$filter-chips-row-clear-text: $color-zinc-500;
+$filter-chips-row-clear-text--hover: $color-white;
 
 // ─── Filter button ───
 $filter-button-count-bg: $color-zinc-300;
@@ -852,8 +858,6 @@ $page-model-videos-section-border: $color-zinc-800-50;
 // ─── Page videos ───
 $page-videos-title-border: $color-zinc-800-50;
 $page-videos-footer-border: $color-zinc-800;
-$page-videos-categories-border: $color-indigo-600;
-$page-videos-categories-icon: $color-indigo-600;
 
 // ─── Градиенты fade ───
 $bg-fade-90: $color-zinc-950-90; // почти непрозрачный
@@ -1134,10 +1138,6 @@ $switcher-icon--active: $color-emerald-400;
 $switcher-subtitle: $color-zinc-600;
 $switcher-subtitle--active: $color-white-60;
 
-// ─── Filter: сброс всех фильтров в облаке чипсов ───
-$filter-model-clear-text: $color-zinc-500;
-$filter-model-clear-text--hover: $color-white;
-
 // ─── Вебкам-карточка (продолжение) ───
 $card-webcam-languages-border: $color-white-20;
 $card-webcam-languages-fallback-bg: $color-zinc-800;

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

@@ -283,11 +283,10 @@ $video-card-action-bg--hover: $color-white;
 $video-card-action-border: $color-gray-300-50;
 $video-card-action-icon: $color-gray-700;
 $video-card-action-active-bg: $color-white;
-$video-card-action-active-bg--hover: $color-red-600;
 $video-card-action-active-border: $color-gray-300;
 $video-card-action-active-border--hover: $color-red-600;
+$video-card-action-active-ring--hover: 0 0 0 2px $color-red-600;
 $video-card-action-active-icon: $color-gray-900;
-$video-card-action-active-icon--hover: $color-white;
 
 // ─── Video menu (меню действий над видео) ───
 $video-menu-preview-border: transparent;
@@ -754,10 +753,17 @@ $empty-text: $color-gray-500;
 
 // ─── Filter chips ───
 $filter-chips-border: transparent;
+
+// рамки нет — на ховер ведёт фон
+$filter-chips-border--hover: transparent;
 $filter-chips-bg: $color-gray-200;
 $filter-chips-text: $color-gray-700;
 $filter-chips-bg--hover: $color-gray-300;
 $filter-chips-close: $color-gray-500;
+$filter-chips-close--hover: $color-gray-950;
+$filter-chips-label: $color-gray-500;
+$filter-chips-row-clear-text: $color-gray-500;
+$filter-chips-row-clear-text--hover: $color-gray-950;
 
 // ─── Filter button ───
 $filter-button-count-bg: $color-white-20;
@@ -878,8 +884,6 @@ $page-model-videos-section-border: transparent;
 // ─── Page videos ───
 $page-videos-title-border: $color-gray-200-50;
 $page-videos-footer-border: transparent;
-$page-videos-categories-border: $color-indigo-600;
-$page-videos-categories-icon: $color-indigo-600;
 
 // ─── Градиенты fade ───
 $bg-fade-90: $color-gray-950-90; // почти непрозрачный
@@ -1160,10 +1164,6 @@ $switcher-icon--active: $color-emerald-400;
 $switcher-subtitle: $color-gray-500;
 $switcher-subtitle--active: $color-white-60;
 
-// ─── Filter: сброс всех фильтров в облаке чипсов ───
-$filter-model-clear-text: $color-gray-500;
-$filter-model-clear-text--hover: $color-gray-950;
-
 // ─── Вебкам-карточка (продолжение) ───
 $card-webcam-languages-border: $color-gray-300;
 $card-webcam-languages-fallback-bg: $color-gray-200;

package/assets/scss/vars/_tokens.scss

@@ -27,7 +27,7 @@
   --control-min-width: 126px;
   --container-padding-inline: 8px;
   --aside-videos-aspect-ratio: 403/593;
-  --popup-padding-bottom-mobile: 32px;
+  --popup-padding-bottom-mobile: 16px;
   --card-round-size: 80px;
 
   @include from-br(xs) {

package/components/auth/recovery.vue

@@ -76,7 +76,6 @@ const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
 onMounted(async () => {
   try {
     await initRecaptcha();
-    console.log('reCAPTCHA готов для этой формы');
   } catch (err) {
     console.error('Ошибка инициализации reCAPTCHA:', err);
   }

package/components/auth/register.vue

@@ -134,7 +134,6 @@ const { setErrorState, showError, show, resetSnackbar } = useSnackbar();
 onMounted(async () => {
   try {
     await initRecaptcha();
-    console.log('reCAPTCHA готов для этой формы');
   } catch (err) {
     console.error('Ошибка инициализации reCAPTCHA:', err);
   }

package/components/card/video/actions.vue

@@ -22,7 +22,8 @@
       :aria-pressed="later"
       :class="['card-video-actions__btn', '--watch-later', { '--active': later }]"
       type="button"
-      @click="toggleWatchLater(card.guid, card.title)"
+      v-bind="hoverGuard"
+      @click="onWatchLaterClick"
     >
       <UiIcon
         :name="later ? 'clock-filled' : 'clock'"
@@ -44,9 +45,17 @@ const props = defineProps<{
 const { t } = useI18n();
 
 const { isFavorite, isWatchLater, toggleFavorite, toggleWatchLater } = useVideoCollections();
+const { blockHover, hoverGuard } = useHoverGuard();
 
 const favorite = computed(() => isFavorite(props.card.guid));
 const later = computed(() => isWatchLater(props.card.guid));
+
+/* The heart is only rendered while the video is in favorites, so a click always unmounts it — only
+   «watch later» stays under the cursor and needs the hover muted. */
+function onWatchLaterClick() {
+  blockHover();
+  toggleWatchLater(props.card.guid, props.card.title);
+}
 </script>
 
 <style lang="scss">
@@ -97,6 +106,7 @@ $action-size: 36px;
       var(--transition) opacity,
       var(--transition) background-color,
       var(--transition) border-color,
+      var(--transition) box-shadow,
       var(--transition) color;
   }
 
@@ -104,14 +114,13 @@ $action-size: 36px;
     opacity: 1;
   }
 
-  .card-video-actions__btn:is(:hover, :focus-visible) {
+  .card-video-actions__btn:not(.--active):is(:hover, :focus-visible) {
     background-color: $video-card-action-bg--hover;
   }
 
-  .card-video-actions__btn.--active:is(:hover, :focus-visible) {
-    background-color: $video-card-action-active-bg--hover;
+  .card-video-actions__btn.--active:not(.--no-hover):is(:hover, :focus-visible) {
     border-color: $video-card-action-active-border--hover;
-    color: $video-card-action-active-icon--hover;
+    box-shadow: $video-card-action-active-ring--hover;
   }
 }
 

package/components/filter/chips-row.vue

@@ -0,0 +1,56 @@
+<!-- Облако чипсов активных фильтров с кнопкой сброса -->
+<template>
+  <div
+    v-if="items.length > 0"
+    class="filter-chips-row"
+  >
+    <slot/>
+    <FilterChips
+      v-for="(item, index) in items"
+      :key="`filter-chips-${index}`"
+      :item="item"
+      @click="emit('click', item)"
+    />
+    <button
+      v-if="items.length > 1"
+      class="filter-chips-row__clear"
+      type="button"
+      @click="emit('clear')"
+    >{{ t('reset_all') }}</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IFilterChipItem } from '../../types';
+
+defineProps<{
+  items: IFilterChipItem[]
+}>();
+
+const { t } = useI18n();
+
+const emit = defineEmits<{
+  (eventName: 'click', eventValue: IFilterChipItem): void
+  (eventName: 'clear'): void
+}>();
+</script>
+
+<style lang="scss">
+.filter-chips-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-chips-row__clear {
+  @include font-sm;
+
+  padding: 6px 8px;
+  color: $filter-chips-row-clear-text;
+
+  @include hover(color) {
+    color: $filter-chips-row-clear-text--hover;
+  }
+}
+</style>

package/components/filter/chips.vue

@@ -1,58 +1,78 @@
-<!-- Чипсы активных фильтров с кнопкой сброса -->
+<!-- Чипса выбранного фильтра: приглушённое название фильтра, значение и сброс по клику -->
 <template>
-  <UiExpandRow v-if="items.length > 0">
-    <template #prepend>
-      <slot/>
-    </template>
-    <UiChips
-      v-for="(item, index) in items"
-      :key="index"
-      :index="`s-filter-page-chips${index}`"
-      :item="item"
-      class="filter-chips"
-      with-close
-      @click="onChipsClick(item)"
+  <button
+    class="filter-chips"
+    type="button"
+    @click="emit('click')"
+  >
+    <span class="filter-chips__text">
+      <span
+        v-if="item.label && !withoutLabel"
+        class="filter-chips__label"
+      >{{ item.label }}:</span>{{ item.title }}
+    </span>
+    <UiIcon
+      class="filter-chips__close"
+      name="close"
+      size="16"
     />
-  </UiExpandRow>
+  </button>
 </template>
 
 <script setup lang="ts">
-import type { IChipsItem } from '../../types';
+import type { IFilterChipItem } from '../../types';
 
 defineProps<{
-  items: IChipsItem[]
+  item: IFilterChipItem
+  /** Без названия фильтра — в попапе фильтр уже подписан своим полем. */
+  withoutLabel?: boolean
 }>();
 
 const emit = defineEmits<{
-  (eventName: 'click', eventValue: IChipsItem): void
+  (eventName: 'click'): void
 }>();
-
-function onChipsClick(item: IChipsItem) {
-  emit('click', item);
-}
 </script>
 
 <style lang="scss">
 .filter-chips {
   @include font-sm;
 
-  border-radius: $radius-lg;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  padding-block: 6px;
+  padding-left: 12px;
+
+  // справа отступ меньше — там иконка сброса со своим зазором
+  padding-right: 8px;
   border: 1px solid $filter-chips-border;
+  border-radius: $radius-md;
   background-color: $filter-chips-bg;
-  pointer-events: all;
   color: $filter-chips-text;
+  white-space: nowrap;
+  text-transform: capitalize;
 
-  @include hover(background-color) {
+  @include hover(background-color, border-color) {
     background-color: $filter-chips-bg--hover;
+    border-color: $filter-chips-border--hover;
   }
 }
 
-.filter-chips .ui-chips__close {
-  pointer-events: all;
+// подпись и значение читаются одной фразой, поэтому не отдельный флекс-элемент
+.filter-chips__label {
+  padding-right: 4px;
+  color: $filter-chips-label;
+}
+
+.filter-chips__close {
   color: $filter-chips-close;
+  transition: var(--transition) color;
+}
 
-  @include hover(opacity) {
-    opacity: 0.9;
+// иконка подсвечивается вместе с чипсой, а не сама по себе
+@media (hover: hover) {
+  .filter-chips:is(:hover, :focus-visible) .filter-chips__close {
+    color: $filter-chips-close--hover;
   }
 }
 </style>

package/components/filter/main.vue

@@ -43,8 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ButtonSizes, ButtonThemes, IChipsItem, IFilterScheme, ISelectItem } from '../../types';
-import type { LocationQuery } from '#vue-router';
+import type { ButtonSizes, ButtonThemes, IFilterChipItem, IFilterScheme, ISelectItem } from '../../types';
 import { parseFilterCategories } from '../../utils/parse-filter-categories';
 import { parseCategoryFilterValues } from '../../utils/filter-main/parse-category-filter-values';
 import { getActiveFilterValues } from '../../utils/filter-main/get-active-filter-values';
@@ -64,23 +63,40 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
 
 const filterOpen = ref(false);
 
-const durationValue = ref('');
-const addedValue = ref('');
-const filterValue = ref({} as Record<string, string>);
-
-function syncFromQuery(query: LocationQuery) {
-  filterValue.value = parseCategoryFilterValues(parseFilterCategories(query));
-  durationValue.value = (query.duration as string) || '';
-  addedValue.value = (query.added as string) || '';
-}
-
-syncFromQuery(route.query);
-
-watch(() => route.query, (q) => syncFromQuery(q));
+// Длительность и дата добавления живут в query своими параметрами, но в попапе это такие же
+// поля, как категории — держим их в одном наборе выбора и разводим обратно при применении
+const DURATION_FIELD = 'duration';
+const ADDED_FIELD = 'added';
+
+const {
+  values: filterValue,
+  count: activeCount,
+  isFiltered,
+  set: setField,
+  remove: removeField,
+  reset,
+  apply: saveResult,
+} = useFilterPending({
+  open: filterOpen,
+  decode: query => ({
+    ...parseCategoryFilterValues(parseFilterCategories(query)),
+    ...(query[DURATION_FIELD] ? { [DURATION_FIELD]: String(query[DURATION_FIELD]) } : {}),
+    ...(query[ADDED_FIELD] ? { [ADDED_FIELD]: String(query[ADDED_FIELD]) } : {}),
+  }),
+  encode: (values, query) => {
+    const { [DURATION_FIELD]: durationValue, [ADDED_FIELD]: addedValue, ...categories } = values;
+
+    return buildFilterQuery({
+      currentQuery: query,
+      filterValue: categories,
+      durationValue: durationValue || '',
+      addedValue: addedValue || '',
+    });
+  },
+});
 
 watch(filterOpen, (value) => {
   if (value) emit('open');
@@ -92,14 +108,6 @@ watch(() => route.query, (value) => {
   filterCount.value = getActiveFilterValues(value).length;
 });
 
-const activeCount = computed(() => {
-  const hasDuration = durationValue.value ? 1 : 0;
-  const hasAdded = addedValue.value ? 1 : 0;
-  return Object.keys(filterValue.value).length + hasAdded + hasDuration;
-});
-
-const isFiltered = computed(() => !!route.query['categories'] || Object.keys(filterValue.value).length > 0 || !!durationValue.value || !!addedValue.value);
-
 const QUICK_NAMES = ['action', 'guy type', 'ppl involved', 'ethnicity & nationality'];
 const PERFORMER_NAMES = [
   'age',
@@ -180,9 +188,9 @@ const groupItems = computed(() => {
       name: 'duration',
       title: t('duration'),
       label: t('duration'),
-      value: durationValue.value,
+      value: filterValue.value[DURATION_FIELD] ?? '',
       items: translateTitle(props.durationItems),
-      active: !!durationValue.value,
+      active: !!filterValue.value[DURATION_FIELD],
       icon: 'time',
       placeholder: t('select'),
     } as any,
@@ -191,9 +199,9 @@ const groupItems = computed(() => {
       name: 'added',
       title: t('added'),
       label: t('added'),
-      value: addedValue.value,
+      value: filterValue.value[ADDED_FIELD] ?? '',
       items: translateTitle(props.addedItems),
-      active: !!addedValue.value,
+      active: !!filterValue.value[ADDED_FIELD],
       icon: 'date',
       placeholder: t('select'),
     } as any,
@@ -207,93 +215,32 @@ const groupItems = computed(() => {
   ];
 });
 
-const DURATION_CHIP_KEY = '__duration';
-const ADDED_CHIP_KEY = '__added';
-
-const activeChips = computed<IChipsItem[]>(() => {
-  const chips: IChipsItem[] = [];
-
-  for (const str of parseFilterCategories(route.query)) {
-    const [key, ...rest] = str.split('_');
-    const value = rest.join('_');
-    if (!key || !value) continue;
-    const schemeItem = props.scheme.find(s => s.name.toLowerCase() === key);
-    const matched = schemeItem?.items.find(i => i.value === value);
-    chips.push({ title: matched?.title || value, key });
-  }
-
-  const duration = route.query.duration as string;
-  if (duration) {
-    const item = props.durationItems.find(i => i.value === duration);
-    chips.push({ title: item?.title ? t(item.title) : duration, key: DURATION_CHIP_KEY });
-  }
-
-  const added = route.query.added as string;
-  if (added) {
-    const item = props.addedItems.find(i => i.value === added);
-    chips.push({ title: item?.title ? t(item.title) : added, key: ADDED_CHIP_KEY });
-  }
-
-  return chips;
-});
+// Чипсы попапа показывают выбор, а не применённое: иначе только что отмеченный фильтр
+// появится в них лишь после «Применить», хотя счётчик рядом уже посчитан
+const activeChips = computed<IFilterChipItem[]>(() => Object.entries(filterValue.value)
+    .map(([key, value]) => ({ title: fieldValueTitle(key, value), key }))
+);
 
-function onChipClick(item: IChipsItem) {
-  const nextQuery = { ...route.query };
-  delete nextQuery.page;
+function fieldValueTitle(name: string, value: string) {
+  if (name === DURATION_FIELD || name === ADDED_FIELD) {
+    const items = name === DURATION_FIELD ? props.durationItems : props.addedItems;
+    const item = items.find(i => i.value === value);
 
-  if (item.key === DURATION_CHIP_KEY) {
-    delete nextQuery.duration;
-  } else if (item.key === ADDED_CHIP_KEY) {
-    delete nextQuery.added;
-  } else if (item.key) {
-    const remaining = parseFilterCategories(route.query).filter(str => {
-      const [k] = str.split('_');
-      return k !== item.key;
-    });
-    if (remaining.length) {
-      nextQuery.categories = remaining.join(',');
-    } else {
-      delete nextQuery.categories;
-    }
+    return item?.title ? t(item.title) : value;
   }
 
-  router.push({ query: nextQuery });
-}
+  const schemeItem = props.scheme.find(s => s.name.toLowerCase() === name);
 
-function onFieldUpdate({ name, value }: { name: string, value: any }) {
-  if (name === 'duration') {
-    durationValue.value = value;
-  } else if (name === 'added') {
-    addedValue.value = value;
-  } else {
-    if (!value) {
-      const next = { ...filterValue.value };
-      delete next[name];
-      filterValue.value = next;
-    } else {
-      filterValue.value = { ...filterValue.value, [name]: value };
-    }
-  }
+  return schemeItem?.items.find(i => i.value === value)?.title || value;
 }
 
-function saveResult() {
-  router.push({
-    query: buildFilterQuery({
-      currentQuery: route.query,
-      filterValue: filterValue.value,
-      durationValue: durationValue.value,
-      addedValue: addedValue.value,
-    }),
-  });
-
-  filterOpen.value = false;
+// Снятие чипсы — тоже выбор: уйдёт в query вместе с остальным по «Применить»
+function onChipClick(item: IFilterChipItem) {
+  if (item.key) removeField(item.key);
 }
 
-function reset() {
-  durationValue.value = '';
-  addedValue.value = '';
-  filterValue.value = {};
-  router.push({ query: { categories: null } });
+function onFieldUpdate({ name, value }: { name: string, value: any }) {
+  setField(name, value);
 }
 </script>