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)/recommend/page.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { Suspense } from "react"
+import { Header } from "@/components/layout/header"
+import { Skeleton } from "@/components/ui/skeleton"
+import { FlavorProfileCard } from "@/components/recommend/flavor-profile-card"
+import { SuggestSection } from "@/components/recommend/suggest-section"
+import { SimilarSection } from "@/components/recommend/similar-section"
+import {
+  useFlavorProfile,
+  useGenerateFlavorProfile,
+} from "@/hooks/use-recommend"
+import { useDrinks } from "@/hooks/use-drinks"
+import { Sparkles } from "lucide-react"
+
+export default function RecommendPage() {
+  return (
+    <Suspense fallback={<RecommendLoading />}>
+      <RecommendContent />
+    </Suspense>
+  )
+}
+
+function RecommendLoading() {
+  return (
+    <div>
+      <Header title="Recommend" />
+      <div className="p-4 md:p-8 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-[200px] rounded-lg" />
+        <Skeleton className="h-[200px] rounded-lg" />
+        <Skeleton className="h-[200px] rounded-lg" />
+      </div>
+    </div>
+  )
+}
+
+function RecommendContent() {
+  const {
+    data: profileData,
+    isLoading: profileLoading,
+    error: profileError,
+  } = useFlavorProfile()
+
+  const generateProfile = useGenerateFlavorProfile()
+
+  const { data: drinksData, isLoading: drinksLoading } = useDrinks({
+    limit: 500,
+    sort: "name",
+  })
+
+  const profile = profileData?.profile ?? null
+  const hasProfile = !!profile
+
+  const drinkOptions = (drinksData?.drinks ?? []).map((d) => ({
+    id: d.id,
+    name: d.name,
+    type: d.type,
+  }))
+
+  return (
+    <div>
+      <Header title="Recommend" />
+      <div className="p-4 md:p-8 space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold flex items-center gap-2">
+            <Sparkles className="h-6 w-6 text-primary" />
+            Recommendations
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            AI-powered drink suggestions tailored to your taste.
+          </p>
+        </div>
+
+        <FlavorProfileCard
+          profile={profile}
+          isLoading={profileLoading}
+          isGenerating={generateProfile.isPending}
+          error={profileError}
+          generateError={generateProfile.error}
+          onGenerate={() => generateProfile.mutate()}
+        />
+
+        <SuggestSection hasProfile={hasProfile} />
+
+        <SimilarSection
+          drinks={drinkOptions}
+          drinksLoading={drinksLoading}
+        />
+      </div>
+    </div>
+  )
+}