packages/web/src/pages/CookbookDetail.tsx

@@ -1,9 +1,15 @@
 import { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
 import { CookbookWithRecipes, Recipe } from '@basil/shared';
 import { cookbooksApi } from '../services/api';
 import '../styles/CookbookDetail.css';
 
+const ITEMS_PER_PAGE_OPTIONS = [12, 24, 48, -1]; // -1 = All
+
+// LocalStorage keys
+const LS_ITEMS_PER_PAGE = 'basil_cookbook_itemsPerPage';
+const LS_COLUMN_COUNT = 'basil_cookbook_columnCount';
+
 // Helper function to extract tag name from string or RecipeTag object
 const getTagName = (tag: string | { tag: { name: string } }): string => {
   return typeof tag === 'string' ? tag : tag.tag.name;
@@ -12,10 +18,33 @@ const getTagName = (tag: string | { tag: { name: string } }): string => {
 function CookbookDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [cookbook, setCookbook] = useState<CookbookWithRecipes | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(() => {
+    const page = searchParams.get('page');
+    return page ? parseInt(page) : 1;
+  });
+  const [itemsPerPage, setItemsPerPage] = useState(() => {
+    const saved = localStorage.getItem(LS_ITEMS_PER_PAGE);
+    if (saved) return parseInt(saved);
+    const param = searchParams.get('limit');
+    return param ? parseInt(param) : 24;
+  });
+
+  // Display controls state
+  const [columnCount, setColumnCount] = useState<3 | 5 | 7 | 9>(() => {
+    const saved = localStorage.getItem(LS_COLUMN_COUNT);
+    if (saved) {
+      const val = parseInt(saved);
+      if (val === 3 || val === 5 || val === 7 || val === 9) return val;
+    }
+    return 5;
+  });
+
   // Filters
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
@@ -27,6 +56,28 @@ function CookbookDetail() {
     }
   }, [id]);
 
+  // Save preferences to localStorage
+  useEffect(() => {
+    localStorage.setItem(LS_ITEMS_PER_PAGE, itemsPerPage.toString());
+  }, [itemsPerPage]);
+
+  useEffect(() => {
+    localStorage.setItem(LS_COLUMN_COUNT, columnCount.toString());
+  }, [columnCount]);
+
+  // Update URL params
+  useEffect(() => {
+    const params = new URLSearchParams();
+    if (currentPage > 1) params.set('page', currentPage.toString());
+    if (itemsPerPage !== 24) params.set('limit', itemsPerPage.toString());
+    setSearchParams(params, { replace: true });
+  }, [currentPage, itemsPerPage, setSearchParams]);
+
+  // Reset page when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, selectedTags, selectedCuisine]);
+
   const loadCookbook = async (cookbookId: string) => {
     try {
       setLoading(true);
@@ -129,6 +180,24 @@ function CookbookDetail() {
     setSelectedCuisine('');
   };
 
+  const handlePageChange = (newPage: number) => {
+    setCurrentPage(newPage);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleItemsPerPageChange = (value: number) => {
+    setItemsPerPage(value);
+    setCurrentPage(1);
+  };
+
+  // Apply pagination to filtered recipes
+  const getPaginatedRecipes = (filteredRecipes: Recipe[]): Recipe[] => {
+    if (itemsPerPage === -1) return filteredRecipes;
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return filteredRecipes.slice(startIndex, endIndex);
+  };
+
   if (loading) {
     return (
       <div className="cookbook-detail-page">
@@ -147,9 +216,16 @@ function CookbookDetail() {
   }
 
   const filteredRecipes = getFilteredRecipes();
+  const paginatedRecipes = getPaginatedRecipes(filteredRecipes);
   const allTags = getAllTags();
   const allCuisines = getAllCuisines();
   const hasActiveFilters = searchQuery || selectedTags.length > 0 || selectedCuisine;
+  const totalPages = itemsPerPage === -1 ? 1 : Math.ceil(filteredRecipes.length / itemsPerPage);
+
+  // Grid style with CSS variables
+  const gridStyle: React.CSSProperties = {
+    gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
+  };
 
   return (
     <div className="cookbook-detail-page">
@@ -227,6 +303,61 @@ function CookbookDetail() {
         </div>
       </div>
 
+      {/* Display and Pagination Controls */}
+      <div className="cookbook-toolbar">
+        <div className="display-controls">
+          <div className="control-group">
+            <label>Columns:</label>
+            <div className="column-buttons">
+              {([3, 5, 7, 9] as const).map((count) => (
+                <button
+                  key={count}
+                  className={columnCount === count ? 'active' : ''}
+                  onClick={() => setColumnCount(count)}
+                >
+                  {count}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="pagination-controls">
+          <div className="control-group">
+            <label>Per page:</label>
+            <div className="items-per-page">
+              {ITEMS_PER_PAGE_OPTIONS.map((count) => (
+                <button
+                  key={count}
+                  className={itemsPerPage === count ? 'active' : ''}
+                  onClick={() => handleItemsPerPageChange(count)}
+                >
+                  {count === -1 ? 'All' : count}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="page-navigation">
+            <button
+              onClick={() => handlePageChange(currentPage - 1)}
+              disabled={currentPage <= 1}
+            >
+              Prev
+            </button>
+            <span className="page-info">
+              Page {currentPage} of {totalPages}
+            </span>
+            <button
+              onClick={() => handlePageChange(currentPage + 1)}
+              disabled={currentPage >= totalPages}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+
       {/* Included Cookbooks */}
       {cookbook.cookbooks && cookbook.cookbooks.length > 0 && (
         <section className="included-cookbooks-section">
@@ -272,7 +403,12 @@ function CookbookDetail() {
       <div className="results-section">
         <h2>Recipes</h2>
         <p className="results-count">
-          Showing {filteredRecipes.length} of {cookbook.recipes.length} recipes
+          {itemsPerPage === -1 ? (
+            `Showing all ${filteredRecipes.length} recipes`
+          ) : (
+            `Showing ${(currentPage - 1) * itemsPerPage + 1}-${Math.min(currentPage * itemsPerPage, filteredRecipes.length)} of ${filteredRecipes.length} recipes`
+          )}
+          {filteredRecipes.length < cookbook.recipes.length && ` (filtered from ${cookbook.recipes.length} total)`}
         </p>
 
         {filteredRecipes.length === 0 ? (
@@ -284,8 +420,8 @@ function CookbookDetail() {
             )}
           </div>
         ) : (
-          <div className="recipes-grid">
+          <div className="recipes-grid" style={gridStyle}>
-            {filteredRecipes.map(recipe => (
+            {paginatedRecipes.map(recipe => (
               <div key={recipe.id} className="recipe-card">
                 <div onClick={() => navigate(`/recipes/${recipe.id}`)}>
                   {recipe.imageUrl ? (

packages/web/src/styles/CookbookDetail.css

@@ -261,6 +261,108 @@
   background-color: #616161;
 }
 
+/* Toolbar and Pagination Controls */
+
+.cookbook-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  align-items: flex-end;
+  justify-content: space-between;
+  background: white;
+  padding: 1.5rem;
+  border-radius: 12px;
+  margin-bottom: 2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.display-controls,
+.pagination-controls {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.control-group label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #424242;
+}
+
+.column-buttons,
+.items-per-page {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.column-buttons button,
+.items-per-page button {
+  min-width: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 2px solid #e0e0e0;
+  background: white;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.column-buttons button:hover,
+.items-per-page button:hover {
+  border-color: #2e7d32;
+  background-color: #f1f8e9;
+}
+
+.column-buttons button.active,
+.items-per-page button.active {
+  background-color: #2e7d32;
+  color: white;
+  border-color: #2e7d32;
+}
+
+.page-navigation {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.page-navigation button {
+  padding: 0.5rem 1.25rem;
+  border: 2px solid #2e7d32;
+  background: white;
+  color: #2e7d32;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.page-navigation button:hover:not(:disabled) {
+  background-color: #2e7d32;
+  color: white;
+}
+
+.page-navigation button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.page-info {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #424242;
+  white-space: nowrap;
+}
+
 /* Results Section */
 
 .results-section {
@@ -275,7 +377,6 @@
 
 .recipes-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 1.5rem;
 }
 
@@ -427,6 +528,19 @@
     width: 100%;
   }
 
+  .cookbook-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 1rem;
+  }
+
+  .display-controls,
+  .pagination-controls {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
   .recipes-grid {
     grid-template-columns: 1fr;
   }