refactor(decks): useDecksPage + DecksPageView (Brief 3) (#145)

Extract list page state into useDecksPage and layout into DecksPageView;
pages/decks.js is a thin auth-gated composer.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/DecksPageView.js

@@ -0,0 +1,84 @@
+import DecksCreateModal from './DecksCreateModal';
+import DecksEditModal from './DecksEditModal';
+import DecksGrid from './DecksGrid';
+import { Button } from './ui';
+
+export default function DecksPageView({
+  decks,
+  editingDeck,
+  handleCreateDeck,
+  handleDeleteDeck,
+  handleEditDeck,
+  newDeck,
+  setEditingDeck,
+  setNewDeck,
+  setShowCreateModal,
+  showCreateModal,
+}) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
+            My Decks
+          </h1>
+          <p className="mt-2" style={{ color: 'var(--text-secondary)' }}>
+            Build and manage your MTG decks
+          </p>
+        </div>
+        <Button variant="primary" onClick={() => setShowCreateModal(true)}>
+          Create New Deck
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+        <div className="glass-panel rounded-2xl p-6">
+          <div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+            {decks.length}
+          </div>
+          <div style={{ color: 'var(--text-secondary)' }}>Total Decks</div>
+        </div>
+        <div className="glass-panel rounded-2xl p-6">
+          <div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+            {decks.filter((d) => d.format === 'Commander').length}
+          </div>
+          <div style={{ color: 'var(--text-secondary)' }}>Commander</div>
+        </div>
+        <div className="glass-panel rounded-2xl p-6">
+          <div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+            {decks.filter((d) => d.is_public).length}
+          </div>
+          <div style={{ color: 'var(--text-secondary)' }}>Public</div>
+        </div>
+        <div className="glass-panel rounded-2xl p-6">
+          <div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+            {decks.reduce((sum, deck) => sum + (deck.card_count || 0), 0)}
+          </div>
+          <div style={{ color: 'var(--text-secondary)' }}>Total Cards</div>
+        </div>
+      </div>
+
+      <DecksGrid
+        decks={decks}
+        onEditDeck={setEditingDeck}
+        onDeleteDeck={handleDeleteDeck}
+        onCreateDeck={() => setShowCreateModal(true)}
+      />
+
+      <DecksCreateModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        newDeck={newDeck}
+        setNewDeck={setNewDeck}
+        onCreate={handleCreateDeck}
+      />
+
+      <DecksEditModal
+        editingDeck={editingDeck}
+        setEditingDeck={setEditingDeck}
+        onClose={() => setEditingDeck(null)}
+        onEdit={handleEditDeck}
+      />
+    </div>
+  );
+}

lib/use-decks-page.js

