feat: Improve preparation method display and filtering

2026-06-07 00:31:38 +05:30
8 changed files with 452 additions and 63 deletions
--- a/server/db.js
+++ b/server/db.js
@@ -50,9 +50,15 @@ const initDb = async () => {
        rating INTEGER,
        created_at BIGINT,
        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-        is_deleted BOOLEAN DEFAULT FALSE
+        is_deleted BOOLEAN DEFAULT FALSE,
+        recipe_data JSONB DEFAULT '{}'
      )
    `);
+
+    // Ensure the recipe_data column exists on older db setups
+    await pool.query(`
+      ALTER TABLE brew_logs ADD COLUMN IF NOT EXISTS recipe_data JSONB DEFAULT '{}'
+    `);
    console.log('Database initialized');
  } catch (err) {
    console.error('Error initializing database', err);
--- a/server/index.js
+++ b/server/index.js
@@ -191,9 +191,16 @@ app.post('/api/sync', authenticateToken, async (req, res) => {

    // 2. Process incoming brew logs
    for (const log of brewLogs) {
+      const { id, beanId, method, notes, rating, createdAt, updatedAt, isDeleted, ...recipeFields } = log;
+      const grind = log.grindSize || log.grind || '';
+      const waterTemp = log.waterTemp || '';
+      const ratio = log.brewRatio || log.ratio || '';
+      const yieldVal = log.yield || '';
+      const time = log.brewTime || log.time || '';
+
      await client.query(`
-        INSERT INTO brew_logs (id, user_id, bean_id, method, grind, water_temp, ratio, yield, time, notes, rating, created_at, updated_at, is_deleted)
-        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)
+        INSERT INTO brew_logs (id, user_id, bean_id, method, grind, water_temp, ratio, yield, time, notes, rating, created_at, updated_at, is_deleted, recipe_data)
+        VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)
        ON CONFLICT (id) DO UPDATE SET
          bean_id = EXCLUDED.bean_id,
          method = EXCLUDED.method,
