itube-specs 0.0.1061 → 0.0.1064

package/SITE_UPDATES.md

@@ -11,6 +11,13 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1062 — 2026-11-02
+
+- **Всем — к сведению:** за тем же флагом `FeatureUploadEnabled` — страница «My videos» `/library/uploads` (загруженные
+  ролики пользователя: вкладки по статусу, видимость, ссылка, правка названия, удаление; данные — заглушка). Туда
+  ведёт «Go to my videos» после загрузки, а в `/library` появилась секция «My videos» (4 последних ролика, «Show all»). Новые общие ключи `my_uploads` и три ключа в `snackbar` (пока только en-US).
+  Делать ничего не надо.
+
 ## 0.0.1061 — 2026-11-02
 
 - **Всем — решить флаг:** новая страница загрузки видео `/upload` (выбор файла с проверкой в браузере → детали

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

@@ -467,7 +467,9 @@ $header-language-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6p
 $header-language-menu-item--hover: $color-zinc-800-50;
 
 // ─── notifications ───
-$notifications-icon: $color-zinc-300;
+$notifications-icon: $color-zinc-400;
+$notifications-bg: $color-zinc-800-50;
+$notifications-bg--hover: $color-zinc-700;
 $notifications-icon--mobile: $color-zinc-200;
 $notifications-icon--hover: $color-white;
 $notifications-badge-bg: $color-indigo-600;
@@ -1270,3 +1272,31 @@ $upload-radio-ring: $color-zinc-700;
 $upload-radio-dot: $color-white;
 $upload-rules-text: $color-zinc-400;
 $upload-rules-dot: $color-zinc-600;
+
+// ─── My videos (library uploads) ───
+$library-upload-placeholder-from: $color-zinc-700;
+$library-upload-placeholder-to: $color-zinc-800;
+$library-upload-badge-bg: $color-black-75;
+$library-upload-badge-text: $color-white;
+$library-upload-dot: $color-indigo-400;
+$library-upload-dot--error: $color-red-500;
+$library-upload-title: $color-white;
+$library-upload-title--hover: $color-indigo-400;
+$library-upload-untitled: $color-zinc-500;
+$library-upload-meta: $color-zinc-500;
+$library-upload-meta--error: $color-red-400;
+$library-upload-menu-icon: $color-zinc-500;
+$library-upload-menu-icon--hover: $color-white;
+$library-upload-menu-value: $color-zinc-500;
+$library-upload-delete-text: $color-red-400;
+$library-upload-radio: $color-zinc-500;
+$library-upload-radio--checked: $color-indigo-600;
+$library-upload-radio-dot: $color-white;
+$library-upload-empty-icon-bg: $color-zinc-900;
+$library-upload-empty-icon-border: $color-zinc-800;
+$library-upload-empty-icon: $color-zinc-400;
+$library-upload-empty-title: $color-white;
+$library-upload-note: $color-zinc-500;
+$library-upload-tab-count: $color-zinc-500;
+$library-upload-tab-count--active: $color-white-70;
+$library-upload-fix-text: $color-zinc-400;

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

@@ -523,7 +523,9 @@ $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};
 $header-language-menu-item--hover: $color-white-5;
-$notifications-icon: $color-gray-300;
+$notifications-icon: $color-gray-400;
+$notifications-bg: $color-slate-750;
+$notifications-bg--hover: $color-slate-700;
 $notifications-icon--mobile: $color-gray-200;
 $notifications-icon--hover: $color-white;
 $notifications-badge-bg: $color-indigo-600;
@@ -1299,3 +1301,31 @@ $upload-radio-ring: $color-gray-300;
 $upload-radio-dot: $color-white;
 $upload-rules-text: $color-gray-300;
 $upload-rules-dot: $color-gray-500;
+
+// ─── My videos (library uploads) ───
+$library-upload-placeholder-from: $color-gray-200;
+$library-upload-placeholder-to: $color-gray-300;
+$library-upload-badge-bg: $color-black-75;
+$library-upload-badge-text: $color-white;
+$library-upload-dot: $color-indigo-400;
+$library-upload-dot--error: $color-red-500;
+$library-upload-title: $color-gray-900;
+$library-upload-title--hover: $color-indigo-600;
+$library-upload-untitled: $color-gray-500;
+$library-upload-meta: $color-gray-500;
+$library-upload-meta--error: $color-red-600;
+$library-upload-menu-icon: $color-gray-500;
+$library-upload-menu-icon--hover: $color-gray-900;
+$library-upload-menu-value: $color-gray-500;
+$library-upload-delete-text: $color-red-400;
+$library-upload-radio: $color-gray-400;
+$library-upload-radio--checked: $color-indigo-600;
+$library-upload-radio-dot: $color-white;
+$library-upload-empty-icon-bg: $color-gray-100;
+$library-upload-empty-icon-border: $color-gray-200;
+$library-upload-empty-icon: $color-gray-500;
+$library-upload-empty-title: $color-gray-900;
+$library-upload-note: $color-gray-500;
+$library-upload-tab-count: $color-gray-500;
+$library-upload-tab-count--active: $color-white-70;
+$library-upload-fix-text: $color-gray-300;

