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/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;