feat(upload): enhance audio upload handling and user feedback

- Introduced a new warning for users uploading non-FLAC or WAV formats, indicating that these formats should only be used as a last resort.
- Added functionality to highlight files needing format attention in the upload queue.
- Updated the UI to provide clearer guidance on acceptable audio formats during uploads.
- Improved documentation to reflect changes in upload requirements and user interface updates.

apps/web/src/pages/admin/UploadQueuePage.tsx

@@ -5,6 +5,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSession } from '../../app/session';
+import { needsFormatAttention } from '../../features/uploads/files';
 import { useErrorText, useFieldError } from '../../shared/lib/errors';
 import { formatBytes, formatDateTime, formatDuration } from '../../shared/lib/format';
 import { checkIcon, closeIcon, editIcon, refreshIcon } from '../../shared/ui/icons';
@@ -309,6 +310,11 @@ function QueueRow({
       <div className={u.meta}>
         <div className={u.flags}>
           <UploadStatusBadge status={f.status} />
+          {needsFormatAttention(f.format, f.original_name) && (
+            <span className={cx(s.badge, u.tone_warn)} title={t('uploads.format_attention')}>
+              {t('uploads.flag_attention')}
+            </span>
+          )}
           {f.possible_duplicate && <span className={cx(s.badge, u.tone_warn)}>{t('uploads.flag_possible')}</span>}
           {f.quality_upgrade && <span className={cx(s.badge, u.tone_info)}>{t('uploads.flag_quality')}</span>}
           {f.matched_album_id ? (

apps/web/src/pages/home.module.css

@@ -10,6 +10,17 @@
   user-select: none; /* главная — только элементы управления волной */
 }
 
+/* Плеер на всю ширину окна, а главная — в колонке справа от сайдбара.
+   Сдвиг на половину сайдбара ставит волну на ту же ось, что и кнопка play.
+   Если чипам не хватает места, сдвиг меньше, чтобы они не уехали под меню. */
+@media (min-width: 768px) {
+  .home {
+    transform: translateX(
+      calc(-1 * min(var(--side-w, 240px) / 2, max(0px, (100% - 760px) / 2)))
+    );
+  }
+}
+
 .orbLabel {
   margin-top: 4px;
   font-family: var(--font-display);

apps/web/src/pages/uploads/SuggestPage.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState, useSyncExternalStore, type DragEvent } fro
 import { useTranslation } from 'react-i18next';
 
 import { useSession } from '../../app/session';
-import { AUDIO_EXTENSIONS, fromDrop, fromInput } from '../../features/uploads/files';
+import { AUDIO_EXTENSIONS, fromDrop, fromInput, needsFormatAttention } from '../../features/uploads/files';
 import { uploaderFor, type UploadItem } from '../../features/uploads/uploader';
 import { useErrorText } from '../../shared/lib/errors';
 import { formatBytes } from '../../shared/lib/format';
@@ -81,7 +81,8 @@ export function SuggestPage() {
       >
         <Icon src={musicIcon} size={36} />
         <div className={u.dropTitle}>{t('uploads.drop_title')}</div>
-        <div className={s.note}>{t('uploads.drop_hint', { formats: AUDIO_EXTENSIONS.join(', ') })}</div>
+        <p className={u.formatWarn}>{t('uploads.drop_hint')}</p>
+        <div className={s.note}>{t('uploads.drop_folders')}</div>
         <div className={u.dropActions}>
           <Button disabled={st.busy} onClick={() => filesRef.current?.click()}>
             {t('uploads.pick_files')}
@@ -224,6 +225,7 @@ function FileRow({ item, locked, onRemove }: { item: UploadItem; locked: boolean
             <span style={{ width: `${item.progress * 100}%` }} />
           </div>
         )}
+        {needsFormatAttention(null, item.relPath) && <span className={u.warn}>{t('uploads.format_attention')}</span>}
         {note && <span className={note.cls}>{note.text}</span>}
       </div>
       <span className={u.size}>{formatBytes(item.size, i18n.language)}</span>

apps/web/src/pages/uploads/uploads.module.css

@@ -25,6 +25,15 @@
   font-weight: 600;
 }
 
+.formatWarn {
+  max-width: 640px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.45;
+  color: var(--warn);
+}
+
 .dropActions {
   display: flex;
   flex-wrap: wrap;