package/components/layout/footer-language.vue

@@ -91,6 +91,7 @@ function handler() {
 .layout-footer-language__badge {
   @include locale-badge;
 
+  padding: 0;
   color: $footer-language-badge;
 }
 

package/components/layout/header.vue

@@ -22,10 +22,6 @@
     </div>
 
     <div class="layout-header__right">
-      <LayoutNotifications
-        v-if="featureFlags.FeatureFollowEnabled"
-        class="layout-header__notifications"
-      />
       <NuxtLink
         v-if="featureFlags.FeatureUploadEnabled"
         :to="uploadLink"
@@ -76,6 +72,11 @@
         </transition>
       </div>
 
+      <LayoutNotifications
+        v-if="featureFlags.FeatureFollowEnabled"
+        class="layout-header__notifications"
+      />
+
       <LazyLayoutHeaderUser
         v-if="isAuthorized"
         class="layout-header__user _from-sd"
@@ -303,6 +304,7 @@ function closeLanguage() {
 .layout-header__language-badge {
   @include locale-badge;
 
+  padding: 0;
   color: $header-language-badge;
 }
 

package/components/layout/notifications.vue

@@ -51,8 +51,29 @@ $badge-raise: 6px;
     color: $notifications-icon--mobile;
   }
 
-  @include hover(color) {
+  @include from-br($brkpnt-burger) {
+    position: relative;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background-color: $notifications-bg;
+    border-radius: $radius-md;
+  }
+
+  @include hover(color, background-color) {
     color: $notifications-icon--hover;
+
+    @include from-br($brkpnt-burger) {
+      background-color: $notifications-bg--hover;
+    }
+  }
+}
+
+.layout-notifications__icon {
+  @include from-br($brkpnt-burger) {
+    width: 20px;
+    height: 20px;
   }
 }
 
@@ -75,5 +96,12 @@ $badge-raise: 6px;
   background-color: $notifications-badge-bg;
   border-radius: $radius-full;
   box-shadow: 0 0 0 2px $notifications-badge-ring;
+
+  @include from-br($brkpnt-burger) {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    margin: 0;
+  }
 }
 </style>

package/components/library/upload-card.vue

