itube-specs 0.0.1060 → 0.0.1061

package/SITE_UPDATES.md

@@ -11,6 +11,17 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1061 — 2026-11-02
+
+- **Всем — решить флаг:** новая страница загрузки видео `/upload` (выбор файла с проверкой в браузере → детали
+  во время загрузки → «отправлено» со статусом обработки) и кнопка Upload в шапке (десктоп) — за флагом
+  `FeatureUploadEnabled`. API загрузки ещё нет: прогресс и обработка имитируются таймерами. Хотите страницу —
+  добавьте `FeatureUploadEnabled: true` в `config/feature-flags.config.ts` (gay-cool-new включил). Без флага
+  `/upload` отдаёт 404, кнопки нет, а мёртвая кнопка Upload из бургера (была без действия) пропадает — делать
+  ничего не надо.
+- **Всем — к сведению:** новая группа общих ключей `upload_page` (пока только en-US, остальные локали — через CSV
+  слоя). У `UiConfirm` необязательный проп `cancelText` (по умолчанию «Cancel», как было).
+
 ## 0.0.1060 — 2026-11-02
 
 - **Сайтам со своими `assets/scss/vars` (hdsex-remaster и др.), срочно:** с 0.0.1059 (лоадер, `0d412182`) без новых

package/assets/icons/common/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" viewBox="0 0 24 24"><path d="m5 12 7-7 7 7M12 19V5"/></svg>

package/assets/icons/common/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 1 1 0 10h-2M8 12h8"/></svg>

package/assets/icons/common/loader.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/assets/icons/common/upload-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="currentColor" d="M9 2.25 4.5 6.75h2.75V12h3.5V6.75h2.75z"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M2.5 14v1.25c0 .97.78 1.75 1.75 1.75h9.5c.97 0 1.75-.78 1.75-1.75V14"/></svg>

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

@@ -424,6 +424,8 @@ $niche-switch-text--checked: $color-white;
 $footer-language-bg: $color-zinc-800-50;
 $footer-language-bg--hover: $color-zinc-700;
 $footer-language-text: $color-zinc-400;
+$footer-language-text--hover: $color-white;
+$footer-language-badge: $color-zinc-200;
 $footer-language-menu-bg: $color-night;
 $footer-language-menu-border: $color-zinc-800;
 $footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
@@ -456,8 +458,9 @@ $header-burger-icon: $color-zinc-200;
 $header-user-icon: $color-zinc-500;
 $header-language-trigger: $color-zinc-400;
 $header-language-trigger--hover: $color-white;
-$header-language-trigger-bg: transparent;
-$header-language-trigger-bg--hover: transparent;
+$header-language-trigger-bg: $color-zinc-800-50;
+$header-language-trigger-bg--hover: $color-zinc-700;
+$header-language-badge: $color-zinc-200;
 $header-language-menu-bg: $color-night;
 $header-language-menu-border: $color-zinc-800;
 $header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
@@ -1214,3 +1217,56 @@ $player-tags-chip-bg: $color-zinc-800;
 $player-tags-tag-bg: $color-zinc-800-50;
 $player-tags-more-text: $color-zinc-400;
 $player-tags-more-text--hover: $color-white;
