From 6c8f2d86d6a90acb2e5297a2d327412cab592bbf Mon Sep 17 00:00:00 2001
From: Syco21 <davhv12@gmail.com>
Date: Fri, 15 May 2026 21:22:53 +0200
Subject: [PATCH] Move DB version/import to top bar, increase row spacing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/CardRow/CardRow.jsx         |  2 +-
 src/components/Footer/Footer.jsx           | 12 +++---------
 src/components/PrintingRow/PrintingRow.jsx |  2 +-
 src/pages/HomePage.jsx                     |  9 ++++-----
 4 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/components/CardRow/CardRow.jsx b/src/components/CardRow/CardRow.jsx
index 6053c2d..539e75a 100644
--- a/src/components/CardRow/CardRow.jsx
+++ b/src/components/CardRow/CardRow.jsx
@@ -35,7 +35,7 @@ function CardRow({ card }) {
         onClick={() => setExpandedCardId(isExpanded ? null : card.id)}
         style={{
           display: 'flex', alignItems: 'center', gap: '12px',
-          padding: '9px 16px',
+          padding: '11px 16px',
           background: isExpanded ? '#1c1c1c' : 'transparent',
         }}
       >
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index fd68a7c..058b82a 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -32,20 +32,14 @@ function Footer({ onImportComplete }) {
 
   return (
     <>
-      <div style={{
-        display: 'flex', alignItems: 'center', gap: '16px',
-        background: '#1c1c1c', border: '1px solid #2a2a2a',
-        borderBottom: 'none', borderRadius: '8px 8px 0 0',
-        padding: '7px 16px', marginRight: '20px',
-        fontSize: '12px', color: '#666',
-      }}>
-        <span>DB Version: {dbVersion ?? 'Loading…'}</span>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', fontSize: '12px', color: '#555' }}>
+        <span>DB: {dbVersion ?? '…'}</span>
         <button
           onClick={handleImport}
           disabled={importing}
           style={{
             background: '#2a2a2a', color: '#ccc', border: '1px solid #3a3a3a',
-            borderRadius: '5px', padding: '4px 12px', fontSize: '12px',
+            borderRadius: '5px', padding: '3px 10px', fontSize: '12px',
             cursor: importing ? 'not-allowed' : 'pointer',
             opacity: importing ? 0.5 : 1,
           }}
diff --git a/src/components/PrintingRow/PrintingRow.jsx b/src/components/PrintingRow/PrintingRow.jsx
index 8433f67..8d560a7 100644
--- a/src/components/PrintingRow/PrintingRow.jsx
+++ b/src/components/PrintingRow/PrintingRow.jsx
@@ -25,7 +25,7 @@ function PrintingRow({ card_id, printing, cols }) {
   return (
     <div style={{
       display: 'grid', gridTemplateColumns: cols,
-      gap: '8px', padding: '5px 16px 5px 32px',
+      gap: '8px', padding: '7px 16px 7px 32px',
       alignItems: 'center', opacity: loading ? 0.5 : 1,
     }}>
       <span style={{ fontFamily: 'monospace', fontSize: '11px', color: '#555' }}>
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index dfca30c..2cde9aa 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -88,13 +88,16 @@ function HomePage() {
 
       {/* Stats bar */}
       <div style={{
-        display: 'flex', gap: '2rem', padding: '6px 16px', flexShrink: 0,
+        display: 'flex', alignItems: 'center', gap: '2rem', padding: '6px 16px', flexShrink: 0,
         background: '#1c1c1c', borderBottom: '1px solid #2a2a2a',
         fontSize: '12px', color: '#666',
       }}>
         <span><strong style={{ color: '#e0e0e0' }}>{stats.total.toLocaleString()}</strong> cards in DB</span>
         <span><strong style={{ color: '#e0e0e0' }}>{stats.uniqueOwned.toLocaleString()}</strong> unique owned</span>
         <span><strong style={{ color: '#e0e0e0' }}>{stats.totalCopies.toLocaleString()}</strong> total copies</span>
+        <div style={{ marginLeft: 'auto' }}>
+          <Footer onImportComplete={loadCards} />
+        </div>
       </div>
 
       {/* Main panels */}
@@ -162,10 +165,6 @@ function HomePage() {
         </div>
       </div>
 
-      {/* Footer */}
-      <div style={{ display: 'flex', justifyContent: 'flex-end', flexShrink: 0 }}>
-        <Footer onImportComplete={loadCards} />
-      </div>
     </div>
   );
 }