@@ -0,0 +1,143 @@
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const EMPTY_NEW_DECK = {
+  name: '',
+  description: '',
+  format: 'Commander',
+  is_public: false,
+};
+
+/**
+ * Decks list page state and handlers (god-component split).
+ */
+export function useDecksPage({ user = null, authLoading = true } = {}) {
+  const router = useRouter();
+  const [decks, setDecks] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingDeck, setEditingDeck] = useState(null);
+  const [newDeck, setNewDeck] = useState(EMPTY_NEW_DECK);
+
+  const fetchDecks = async () => {
+    try {
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch('/api/decks', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setDecks(data);
+      } else {
+        console.error('Failed to fetch decks');
+      }
+    } catch (error) {
+      console.error('Error fetching decks:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (user) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- load decks when user is available
+      fetchDecks();
+    }
+  }, [user]);
+
+  const handleCreateDeck = async (e) => {
+    e.preventDefault();
+    try {
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch('/api/decks', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(newDeck),
+      });
+
+      if (response.ok) {
+        const createdDeck = await response.json();
+        setDecks([createdDeck, ...decks]);
+        setShowCreateModal(false);
+        setNewDeck(EMPTY_NEW_DECK);
+        router.push(`/deck-builder?deck=${createdDeck.id}`);
+      } else {
+        console.error('Failed to create deck');
+      }
+    } catch (error) {
+      console.error('Error creating deck:', error);
+    }
+  };
+
+  const handleEditDeck = async (e) => {
+    e.preventDefault();
+    try {
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch(`/api/decks/${editingDeck.id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(editingDeck),
+      });
+
+      if (response.ok) {
+        const updatedDeck = await response.json();
+        setDecks(decks.map((deck) => (deck.id === updatedDeck.id ? updatedDeck : deck)));
+        setEditingDeck(null);
+      } else {
+        console.error('Failed to update deck');
+      }
+    } catch (error) {
+      console.error('Error updating deck:', error);
+    }
+  };
+
+  const handleDeleteDeck = async (deckId) => {
+    if (!confirm('Are you sure you want to delete this deck? This action cannot be undone.')) {
+      return;
+    }
+    try {
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch(`/api/decks/${deckId}`, {
+        method: 'DELETE',
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      if (response.ok) {
+        setDecks(decks.filter((deck) => deck.id !== deckId));
+      } else {
+        console.error('Failed to delete deck');
+      }
+    } catch (error) {
+      console.error('Error deleting deck:', error);
+    }
+  };
+
+  const showLoggedOut = !authLoading && !user;
+  const showInitialLoading = Boolean(user) && loading;
+
+  return {
+    authLoading,
+    decks,
+    editingDeck,
+    handleCreateDeck,
+    handleDeleteDeck,
+    handleEditDeck,
+    newDeck,
+    setEditingDeck,
+    setNewDeck,
+    setShowCreateModal,
+    showCreateModal,
+    showInitialLoading,
+    showLoggedOut,
+    user,
+  };
+}

pages/decks.js

@@ -1,141 +1,14 @@
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
 import Link from 'next/link';
 import Layout from '../components/Layout';
-import DecksCreateModal from '../components/DecksCreateModal';
+import DecksPageView from '../components/DecksPageView';
-import DecksEditModal from '../components/DecksEditModal';
-import DecksGrid from '../components/DecksGrid';
-import { Button } from '../components/ui';
 import { useAuth } from '../lib/use-auth';
-
+import { useDecksPage } from '../lib/use-decks-page.js';
-/* 2026-06-04 design-sweep pass: the Tailwind token classes that this
-   page relied on (bg-bg-secondary, text-text-primary, border-border,
-   bg-accent-ember, hover:bg-accent-ember-dark, focus:ring-accent-ember)
-   are NOT defined in tailwind.config.js — they produced zero CSS,
-   leaving the page visually unstyled (transparent backgrounds, no
-   borders, no hover states). Sweep replaces those with inline
-   style={{ ... CSS vars ... }} and the Button / SearchBar primitives
-   so the page actually renders with the Liquid Glass + corner-border
-   design system. `rounded-lg` → `rounded-xl` across the board to match
-   the system standard. */
 
 export default function Decks() {
-  const { user } = useAuth();
+  const { user, loading: authLoading } = useAuth();
-  const router = useRouter();
+  const decksPage = useDecksPage({ user, authLoading });
-  const [decks, setDecks] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [editingDeck, setEditingDeck] = useState(null);
-  const [newDeck, setNewDeck] = useState({
-    name: '',
-    description: '',
-    format: 'Commander',
-    is_public: false,
-  });
 
-  const fetchDecks = async () => {
+  if (decksPage.showLoggedOut || !user) {
-    try {
-      const token = localStorage.getItem('auth_token');
-      const response = await fetch('/api/decks', {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setDecks(data);
-      } else {
-        console.error('Failed to fetch decks');
-      }
-    } catch (error) {
-      console.error('Error fetching decks:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (user) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- load decks when user is available
-      fetchDecks();
-    }
-  }, [user]);
-
-  const handleCreateDeck = async (e) => {
-    e.preventDefault();
-    try {
-      const token = localStorage.getItem('auth_token');
-      const response = await fetch('/api/decks', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify(newDeck),
-      });
-
-      if (response.ok) {
-        const createdDeck = await response.json();
-        setDecks([createdDeck, ...decks]);
-        setShowCreateModal(false);
-        setNewDeck({ name: '', description: '', format: 'Commander', is_public: false });
-        router.push(`/deck-builder?deck=${createdDeck.id}`);
-      } else {
-        console.error('Failed to create deck');
-      }
-    } catch (error) {
-      console.error('Error creating deck:', error);
-    }
-  };
-
-  const handleEditDeck = async (e) => {
-    e.preventDefault();
-    try {
-      const token = localStorage.getItem('auth_token');
-      const response = await fetch(`/api/decks/${editingDeck.id}`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify(editingDeck),
-      });
-
-      if (response.ok) {
-        const updatedDeck = await response.json();
-        setDecks(decks.map((deck) => (deck.id === updatedDeck.id ? updatedDeck : deck)));
-        setEditingDeck(null);
-      } else {
-        console.error('Failed to update deck');
-      }
-    } catch (error) {
-      console.error('Error updating deck:', error);
-    }
-  };
-
-  const handleDeleteDeck = async (deckId) => {
-    if (!confirm('Are you sure you want to delete this deck? This action cannot be undone.')) {
-      return;
-    }
-    try {
-      const token = localStorage.getItem('auth_token');
-      const response = await fetch(`/api/decks/${deckId}`, {
-        method: 'DELETE',
-        headers: { Authorization: `Bearer ${token}` },
-      });
-
-      if (response.ok) {
-        setDecks(decks.filter((deck) => deck.id !== deckId));
-      } else {
-        console.error('Failed to delete deck');
-      }
-    } catch (error) {
-      console.error('Error deleting deck:', error);
-    }
-  };
-
-  if (!user) {
     return (
       <Layout user={user}>
         <div className="flex items-center justify-center min-h-screen">
@@ -152,7 +25,7 @@ export default function Decks() {
     );
   }
 
-  if (loading) {
+  if (decksPage.showInitialLoading) {
     return (
       <Layout user={user}>
         <div className="flex items-center justify-center min-h-screen">
@@ -167,72 +40,7 @@ export default function Decks() {
 
   return (
     <Layout user={user}>
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <DecksPageView {...decksPage} />
-        {/* Header */}
-        <div className="flex justify-between items-center mb-8">
-          <div>
-            <h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
-              My Decks
-            </h1>
-            <p className="mt-2" style={{ color: 'var(--text-secondary)' }}>
-              Build and manage your MTG decks
-            </p>
-          </div>
-          <Button variant="primary" onClick={() => setShowCreateModal(true)}>
-            Create New Deck
-          </Button>
-        </div>
-
-        {/* Stats */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-          <div className="glass-panel rounded-2xl p-6">
-            <div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
-              {decks.length}
-            </div>
-            <div style={{ color: 'var(--text-secondary)' }}>Total Decks</div>
-          </div>
-          <div className="glass-panel rounded-2xl p-6">
-            <div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
-              {decks.filter((d) => d.format === 'Commander').length}
-            </div>
-            <div style={{ color: 'var(--text-secondary)' }}>Commander</div>
-          </div>
-          <div className="glass-panel rounded-2xl p-6">
-            <div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
-              {decks.filter((d) => d.is_public).length}
-            </div>
-            <div style={{ color: 'var(--text-secondary)' }}>Public</div>
-          </div>
-          <div className="glass-panel rounded-2xl p-6">
-            <div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
-              {decks.reduce((sum, deck) => sum + (deck.card_count || 0), 0)}
-            </div>
-            <div style={{ color: 'var(--text-secondary)' }}>Total Cards</div>
-          </div>
-        </div>
-
-        <DecksGrid
-          decks={decks}
-          onEditDeck={setEditingDeck}
-          onDeleteDeck={handleDeleteDeck}
-          onCreateDeck={() => setShowCreateModal(true)}
-        />
-
-        <DecksCreateModal
-          isOpen={showCreateModal}
-          onClose={() => setShowCreateModal(false)}
-          newDeck={newDeck}
-          setNewDeck={setNewDeck}
-          onCreate={handleCreateDeck}
-        />
-
-        <DecksEditModal
-          editingDeck={editingDeck}
-          setEditingDeck={setEditingDeck}
-          onClose={() => setEditingDeck(null)}
-          onEdit={handleEditDeck}
-        />
-      </div>
     </Layout>
   );
 }