Redesign responsive MyTube interface

frontend/src/components/DownloadButton.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import type { FeedVideoDto } from '../api/client'
 import { deleteDownload, downloadVideo, getDownloadStatus } from '../api/client'
+import Icon from './Icon'
 
 const ACTIVE_STATUSES = ['queued', 'downloading', 'postprocessing']
 
@@ -12,9 +13,10 @@ const STATUS_LABELS: Record<string, string> = {
 
 interface Props {
   video: FeedVideoDto
+  showDelete?: boolean
 }
 
-function DownloadButton({ video }: Props) {
+function DownloadButton({ video, showDelete = false }: Props) {
   const queryClient = useQueryClient()
   // Once we start tracking a download (it was already active on load, or the
   // user just clicked "Скачать"), the query stays enabled for good --
@@ -64,17 +66,15 @@ function DownloadButton({ video }: Props) {
   if (status === 'completed') {
     return (
       <span className="download-inline-actions">
-        <span className="download-badge completed">✓ На сервере</span>
-        <button
+        <span className="download-badge completed"><Icon name="check" size={15} /> На сервере</span>
+        {showDelete && <button className="button-quiet"
           onClick={() => {
             if (confirm('Удалить скачанную копию с сервера?')) {
               deleteMutation.mutate()
             }
           }}
           disabled={deleteMutation.isPending}
-        >
-          Удалить
-        </button>
+        >Удалить копию</button>}
         {deleteMutation.isError && (
           <span className="download-badge error" title={(deleteMutation.error as Error).message}>
             {(deleteMutation.error as Error).message}
@@ -85,28 +85,28 @@ function DownloadButton({ video }: Props) {
   }
 
   if (status === 'downloading') {
-    return <span className="download-badge">{percent ?? 0}%</span>
+    return <span className="download-badge downloading"><span className="download-progress" style={{ width: `${Math.min(100, Math.max(0, percent ?? 0))}%` }} />Скачивается {percent ?? 0}%</span>
   }
 
   if (status === 'queued' || status === 'postprocessing') {
-    return <span className="download-badge">{STATUS_LABELS[status]}</span>
+    return <span className="download-badge downloading">{STATUS_LABELS[status]}</span>
   }
 
   if (status === 'failed') {
     return (
       <span className="download-error">
-        <span className="download-badge error">Ошибка</span>
-        <button onClick={() => downloadMutation.mutate()} disabled={downloadMutation.isPending}>
+        <button className="button-secondary" onClick={() => downloadMutation.mutate()} disabled={downloadMutation.isPending}>
           Повторить
         </button>
+        {downloadMutation.isError && <span className="sr-only" role="alert">Не удалось повторить загрузку.</span>}
       </span>
     )
   }
 
+  if (status === 'unknown') return <button className="button-secondary" onClick={() => downloadMutation.mutate()} disabled={downloadMutation.isPending}><Icon name="refresh" size={16} /> Загрузить снова</button>
+
   return (
-    <button onClick={() => downloadMutation.mutate()} disabled={downloadMutation.isPending}>
-      ⬇ Скачать
-    </button>
+    <span className="download-inline-actions"><button className="button-secondary" onClick={() => downloadMutation.mutate()} disabled={downloadMutation.isPending}><Icon name="download" size={16} />{downloadMutation.isPending ? 'Добавляем…' : 'Скачать'}</button>{downloadMutation.isError && <span className="download-action-error" role="alert">Не удалось добавить видео в очередь.</span>}</span>
   )
 }