@@ -206,24 +213,26 @@ app.post('/api/sync', authenticateToken, async (req, res) => {
          rating = EXCLUDED.rating,
          created_at = EXCLUDED.created_at,
          updated_at = EXCLUDED.updated_at,
-          is_deleted = EXCLUDED.is_deleted
+          is_deleted = EXCLUDED.is_deleted,
+          recipe_data = EXCLUDED.recipe_data
        WHERE (EXCLUDED.updated_at > brew_logs.updated_at OR brew_logs.user_id IS NULL)
          AND (brew_logs.user_id = EXCLUDED.user_id OR brew_logs.user_id IS NULL)
      `, [
-        log.id,
+        id,
        userId,
-        log.beanId,
-        log.method || '',
-        log.grind || '',
-        log.waterTemp || '',
-        log.ratio || '',
-        log.yield || '',
-        log.time || '',
-        log.notes || '',
-        log.rating || 0,
-        log.createdAt ? BigInt(log.createdAt) : BigInt(Date.now()),
-        log.updatedAt ? new Date(log.updatedAt) : new Date(),
-        log.isDeleted || false
+        beanId,
+        method || '',
+        grind,
+        waterTemp,
+        ratio,
+        yieldVal,
+        time,
+        notes || '',
+        rating || 0,
+        createdAt ? BigInt(createdAt) : BigInt(Date.now()),
+        updatedAt ? new Date(updatedAt) : new Date(),
+        isDeleted || false,
+        JSON.stringify(recipeFields)
      ]);
    }

@@ -256,21 +265,34 @@ app.post('/api/sync', authenticateToken, async (req, res) => {
      isDeleted: b.is_deleted
    }));

-    const mappedLogs = serverLogs.rows.map(l => ({
-      id: l.id,
-      beanId: l.bean_id,
-      method: l.method,
-      grind: l.grind,
-      waterTemp: l.water_temp,
-      ratio: l.ratio,
-      yield: l.yield,
-      time: l.time,
-      notes: l.notes,
-      rating: l.rating,
-      createdAt: Number(l.created_at),
-      updatedAt: l.updated_at.toISOString(),
-      isDeleted: l.is_deleted
-    }));
+    const mappedLogs = serverLogs.rows.map(l => {
+      const baseLog = {
+        id: l.id,
+        beanId: l.bean_id,
+        method: l.method,
+        notes: l.notes,
+        rating: l.rating,
+        createdAt: Number(l.created_at),
+        updatedAt: l.updated_at.toISOString(),
+        isDeleted: l.is_deleted
+      };
+      
+      const recipeData = l.recipe_data || {};
+      
+      // Fallback for old database rows that don't have recipe_data populated
+      const fallback = {};
+      if (!recipeData.grindSize && l.grind) fallback.grindSize = l.grind;
+      if (!recipeData.waterTemp && l.water_temp) fallback.waterTemp = l.water_temp;
+      if (!recipeData.brewRatio && l.ratio) fallback.brewRatio = l.ratio;
+      if (!recipeData.yield && l.yield) fallback.yield = l.yield;
+      if (!recipeData.brewTime && l.time) fallback.brewTime = l.time;
+
+      return {
+        ...baseLog,
+        ...fallback,
+        ...recipeData
+      };
+    });

    res.json({
      serverTime,
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -20,7 +20,7 @@ import SyncIndicator from "./components/SyncIndicator";


 // Import constants
-import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS } from "./constants";
+import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS, getRoastAgingInfo } from "./constants";

 // ─── Storage helpers ───
 const STORAGE_KEY = "coffee-logbook-data";
@@ -62,6 +62,121 @@ const LoadingScreen = () => (
  </div>
 );

+function MethodIcon({ method, className }) {
+  const props = {
+    className: className || "w-8 h-8",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+
+  switch (method) {
+    case "pourover":
+      return (
+        <svg {...props}>
+          <path d="M5 5h14l-4 7H9l-4-7z" />
+          <path d="M7 12h10" />
+          <path d="M9.5 12L7.5 19.5h9l-2-7.5" />
+          <path d="M10 2.5a.5.5 0 01.5-.5h3a.5.5 0 01.5.5" />
+        </svg>
+      );
+    case "espresso":
+      return (
+        <svg {...props}>
+          <path d="M5 8h10v5c0 2.5-2 4.5-5 4.5S5 15.5 5 13V8z" />
+          <path d="M15 10.5h6v1.5h-6z" />
+          <path d="M3 18.5c4.5 2 13.5 2 18 0" />
+          <path d="M10 17.5v2" />
+        </svg>
+      );
+    case "coldbrew":
+      return (
+        <svg {...props}>
+          <path d="M7 4h10l-1.5 16.5c0 1-1.5 1.5-3.5 1.5s-3.5-.5-3.5-1.5L7 4z" />
+          <path d="M9.5 12h3v3h-3z" />
+          <path d="M11.5 8h3v3h-3z" />
+          <path d="M12 2l-2 4" />
+        </svg>
+      );
+    case "aeropress":
+      return (
+        <svg {...props}>
+          <path d="M8 8h8v12H8z" />
+          <path d="M6 20h12" />
+          <path d="M10 8V3h4v5" />
+          <path d="M9 3h6" />
+          <path d="M9 7.5h6" />
+        </svg>
+      );
+    case "frenchpress":
+      return (
+        <svg {...props}>
+          <path d="M8 6h8v14c0 1-1 2-3 2h-2c-2 0-3-1-3-2V6z" />
+          <path d="M7 6h10" />
+          <circle cx="12" cy="2.5" r="1.5" />
+          <path d="M12 4v8" />
+          <path d="M9 12h6" />
+          <path d="M8 8H5v10h3" />
+        </svg>
+      );
+    case "chemex":
+      return (
+        <svg {...props}>
+          <path d="M8 4h8c-1 3.5-1.5 5-1.5 8s.5 4.5 1.5 8H8c1-3.5 1.5-5 1.5-8s-.5-4.5-1.5-8z" />
+          <path d="M9.5 10.5h5" />
+          <path d="M9.5 12.5h5" />
+          <circle cx="12" cy="11.5" r="1.2" fill="currentColor" />
+        </svg>
+      );
+    case "mokapot":
+      return (
+        <svg {...props}>
+          <path d="M9 5h6l-1 7H10z" />
+          <path d="M10 12.5h4l1.2 7H8.8z" />
+          <path d="M9 5l3-2 3 2" />
+          <circle cx="12" cy="3" r="1" />
+          <path d="M9 6.2l-2 1.5 2 1" />
+          <path d="M14 7.5h3.5v7H14" />
+        </svg>
+      );
+    case "v60":
+      return (
+        <svg {...props}>
+          <path d="M6 5h12l-4.5 7h-3z" />
+          <path d="M8 12h8" />
+          <path d="M9.5 12L8.5 19h7l-1-7" />
+          <path d="M16.5 5a2 2 0 010 4" />
+        </svg>
+      );
+    case "syphon":
+      return (
+        <svg {...props}>
+          <path d="M9.5 4h5v5h-5z" />
+          <path d="M12 9v4" />
+          <circle cx="12" cy="16" r="3.2" />
+          <path d="M7 21h10" />
+          <path d="M8.5 16H6v5h3v-2" />
+        </svg>
+      );
+    case "dripbrew":
+      return (
+        <svg {...props}>
+          <path d="M6 21h12" />
+          <path d="M7 21V5c0-1 6-1 6 0v2" />
+          <path d="M8.5 5h8v3h-8z" />
+          <path d="M9.5 12h5v7h-5z" />
+          <path d="M14.5 14h2v3h-2" />
+          <path d="M11.5 8v2.5" />
+        </svg>
+      );
+    default:
+      return <span>☕</span>;
+  }
+}
+
 // ─── Main App ───
 export default function CoffeeLogbook() {
  const { token, user, loading, logout } = useContext(AuthContext);
@@ -79,8 +194,13 @@ export default function CoffeeLogbook() {
  const [syncing, setSyncing] = useState(false);
  const [showSyncedStatus, setShowSyncedStatus] = useState(false);

+  const [prepActivePage, setPrepActivePage] = useState(0);
+
  useEffect(() => { loadData().then(setData); }, []);
-  useEffect(() => { setBrewSearchQuery(""); }, [view]);
+  useEffect(() => {
+    setBrewSearchQuery("");
+    setPrepActivePage(0);
+  }, [view]);

  const dataRef = useRef(data);
  dataRef.current = data;
@@ -212,7 +332,8 @@ export default function CoffeeLogbook() {
      return queryWords.every(word => searchableText.includes(word));
    })
    .sort((a, b) => b.createdAt - a.createdAt);
-  const methodCounts = { pourover: 0, espresso: 0, coldbrew: 0 };
+  const methodCounts = {};
+  METHODS.forEach(m => methodCounts[m] = 0);
  brewLogs.forEach(l => { if (methodCounts[l.method] !== undefined) methodCounts[l.method]++; });

  const filterPillCls = (active) => `px-3.5 py-1.5 rounded-full border text-xs font-medium whitespace-nowrap cursor-pointer transition-all ${active ? "bg-[#2C1810] text-[#FAF6F1] border-[#2C1810] dark:bg-[#FAF6F1] dark:text-[#2C1810] dark:border-[#FAF6F1]" : "bg-white border-[#E8DFD3] text-[#6B5744] dark:bg-[#22120B] dark:border-[#3B2217] dark:text-[#C8B9A6]"}`;
@@ -240,6 +361,53 @@ export default function CoffeeLogbook() {
        {/* ── Dashboard ── */}
        {view === "dashboard" && (
          <div className="animate-page-enter">
+            {/* Preparation Methods */}
+            <div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">Preparation Methods</div>
+            <div 
+              className="flex overflow-x-auto pb-4 scrollbar-none snap-x snap-mandatory -mx-5"
+              onScroll={(e) => {
+                const scrollLeft = e.target.scrollLeft;
+                const width = e.target.clientWidth;
+                const page = Math.round(scrollLeft / width);
+                setPrepActivePage(page);
+              }}
+            >
+              {(() => {
+                const chunks = [];
+                for (let i = 0; i < METHODS.length; i += 8) {
+                  chunks.push(METHODS.slice(i, i + 8));
+                }
+                return chunks.map((pageMethods, pageIdx) => (
+                  <div key={pageIdx} className="w-full flex-shrink-0 snap-start grid grid-cols-4 gap-x-4 gap-y-5 px-5">
+                    {pageMethods.map(m => (
+                      <div key={m}
+                        className="flex flex-col items-center cursor-pointer group"
+                        onClick={() => { setBrewFilter(m); setView("brews"); }}>
+                        <div className="w-full aspect-square flex items-center justify-center rounded-2xl bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] transition-all group-hover:scale-[1.03] group-active:scale-[0.98] shadow-[0_1px_3px_rgba(44,24,16,0.04)] dark:shadow-none"
+                          style={{ borderTop: `3px solid ${METHOD_COLORS[m]}` }}>
+                          <MethodIcon method={m} className="w-9 h-9 text-[#6B5744] dark:text-[#C8B9A6] group-hover:text-[#2C1810] dark:group-hover:text-[#FAF6F1] transition-colors" />
+                        </div>
+                        <div className="text-[10px] text-[#9C8B7A] dark:text-[#C8B9A6] uppercase tracking-wider mt-2 text-center font-medium group-hover:text-[#2C1810] dark:group-hover:text-[#FAF6F1] transition-colors">
+                          {METHOD_LABELS[m]}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ));
+              })()}
+            </div>
+            {(() => {
+              const pagesCount = Math.ceil(METHODS.length / 8);
+              return pagesCount > 1 ? (
+                <div className="flex justify-center gap-1.5 mt-1 mb-6">
+                  {Array.from({ length: pagesCount }).map((_, idx) => (
+                    <div key={idx} className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${prepActivePage === idx ? "bg-[#2C1810] dark:bg-[#FAF6F1] w-3" : "bg-[#E8DFD3] dark:bg-[#3B2217]"}`} />
+                  ))}
+                </div>
+              ) : <div className="mb-6" />;
+            })()}
+
+            {/* Statistics */}
            <div className="flex gap-2 mb-5">
              {[{ num: beans.length, label: "Beans" }, { num: brewLogs.length, label: "Brews" }, { num: new Set(brewLogs.map(l => l.beanId)).size, label: "Tried" }].map(s => (
                <div key={s.label} className="flex-1 bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] rounded-2xl p-3.5 text-center transition-colors duration-200">
@@ -248,16 +416,8 @@ export default function CoffeeLogbook() {
                </div>
              ))}
            </div>
-            <div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">By Method</div>
-            <div className="flex gap-2 mb-6">
-              {METHODS.map(m => (
-                <div key={m} className="flex-1 bg-white dark:bg-[#22120B] border border-[#E8DFD3] dark:border-[#3B2217] rounded-2xl p-3 text-center transition-colors duration-200" style={{ borderTop: `3px solid ${METHOD_COLORS[m]}` }}>
-                  <div className="text-xl mb-1">{METHOD_ICONS[m]}</div>
-                  <div className="font-serif text-xl font-bold text-[#2C1810] dark:text-[#FAF6F1]">{methodCounts[m]}</div>
-                  <div className="text-[10px] text-[#9C8B7A] dark:text-[#C8B9A6] uppercase tracking-widest mt-0.5">{METHOD_LABELS[m]}</div>
-                </div>
-              ))}
-            </div>
+
+            {/* Recent Brews */}
            <div className="text-[13px] font-semibold text-[#6B5744] dark:text-[#C8B9A6] uppercase tracking-widest mb-3">Recent Brews</div>
            {brewLogs.length === 0 ? (
              <div className="text-center py-12 text-[#9C8B7A] dark:text-[#C8B9A6]">
@@ -304,6 +464,14 @@ export default function CoffeeLogbook() {
                  <div className="flex gap-2 mt-2.5 flex-wrap">
                    {bean.roastType && <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${roastTagCls}`}>{bean.roastType}</span>}
                    {bean.roastDate && <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium">Roasted {bean.roastDate}</span>}
+                    {(() => {
+                      const ageInfo = getRoastAgingInfo(bean.roastDate);
+                      return ageInfo ? (
+                        <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${ageInfo.style}`}>
+                          {ageInfo.label}
+                        </span>
+                      ) : null;
+                    })()}
                  </div>
                </div>
              );