+
+// ─── Header upload button ───
+$header-upload-bg: $color-indigo-600-20;
+$header-upload-border: $color-indigo-500-50;
+$header-upload-border--hover: $color-indigo-500;
+$header-upload-text: $color-white;
+
+// ─── Upload page ───
+$upload-title: $color-white;
+$upload-text: $color-zinc-450;
+$upload-card-bg: $color-zinc-925;
+$upload-accent: $color-indigo-600;
+$upload-accent-text: $color-indigo-500;
+$upload-success: $color-emerald-500;
+$upload-error: $color-red-500;
+$upload-icon-bg: $color-zinc-850;
+$upload-dot: $color-zinc-550;
+$upload-check-icon: $color-zinc-550;
+$upload-dropzone-border: $color-zinc-800;
+$upload-dropzone-border--error: $color-red-500-50;
+$upload-dropzone-bg--active: $color-zinc-925;
+$upload-field-bg: $color-zinc-850;
+$upload-field-text: $color-white;
+$upload-field-placeholder: $color-zinc-450;
+$upload-field-border: transparent;
+$upload-field-border--hover: $color-zinc-800;
+$upload-field-bg--hover: $color-zinc-800;
+$upload-chip-bg: $color-zinc-850;
+$upload-chip-text: $color-white;
+$upload-chip-icon: $color-zinc-450;
+$upload-chip-icon--hover: $color-white;
+$upload-avatar-bg: $color-zinc-925;
+$upload-avatar-text: $color-zinc-450;
+$upload-listbox-bg: $color-zinc-850;
+$upload-listbox-border: $color-zinc-800;
+$upload-listbox-shadow: 0 12px 32px #{$mono-black-50}, 0 2px 8px #{$mono-black-42};
+$upload-option-bg--active: $color-zinc-800;
+$upload-poster-bg: $color-zinc-850;
+$upload-overlay-bg: $color-black-50;
+$upload-overlay-text: $color-white;
+$upload-overlay-subtext: $color-white-75;
+$upload-badge-bg: $color-black-75;
+$upload-badge-text: $color-white;
+$upload-track-bg: $color-black-50;
+$upload-stripes-from: $color-indigo-600;
+$upload-stripes-to: $color-indigo-800;
+$upload-step-line: $color-zinc-700;
+$upload-step-time: $color-zinc-500;
+$upload-step-icon: $color-white;
+$upload-radio-ring: $color-zinc-700;
+$upload-radio-dot: $color-white;
+$upload-rules-text: $color-zinc-400;
+$upload-rules-dot: $color-zinc-600;

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

@@ -482,6 +482,8 @@ $niche-switch-text--checked: $color-white;
 $footer-language-bg: $color-slate-750;
 $footer-language-bg--hover: $color-slate-700;
 $footer-language-text: $color-white;
+$footer-language-text--hover: $color-white;
+$footer-language-badge: $color-gray-200;
 $footer-language-menu-bg: $color-slate-850;
 $footer-language-menu-border: $color-white-10;
 $footer-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
@@ -516,6 +518,7 @@ $header-language-trigger: $color-white;
 $header-language-trigger--hover: $color-white;
 $header-language-trigger-bg: $color-slate-750;
 $header-language-trigger-bg--hover: $color-slate-700;
+$header-language-badge: $color-gray-200;
 $header-language-menu-bg: $color-slate-850;
 $header-language-menu-border: $color-white-10;
 $header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
@@ -1243,3 +1246,56 @@ $player-tags-chip-bg: $color-gray-200;
 $player-tags-tag-bg: $color-gray-100;
 $player-tags-more-text: $color-gray-700;
 $player-tags-more-text--hover: $color-gray-900;