@@ -0,0 +1,448 @@
+<!-- Card of the user's uploaded video in «My videos»: cover (placeholder until AI picks one), status badge, duration and visibility, menu with visibility / copy link / title fix / delete -->
+<template>
+  <div class="library-upload-card">
+    <component
+      :is="link ? NuxtLink : 'div'"
+      :to="link"
+      class="library-upload-card__poster"
+    >
+      <UiImg
+        v-if="upload.thumbUrls"
+        :urls="upload.thumbUrls"
+        :alt="name"
+        sizes="auto, (min-width: 1440px) 25vw, (min-width: 900px) 33vw, (min-width: 370px) 50vw, 100vw"
+        class="library-upload-card__image"
+        width="480"
+        height="270"
+      />
+      <span
+        v-else
+        class="library-upload-card__placeholder"
+        aria-hidden="true"
+      />
+
+      <span
+        v-if="upload.status !== MyUploadStatus.Published"
+        class="library-upload-card__badge --status"
+      >
+        <span
+          :class="{'--error': upload.status === MyUploadStatus.Declined}"
+          class="library-upload-card__dot"
+          aria-hidden="true"
+        />
+        {{ t(`my_uploads.status.${upload.status}`) }}
+      </span>
+
+      <span class="library-upload-card__bottom">
+        <span class="library-upload-card__badge">{{ getDuration(upload.duration) }}</span>
+        <span
+          v-if="upload.visibility !== UploadVisibility.Public"
+          :title="t(`my_uploads.visibility.${upload.visibility}`)"
+          class="library-upload-card__badge --icon"
+        >
+          <UiIcon
+            :name="upload.visibility === UploadVisibility.Private ? 'lock' : 'link'"
+            size="12"
+            aria-hidden="true"
+          />
+          <span class="_visually-hidden">{{ t(`my_uploads.visibility.${upload.visibility}`) }}</span>
+        </span>
+      </span>
+    </component>
+
+    <div class="library-upload-card__info">
+      <div class="library-upload-card__head">
+        <component
+          :is="link ? NuxtLink : 'span'"
+          :to="link"
+          :class="{'--untitled': !upload.title, '--link': link}"
+          class="library-upload-card__title _truncate"
+        >{{ name }}</component>
+
+        <UiDropdown
+          ref="dropdownRef"
+          class="library-upload-card__menu"
+          right
+          use-v-if
+        >
+          <template #trigger>
+            <button
+              :aria-label="t('my_uploads.menu.label')"
+              class="library-upload-card__menu-trigger"
+              type="button"
+            >
+              <UiIcon
+                name="dots-vertical"
+                size="18"
+              />
+            </button>
+          </template>
+          <template #items="className">
+            <template v-if="step === 'menu'">
+              <button
+                :class="[className, {'--disabled': !canChangeVisibility(upload)}]"
+                :disabled="!canChangeVisibility(upload)"
+                type="button"
+                @click.stop="step = 'visibility'"
+              >
+                <UiIcon
+                  name="eye"
+                  size="20"
+                />
+                <span class="library-upload-card__menu-label">{{ t('my_uploads.menu.visibility') }}</span>
+                <span class="library-upload-card__menu-value">{{ t(`upload_page.visibility_options.${upload.visibility}.title`) }}</span>
+                <UiIcon
+                  name="angle-right"
+                  size="16"
+                />
+              </button>
+              <button
+                :class="className"
+                type="button"
+                @click="emit('copy')"
+              >
+                <UiIcon
+                  name="link"
+                  size="20"
+                />
+                {{ t('my_uploads.menu.copy_link') }}
+              </button>
+              <button
+                :class="className"
+                type="button"
+                @click="emit('fix')"
+              >
+                <UiIcon
+                  name="pen"
+                  size="20"
+                />
+                {{ t('my_uploads.menu.suggest_fix') }}
+              </button>
+              <button
+                :class="[className, 'library-upload-card__delete']"
+                type="button"
+                @click="emit('delete')"
+              >
+                <UiIcon
+                  name="trash-bin"
+                  size="20"
+                />
+                {{ t('my_uploads.menu.delete') }}
+              </button>
+            </template>
+
+            <template v-else>
+              <button
+                :class="className"
+                type="button"
+                @click.stop="step = 'menu'"
+              >
+                <UiIcon
+                  name="angle-left"
+                  size="20"
+                />
+                {{ t('my_uploads.menu.visibility') }}
+              </button>
+              <button
+                v-for="option in VISIBILITY_OPTIONS"
+                :key="option"
+                :class="className"
+                :aria-checked="option === upload.visibility"
+                type="button"
+                role="menuitemradio"
+                @click="emit('visibility', option)"
+              >
+                <span
+                  :class="{'--checked': option === upload.visibility}"
+                  class="library-upload-card__radio"
+                  aria-hidden="true"
+                />
+                <span class="library-upload-card__menu-label">
+                  {{ t(`upload_page.visibility_options.${option}.title`) }}
+                  <span class="library-upload-card__menu-hint">{{ t(`upload_page.visibility_options.${option}.text`) }}</span>
+                </span>
+              </button>
+            </template>
+          </template>
+        </UiDropdown>
+      </div>
+
+      <p class="library-upload-card__meta">
+        <UiIcon
+          v-if="nicheIcon"
+          :name="nicheIcon"
+          class="library-upload-card__niche"
+          size="14"
+        />
+        <span
+          :class="{'--error': upload.status === MyUploadStatus.Declined}"
+          :title="upload.status === MyUploadStatus.Declined ? meta : undefined"
+          class="library-upload-card__meta-text _truncate"
+        >{{ meta }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NuxtLink } from '#components';
+import { MyUploadStatus, UploadVisibility, getDuration } from '../../runtime';
+import type { IMyUpload } from '../../types';
+
+const VISIBILITY_OPTIONS = Object.values(UploadVisibility);
+
+const props = defineProps<{
+  upload: IMyUpload
+}>();
+
+const emit = defineEmits<{
+  (eventName: 'copy' | 'fix' | 'delete'): void
+  (eventName: 'visibility', value: UploadVisibility): void
+}>();
+
+const { t, n, locale } = useI18n();
+const { generateLink } = useGenerateLink();
+const { niches } = useNiches();
+const { canChangeVisibility } = useMyUploads();
+
+const dropdownRef = ref<{ open: boolean }>();
+const step = ref<'menu' | 'visibility'>('menu');
+
+watch(() => dropdownRef.value?.open, (open) => {
+  if (!open) step.value = 'menu';
+});
+
+const name = computed(() => props.upload.title ?? props.upload.fileName);
+
+const link = computed(() => props.upload.videoId ? generateLink(`/videos/${props.upload.videoId}`) : undefined);
+
+const nicheIcon = computed(() => niches.value.length > 1
+  ? niches.value.find(item => item.name === props.upload.niche)?.icon
+  : undefined);
+
+const meta = computed(() => {
+  const { status } = props.upload;
+
+  if (status === MyUploadStatus.Declined) return props.upload.declineReason ?? t('my_uploads.meta.declined');
+  if (status !== MyUploadStatus.Published) return t(`my_uploads.meta.${status}`);
+
+  return t('my_uploads.meta.published', {
+    views: n(props.upload.views ?? 0, 'compact'),
+    ago: props.upload.publishedAt ? useFormatTimeAgo(props.upload.publishedAt, locale.value) : '',
+  });
+});
+</script>
+
+<style lang="scss">
+.library-upload-card {
+  @include video-card;
+
+  row-gap: 12px;
+
+  @include from-br(sm) {
+    row-gap: 16px;
+  }
+}
+
+.library-upload-card__poster {
+  @include video-card-poster;
+
+  display: block;
+}
+
+.library-upload-card__image,
+.library-upload-card__placeholder {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s;
+}
+
+.library-upload-card__image {
+  object-fit: cover;
+}
+
+.library-upload-card__placeholder {
+  background-image: linear-gradient(to bottom right, $library-upload-placeholder-from, $library-upload-placeholder-to);
+}
+
+@media (hover: hover) {
+  .library-upload-card:has(.library-upload-card__poster:hover) .library-upload-card__image,
+  .library-upload-card:has(.library-upload-card__poster:hover) .library-upload-card__placeholder {
+    transform: scale(1.05);
+  }
+
+  .library-upload-card:has(.library-upload-card__poster:hover) .library-upload-card__title.--link {
+    color: $library-upload-title--hover;
+  }
+}
+
+.library-upload-card__badge {
+  @include font-xs;
+
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  font-weight: 500;
+  color: $library-upload-badge-text;
+  background-color: $library-upload-badge-bg;
+  border-radius: $radius-small;
+}
+
+.library-upload-card__badge.--status {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 4px 8px;
+}
+
+.library-upload-card__badge.--icon {
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+}
+
+.library-upload-card__bottom {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.library-upload-card__dot {
+  width: 6px;
+  height: 6px;
+  background-color: $library-upload-dot;
+  border-radius: $radius-full;
+}
+
+.library-upload-card__dot.--error {
+  background-color: $library-upload-dot--error;
+}
+
+.library-upload-card__info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.library-upload-card__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.library-upload-card__title {
+  @include font-sm;
+
+  --line-clamp: 2;
+
+  font-weight: 500;
+  color: $library-upload-title;
+  transition: color var(--transition);
+}
+
+.library-upload-card__title.--link {
+  @include hover(color) {
+    color: $library-upload-title--hover;
+  }
+}
+
+.library-upload-card__title.--untitled {
+  --word-break: break-all;
+
+  color: $library-upload-untitled;
+}
+
+.library-upload-card__menu {
+  flex-shrink: 0;
+}
+
+.library-upload-card__menu-trigger {
+  display: grid;
+  place-content: center;
+  margin-top: -2px;
+  padding: 2px;
+  color: $library-upload-menu-icon;
+
+  @include hover(color) {
+    color: $library-upload-menu-icon--hover;
+  }
+}
+
+.library-upload-card__menu-label {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  text-align: left;
+}
+
+.library-upload-card__menu-value,
+.library-upload-card__menu-hint {
+  @include font-xs;
+
+  color: $library-upload-menu-value;
+}
+
+.library-upload-card .ui-dropdown__item.--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ui-dropdown__menu-items > .library-upload-card__delete.ui-dropdown__item {
+  color: $library-upload-delete-text;
+}
+
+.ui-dropdown__menu-items > .library-upload-card__delete.ui-dropdown__item .ui-icon {
+  color: inherit;
+}
+
+.library-upload-card__radio {
+  position: relative;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid $library-upload-radio;
+  border-radius: $radius-full;
+}
+
+.library-upload-card__radio.--checked {
+  background-color: $library-upload-radio--checked;
+  border-color: $library-upload-radio--checked;
+}
+
+.library-upload-card__radio.--checked::after {
+  position: absolute;
+  inset: 0;
+  width: 6px;
+  height: 6px;
+  margin: auto;
+  background-color: $library-upload-radio-dot;
+  border-radius: $radius-full;
+  content: '';
+}
+
+.library-upload-card__meta {
+  @include font-xs;
+
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: $library-upload-meta;
+}
+
+.library-upload-card__niche {
+  flex-shrink: 0;
+}
+
+.library-upload-card__meta-text.--error {
+  color: $library-upload-meta--error;
+}
+</style>

package/components/library/uploads-grid.vue

@@ -0,0 +1,145 @@
+<!-- Grid of the user's uploads with the card menu actions: delete confirmation, title-fix popup, copy link, visibility. Used by «My videos» and its section in the library -->
+<template>
+  <div class="library-uploads-grid">
+    <LibraryUploadCard
+      v-for="upload in uploads"
+      :key="upload.id"
+      :upload="upload"
+      @copy="copyLink(upload)"
+      @fix="openFix(upload)"
+      @delete="deleteTarget = upload"
+      @visibility="setVisibility(upload.id, $event)"
+    />
+
+    <UiConfirm
+      :model-value="!!deleteTarget"
+      :title="t('my_uploads.delete_title')"
+      :confirm-text="t('my_uploads.menu.delete')"
+      @update:model-value="deleteTarget = null"
+      @confirm="confirmDelete"
+    >
+      <p class="library-uploads-grid__text">{{ t('my_uploads.delete_text') }}</p>
+    </UiConfirm>
+
+    <transition mode="out-in">
+      <UiPopup
+        v-if="fixTarget"
+        :model-value="!!fixTarget"
+        class="library-uploads-grid__fix"
+        sheet
+        @update:model-value="fixTarget = null"
+      >
+        <template #title>{{ t('my_uploads.fix_title') }}</template>
+        <form
+          :id="`${id}-fix`"
+          class="library-uploads-grid__fix-form"
+          @submit.prevent="sendFix"
+        >
+          <p class="library-uploads-grid__text">{{ t('my_uploads.fix_text') }}</p>
+          <UiInput
+            v-model="fixTitle"
+            :placeholder="t('my_uploads.fix_placeholder')"
+            maxlength="100"
+            autofocus
+          />
+        </form>
+        <template #footer>
+          <div class="library-uploads-grid__fix-buttons">
+            <UiBtn
+              size="l"
+              theme="muted"
+              wide
+              @click="fixTarget = null"
+            >{{ t('cancel') }}
+            </UiBtn>
+            <UiBtn
+              :disabled="!fixTitle.trim()"
+              :form="`${id}-fix`"
+              size="l"
+              theme="primary"
+              type="submit"
+              wide
+            >{{ t('my_uploads.send') }}
+            </UiBtn>
+          </div>
+        </template>
+      </UiPopup>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IMyUpload } from '../../types';
+
+defineProps<{
+  uploads: IMyUpload[]
+}>();
+
+const { t } = useI18n();
+const { generateLink } = useGenerateLink();
+const { show, showError } = useSnackbar();
+const { setVisibility, remove } = useMyUploads();
+const id = useId();
+
+const deleteTarget = ref<IMyUpload | null>(null);
+const fixTarget = ref<IMyUpload | null>(null);
+const fixTitle = ref('');
+
+async function copyLink(upload: IMyUpload) {
+  const path = generateLink(upload.videoId ? `/videos/${upload.videoId}` : '/library/uploads');
+
+  try {
+    await navigator.clipboard.writeText(`${window.location.origin}${path}`);
+    show('link_copied');
+  } catch {
+    showError('link_not_copied');
+  }
+}
+
+function openFix(upload: IMyUpload) {
+  fixTitle.value = upload.title ?? '';
+  fixTarget.value = upload;
+}
+
+function sendFix() {
+  if (!fixTitle.value.trim()) return;
+
+  fixTarget.value = null;
+  show('title_fix_sent');
+}
+
+function confirmDelete() {
+  if (deleteTarget.value) remove(deleteTarget.value.id);
+  deleteTarget.value = null;
+  show('video_deleted');
+}
+</script>
+
+<style lang="scss">
+.library-uploads-grid {
+  @include video-card-grid;
+}
+
+.library-uploads-grid__text {
+  @include font-sm;
+
+  color: $library-upload-fix-text;
+}
+
+.library-uploads-grid__fix .ui-popup__content {
+  padding: 0;
+}
+
+.library-uploads-grid__fix-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+}
+
+.library-uploads-grid__fix-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+</style>

