Add My Bar, Bartender, Recommend features + drink images

- Drink Images: upload/display photos of bottles/cans on drink cards and detail pages
- My Bar: inventory tracker for spirits, liqueurs, mixers, bitters, garnishes, tools
- Bartender: AI-powered cocktail recipe generation, "what can I make" suggestions,
  saved recipes. Cross-references bar inventory for ingredient availability.
- Recommend: AI flavor profile analysis, personalized drink recommendations,
  "find similar" drinks based on highly-rated favorites
- Navigation: desktop sidebar with all 8 routes, mobile bottom nav with
  4 primary items + "More" popup menu
- New Prisma models: BarItem, Recipe, FlavorProfile
- Backup/restore updated to include bar items

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(app)/bartender/page.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { Suspense, useState } from "react"
+import { Header } from "@/components/layout/header"
+import { Skeleton } from "@/components/ui/skeleton"
+import { RecreateTab } from "@/components/bartender/recreate-tab"
+import { SuggestTab } from "@/components/bartender/suggest-tab"
+import { SavedRecipesTab } from "@/components/bartender/saved-recipes-tab"
+import { Search, Sparkles, BookOpen } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+export default function BartenderPage() {
+  return (
+    <Suspense fallback={<BartenderLoading />}>
+      <BartenderContent />
+    </Suspense>
+  )
+}
+
+function BartenderLoading() {
+  return (
+    <div>
+      <Header title="Bartender" />
+      <div className="p-4 md:p-8 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-10 w-full max-w-md" />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {Array.from({ length: 4 }, (_, i) => (
+            <Skeleton key={i} className="h-[200px] rounded-lg" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+type Tab = "recreate" | "suggest" | "saved"
+
+const TABS: { id: Tab; label: string; icon: typeof Search }[] = [
+  { id: "recreate", label: "Recreate", icon: Search },
+  { id: "suggest", label: "Suggest", icon: Sparkles },
+  { id: "saved", label: "Saved", icon: BookOpen },
+]
+
+function BartenderContent() {
+  const [activeTab, setActiveTab] = useState<Tab>("recreate")
+
+  return (
+    <div>
+      <Header title="Bartender" />
+      <div className="p-4 md:p-8 space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold">Bartender</h1>
+          <p className="text-muted-foreground">
+            AI-powered cocktail recipes based on your bar inventory.
+          </p>
+        </div>
+
+        {/* Tab switcher */}
+        <div className="flex gap-1 p-1 bg-muted rounded-lg max-w-md">
+          {TABS.map((tab) => {
+            const Icon = tab.icon
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-2 py-2 px-3 rounded-md text-sm font-medium transition-colors",
+                  activeTab === tab.id
+                    ? "bg-background shadow-sm text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                {tab.label}
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Tab content */}
+        {activeTab === "recreate" && <RecreateTab />}
+        {activeTab === "suggest" && <SuggestTab />}
+        {activeTab === "saved" && <SavedRecipesTab />}
+      </div>
+    </div>
+  )
+}