feat: Improve preparation method display and filtering

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>
               );