package/components/library/uploads.vue

@@ -0,0 +1,146 @@
+<!-- «My videos»: status tabs with counts and the grid of the user's uploads. Data is a stub (useMyUploads) -->
+<template>
+  <div class="library-uploads">
+    <h1 class="_title library-uploads__title">{{ t('my_uploads.title') }}</h1>
+
+    <div
+      v-if="!uploads.length"
+      class="library-uploads__empty"
+    >
+      <span
+        class="library-uploads__empty-icon"
+        aria-hidden="true"
+      >
+        <UiIcon
+          name="upload-arrow"
+          size="24"
+        />
+      </span>
+      <p class="library-uploads__empty-title">{{ t('my_uploads.empty') }}</p>
+      <UiLink
+        :to="generateLink('/upload')"
+        size="l"
+        theme="primary"
+      >{{ t('my_uploads.upload_first') }}
+      </UiLink>
+    </div>
+
+    <template v-else>
+      <div
+        :aria-label="t('my_uploads.filter_label')"
+        class="library-uploads__tabs"
+        role="tablist"
+      >
+        <UiBtn
+          v-for="tab in tabs"
+          :key="tab.id"
+          :active="tab.id === activeTab"
+          :aria-selected="tab.id === activeTab"
+          class="library-uploads__tab"
+          role="tab"
+          theme="secondary"
+          @click="activeTab = tab.id"
+        >
+          {{ t(`my_uploads.tabs.${tab.id}`) }}
+          <span class="library-uploads__tab-count">{{ tab.count }}</span>
+        </UiBtn>
+      </div>
+
+      <LibraryUploadsGrid
+        v-if="filtered.length"
+        :uploads="filtered"
+      />
+      <p
+        v-else
+        class="library-uploads__note"
+      >{{ t('my_uploads.no_status') }}</p>
+    </template>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MyUploadStatus } from '../../runtime';
+import type { IMyUpload } from '../../types';
+
+const TABS = [
+  { id: 'all', match: () => true },
+  { id: 'published', match: (upload: IMyUpload) => upload.status === MyUploadStatus.Published },
+  { id: 'processing', match: (upload: IMyUpload) => upload.status === MyUploadStatus.Processing || upload.status === MyUploadStatus.Review },
+  { id: 'declined', match: (upload: IMyUpload) => upload.status === MyUploadStatus.Declined },
+] as const;
+
+type TabId = typeof TABS[number]['id'];
+
+const { t } = useI18n();
+const { generateLink } = useGenerateLink();
+const { uploads } = useMyUploads();
+
+const activeTab = ref<TabId>('all');
+
+const tabs = computed(() => TABS.map(tab => ({ id: tab.id, count: uploads.value.filter(tab.match).length })));
+
+const filtered = computed(() => {
+  const tab = TABS.find(item => item.id === activeTab.value) ?? TABS[0];
+
+  return uploads.value.filter(tab.match);
+});
+</script>
+
+<style lang="scss">
+.library-uploads__title {
+  margin-bottom: 16px;
+}
+
+.library-uploads__tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 32px;
+}
+
+.library-uploads__tab-count {
+  color: $library-upload-tab-count;
+}
+
+.library-uploads__tab.--active .library-uploads__tab-count {
+  color: $library-upload-tab-count--active;
+}
+
+.library-uploads__note {
+  @include font-sm;
+
+  padding-block: 64px;
+  text-align: center;
+  color: $library-upload-note;
+}
+
+.library-uploads__empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding-block: 96px;
+  text-align: center;
+}
+
+.library-uploads__empty-icon {
+  display: grid;
+  place-content: center;
+  width: 56px;
+  height: 56px;
+  color: $library-upload-empty-icon;
+  background-color: $library-upload-empty-icon-bg;
+  border: 1px solid $library-upload-empty-icon-border;
+  border-radius: $radius-2xl;
+}
+
+.library-uploads__empty-title {
+  @include font-lg;
+
+  font-weight: 600;
+  color: $library-upload-empty-title;
+}
+</style>