--- a/src/components/BeanDetail.jsx
+++ b/src/components/BeanDetail.jsx
@@ -1,4 +1,5 @@
 import BrewCard from "./BrewCard";
+import { getRoastAgingInfo } from "../constants";

 export default function BeanDetail({ bean, logs, onBack, onEdit, onDelete }) {
  const beanLogs = logs.filter(l => l.beanId === bean.id).sort((a, b) => b.createdAt - a.createdAt);
@@ -17,6 +18,14 @@ export default function BeanDetail({ bean, logs, onBack, onEdit, onDelete }) {
      <div className="flex gap-2 mt-2.5 flex-wrap">
        {bean.roastType && <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${roastTagCls}`}>{bean.roastType}</span>}
        {bean.roastDate && <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium">Roasted {bean.roastDate}</span>}
+        {(() => {
+          const ageInfo = getRoastAgingInfo(bean.roastDate);
+          return ageInfo ? (
+            <span className={`text-[11px] px-2.5 py-1 rounded-full font-medium ${ageInfo.style}`}>
+              {ageInfo.label}
+            </span>
+          ) : null;
+        })()}
        <span className="text-[11px] px-2.5 py-1 rounded-full bg-[#F3EDE4] dark:bg-[#2C1810] text-[#6B5744] dark:text-[#C8B9A6] font-medium">{beanLogs.length} brew{beanLogs.length !== 1 ? "s" : ""}</span>
      </div>
      <div className="flex gap-2 mt-4">
--- a/src/components/BrewCard.jsx
+++ b/src/components/BrewCard.jsx
@@ -5,7 +5,7 @@ export default function BrewCard({ log, beanName }) {
  const allFields = Object.entries(log)
    .filter(([k]) => !["id", "beanId", "method", "createdAt", "recipeDetails", "tasteNotes", "updatedAt", "isDeleted"].includes(k))
    .filter(([, v]) => v !== "" && v != null);
-  const fieldLabels = { grindSize: "Grind", waterTemp: "Temp", beanWeight: "Weight", brewRatio: "Ratio", brewTime: "Time", numPours: "Pours", dose: "Dose", yield: "Yield", waterVolume: "Water", steepTime: "Steep" };
+  const fieldLabels = { grindSize: "Grind", waterTemp: "Temp", beanWeight: "Weight", brewRatio: "Ratio", brewTime: "Time", numPours: "Pours", dose: "Dose", yield: "Yield", waterVolume: "Water", steepTime: "Steep", inverted: "Inverted", filterType: "Filter" };
  return (
    <div className="relative mb-3">
      <div className="brew-method-bar" style={{ background: color }} />
--- a/src/components/BrewForm.jsx
+++ b/src/components/BrewForm.jsx
@@ -2,10 +2,68 @@ import { useState } from "react";
 import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS, inputCls, labelCls } from "../constants";
 import Modal from "./Modal";

+const parseRatio = (ratioStr) => {
+  if (!ratioStr) return null;
+  // Matches "1:15", "1/15", "15"
+  const match = ratioStr.match(/(?:1\s*[:/]\s*)?(\d+(?:\.\d+)?)/);
+  if (match) {
+    const val = parseFloat(match[1]);
+    return val > 0 ? val : null;
+  }
+  return null;
+};
+
 export default function BrewForm({ beans, onSave, onClose }) {
  const [method, setMethod] = useState("pourover");
  const [form, setForm] = useState({ beanId: beans[0]?.id || "" });
-  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));
+
+  const handleFieldChange = (key, value) => {
+    setForm(prev => {
+      const next = { ...prev, [key]: value };
+
+      const getNum = (str) => {
+        if (!str) return null;
+        const val = parseFloat(str);
+        return isNaN(val) ? null : val;
+      };
+
+      const ratioKey = next.brewRatio !== undefined ? "brewRatio" : null;
+      const ratioVal = ratioKey ? parseRatio(next[ratioKey]) : null;
+
+      if (ratioVal) {
+        if (key === "beanWeight" || key === "dose") {
+          const coffeeVal = getNum(value);
+          if (coffeeVal) {
+            const calculatedWater = Math.round(coffeeVal * ratioVal);
+            if (next.yield !== undefined) next.yield = `${calculatedWater}g`;
+            if (next.waterVolume !== undefined) next.waterVolume = `${calculatedWater}ml`;
+          }
+        } else if (key === "yield" || key === "waterVolume") {
+          const waterVal = getNum(value);
+          if (waterVal) {
+            const calculatedCoffee = Math.round((waterVal / ratioVal) * 10) / 10;
+            if (next.beanWeight !== undefined) next.beanWeight = `${calculatedCoffee}g`;
+            if (next.dose !== undefined) next.dose = `${calculatedCoffee}g`;
+          }
+        } else if (key === ratioKey) {
+          const coffeeStr = next.beanWeight || next.dose;
+          const coffeeVal = getNum(coffeeStr);
+          if (coffeeVal) {
+            const calculatedWater = Math.round(coffeeVal * ratioVal);
+            if (next.yield !== undefined) next.yield = `${calculatedWater}g`;
+            if (next.waterVolume !== undefined) next.waterVolume = `${calculatedWater}ml`;
+          }
+        }
+      }
+
+      return next;
+    });
+  };
+
+  const handleMethodChange = (m) => {
+    setMethod(m);
+    setForm({ beanId: form.beanId }); // Preserve selected bean but reset inputs
+  };

  if (beans.length === 0) {
    return (
@@ -29,23 +87,82 @@ export default function BrewForm({ beans, onSave, onClose }) {
    pourover: [
      { key: "grindSize", label: "Grind Size", placeholder: "e.g. 18 clicks", hint: "Relative to your grinder" },
      { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 93°C" },
-      { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 15g" },
+      { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" },
      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 240ml", hint: "Calculated from ratio" },
      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 3:30" },
      { key: "numPours", label: "# of Pours", placeholder: "e.g. 4", type: "number" },
    ],
    espresso: [
      { key: "grindSize", label: "Grind Size", placeholder: "e.g. 8" },
-      { key: "dose", label: "Dose", placeholder: "e.g. 18g" },
-      { key: "yield", label: "Yield", placeholder: "e.g. 36g" },
+      { key: "dose", label: "Coffee Dose", placeholder: "e.g. 18g" },
+      { key: "brewRatio", label: "Target Ratio", placeholder: "e.g. 1:2" },
+      { key: "yield", label: "Yield (Output)", placeholder: "e.g. 36g", hint: "Calculated from ratio" },
      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 28s" },
    ],
    coldbrew: [
      { key: "grindSize", label: "Grind Size", placeholder: "e.g. coarse" },
-      { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 100g" },
-      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 700ml" },
+      { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 100g" },
+      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:10" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 1000ml", hint: "Calculated from ratio" },
      { key: "steepTime", label: "Steep Time", placeholder: "e.g. 18 hours" },
    ],
+    aeropress: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. 12 clicks" },
+      { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 85°C" },
+      { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" },
+      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 225ml", hint: "Calculated from ratio" },
+      { key: "brewTime", label: "Steep Time", placeholder: "e.g. 2:00" },
+      { key: "inverted", label: "Inverted?", placeholder: "e.g. Yes/No" },
+    ],
+    frenchpress: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. coarse" },
+      { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 95°C" },
+      { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 30g" },
+      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 450ml", hint: "Calculated from ratio" },
+      { key: "brewTime", label: "Steep Time", placeholder: "e.g. 4:00" },
+    ],
+    chemex: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. medium-coarse" },
+      { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 93°C" },
+      { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 30g" },
+      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 450ml", hint: "Calculated from ratio" },
+      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 4:00" },
+      { key: "filterType", label: "Filter Type", placeholder: "e.g. Chemex Circle" },
+    ],
+    mokapot: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. fine-medium" },
+      { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 150ml" },
+      { key: "brewTime", label: "Extraction Time", placeholder: "e.g. 1:30" },
+    ],
+    v60: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. medium-fine" },
+      { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 92°C" },
+      { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" },
+      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 240ml", hint: "Calculated from ratio" },
+      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 3:00" },
+      { key: "numPours", label: "# of Pours", placeholder: "e.g. 3", type: "number" },
+    ],
+    syphon: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. medium" },
+      { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 94°C" },
+      { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 20g" },
+      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 300ml", hint: "Calculated from ratio" },
+      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 2:10" },
+    ],
+    dripbrew: [
+      { key: "grindSize", label: "Grind Size", placeholder: "e.g. medium" },
+      { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 60g" },
+      { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" },
+      { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 960ml", hint: "Calculated from ratio" },
+      { key: "brewTime", label: "Brew Time", placeholder: "e.g. 6:00" },
+    ],
  };

  return (
@@ -53,18 +170,18 @@ export default function BrewForm({ beans, onSave, onClose }) {
      {(close) => (
        <>
          <div className="font-serif text-xl font-semibold text-[#2C1810] dark:text-[#FAF6F1] mb-5">Log a Brew</div>
-          <div className="flex gap-1.5 mb-5">
+          <div className="flex gap-1.5 mb-5 overflow-x-auto pb-1">
            {METHODS.map(m => (
              <button key={m}
-                className={`flex-1 py-3 px-2 border-2 bg-white dark:bg-[#22120B] rounded-xl cursor-pointer text-center text-xs font-semibold transition-all ${method === m ? "border-current" : "border-[#E8DFD3] dark:border-[#3B2217] text-[#9C8B7A] dark:text-[#C8B9A6]"}`}
+                className={`flex-1 min-w-[72px] py-3 px-2 border-2 bg-white dark:bg-[#22120B] rounded-xl cursor-pointer text-center text-xs font-semibold transition-all ${method === m ? "border-current font-bold scale-[1.02]" : "border-[#E8DFD3] dark:border-[#3B2217] text-[#9C8B7A] dark:text-[#C8B9A6]"}`}
                style={{ color: method === m ? METHOD_COLORS[m] : undefined }}
-                onClick={() => setMethod(m)}>
+                onClick={() => handleMethodChange(m)}>
                <div className="text-xl mb-1">{METHOD_ICONS[m]}</div>{METHOD_LABELS[m]}
              </button>
            ))}
          </div>
          <div className="mb-4"><label className={labelCls}>Bean *</label>
-            <select className={inputCls} value={form.beanId} onChange={e => set("beanId", e.target.value)}>
+            <select className={inputCls} value={form.beanId} onChange={e => handleFieldChange("beanId", e.target.value)}>
              {beans.map(b => <option key={b.id} value={b.id} className="dark:bg-[#150B07]">{b.name}{b.roastery ? ` — ${b.roastery}` : ""}</option>)}
            </select></div>
          <div className="flex flex-wrap gap-2.5 mb-4">
@@ -72,7 +189,7 @@ export default function BrewForm({ beans, onSave, onClose }) {
              <div key={f.key} className="flex-1 min-w-[45%]">
                <label className={labelCls}>{f.label}</label>
                <input className={inputCls} type={f.type || "text"} placeholder={f.placeholder}
-                  value={form[f.key] || ""} onChange={e => set(f.key, e.target.value)} />
+                  value={form[f.key] || ""} onChange={e => handleFieldChange(f.key, e.target.value)} />
                {f.hint && <div className="text-[11px] text-[#9C8B7A] dark:text-[#C8B9A6] mt-1">{f.hint}</div>}
              </div>
            ))}
