0.10.2-5 Upload

frontend/src/pages/DashboardPage.jsx

@@ -6,6 +6,7 @@ import { Button } from 'primereact/button';
 import { Tag } from 'primereact/tag';
 import { ProgressBar } from 'primereact/progressbar';
 import { Dialog } from 'primereact/dialog';
+import { FileUpload } from 'primereact/fileupload';
 import { InputNumber } from 'primereact/inputnumber';
 import { InputText } from 'primereact/inputtext';
 import { api } from '../api/client';
@@ -864,6 +865,7 @@ export default function DashboardPage({
   const [queueCatalog, setQueueCatalog] = useState({ scripts: [], chains: [] });
   const [insertWaitSeconds, setInsertWaitSeconds] = useState(30);
   const toastRef = useRef(null);
+  const audiobookFileUploadRef = useRef(null);
 
   const state = String(pipeline?.state || 'IDLE').trim().toUpperCase();
   const currentPipelineJobId = normalizeJobId(pipeline?.activeJobId || pipeline?.context?.jobId);
@@ -2060,13 +2062,8 @@ export default function DashboardPage({
 
       <div className="dashboard-3col-grid">
         <div className="dashboard-col dashboard-col-left">
-          <Card title="Hardware Monitoring" subTitle="CPU (inkl. Temperatur), RAM, GPU und freier Speicher in den konfigurierten Pfaden.">
+          <Card title="Hardware Monitoring">
         <div className="hardware-monitor-head">
-          <Tag
-            value={monitoringState.enabled ? 'Aktiv' : 'Deaktiviert'}
-            severity={monitoringState.enabled ? 'success' : 'secondary'}
-          />
-          <Tag value={`Intervall: ${monitoringState.intervalMs || 0} ms`} severity="info" />
           <Tag value={`Letztes Update: ${formatUpdatedAt(monitoringState.updatedAt)}`} severity="warning" />
         </div>
 
@@ -2494,27 +2491,57 @@ export default function DashboardPage({
 
         <div className="dashboard-col dashboard-col-right">
           <Card title="Audiobook Upload" subTitle="AAX-Datei hochladen, analysieren und danach Format/Qualität vor dem Start auswählen.">
-        <div className="actions-row">
-          <input
-            key={audiobookUploadFile ? `${audiobookUploadFile.name}-${audiobookUploadFile.size}` : 'audiobook-upload-input'}
-            type="file"
-            accept=".aax"
-            onChange={(event) => {
-              const nextFile = event.target?.files?.[0] || null;
-              setAudiobookUploadFile(nextFile);
-            }}
-            disabled={audiobookUploadBusy}
-          />
-          <Button
-            label="Audiobook hochladen"
-            icon="pi pi-upload"
-            onClick={() => {
-              void handleAudiobookUpload();
-            }}
-            loading={audiobookUploadBusy}
-            disabled={!audiobookUploadFile}
-          />
-        </div>
+        <FileUpload
+          ref={audiobookFileUploadRef}
+          accept=".aax"
+          maxFileSize={10737418240}
+          disabled={audiobookUploadBusy}
+          onSelect={(e) => setAudiobookUploadFile(e.files[0] || null)}
+          onClear={() => setAudiobookUploadFile(null)}
+          onRemove={() => setAudiobookUploadFile(null)}
+          chooseLabel="Auswählen"
+          chooseOptions={{ icon: 'pi pi-folder-open' }}
+          cancelOptions={{ icon: 'pi pi-times', className: 'p-button-outlined p-button-secondary' }}
+          headerTemplate={(options) => (
+            <div className="aax-upload-header">
+              {options.chooseButton}
+              {options.cancelButton}
+            </div>
+          )}
+          itemTemplate={(file, options) => (
+            <div className="aax-file-item">
+              <i className="pi pi-headphones aax-file-icon" />
+              <div className="aax-file-info">
+                <span className="aax-file-name" title={file.name}>{file.name}</span>
+                <small>{options.formatSize}</small>
+              </div>
+              <Button
+                label="Hochladen"
+                icon="pi pi-upload"
+                size="small"
+                onClick={() => void handleAudiobookUpload()}
+                loading={audiobookUploadBusy}
+                disabled={audiobookUploadBusy}
+              />
+              <Button
+                icon="pi pi-times"
+                text
+                rounded
+                severity="danger"
+                size="small"
+                onClick={options.onRemove}
+                disabled={audiobookUploadBusy}
+              />
+            </div>
+          )}
+          emptyTemplate={() => (
+            <div className="aax-drop-zone">
+              <i className="pi pi-headphones aax-drop-icon" />
+              <p>AAX-Datei hier ablegen</p>
+              <small>oder oben „Auswählen" klicken</small>
+            </div>
+          )}
+        />
         {audiobookUploadPhase !== 'idle' ? (
           <div className={`audiobook-upload-status tone-${audiobookUploadStatusTone}`}>
             <div className="audiobook-upload-status-head">
@@ -2542,11 +2569,6 @@ export default function DashboardPage({
             </div>
           </div>
         ) : null}
-        <small>
-          {audiobookUploadFileName && audiobookUploadPhase === 'idle'
-            ? `Ausgewählt: ${audiobookUploadFileName}`
-            : 'Unterstützt im MVP: AAX-Upload. Danach erscheint ein eigener Audiobook-Startschritt mit Format- und Qualitätswahl.'}
-        </small>
       </Card>
 
           <Card title="Job Queue" subTitle="Starts werden nach Typ- und Gesamtlimit abgearbeitet. Queue-Elemente können per Drag-and-Drop umsortiert werden.">