adjust footer

src/components/Footer/Footer.jsx

@@ -1,4 +1,3 @@
-// src/components/Footer/Footer.jsx
 import React, { useEffect, useState } from 'react';
 import { fetchDatabaseVersion, triggerFullImport } from '../../services/api';
 
@@ -6,6 +5,7 @@ function Footer() {
   const [dbVersion, setDbVersion] = useState(null);
   const [importing, setImporting] = useState(false);
   const [error, setError] = useState(null);
+  const [importResult, setImportResult] = useState(null); // store import result for modal
 
   // Fetch DB version on mount
   useEffect(() => {
@@ -18,9 +18,12 @@ function Footer() {
     setImporting(true);
     setError(null);
     try {
-      await triggerFullImport();
-      const data = await fetchDatabaseVersion();
-      setDbVersion(data.database_version);
+      const result = await triggerFullImport(); // result contains message, version, sets, cards, duration
+      setImportResult(result);
+
+      // Update displayed DB version
+      const versionData = await fetchDatabaseVersion();
+      setDbVersion(versionData.database_version);
     } catch (err) {
       setError(err.message);
     } finally {
@@ -29,27 +32,27 @@ function Footer() {
   };
 
   return (
-    <div
-      style={{
-        position: 'fixed',
-        bottom: '0',
-        right: '0',
-        padding: '0.5rem 1rem',
-        background: '#f0f0f0',
-        borderTopLeftRadius: '8px',
-        border: '1px solid #ccc',
-        fontSize: '0.9rem',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '0.5rem'
-      }}
-    >
-      <span>DB Version: {dbVersion || 'Loading...'}</span>
-      <button onClick={handleImport} disabled={importing}>
-        {importing ? 'Importing...' : 'Full Import'}
-      </button>
-      {error && <span style={{ color: 'red' }}>{error}</span>}
-    </div>
+    <>
+      <div className="footer">
+        <span>DB Version: {dbVersion || 'Loading...'}</span>
+        <button onClick={handleImport} disabled={importing}>
+          {importing ? 'Importing...' : 'Full Import'}
+        </button>
+        {error && <span style={{ color: 'red' }}>{error}</span>}
+      </div>
+
+      {importResult && (
+        <div className="import-modal">
+          <h3>Import Result</h3>
+          <p>{importResult.message}</p>
+          <p>Version: {importResult.version}</p>
+          <p>Sets imported: {importResult.sets?.total || 'N/A'}</p>
+          <p>Cards imported: {importResult.cards?.total || 'N/A'}</p>
+          <p>Duration: {importResult.duration_seconds}s</p>
+          <button onClick={() => setImportResult(null)}>Close</button>
+        </div>
+      )}
+    </>
   );
 }