@@ -80,10 +197,10 @@ export default function BrewForm({ beans, onSave, onClose }) {
          <div className="mb-4"><label className={labelCls}>{method === "pourover" ? "Recipe Details" : "Notes"}</label>
            <textarea className={`${inputCls} resize-y min-h-[80px]`}
              placeholder="Describe your recipe, technique, or anything notable…"
-              value={form.recipeDetails || ""} onChange={e => set("recipeDetails", e.target.value)} /></div>
+              value={form.recipeDetails || ""} onChange={e => handleFieldChange("recipeDetails", e.target.value)} /></div>
          <div className="mb-4"><label className={labelCls}>Taste Notes</label>
            <input className={inputCls} placeholder="e.g. citrus, chocolate, floral"
-              value={form.tasteNotes || ""} onChange={e => set("tasteNotes", e.target.value)} /></div>
+              value={form.tasteNotes || ""} onChange={e => handleFieldChange("tasteNotes", e.target.value)} /></div>
          <button className="w-full py-3.5 border-none rounded-xl bg-[#2C1810] dark:bg-[#FAF6F1] text-[#FAF6F1] dark:text-[#2C1810] text-sm font-semibold cursor-pointer hover:opacity-90 mt-2"
            onClick={() => close(() => onSave({ ...form, method }))}>Save Brew Log</button>
        </>
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,8 +1,66 @@
 export const ROAST_TYPES = ["Light", "Light-Medium", "Medium", "Medium-Dark", "Dark"];
-export const METHODS = ["pourover", "espresso", "coldbrew"];
-export const METHOD_LABELS = { pourover: "Pour Over", espresso: "Espresso", coldbrew: "Cold Brew" };
-export const METHOD_ICONS = { pourover: "☕", espresso: "⚡", coldbrew: "❄️" };
-export const METHOD_COLORS = { pourover: "#8B6914", espresso: "#5C3317", coldbrew: "#2F4F6F" };
+export const METHODS = ["pourover", "espresso", "coldbrew", "aeropress", "frenchpress", "chemex", "mokapot", "v60", "syphon", "dripbrew"];
+export const METHOD_LABELS = {
+  pourover: "Pour Over",
+  espresso: "Espresso",
+  coldbrew: "Cold Brew",
+  aeropress: "Aeropress",
+  frenchpress: "French Press",
+  chemex: "Chemex",
+  mokapot: "Moka Pot",
+  v60: "V60",
+  syphon: "Syphon",
+  dripbrew: "Drip Brew"
+};
+export const METHOD_ICONS = {
+  pourover: "☕",
+  espresso: "⚡",
+  coldbrew: "❄️",
+  aeropress: "🚀",
+  frenchpress: "🥛",
+  chemex: "🏺",
+  mokapot: "🚂",
+  v60: "☕",
+  syphon: "🧪",
+  dripbrew: "💧"
+};
+export const METHOD_COLORS = {
+  pourover: "#8B6914",
+  espresso: "#5C3317",
+  coldbrew: "#2F4F6F",
+  aeropress: "#A0522D",
+  frenchpress: "#4E3629",
+  chemex: "#8E6B58",
+  mokapot: "#6E7B8B",
+  v60: "#A67B5B",
+  syphon: "#4E6E5D",
+  dripbrew: "#A89B8C"
+};

 export const inputCls = "w-full px-3.5 py-3 border border-[#E8DFD3] dark:border-[#3B2217] rounded-lg bg-white dark:bg-[#150B07] text-sm text-[#2C1810] dark:text-[#FAF6F1] transition-colors outline-none focus:border-[#8B6914] dark:focus:border-[#D4A325]";
 export const labelCls = "block text-[10px] font-semibold uppercase tracking-wider text-[#6B5744] dark:text-[#C8B9A6] mb-1.5";
+
+export function getRoastAgingInfo(roastDateStr) {
+  if (!roastDateStr) return null;
+  const roastDate = new Date(roastDateStr);
+  if (isNaN(roastDate.getTime())) return null;
+
+  const today = new Date();
+  roastDate.setHours(0, 0, 0, 0);
+  today.setHours(0, 0, 0, 0);
+
+  const diffTime = today.getTime() - roastDate.getTime();
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays < 0) {
+    return { status: "Upcoming", days: diffDays, label: "Not roasted yet", style: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300" };
+  } else if (diffDays <= 5) {
+    return { status: "Off-gassing", days: diffDays, label: `${diffDays}d old · Off-gassing`, style: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300" };
+  } else if (diffDays <= 21) {
+    return { status: "Peak Flavor", days: diffDays, label: `${diffDays}d old · Peak Flavor`, style: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300" };
+  } else if (diffDays <= 45) {
+    return { status: "Good", days: diffDays, label: `${diffDays}d old · Good`, style: "bg-stone-200 text-stone-800 dark:bg-stone-800/40 dark:text-stone-300" };
+  } else {
+    return { status: "Aging", days: diffDays, label: `${diffDays}d old · Aging`, style: "bg-rose-100 text-rose-800 dark:bg-rose-950/30 dark:text-rose-300" };
+  }
+}
--- a/src/index.css
+++ b/src/index.css
@@ -178,4 +178,13 @@
  @keyframes sync-check-draw {
    to { stroke-dashoffset: 0; }
  }
+
+  /* Hide scrollbar utility */
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+  .scrollbar-none {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
 }