Initial commit: DrinkTracker full-stack app

Next.js 14 drink collection tracker with AI-powered search,
menu scanning, ratings, wishlist, sharing, and CSV backup/restore.

Features:
- Auth (credentials + OAuth ready)
- Drink collection with ratings and reviews
- AI search via Claude/OpenAI with search history
- Menu photo scanning with AI extraction
- Wishlist / Try Later system
- Public sharing via slug URLs
- CSV backup and restore (merge/replace modes)
- Docker Compose for Postgres + MinIO + dev server

Security: docker-compose files use env var interpolation
instead of hardcoded secrets.

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

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

@@ -0,0 +1,146 @@
+"use client"
+
+import { useState } from "react"
+import { Header } from "@/components/layout/header"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  useWishlist,
+  useRemoveFromWishlist,
+  usePromoteWishlistItem,
+} from "@/hooks/use-wishlist"
+import { Bookmark, Trash2, ArrowRight, Wine } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const typeColors: Record<string, string> = {
+  BEER: "bg-amber-100 text-amber-800",
+  WINE: "bg-purple-100 text-purple-800",
+  COCKTAIL: "bg-blue-100 text-blue-800",
+  SPIRIT: "bg-orange-100 text-orange-800",
+  OTHER: "bg-gray-100 text-gray-800",
+}
+
+export default function WishlistPage() {
+  const { data, isLoading, error } = useWishlist()
+  const removeItem = useRemoveFromWishlist()
+  const promoteItem = usePromoteWishlistItem()
+  const [promotingId, setPromotingId] = useState<string | null>(null)
+
+  function handlePromote(id: string) {
+    setPromotingId(id)
+    promoteItem.mutate(id, {
+      onSettled: () => setPromotingId(null),
+    })
+  }
+
+  return (
+    <div>
+      <Header title="Try Later" />
+      <div className="p-4 md:p-8 space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold flex items-center gap-2">
+            <Bookmark className="h-6 w-6" />
+            Try Later
+          </h1>
+          <p className="text-muted-foreground">
+            Drinks you want to try. Add them to your collection when you do.
+          </p>
+        </div>
+
+        {isLoading ? (
+          <div className="space-y-3">
+            {Array.from({ length: 4 }, (_, i) => (
+              <Skeleton key={i} className="h-24 w-full rounded-lg" />
+            ))}
+          </div>
+        ) : error ? (
+          <div className="text-center py-12">
+            <p className="text-destructive">Failed to load wishlist.</p>
+          </div>
+        ) : data?.items.length === 0 ? (
+          <div className="text-center py-16 space-y-4">
+            <Wine className="h-12 w-12 mx-auto text-muted-foreground/50" />
+            <div>
+              <h3 className="text-lg font-semibold">Nothing saved yet</h3>
+              <p className="text-muted-foreground mt-1">
+                When you find a drink you want to try later, bookmark it from a
+                menu scan or AI search.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {data?.items.map((item) => (
+              <Card key={item.id}>
+                <CardContent className="flex items-start justify-between gap-3 p-4">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <h3 className="font-semibold">{item.name}</h3>
+                      <Badge
+                        variant="secondary"
+                        className={cn("text-xs", typeColors[item.type])}
+                      >
+                        {item.type}
+                      </Badge>
+                      {item.subType && (
+                        <Badge variant="outline" className="text-xs">
+                          {item.subType}
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2 mt-1 text-sm text-muted-foreground">
+                      {item.brewery && <span>{item.brewery}</span>}
+                      {item.abv != null && (
+                        <span>
+                          {item.brewery ? "·" : ""} {item.abv}% ABV
+                        </span>
+                      )}
+                    </div>
+                    {item.description && (
+                      <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                        {item.description}
+                      </p>
+                    )}
+                    {item.notes && (
+                      <p className="text-sm text-muted-foreground/80 mt-1 italic">
+                        {item.notes}
+                      </p>
+                    )}
+                    {item.source && (
+                      <Badge variant="outline" className="text-xs mt-2">
+                        from {item.source}
+                      </Badge>
+                    )}
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <Button
+                      size="sm"
+                      variant="default"
+                      onClick={() => handlePromote(item.id)}
+                      disabled={promotingId === item.id}
+                    >
+                      <ArrowRight className="h-3 w-3 mr-1" />
+                      Tried it
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => removeItem.mutate(item.id)}
+                      disabled={removeItem.isPending}
+                    >
+                      <Trash2 className="h-3 w-3 mr-1" />
+                      Remove
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}