+
+// ─── Header upload button ───
+$header-upload-bg: $color-indigo-600-20;
+$header-upload-border: $color-indigo-500-50;
+$header-upload-border--hover: $color-indigo-500;
+$header-upload-text: $color-white;
+
+// ─── Upload page ───
+$upload-title: $color-gray-900;
+$upload-text: $color-gray-500;
+$upload-card-bg: $color-gray-100;
+$upload-accent: $color-indigo-600;
+$upload-accent-text: $color-indigo-600;
+$upload-success: $color-emerald-600;
+$upload-error: $color-red-500;
+$upload-icon-bg: $color-gray-200;
+$upload-dot: $color-gray-400;
+$upload-check-icon: $color-gray-400;
+$upload-dropzone-border: $color-gray-300;
+$upload-dropzone-border--error: $color-red-300;
+$upload-dropzone-bg--active: $color-gray-100;
+$upload-field-bg: $color-white;
+$upload-field-text: $color-gray-900;
+$upload-field-placeholder: $color-gray-400;
+$upload-field-border: $color-gray-200;
+$upload-field-border--hover: $color-gray-300;
+$upload-field-bg--hover: $color-gray-200;
+$upload-chip-bg: $color-gray-200;
+$upload-chip-text: $color-gray-900;
+$upload-chip-icon: $color-gray-500;
+$upload-chip-icon--hover: $color-gray-900;
+$upload-avatar-bg: $color-gray-100;
+$upload-avatar-text: $color-gray-500;
+$upload-listbox-bg: $color-white;
+$upload-listbox-border: $color-gray-200;
+$upload-listbox-shadow: 0 12px 32px #{$mono-black-15}, 0 2px 8px #{$mono-black-10};
+$upload-option-bg--active: $color-gray-100;
+$upload-poster-bg: $color-gray-200;
+$upload-overlay-bg: $color-black-50;
+$upload-overlay-text: $color-white;
+$upload-overlay-subtext: $color-white-75;
+$upload-badge-bg: $color-black-75;
+$upload-badge-text: $color-white;
+$upload-track-bg: $color-black-50;
+$upload-stripes-from: $color-indigo-600;
+$upload-stripes-to: $color-indigo-800;
+$upload-step-line: $color-gray-200;
+$upload-step-time: $color-gray-400;
+$upload-step-icon: $color-white;
+$upload-radio-ring: $color-gray-300;
+$upload-radio-dot: $color-white;
+$upload-rules-text: $color-gray-300;
+$upload-rules-dot: $color-gray-500;

package/assets/scss/vars/_palette.scss