package/components/upload/sent.vue

@@ -71,7 +71,7 @@
 
     <div class="upload-sent__buttons">
       <UiLink
-        :to="generateLink('/library')"
+        :to="generateLink('/library/uploads')"
         size="l"
         theme="primary"
       >{{ t('upload_page.go_to_my_videos') }}

package/composables/use-my-uploads.ts

@@ -0,0 +1,26 @@
+import { MyUploadStatus } from '../runtime';
+import type { UploadVisibility } from '../runtime';
+import type { IMyUpload } from '../types';
+import { getUploadsStub } from '../stubs/uploads';
+
+/**
+ * The user's uploaded videos («My videos»). No API yet — a stub list kept in state, so visibility changes and
+ * deletions live until reload. Swap the stub and the two mutations for requests when the endpoints land.
+ */
+export function useMyUploads() {
+  const uploads = useState<IMyUpload[]>('my-uploads', () => getUploadsStub());
+
+  function canChangeVisibility(upload: IMyUpload) {
+    return upload.status !== MyUploadStatus.Processing && upload.status !== MyUploadStatus.Declined;
+  }
+
+  function setVisibility(id: string, visibility: UploadVisibility) {
+    uploads.value = uploads.value.map(upload => upload.id === id ? { ...upload, visibility } : upload);
+  }
+
+  function remove(id: string) {
+    uploads.value = uploads.value.filter(upload => upload.id !== id);
+  }
+
+  return { uploads, canChangeVisibility, setVisibility, remove };
+}

