feat: add page transitions

src/App.jsx

@@ -206,9 +206,10 @@ export default function CoffeeLogbook() {
       {/* Content */}
       <div className="px-5 pt-4 pb-36">
 
+        {/* ── Dashboard ── */}
         {/* ── Dashboard ── */}
         {view === "dashboard" && (
-          <>
+          <div className="animate-page-enter">
             <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 border border-[#E8DFD3] rounded-2xl p-3.5 text-center">
@@ -237,12 +238,12 @@ export default function CoffeeLogbook() {
             ) : brewLogs.sort((a, b) => b.createdAt - a.createdAt).slice(0, 5).map(log => (
               <BrewCard key={log.id} log={log} beanName={getBeanName(log.beanId)} />
             ))}
-          </>
+          </div>
         )}
 
         {/* ── Bean Library ── */}
         {view === "beans" && !selectedBean && (
-          <>
+          <div className="animate-page-enter">
             <div className="text-[13px] font-semibold text-[#6B5744] uppercase tracking-widest mb-3">Your Beans ({beans.length})</div>
             {beans.length === 0 ? (
               <div className="text-center py-12 text-[#9C8B7A]">
@@ -273,21 +274,23 @@ export default function CoffeeLogbook() {
                 </div>
               );
             })}
-          </>
+          </div>
         )}
 
         {/* ── Bean Detail ── */}
         {view === "beans" && selectedBean && (
-          <BeanDetail bean={selectedBean} logs={brewLogs}
-            onBack={() => setSelectedBean(null)}
-            onEdit={() => { setEditingBean(selectedBean); setModal("editBean"); }}
-            onDelete={() => { if (confirm("Delete this bean and all its brew logs?")) deleteBean(selectedBean.id); }}
-          />
+          <div className="animate-page-enter">
+            <BeanDetail bean={selectedBean} logs={brewLogs}
+              onBack={() => setSelectedBean(null)}
+              onEdit={() => { setEditingBean(selectedBean); setModal("editBean"); }}
+              onDelete={() => { if (confirm("Delete this bean and all its brew logs?")) deleteBean(selectedBean.id); }}
+            />
+          </div>
         )}
 
         {/* ── Brew Logs ── */}
         {view === "brews" && (
-          <>
+          <div className="animate-page-enter">
             <div className="flex gap-1.5 mb-4 overflow-x-auto pb-1">
               <button className={filterPillCls(brewFilter === "all")} onClick={() => setBrewFilter("all")}>All</button>
               {METHODS.map(m => (
@@ -305,12 +308,14 @@ export default function CoffeeLogbook() {
             ) : filteredLogs.map(log => (
               <BrewCard key={log.id} log={log} beanName={getBeanName(log.beanId)} />
             ))}
-          </>
+          </div>
         )}
 
         {/* ── Profile ── */}
         {view === "profile" && (
-          <ProfilePage user={user} isOnline={isOnline} syncing={syncing} showSyncedStatus={showSyncedStatus} />
+          <div className="animate-page-enter">
+            <ProfilePage user={user} isOnline={isOnline} syncing={syncing} showSyncedStatus={showSyncedStatus} />
+          </div>
         )}
       </div>