@@ -133,6 +133,7 @@ $color-red-400: lab(63.7053% 60.745 31.3109);
 $color-red-500: lab(55.4814% 75.0732 48.8528);
 $color-red-500-10: color-mix(in oklab, #{$color-red-500} 10%, transparent);
 $color-red-500-20: color-mix(in oklab, #{$color-red-500} 20%, transparent);
+$color-red-500-50: color-mix(in oklab, #{$color-red-500} 50%, transparent);
 $color-red-600: lab(48.4493% 77.4328 61.5452);
 $color-red-600-20: color-mix(in oklab, #{$color-red-600} 20%, transparent);
 $color-red-600-30: color-mix(in oklab, #{$color-red-600} 30%, transparent);

package/components/layout/burger.vue

@@ -33,11 +33,13 @@
           <UiAvatar :size="40"/>
           <span class="layout-burger__button-text">{{ data.username }}</span>
         </NuxtLink>
-        <button
+        <component
           v-for="(btn, index) in burgerButtons"
+          :is="btn.link ? NuxtLink : 'button'"
           :key="`burger-btn-${index}`"
+          :to="btn.link"
+          :type="btn.link ? undefined : 'button'"
           class="layout-burger__button"
-          type="button"
           @click="btn.action?.(); close()"
         >
           <span class="layout-burger__button-icon">
@@ -47,7 +49,7 @@
             />
           </span>
           {{ t(btn.label) }}
-        </button>
+        </component>
       </div>
 
       <nav class="layout-burger__nav">
@@ -84,6 +86,7 @@
 </template>
 
 <script setup lang="ts">
+import { NuxtLink } from '#components';
 import { AuthSteps, onBackdropClick, checkDeviceWidth } from '../../runtime';
 import type { IProfileData } from '../../types';
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
@@ -158,7 +161,9 @@ function logOut() {
   useUser(AuthorizationApiService).signOut();
 }
 
-const burgerButtons = computed(() => [
+const featureFlags = useRuntimeConfig().public.featureFlags;
+
+const burgerButtons = computed<{ icon: string, label: string, action?: () => void, link?: string }[]>(() => [
   ...isAuthorized.value ? [
         {
           icon: 'logout',
@@ -178,10 +183,13 @@ const burgerButtons = computed(() => [
           action: () => openAuthPopup(AuthSteps.Login),
         },
       ],
-  {
-    icon: 'upload',
-    label: 'upload'
-  },
+  ...featureFlags.FeatureUploadEnabled ? [
+    {
+      icon: 'upload',
+      label: 'upload',
+      link: generateLink('/upload'),
+    }
+  ] : [],
 ]);
 
 const router = useRouter();

package/components/layout/footer-language.vue

@@ -82,13 +82,16 @@ function handler() {
   background-color: $footer-language-bg;
   color: $footer-language-text;
 
-  @include hover(background-color) {
+  @include hover(background-color, color) {
+    color: $footer-language-text--hover;
     background-color: $footer-language-bg--hover;
   }
 }
 
 .layout-footer-language__badge {
   @include locale-badge;
+
+  color: $footer-language-badge;
 }
 
 .layout-footer-language__angle {

package/components/layout/header.vue

@@ -1,73 +1,95 @@
 <template>
   <header
-    :class="{'--burger-open': burgerShow, '--no-notifications': !featureFlags.FeatureFollowEnabled}"
+    :class="{
+      '--burger-open': burgerShow,
+      '--no-notifications': !featureFlags.FeatureFollowEnabled,
+    }"
     class="layout-header"
   >
 
     <SearchMain class="layout-header__search"/>
 
-    <LayoutLogo
-      glow
-      class="layout-header__logo"
-    />
+    <div class="layout-header__left">
+      <LayoutLogo
+        glow
+        class="layout-header__logo"
+      />
 
-    <LayoutNiche
-      class="layout-header__niche _from-sd"
-      icon-size="20"
-    />
-    <LayoutNotifications
-      v-if="featureFlags.FeatureFollowEnabled"
-      class="layout-header__notifications"
-    />
+      <LayoutNiche
+        class="layout-header__niche _from-sd"
+        icon-size="20"
+      />
+    </div>
 
-    <div
-      ref="languageRef"
-      class="layout-header__language _from-sd"
-    >
-      <button
-        :class="{'--open': showLanguage}"
-        :aria-label="$t('language')"
-        class="layout-header__language-trigger"
-        type="button"
-        @click="showLanguageMenu"
+    <div class="layout-header__right">
+      <LayoutNotifications
+        v-if="featureFlags.FeatureFollowEnabled"
+        class="layout-header__notifications"
+      />
+      <NuxtLink
+        v-if="featureFlags.FeatureUploadEnabled"
+        :to="uploadLink"
+        :aria-current="isUploadPage ? 'page' : undefined"
+        :tabindex="isUploadPage ? -1 : undefined"
+        :class="{'--current': isUploadPage}"
+        class="layout-header__upload _from-sd"
       >
         <UiIcon
-          class="layout-header__language-icon"
-          name="earth"
-          size="16"
+          name="upload-arrow"
+          size="18"
+          aria-hidden="true"
         />
-        <span class="layout-header__language-badge">{{ locale }}</span>
-        <UiIcon
-          class="layout-header__language-angle"
-          name="angle-down"
-          size="12"
-        />
-      </button>
-      <transition mode="out-in">
-        <KeepAlive>
-          <LazyLayoutLanguage
-            v-if="showLanguage"
-            class="layout-header__language-menu"
-            icon-size="20"
-            @change="closeLanguage"
+        {{ $t('upload') }}
+      </NuxtLink>
+      <div
+        ref="languageRef"
+        class="layout-header__language _from-sd"
+      >
+        <button
+          :class="{'--open': showLanguage}"
+          :aria-label="$t('language')"
+          class="layout-header__language-trigger"
+          type="button"
+          @click="showLanguageMenu"
+        >
+          <UiIcon
+            class="layout-header__language-icon"
+            name="earth"
+            size="16"
           />
-        </KeepAlive>
-      </transition>
-    </div>
-
-    <LazyLayoutHeaderUser
-      v-if="isAuthorized"
-      class="layout-header__user _from-sd"
-    />
+          <span class="layout-header__language-badge">{{ locale }}</span>
+          <UiIcon
+            class="layout-header__language-angle"
+            name="angle-down"
+            size="12"
+          />
+        </button>
+        <transition mode="out-in">
+          <KeepAlive>
+            <LazyLayoutLanguage
+              v-if="showLanguage"
+              class="layout-header__language-menu"
+              icon-size="20"
+              @change="closeLanguage"
+            />
+          </KeepAlive>
+        </transition>
+      </div>
+
+      <LazyLayoutHeaderUser
+        v-if="isAuthorized"
+        class="layout-header__user _from-sd"
+      />
 
-    <template v-else>
-      <UiBtn
-        class="layout-header__sign-up _from-sd"
-        theme="primary"
-        @click="openAuthPopup(AuthSteps.Registration)"
-      >{{ $t('sign_up_button') }}
-      </UiBtn>
-    </template>
+      <template v-else>
+        <UiBtn
+          class="layout-header__sign-up _from-sd"
+          theme="primary"
+          @click="openAuthPopup(AuthSteps.Registration)"
+        >{{ $t('sign_up_button') }}
+        </UiBtn>
+      </template>
+    </div>
 
     <button
       :aria-label="$t('show_menu')"
@@ -95,6 +117,11 @@ import { AuthorizationApiService } from '../../services/api/authorization.servic
 
 const { locale } = useI18n();
 const featureFlags = useRuntimeConfig().public.featureFlags;
+const route = useRoute();
+const { generateLink } = useGenerateLink();
+
+const uploadLink = computed(() => generateLink('/upload'));
+const isUploadPage = computed(() => route.path === uploadLink.value);
 
 const burgerShow = ref(false);
 const showLanguage = ref(false);
@@ -127,7 +154,12 @@ function closeLanguage() {
   width: 100%;
 
   @include from-br($brkpnt-burger) {
-    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
+    grid-template-columns: minmax(max-content, 1fr) minmax(0, $search-max-width) minmax(max-content, 1fr);
+    justify-content: stretch;
+  }
+
+  @include from-br(md) {
+    grid-template-columns: minmax(max-content, 1fr) minmax(0, $search-max-width-md) minmax(max-content, 1fr);
   }
 
   /* поиск | лого | колокольчик | бургер — 1fr держит лого по центру */
@@ -138,34 +170,38 @@ function closeLanguage() {
 }
 
 .layout-header.--no-notifications {
-  @include from-br($brkpnt-burger) {
-    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
-  }
-
   @include to-br($brkpnt-burger) {
     grid-template-columns: auto 1fr auto;
   }
 }
 
-.layout-header.--no-notifications .layout-header__language {
+.layout-header__left,
+.layout-header__right {
+  display: contents;
+
   @include from-br($brkpnt-burger) {
-    grid-column: 4;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    grid-row: 1;
   }
 }
 
-.layout-header.--no-notifications .layout-header__user,
-.layout-header.--no-notifications .layout-header__sign-up {
+.layout-header__left {
   @include from-br($brkpnt-burger) {
-    grid-column: 5;
+    grid-column: 1;
+    justify-self: start;
   }
 }
 
-.layout-header__logo {
+.layout-header__right {
   @include from-br($brkpnt-burger) {
-    grid-column: 1;
-    grid-row: 1;
+    grid-column: 3;
+    justify-self: end;
   }
+}
 
+.layout-header__logo {
   @include to-br($brkpnt-burger) {
     justify-self: center;
   }
@@ -189,58 +225,46 @@ function closeLanguage() {
   }
 }
 
-/* Поиск живёт в своей колонке (свободный 1fr между лого и правым блоком), а не оверлеем
-   поверх всей строки: так он сжимается вместе с ней и на него ничто не наезжает */
-
-/**
- * Поиск стоит строго по центру ШАПКИ, а не по центру свободного места: он растянут
- * на всю строку сетки и центрирован `justify-self`. Иначе центр уезжал бы к более
- * узкой группе: левая (лого + ниша) и правая (колокольчик, язык, вход) разной ширины.
- *
- * Наезжать при этом не на что: по обе стороны резервируется `--header-side-space`
- * — ширина более широкой группы (сейчас левая: лого + ниша ~340, правая ~290).
- * Считается БЕЗ бокового паддинга шапки, потому что `100%` у поиска — это уже
- * контентная ширина. Не хватило места — поиск сужается, а боковые группы остаются
- * на своих местах. Значение вынесено в переменную: у сайта без переключателя ниш
- * левая группа уже, и он может его уменьшить.
- */
 .layout-header__search {
-  --header-side-space: 358px;
-
   @include from-br($brkpnt-burger) {
-    grid-column: 1 / -1;
+    grid-column: 2;
     grid-row: 1;
-    justify-self: center;
     width: 100%;
     min-width: 0;
-
-    // 24px — два column-gap шапки по бокам от поиска
-    max-width: min($search-max-width, calc(100% - 2 * var(--header-side-space) - 24px));
   }
+}
 
-  @include from-br(md) {
-    max-width: min($search-max-width-md, calc(100% - 2 * var(--header-side-space) - 24px));
+.layout-header__upload {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding-inline: 12px;
+  color: $header-upload-text;
+  background-color: $header-upload-bg;
+  border: 1px solid $header-upload-border;
+  border-radius: $radius-md;
+
+  @include hover(border-color) {
+    border-color: $header-upload-border--hover;
   }
 }
 
+.layout-header__upload.--current {
+  cursor: default;
+  pointer-events: none;
+}
+
 .layout-header__user {
   display: grid;
   place-content: center;
   color: $header-user-icon;
 }
 
-.layout-header__user,
-.layout-header__sign-up {
-  @include from-br($brkpnt-burger) {
-    grid-column: 6;
-    grid-row: 1;
-  }
-}
-
 .layout-header__niche {
   @include from-br($brkpnt-burger) {
-    grid-column: 2;
-    grid-row: 1;
     margin-left: 4px;
   }
 }
@@ -251,18 +275,9 @@ function closeLanguage() {
   margin: 0 16px;
 }
 
-.layout-header__notifications {
-  @include from-br($brkpnt-burger) {
-    grid-column: 4;
-    grid-row: 1;
-  }
-}
-
 .layout-header__language {
   @include from-br($brkpnt-burger) {
     position: relative;
-    grid-column: 5;
-    grid-row: 1;
   }
 }
 
@@ -287,6 +302,8 @@ function closeLanguage() {
 
 .layout-header__language-badge {
   @include locale-badge;
+
+  color: $header-language-badge;
 }
 
 .layout-header__language-angle {

package/components/ui/confirm.vue

@@ -23,7 +23,7 @@
             size="l"
             theme="secondary"
             @click="emit('update:modelValue', false)"
-          >{{ $t('cancel') }}
+          >{{ cancelText || $t('cancel') }}
           </UiBtn>
           <UiBtn
             :disabled="loading"
@@ -44,6 +44,7 @@ defineProps<{
   modelValue: boolean
   title: string
   confirmText: string
+  cancelText?: string
   loading?: boolean
   transparentBackdrop?: boolean
 }>();

package/components/ui/link.vue

@@ -34,7 +34,7 @@ import type { ButtonThemes } from '../../types';
 withDefaults(
   defineProps<{
     theme?: ButtonThemes,
-    size?: 'm' | 's',
+    size?: 'm' | 's' | 'l',
     wide?: boolean,
     active?: boolean,
     disabled?: boolean,