package/i18n/locales/en-US.json

@@ -1,4 +1,45 @@
 {
+  "my_uploads": {
+    "title": "My videos",
+    "filter_label": "Filter by status",
+    "tabs": {
+      "all": "All",
+      "published": "Published",
+      "processing": "Processing",
+      "declined": "Not approved"
+    },
+    "status": {
+      "processing": "Processing",
+      "review": "In review",
+      "declined": "Not approved"
+    },
+    "meta": {
+      "processing": "AI processing · up to 30 min",
+      "review": "In review · up to 24 h",
+      "declined": "Not approved",
+      "published": "{views} · {ago}"
+    },
+    "visibility": {
+      "unlisted": "Unlisted",
+      "private": "Private"
+    },
+    "menu": {
+      "label": "Video options",
+      "visibility": "Visibility",
+      "copy_link": "Copy link",
+      "suggest_fix": "Suggest a title fix",
+      "delete": "Delete"
+    },
+    "delete_title": "Delete this video?",
+    "delete_text": "It will be removed from the site. This can't be undone.",
+    "fix_title": "Suggest a title fix",
+    "fix_text": "Our team will review it before it goes live.",
+    "fix_placeholder": "New title",
+    "send": "Send",
+    "empty": "No videos yet",
+    "upload_first": "Upload your first video",
+    "no_status": "No videos with this status"
+  },
   "upload_page": {
     "title_pick": "Upload video",
     "title_details": "Video details",
@@ -476,6 +517,9 @@
   "hide_description": "Hide description",
   "advertising_banner": "Advertising",
   "snackbar": {
+    "link_copied": "Link copied",
+    "link_not_copied": "Couldn't copy the link",
+    "title_fix_sent": "Thanks, we'll review your title fix",
     "added": "Added:",
     "removed": "Removed:",
     "added_to": "Added to:",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.1061",
+  "version": "0.0.1064",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/pages/library/index.vue

@@ -56,6 +56,33 @@
       </div>
     </section>
 
+    <section
+      v-if="myUploads.length > 0"
+      class="library__section"
+    >
+      <header class="library__section-header">
+        <UiSectionTitle
+          :title="t('my_uploads.title')"
+          icon="upload-arrow"
+          title-tag="h2"
+          variant="section"
+        />
+
+        <UiLink
+          :to="generateLink('/library/uploads')"
+          theme="simple"
+        >
+          {{ t('show_all') }}
+          <UiIcon
+            name="arrow-right"
+            size="16"
+          />
+        </UiLink>
+      </header>
+
+      <LibraryUploadsGrid :uploads="myUploads"/>
+    </section>
+
     <section class="library__section">
       <header class="library__section-header">
         <UiSectionTitle
@@ -153,6 +180,7 @@ type LibraryLink = {
 };
 
 const CONTINUE_LIMIT = 4;
+const MY_UPLOADS_LIMIT = 4;
 
 /** Сколько аватарок помещается в ряд «что внутри» — остальные уходят в плашку «+N». */
 const AVATARS_LIMIT = 4;
@@ -162,6 +190,9 @@ const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const { generateLink } = useGenerateLink();
 
+const { uploads } = useMyUploads();
+const myUploads = computed(() => featureFlags.FeatureUploadEnabled ? uploads.value.slice(0, MY_UPLOADS_LIMIT) : []);
+
 const saveHistory = ref(true);
 
 const removedGuids = ref<string[]>([]);

package/pages/library/uploads.vue

@@ -0,0 +1,41 @@
+<!-- My videos: the user's uploads with status and visibility, behind the FeatureUploadEnabled flag. Data is a stub -->
+<template>
+  <div class="_page _container">
+    <UiBreadcrumbs
+      :items="breadcrumbs"
+      class="_breadcrumbs"
+    />
+
+    <LibraryUploads/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IBreadcrumbItem } from '../../types';
+
+definePageMeta({ featureFlag: 'FeatureUploadEnabled' });
+
+const { t } = useI18n();
+
+useNoindex();
+
+const { brandName } = useAppConfig();
+
+useHead(() => ({
+  title: `${t('my_uploads.title')} — ${brandName}`,
+}));
+
+const breadcrumbs = [
+  {
+    name: `${t('navigation.main')}`,
+    to: '/',
+  },
+  {
+    name: `${t('navigation.library')}`,
+    to: '/library',
+  },
+  {
+    name: `${t('my_uploads.title')}`,
+  },
+] as IBreadcrumbItem[];
+</script>

package/runtime/constants/upload.ts

@@ -59,3 +59,12 @@ export const UPLOAD_LIMITS = {
   maxTags: 15,
   dailyUploads: 10,
 } as const;
+
+export const MyUploadStatus = {
+  Processing: 'processing',
+  Review: 'review',
+  Declined: 'declined',
+  Published: 'published',
+} as const;
+
+export type MyUploadStatus = typeof MyUploadStatus[keyof typeof MyUploadStatus];

package/stubs/uploads.ts

@@ -0,0 +1,80 @@
+import { MyUploadStatus, Niche, UploadVisibility } from '../runtime';
+import type { IMyUpload } from '../types';
+import { VIDEO_POOL } from './videos';
+
+const DAY = 24 * 3600;
+
+export function getUploadsStub(now = Math.floor(Date.now() / 1000)): IMyUpload[] {
+  const [lake, roommates, road, cabin, gym] = [VIDEO_POOL[0]!, VIDEO_POOL[4]!, VIDEO_POOL[8]!, VIDEO_POOL[2]!, VIDEO_POOL[6]!];
+
+  return [
+    {
+      id: 'upload-1',
+      fileName: 'IMG_4821_final.mp4',
+      duration: 872,
+      status: MyUploadStatus.Processing,
+      visibility: UploadVisibility.Public,
+      niche: Niche.Gay,
+    },
+    {
+      id: 'upload-2',
+      fileName: 'cabin_weekend.mov',
+      title: 'Cabin weekend with my boyfriend, slow morning in bed',
+      duration: cabin.duration,
+      thumbUrls: cabin.thumbUrls,
+      status: MyUploadStatus.Review,
+      visibility: UploadVisibility.Unlisted,
+      niche: Niche.Gay,
+    },
+    {
+      id: 'upload-3',
+      fileName: 'gym_shower_v2.mp4',
+      title: 'Gym shower after leg day',
+      duration: gym.duration,
+      thumbUrls: gym.thumbUrls,
+      status: MyUploadStatus.Declined,
+      visibility: UploadVisibility.Public,
+      declineReason: 'Watermark from another site is visible in the corner of the video',
+      niche: Niche.Gay,
+    },
+    {
+      id: 'upload-4',
+      fileName: 'lake_house.mp4',
+      title: lake.title,
+      duration: lake.duration,
+      thumbUrls: lake.thumbUrls,
+      videoId: lake.id,
+      status: MyUploadStatus.Published,
+      visibility: UploadVisibility.Public,
+      views: 1420,
+      publishedAt: now - 2 * DAY,
+      niche: Niche.Gay,
+    },
+    {
+      id: 'upload-5',
+      fileName: 'roommates_night.mp4',
+      title: roommates.title,
+      duration: roommates.duration,
+      thumbUrls: roommates.thumbUrls,
+      videoId: roommates.id,
+      status: MyUploadStatus.Published,
+      visibility: UploadVisibility.Private,
+      views: 18240,
+      publishedAt: now - 14 * DAY,
+      niche: Niche.Gay,
+    },
+    {
+      id: 'upload-6',
+      fileName: 'road_trip_motel.mp4',
+      title: road.title,
+      duration: road.duration,
+      thumbUrls: road.thumbUrls,
+      videoId: road.id,
+      status: MyUploadStatus.Published,
+      visibility: UploadVisibility.Unlisted,
+      views: 640,
+      publishedAt: now - 31 * DAY,
+      niche: Niche.Gay,
+    },
+  ];
+}

package/types/upload.d.ts

@@ -1,4 +1,5 @@
-import type { UploadCheck, UploadCheckStatus, UploadVisibility } from '../runtime';
+import type { MyUploadStatus, Niche, UploadCheck, UploadCheckStatus, UploadVisibility } from '../runtime';
+import type { IThumbUrls } from './thumbs-urls';
 
 export interface IUploadFile {
   name: string;
@@ -38,3 +39,18 @@ export interface IUploadComboboxChip {
   label: string;
   image?: string | null;
 }
+
+export interface IMyUpload {
+  id: string;
+  fileName: string;
+  title?: string;
+  duration: number;
+  status: MyUploadStatus;
+  visibility: UploadVisibility;
+  niche: Niche;
+  thumbUrls?: IThumbUrls;
+  videoId?: string;
+  declineReason?: string;
+  views?: number;
+  publishedAt?: number;
+}