adjust footer

src/App.css

@@ -182,3 +182,40 @@
     border-right-color: var(--border);
   }
 }
+
+/* in app.css or Footer.module.css */
+.footer {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding: 0.5rem 1rem;
+  background: var(--card-bg, #1e1e1e); /* fallback if var not set */
+  color: var(--text-h, #f0f0f0);
+  border-top-left-radius: 8px;
+  border: 1px solid var(--border, #333);
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  z-index: 1000;
+}
+
+.footer button {
+  background: var(--accent-bg, #444);
+  color: var(--accent, #fff);
+  border: 1px solid var(--accent-border, #666);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.footer button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.footer button:hover:not(:disabled) {
+  background: var(--accent, #fff);
+  color: var(--accent-bg, #444);
+}

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>
+      )}
+    </>
   );
 }