Apply Design A: dark theme, type badges, code cleanup

Visual:
- Dark theme throughout (#111 bg, #1c1c1c panels, #2a2a2a borders)
- Type badges with color: Monster=orange, Spell=green, Trap=purple
- Owned count shown as ×3 (highlighted) or — (dimmed)
- Printing column headers in CardRow
- Card detail panel: type badge, attribute, race, level stars

Cleanup:
- Replace index.css (was Vite boilerplate) with dark base + shared CSS classes
  (.card-row-header:hover, .filter-chip, .icon-btn, modal styles)
- Clear App.css (Vite boilerplate, unused)
- Remove Footer.css (modal styles consolidated into index.css)
- Extract useDebounce to src/hooks/useDebounce.js
- Remove react-window (installed but never used)
- App.jsx: remove unnecessary wrapper div
- gitignore: add mockups/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -1,5 +1,6 @@
 .env
 .env.local
+mockups/
 
 # Logs
 logs

package.json

@@ -12,8 +12,7 @@
   "dependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-virtuoso": "^4.18.3",
+    "react-virtuoso": "^4.18.3"
-    "react-window": "^2.2.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",

src/App.css

@@ -1,277 +1 @@
-.counter {
+/* unused – kept so Vite doesn't error if it's ever imported */
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}
-
-.footer {
-  position: sticky;
-  bottom: 0;
-  width: fit-content;
-  padding: 0.5rem 1rem;
-  background: #2a2a2a;
-  color: var(--text-h, #f0f0f0);
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  border-radius: 8px 8px 0 0;
-  border: 1px solid #666 !important;
-  border-bottom: none !important;
-  margin-right: 1.5rem;
-  z-index: 10;
-}
-
-.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);
-}
-
-/* Modal overlay */
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(2px);
-  z-index: 1000;
-  animation: fadeIn 0.15s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-/* Popup modal */
-.import-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--card-bg, #1e1e1e);
-  color: var(--text-h, #f0f0f0);
-  padding: 2rem 2.5rem;
-  border-radius: 12px;
-  border: 1px solid var(--border, #555);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-  z-index: 1001;
-  max-width: 90%;
-  min-width: 300px;
-  text-align: center;
-  animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@keyframes popIn {
-  from { opacity: 0; transform: translate(-50%, -48%) scale(0.92); }
-  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-}
-
-.import-modal button {
-  margin-top: 1.25rem;
-  padding: 0.5rem 1.5rem;
-  cursor: pointer;
-  background: var(--accent-bg, #444);
-  color: var(--accent, #fff);
-  border: 1px solid var(--accent-border, #666);
-  border-radius: 6px;
-  font-size: 0.95rem;
-  transition: background 0.2s;
-}
-
-.import-modal button:hover {
-  background: var(--accent, #fff);
-  color: var(--accent-bg, #444);
-}

src/App.jsx

@@ -2,11 +2,7 @@ import React from 'react';
 import HomePage from './pages/HomePage';
 
 function App() {
-  return (
+  return <HomePage />;
-    <div>
-      <HomePage />
-    </div>
-  );
 }
 
 export default App;

src/components/CardRow/CardRow.jsx

@@ -2,39 +2,76 @@ import React, { useContext } from 'react';
 import { CardContext } from '../../store/CardContext';
 import PrintingRow from '../PrintingRow/PrintingRow';
 
+const BADGE = {
+  monster: { background: '#3a2000', color: '#d4820a' },
+  spell:   { background: '#002820', color: '#10a06a' },
+  trap:    { background: '#280020', color: '#c040a0' },
+  other:   { background: '#202020', color: '#666' },
+};
+
+function typeBadge(type) {
+  const t = type.toLowerCase();
+  if (t.includes('monster')) return BADGE.monster;
+  if (t.includes('spell'))   return BADGE.spell;
+  if (t.includes('trap'))    return BADGE.trap;
+  return BADGE.other;
+}
+
+const PRINTING_COLS = '80px 1fr 150px 100px';
+
 function CardRow({ card }) {
   const { expandedCardId, setExpandedCardId, ownedAmounts } = useContext(CardContext);
   const isExpanded = expandedCardId === card.id;
 
-  const toggleExpand = () => setExpandedCardId(isExpanded ? null : card.id);
-
-  // ✅ Calculate total owned across all printings using combined key
   const totalOwned = card.printings?.reduce((sum, p) => {
     const key = `${p.set_id}-${p.rarity_id}`;
-    const owned = ownedAmounts[card.id]?.[key] ?? p.amount_owned ?? 0;
+    return sum + (ownedAmounts[card.id]?.[key] ?? p.amount_owned ?? 0);
-    return sum + owned;
   }, 0) ?? 0;
 
   return (
-    <div style={{ borderBottom: '1px solid #eee', padding: '0.5rem' }}>
+    <div style={{ borderBottom: '1px solid #1e1e1e' }}>
       <div
-        style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+        className="card-row-header"
-        onClick={toggleExpand}
+        onClick={() => setExpandedCardId(isExpanded ? null : card.id)}
+        style={{
+          display: 'flex', alignItems: 'center', gap: '12px',
+          padding: '9px 16px',
+          background: isExpanded ? '#1c1c1c' : 'transparent',
+        }}
       >
-        <span>{card.name}</span>
+        <span style={{ flex: 1, fontSize: '13px', color: '#d8d8d8' }}>{card.name}</span>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        <span style={{
-          <span>{card.type}</span>
+          fontSize: '11px', padding: '2px 8px', borderRadius: '10px',
-          <span>Total owned: {totalOwned}</span>
+          fontWeight: 500, whiteSpace: 'nowrap',
-        </div>
+          ...typeBadge(card.type),
+        }}>
+          {card.type}
+        </span>
+        <span style={{
+          fontSize: '12px', whiteSpace: 'nowrap', minWidth: '48px', textAlign: 'right',
+          color: totalOwned > 0 ? '#aaa' : '#444',
+        }}>
+          {totalOwned > 0 ? `×${totalOwned}` : '—'}
+        </span>
       </div>
 
       {isExpanded && card.printings?.length > 0 && (
-        <div style={{ marginTop: '0.5rem', paddingLeft: '1rem' }}>
+        <div style={{ background: '#161616', paddingBottom: '6px' }}>
+          <div style={{
+            display: 'grid', gridTemplateColumns: PRINTING_COLS,
+            gap: '8px', padding: '5px 16px 5px 32px',
+            fontSize: '10px', color: '#444',
+            textTransform: 'uppercase', letterSpacing: '0.05em',
+            borderBottom: '1px solid #222',
+          }}>
+            <span>Code</span><span>Set</span><span>Rarity</span><span>Owned</span>
+          </div>
           {card.printings.map(printing => (
             <PrintingRow
               key={`${card.id}-${printing.set_id}-${printing.rarity_id}`}
               card_id={card.id}
               printing={printing}
+              cols={PRINTING_COLS}
             />
           ))}
         </div>
@@ -43,4 +80,4 @@ function CardRow({ card }) {
   );
 }
 
-export default CardRow;
+export default CardRow;

src/components/FilterBar/FilterBar.jsx

@@ -1,31 +1,28 @@
 import React from 'react';
 
-const TYPES = ['All', 'Monster', 'Spell', 'Trap'];
+const CHIPS = [
+  { label: 'All',     activeClass: 'active' },
+  { label: 'Monster', activeClass: 'active-m' },
+  { label: 'Spell',   activeClass: 'active-s' },
+  { label: 'Trap',    activeClass: 'active-t' },
+];
 
 function FilterBar({ typeFilter, setTypeFilter, ownedOnly, setOwnedOnly, sortBy, setSortBy }) {
   return (
-    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap', margin: '0.5rem 0' }}>
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap', margin: '8px 0' }}>
-      <div style={{ display: 'flex', gap: '0.25rem' }}>
+      <div style={{ display: 'flex', gap: '4px' }}>
-        {TYPES.map(t => (
+        {CHIPS.map(({ label, activeClass }) => (
           <button
-            key={t}
+            key={label}
-            onClick={() => setTypeFilter(t)}
+            className={`filter-chip ${typeFilter === label ? activeClass : ''}`}
-            style={{
+            onClick={() => setTypeFilter(label)}
-              padding: '2px 10px',
-              borderRadius: '12px',
-              border: '1px solid #ccc',
-              background: typeFilter === t ? '#444' : 'transparent',
-              color: typeFilter === t ? '#fff' : '#666',
-              cursor: 'pointer',
-              fontSize: '0.8rem',
-            }}
           >
-            {t}
+            {label}
           </button>
         ))}
       </div>
 
-      <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer', fontSize: '0.85rem', color: '#555' }}>
+      <label style={{ display: 'flex', alignItems: 'center', gap: '5px', cursor: 'pointer', fontSize: '12px', color: '#666' }}>
         <input type="checkbox" checked={ownedOnly} onChange={e => setOwnedOnly(e.target.checked)} />
         Owned only
       </label>
@@ -33,7 +30,10 @@ function FilterBar({ typeFilter, setTypeFilter, ownedOnly, setOwnedOnly, sortBy,
       <select
         value={sortBy}
         onChange={e => setSortBy(e.target.value)}
-        style={{ fontSize: '0.8rem', padding: '2px 4px', border: '1px solid #ccc', borderRadius: '4px', color: '#555' }}
+        style={{
+          background: '#1c1c1c', border: '1px solid #2a2a2a', color: '#666',
+          fontSize: '12px', padding: '3px 6px', borderRadius: '4px',
+        }}
       >
         <option value="name">Sort: A → Z</option>
         <option value="owned">Sort: Most owned</option>

src/components/Footer/Footer.css

@@ -1,55 +0,0 @@
-/* Modal overlay */
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(2px);
-  z-index: 1000;
-  animation: fadeIn 0.15s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-/* Popup modal */
-.import-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--card-bg, #1e1e1e);
-  color: var(--text-h, #f0f0f0);
-  padding: 2rem 2.5rem;
-  border-radius: 12px;
-  border: 1px solid var(--border, #555);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-  z-index: 1001;
-  max-width: 90%;
-  min-width: 300px;
-  text-align: center;
-  animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@keyframes popIn {
-  from { opacity: 0; transform: translate(-50%, -48%) scale(0.92); }
-  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-}
-
-.import-modal button {
-  margin-top: 1.25rem;
-  padding: 0.5rem 1.5rem;
-  cursor: pointer;
-  background: var(--accent-bg, #444);
-  color: var(--accent, #fff);
-  border: 1px solid var(--accent-border, #666);
-  border-radius: 6px;
-  font-size: 0.95rem;
-  transition: background 0.2s;
-}
-
-.import-modal button:hover {
-  background: var(--accent, #fff);
-  color: var(--accent-bg, #444);
-}

src/components/Footer/Footer.jsx

@@ -1,8 +1,6 @@
-// src/components/Footer/Footer.jsx
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { fetchDatabaseVersion, triggerFullImport } from '../../services/api';
-import './Footer.css';
 
 function Footer({ onImportComplete }) {
   const [dbVersion, setDbVersion] = useState(null);
@@ -13,11 +11,7 @@ function Footer({ onImportComplete }) {
   useEffect(() => {
     fetchDatabaseVersion()
       .then(data => setDbVersion(data.database_version))
-      .catch(err => {
+      .catch(() => setDbVersion('N/A'));
-        setDbVersion('N/A');
-        setModalMessage(`Failed to fetch DB version: ${err.message}`);
-        setShowModal(true);
-      });
   }, []);
 
   const handleImport = async () => {
@@ -27,47 +21,38 @@ function Footer({ onImportComplete }) {
       const data = await fetchDatabaseVersion();
       setDbVersion(data.database_version);
       setModalMessage(result.message || 'Import completed');
-      setShowModal(true);
       if (onImportComplete) await onImportComplete();
     } catch (err) {
       setModalMessage(`Import failed: ${err.message}`);
-      setShowModal(true);
     } finally {
       setImporting(false);
+      setShowModal(true);
     }
   };
 
   return (
     <>
-      <footer className="footer" style={{
+      <div style={{
-        border: '1px solid #666',
+        display: 'flex', alignItems: 'center', gap: '16px',
-        borderBottom: 'none',
+        background: '#1c1c1c', border: '1px solid #2a2a2a',
-        borderRadius: '8px 8px 0 0',
+        borderBottom: 'none', borderRadius: '8px 8px 0 0',
-        background: '#2a2a2a',
+        padding: '7px 16px', marginRight: '20px',
-        marginRight: '1.5rem',
+        fontSize: '12px', color: '#666',
-        padding: '0.6rem 1.25rem',
-        gap: '2.5rem',
       }}>
-        <span>DB Version: {dbVersion || 'Loading...'}</span>
+        <span>DB Version: {dbVersion ?? 'Loading…'}</span>
         <button
           onClick={handleImport}
           disabled={importing}
           style={{
-            background: '#3a3a3a',
+            background: '#2a2a2a', color: '#ccc', border: '1px solid #3a3a3a',
-            color: '#e0e0e0',
+            borderRadius: '5px', padding: '4px 12px', fontSize: '12px',
-            border: '1px solid #666',
-            borderRadius: '6px',
-            padding: '4px 12px',
-            fontSize: '0.85rem',
             cursor: importing ? 'not-allowed' : 'pointer',
             opacity: importing ? 0.5 : 1,
-            transition: 'background 0.2s, color 0.2s',
-            marginLeft: '1.5rem',
           }}
         >
-          {importing ? 'Importing...' : 'Full Import'}
+          {importing ? 'Importing…' : 'Full Import'}
         </button>
-      </footer>
+      </div>
 
       {showModal && createPortal(
         <>
@@ -83,4 +68,4 @@ function Footer({ onImportComplete }) {
   );
 }
 
-export default Footer;
+export default Footer;

src/components/PrintingRow/PrintingRow.jsx

@@ -2,21 +2,19 @@ import React, { useContext, useState } from 'react';
 import { CardContext } from '../../store/CardContext';
 import { updateCardAmount } from '../../services/api';
 
-function PrintingRow({ card_id, printing }) {
+function PrintingRow({ card_id, printing, cols }) {
   const { ownedAmounts, updateAmount } = useContext(CardContext);
   const [loading, setLoading] = useState(false);
 
   const key = `${printing.set_id}-${printing.rarity_id}`;
-  const currentAmount = ownedAmounts[card_id]?.[key] ?? printing.amount_owned ?? 0;
+  const current = ownedAmounts[card_id]?.[key] ?? printing.amount_owned ?? 0;
-
-  const updateBackend = async (newAmount) => {
-    const { set_id, rarity_id } = printing;
-    if (card_id == null || set_id == null || rarity_id == null) return;
 
+  const save = async (next) => {
+    if (card_id == null || printing.set_id == null || printing.rarity_id == null) return;
     setLoading(true);
     try {
-      await updateCardAmount(card_id, set_id, rarity_id, newAmount);
+      await updateCardAmount(card_id, printing.set_id, printing.rarity_id, next);
-      updateAmount(card_id, key, newAmount);
+      updateAmount(card_id, key, next);
     } catch (err) {
       console.error('Failed to update amount', err);
     } finally {
@@ -24,39 +22,34 @@ function PrintingRow({ card_id, printing }) {
     }
   };
 
-  const increment = () => updateBackend(currentAmount + 1);
-  const decrement = () => {
-    if (currentAmount > 0) updateBackend(currentAmount - 1);
-  };
-
   return (
-    <div
+    <div style={{
-      style={{
+      display: 'grid', gridTemplateColumns: cols,
-        display: 'grid',
+      gap: '8px', padding: '5px 16px 5px 32px',
-        gridTemplateColumns: '80px 1fr 120px auto',
+      alignItems: 'center', opacity: loading ? 0.5 : 1,
-        gap: '0.5rem',
+    }}>
-        padding: '0.25rem 0',
+      <span style={{ fontFamily: 'monospace', fontSize: '11px', color: '#555' }}>
-        alignItems: 'center',
+        {printing.set_code}
-        opacity: loading ? 0.6 : 1
+      </span>
-      }}
+      <span style={{ fontSize: '12px', color: '#888' }}>{printing.set_name}</span>
-    >
+      <span style={{ fontSize: '12px', color: '#aaa' }}>{printing.rarity_name}</span>
-      {/* Column 1: Set code */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-      <span style={{ fontFamily: 'monospace' }}>{printing.set_code}</span>
+        <button
-
+          className="icon-btn"
-      {/* Column 2: Set name */}
+          onClick={() => current > 0 && save(current - 1)}
-      <span>{printing.set_name}</span>
+          disabled={loading || current === 0}
-
+        >−</button>
-      {/* Column 3: Rarity */}
+        <span style={{ minWidth: '20px', textAlign: 'center', color: '#e0e0e0', fontSize: '13px' }}>
-      <span>{printing.rarity_name}</span>
+          {current}
-
+        </span>
-      {/* Column 4: Amount controls */}
+        <button
-      <div>
+          className="icon-btn"
-        <button onClick={decrement} disabled={loading || currentAmount === 0}>–</button>
+          onClick={() => save(current + 1)}
-        <span style={{ margin: '0 0.5rem' }}>{currentAmount}</span>
+          disabled={loading}
-        <button onClick={increment} disabled={loading}>+</button>
+        >+</button>
       </div>
     </div>
   );
 }
 
-export default React.memo(PrintingRow);
+export default React.memo(PrintingRow);

src/components/SearchBar/SearchBar.jsx

@@ -2,39 +2,38 @@ import React from 'react';
 
 function SearchBar({ searchTerm, setSearchTerm }) {
   return (
-    <div style={{ position: 'relative', width: '100%' }}>
+    <div style={{ position: 'relative' }}>
       <input
         type="text"
-        placeholder="Search by card name..."
+        placeholder="Search by card name…"
         value={searchTerm}
         onChange={e => setSearchTerm(e.target.value)}
         style={{
           width: '100%',
-          padding: '0.5rem 2rem 0.5rem 0.5rem',
+          padding: '8px 32px 8px 12px',
-          borderRadius: '4px',
+          background: '#1c1c1c',
-          border: '1px solid #ccc',
+          border: '1px solid #2a2a2a',
-          boxSizing: 'border-box'
+          borderRadius: '6px',
+          color: '#e0e0e0',
+          fontSize: '13px',
+          outline: 'none',
+          boxSizing: 'border-box',
         }}
+        onFocus={e => e.target.style.borderColor = '#444'}
+        onBlur={e => e.target.style.borderColor = '#2a2a2a'}
       />
       {searchTerm && (
         <span
           onClick={() => setSearchTerm('')}
           style={{
-            position: 'absolute',
+            position: 'absolute', right: '10px', top: '50%',
-            right: '0.5rem',
+            transform: 'translateY(-50%)', cursor: 'pointer',
-            top: '50%',
+            fontSize: '16px', color: '#555', userSelect: 'none', lineHeight: 1,
-            transform: 'translateY(-50%)',
-            cursor: 'pointer',
-            fontSize: '1rem',
-            color: '#888',
-            userSelect: 'none'
           }}
-        >
+        >×</span>
-          ×
-        </span>
       )}
     </div>
   );
 }
 
-export default SearchBar;
+export default SearchBar;

src/hooks/useDebounce.js

@@ -0,0 +1,10 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce(value, delay = 250) {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(id);
+  }, [value, delay]);
+  return debounced;
+}

src/index.css

@@ -1,110 +1,94 @@
-:root {
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
 
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+html, body, #root { height: 100%; }
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
-
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
 
 body {
-  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #111;
+  color: #e0e0e0;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
 }
 
-#root {
+/* Card row — :hover can't be done with inline styles */
-  width: 100%;
+.card-row-header:hover { background: #1a1a1a !important; }
-  margin: 0;
-  text-align: left; /* optional: better for layout apps */
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
 
+/* Filter chips */
+.filter-chip {
+  padding: 3px 12px;
+  border-radius: 20px;
+  border: 1px solid #333;
+  background: transparent;
+  color: #666;
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+.filter-chip:hover { border-color: #555; color: #bbb; }
+.filter-chip.active     { background: #e0e0e0; color: #111; border-color: #e0e0e0; }
+.filter-chip.active-m   { background: #c07020; color: #fff; border-color: #c07020; }
+.filter-chip.active-s   { background: #1a7a5e; color: #fff; border-color: #1a7a5e; }
+.filter-chip.active-t   { background: #7a2060; color: #fff; border-color: #7a2060; }
 
-h1,
+/* Amount +/− buttons */
-h2 {
+.icon-btn {
-  font-family: var(--heading);
+  width: 22px;
-  font-weight: 500;
+  height: 22px;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
   border-radius: 4px;
-  color: var(--text-h);
+  border: 1px solid #333;
+  background: #222;
+  color: #aaa;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 1;
 }
+.icon-btn:hover:not(:disabled) { background: #2e2e2e; border-color: #444; }
+.icon-btn:disabled { opacity: 0.4; cursor: default; }
 
-code {
+/* Import modal */
-  font-size: 15px;
+.modal-backdrop {
-  line-height: 135%;
+  position: fixed;
-  padding: 4px 8px;
+  inset: 0;
-  background: var(--code-bg);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+  z-index: 1000;
+  animation: fadeIn 0.15s ease;
 }
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+
+.import-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #1e1e1e;
+  color: #e0e0e0;
+  padding: 2rem 2.5rem;
+  border-radius: 12px;
+  border: 1px solid #333;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
+  z-index: 1001;
+  max-width: 90%;
+  min-width: 300px;
+  text-align: center;
+  animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+@keyframes popIn {
+  from { opacity: 0; transform: translate(-50%, -48%) scale(0.92); }
+  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+.import-modal button {
+  margin-top: 1.25rem;
+  padding: 0.4rem 1.4rem;
+  cursor: pointer;
+  background: #2a2a2a;
+  color: #e0e0e0;
+  border: 1px solid #444;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  transition: background 0.15s;
+}
+.import-modal button:hover { background: #333; }

src/pages/HomePage.jsx

@@ -1,41 +1,43 @@
 import React, { useEffect, useState, useContext, useMemo, useCallback } from 'react';
 import { Virtuoso } from 'react-virtuoso';
+import { CardContext } from '../store/CardContext';
+import { fetchCards, fetchCardImage } from '../services/api';
+import { useDebounce } from '../hooks/useDebounce';
 import CardRow from '../components/CardRow/CardRow';
 import SearchBar from '../components/SearchBar/SearchBar';
 import FilterBar from '../components/FilterBar/FilterBar';
-import { CardContext } from '../store/CardContext';
-import { fetchCards, fetchCardImage } from '../services/api';
 import Footer from '../components/Footer/Footer';
 
-function useDebouncedValue(value, delay = 250) {
+const BADGE = {
-  const [debounced, setDebounced] = useState(value);
+  monster: { background: '#3a2000', color: '#d4820a' },
-  useEffect(() => {
+  spell:   { background: '#002820', color: '#10a06a' },
-    const handler = setTimeout(() => setDebounced(value), delay);
+  trap:    { background: '#280020', color: '#c040a0' },
-    return () => clearTimeout(handler);
+  other:   { background: '#202020', color: '#666' },
-  }, [value, delay]);
+};
-  return debounced;
+function typeBadge(type) {
+  const t = (type || '').toLowerCase();
+  if (t.includes('monster')) return BADGE.monster;
+  if (t.includes('spell'))   return BADGE.spell;
+  if (t.includes('trap'))    return BADGE.trap;
+  return BADGE.other;
 }
 
 function HomePage() {
   const [cards, setCards] = useState([]);
-  const [searchTerm, setSearchTerm] = useState('');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
   const [typeFilter, setTypeFilter] = useState('All');
   const [ownedOnly, setOwnedOnly] = useState(false);
   const [sortBy, setSortBy] = useState('name');
 
-  const { expandedCardId, cardImages, setCardImage, ownedAmounts } = useContext(CardContext);
+  const { expandedCardId, setExpandedCardId, cardImages, setCardImage, ownedAmounts } = useContext(CardContext);
-  const debouncedSearchTerm = useDebouncedValue(searchTerm, 250);
+  const debouncedSearch = useDebounce(searchTerm, 250);
 
-  const loadCards = useCallback(() => {
+  const loadCards = useCallback(() => fetchCards().then(setCards), []);
-    return fetchCards().then(data => setCards(data));
-  }, []);
 
   useEffect(() => {
-    loadCards()
+    loadCards().catch(err => setError(err.message)).finally(() => setLoading(false));
-      .catch(err => setError(err.message))
-      .finally(() => setLoading(false));
   }, [loadCards]);
 
   useEffect(() => {
@@ -45,7 +47,7 @@ function HomePage() {
       .catch(err => console.error('Failed to load card image', err));
   }, [expandedCardId, cardImages, setCardImage]);
 
-  const getCardTotal = useCallback((card) =>
+  const getTotal = useCallback((card) =>
     card.printings?.reduce((sum, p) => {
       const key = `${p.set_id}-${p.rarity_id}`;
       return sum + (ownedAmounts[card.id]?.[key] ?? p.amount_owned ?? 0);
@@ -53,113 +55,115 @@ function HomePage() {
   , [ownedAmounts]);
 
   const stats = useMemo(() => ({
-    totalCards: cards.length,
+    total: cards.length,
-    ownedUnique: cards.filter(c => getCardTotal(c) > 0).length,
+    uniqueOwned: cards.filter(c => getTotal(c) > 0).length,
-    totalCopies: cards.reduce((sum, c) => sum + getCardTotal(c), 0),
+    totalCopies: cards.reduce((s, c) => s + getTotal(c), 0),
-  }), [cards, getCardTotal]);
+  }), [cards, getTotal]);
 
   const filteredCards = useMemo(() => {
     let result = cards;
-
+    if (debouncedSearch) {
-    if (debouncedSearchTerm) {
+      const q = debouncedSearch.toLowerCase();
-      const lower = debouncedSearchTerm.toLowerCase();
+      result = result.filter(c => c.name.toLowerCase().includes(q));
-      result = result.filter(c => c.name.toLowerCase().includes(lower));
     }
-
     if (typeFilter !== 'All') {
-      const lower = typeFilter.toLowerCase();
+      const q = typeFilter.toLowerCase();
-      result = result.filter(c => c.type.toLowerCase().includes(lower));
+      result = result.filter(c => c.type.toLowerCase().includes(q));
-    }
-
-    if (ownedOnly) {
-      result = result.filter(c => getCardTotal(c) > 0);
     }
+    if (ownedOnly) result = result.filter(c => getTotal(c) > 0);
 
     const sorted = [...result];
-    if (sortBy === 'owned') {
+    if (sortBy === 'owned') sorted.sort((a, b) => getTotal(b) - getTotal(a));
-      sorted.sort((a, b) => getCardTotal(b) - getCardTotal(a));
+    else sorted.sort((a, b) => a.name.localeCompare(b.name));
-    } else {
-      sorted.sort((a, b) => a.name.localeCompare(b.name));
-    }
-
     return sorted;
-  }, [cards, debouncedSearchTerm, typeFilter, ownedOnly, sortBy, getCardTotal]);
+  }, [cards, debouncedSearch, typeFilter, ownedOnly, sortBy, getTotal]);
-
-  if (loading) return <p style={{ padding: '1rem' }}>Loading cards...</p>;
-  if (error) return <p style={{ padding: '1rem', color: 'red' }}>Error: {error}</p>;
 
   const expandedCard = cards.find(c => c.id === expandedCardId);
 
+  if (loading) return <p style={{ padding: '1rem', color: '#666' }}>Loading cards…</p>;
+  if (error)   return <p style={{ padding: '1rem', color: '#c04040' }}>Error: {error}</p>;
+
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+
       {/* Stats bar */}
       <div style={{
-        display: 'flex', gap: '2rem', padding: '0.4rem 1rem',
+        display: 'flex', gap: '2rem', padding: '6px 16px', flexShrink: 0,
-        background: '#f5f5f5', borderBottom: '1px solid #ddd',
+        background: '#1c1c1c', borderBottom: '1px solid #2a2a2a',
-        fontSize: '0.85rem', color: '#555', flexShrink: 0,
+        fontSize: '12px', color: '#666',
       }}>
-        <span><strong>{stats.totalCards.toLocaleString()}</strong> cards in DB</span>
+        <span><strong style={{ color: '#e0e0e0' }}>{stats.total.toLocaleString()}</strong> cards in DB</span>
-        <span><strong>{stats.ownedUnique.toLocaleString()}</strong> unique owned</span>
+        <span><strong style={{ color: '#e0e0e0' }}>{stats.uniqueOwned.toLocaleString()}</strong> unique owned</span>
-        <span><strong>{stats.totalCopies.toLocaleString()}</strong> total copies</span>
+        <span><strong style={{ color: '#e0e0e0' }}>{stats.totalCopies.toLocaleString()}</strong> total copies</span>
       </div>
 
-      {/* Main content */}
+      {/* Main panels */}
       <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
-        {/* Left panel */}
+
-        <div style={{ flex: 2, borderRight: '1px solid #ccc', padding: '1rem', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+        {/* Left — card list */}
-          <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+        <div style={{ flex: 2, display: 'flex', flexDirection: 'column', borderRight: '1px solid #2a2a2a', overflow: 'hidden' }}>
-          <FilterBar
+          <div style={{ padding: '10px 16px', borderBottom: '1px solid #2a2a2a', flexShrink: 0 }}>
-            typeFilter={typeFilter} setTypeFilter={setTypeFilter}
+            <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
-            ownedOnly={ownedOnly} setOwnedOnly={setOwnedOnly}
+            <FilterBar
-            sortBy={sortBy} setSortBy={setSortBy}
+              typeFilter={typeFilter} setTypeFilter={setTypeFilter}
-          />
+              ownedOnly={ownedOnly} setOwnedOnly={setOwnedOnly}
-          <div style={{ fontSize: '0.8rem', color: '#999', marginBottom: '0.25rem' }}>
+              sortBy={sortBy} setSortBy={setSortBy}
+            />
+          </div>
+          <div style={{ padding: '4px 16px', fontSize: '11px', color: '#444', flexShrink: 0, borderBottom: '1px solid #1a1a1a' }}>
             {filteredCards.length.toLocaleString()} cards
           </div>
           <Virtuoso
             style={{ flex: 1 }}
             data={filteredCards}
-            itemContent={(index, card) => <CardRow key={card.id} card={card} />}
+            itemContent={(_, card) => <CardRow card={card} />}
           />
         </div>
 
-        {/* Right panel */}
+        {/* Right — card detail */}
-        <div style={{ flex: 1, padding: '1rem', overflowY: 'auto' }}>
+        <div style={{ flex: 1, padding: '16px', overflowY: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
-          {expandedCardId && expandedCard ? (
+          {expandedCard ? (
             <>
               {cardImages[expandedCardId] ? (
-                <img
+                <img src={cardImages[expandedCardId]} alt={expandedCard.name} style={{ maxWidth: '100%' }} />
-                  src={cardImages[expandedCardId]}
-                  alt={expandedCard.name}
-                  style={{ maxWidth: '100%' }}
-                />
               ) : (
-                <p>Loading image...</p>
+                <div style={{ color: '#444', fontSize: '12px', padding: '2rem' }}>Loading image…</div>
-              )}
-              <h3 style={{ margin: '0.75rem 0 0.2rem' }}>{expandedCard.name}</h3>
-              <p style={{ margin: '0.2rem 0', color: '#888', fontSize: '0.85rem' }}>
-                {expandedCard.type}
-                {expandedCard.race && ` · ${expandedCard.race}`}
-                {expandedCard.attribute && ` · ${expandedCard.attribute}`}
-              </p>
-              {expandedCard.level != null && (
-                <p style={{ margin: '0.2rem 0', fontSize: '0.85rem' }}>
-                  {'★'.repeat(Math.min(expandedCard.level, 13))} Lv.{expandedCard.level}
-                </p>
-              )}
-              {expandedCard.link_val != null && (
-                <p style={{ margin: '0.2rem 0', fontSize: '0.85rem' }}>
-                  Link {expandedCard.link_val}
-                </p>
               )}
+              <div style={{ width: '100%', borderTop: '1px solid #222', paddingTop: '10px', display: 'flex', flexDirection: 'column', gap: '5px' }}>
+                <span style={{ fontSize: '15px', fontWeight: 600, color: '#e0e0e0' }}>{expandedCard.name}</span>
+                <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+                  <span style={{ fontSize: '11px', padding: '2px 8px', borderRadius: '10px', fontWeight: 500, ...typeBadge(expandedCard.type) }}>
+                    {expandedCard.type}
+                  </span>
+                  {expandedCard.attribute && (
+                    <span style={{ fontSize: '11px', padding: '2px 8px', borderRadius: '10px', background: '#202020', color: '#888' }}>
+                      {expandedCard.attribute}
+                    </span>
+                  )}
+                  {expandedCard.race && (
+                    <span style={{ fontSize: '11px', padding: '2px 8px', borderRadius: '10px', background: '#202020', color: '#888' }}>
+                      {expandedCard.race}
+                    </span>
+                  )}
+                </div>
+                {expandedCard.level != null && (
+                  <span style={{ fontSize: '12px', color: '#888' }}>
+                    {'★'.repeat(Math.min(expandedCard.level, 13))} Lv.{expandedCard.level}
+                  </span>
+                )}
+                {expandedCard.link_val != null && (
+                  <span style={{ fontSize: '12px', color: '#888' }}>Link {expandedCard.link_val}</span>
+                )}
+              </div>
             </>
           ) : (
-            <p style={{ color: '#aaa' }}>Click a card to see details</p>
+            <span style={{ color: '#333', fontSize: '13px', marginTop: '2rem' }}>Click a card to see details</span>
           )}
         </div>
       </div>
 
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      {/* Footer */}
+      <div style={{ display: 'flex', justifyContent: 'flex-end', flexShrink: 0 }}>
         <Footer onImportComplete={loadCards} />
       </div>
     </div>