fix (web): refactor upload page

apps/web/src/pages/account/AccountPage.css

@@ -38,6 +38,7 @@
 .main_page_container {
     display: flex;
     gap: 50px;
+    height: 100%;
 }
 
 @media screen and (max-width: 470px) { /* кнопки в столбик */

apps/web/src/pages/account/AccountPage.jsx

@@ -23,7 +23,7 @@ const AccountPage = () => {
       icon: "shelves",
     },
     {
-      name: "Загрузить книгу",
+      name: "Загрузить",
       path: "/upload",
       icon: "upload",
     },

apps/web/src/pages/account/UploadBook.jsx

@@ -57,11 +57,10 @@ function UploadBook() {
           setUploadStatuses((prev) => ({ ...prev, [i]: 1 }));
           console.log(uploadStatuses);
         } else {
-          toast("Ошибка на сервере, go дебажить.");
+          toast.error("Ошибка при загрузке книги");
         }
       } catch (err) {
-        console.error("Ошибка:", err);
+        toast.error("Ошибка при загрузке книги");
-        toast("Шатался интернет или сервер умер.");
       }
     }
 
@@ -72,11 +71,9 @@ function UploadBook() {
     return <span>Недоступно оффлайн</span>;
   }
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
+    <div className="flex flex-col items-center justify-center h-full w-full">
-      <h1 className="text-2xl font-bold mb-4">Загрузка литературы</h1>
-
       <div
-        className={`flex items-center justify-around w-full max-w-lg h-50 mb-4 rounded-xl flex-col gap-1 px-4 border-2 border-dashed transition-colors duration-200 cursor-pointer border-(--md-sys-color-outline) ${
+        className={`flex items-center justify-around w-[calc(100%-32px)] max-w-lg h-50 mb-4 px-4 rounded-xl flex-col gap-1 transition-colors duration-200 ${uploading ? 'cursor-wait' : 'cursor-pointer'} ${
           isDragging
             ? "bg-(--md-sys-color-surface-variant)"
             : "bg-(--md-sys-color-inverse-on-surface)"
@@ -87,8 +84,8 @@ function UploadBook() {
         onDragLeave={handleDragLeave}
       >
         <>
-          <span className="font-bold">Перетащи файл сюда или кликни</span>
+          <span className="font-bold text-center">Перетащите файл или нажмите для выбора</span>
-          <IconButton className="w-24 h-24">
+          <IconButton className="w-24 h-24" disabled={uploading}>
             <Icon className="text-6xl w-24 h-24">upload_file</Icon>
           </IconButton>
           <span className="text-sm">Поддерживается .fb2 и .pdf</span>
@@ -99,13 +96,14 @@ function UploadBook() {
           accept=".fb2,.pdf"
           ref={fileSelectorRef}
           className="hidden"
+          disabled={uploading}
           onChange={handleFileChange}
         />
       </div>
-      <div className="w-full max-w-lg bg-(--md-sys-color-surface-variant) flex p-[18px] rounded-2xl flex-col max-h-60 overflow-scroll gap-3 mb-4">
+      <div className={`w-[calc(100%-32px)] max-w-lg bg-(--md-sys-color-inverse-on-surface) flex p-4 rounded-2xl flex-col max-h-60 overflow-scroll gap-3 mb-4 ${uploadedFiles.length === 0 ? 'hidden' : ''}`}>
         {uploadedFiles.length === 0 ? <span>Нечего загружать</span> : <></>}
         {uploadedFiles.map((file, i) => (
-          <div className="flex justify-between" key={i}>
+          <div className="flex justify-between items-center" key={i}>
             <span className="truncate w-[calc(100%-42px)] inline-block">
               {file.name}
             </span>
@@ -130,7 +128,7 @@ function UploadBook() {
         ))}
       </div>
 
-      <FilledButton onClick={handleUpload} disabled={uploading}>
+      <FilledButton onClick={handleUpload} disabled={uploading || uploadedFiles.length===0}>
         Загрузить
       </FilledButton>
     </div>