fix: share function and list navigation improvements\n\nReplace Web Share API with clipboard copy and add separate list tab.

app/(app)/lists/page.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import React from "react"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import { createClient } from "@/lib/supabase/client"
+import { ListIcon, Plus, Loader2, Film, Trash2 } from "lucide-react"
+
+interface ListWithCount {
+  id: string
+  name: string
+  description: string | null
+  created_at: string
+  list_items: { count: number }[]
+}
+
+export default function ListsPage() {
+  const [lists, setLists] = useState<ListWithCount[]>([])
+  const [loading, setLoading] = useState(true)
+  const [showNewList, setShowNewList] = useState(false)
+  const [newListName, setNewListName] = useState("")
+  const [newListDesc, setNewListDesc] = useState("")
+  const [creatingList, setCreatingList] = useState(false)
+
+  useEffect(() => {
+    loadLists()
+  }, [])
+
+  async function loadLists() {
+    const supabase = createClient()
+    const {
+      data: { user },
+    } = await supabase.auth.getUser()
+    if (!user) return
+
+    const { data } = await supabase
+      .from("lists")
+      .select("*, list_items(count)")
+      .eq("user_id", user.id)
+      .order("created_at", { ascending: false })
+
+    setLists(data || [])
+    setLoading(false)
+  }
+
+  async function createList(e: React.FormEvent) {
+    e.preventDefault()
+    if (!newListName.trim()) return
+    setCreatingList(true)
+
+    const supabase = createClient()
+    const {
+      data: { user },
+    } = await supabase.auth.getUser()
+    if (!user) return
+
+    const { data, error } = await supabase
+      .from("lists")
+      .insert({
+        user_id: user.id,
+        name: newListName.trim(),
+        description: newListDesc.trim() || null,
+      })
+      .select("*, list_items(count)")
+      .single()
+
+    if (!error && data) {
+      setLists([data, ...lists])
+      setNewListName("")
+      setNewListDesc("")
+      setShowNewList(false)
+    }
+    setCreatingList(false)
+  }
+
+  async function deleteList(id: string) {
+    const supabase = createClient()
+    await supabase.from("lists").delete().eq("id", id)
+    setLists(lists.filter((l) => l.id !== id))
+  }
+
+  if (loading) {
+    return (
+      <main className="mx-auto max-w-lg">
+        <header className="sticky top-0 z-40 border-b border-border bg-background/95 px-4 py-3 backdrop-blur-md">
+          <h1 className="font-heading text-xl font-bold text-foreground">
+            Meine Listen
+          </h1>
+        </header>
+        <div className="flex items-center justify-center py-20">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <main className="mx-auto max-w-lg">
+      <header className="sticky top-0 z-40 border-b border-border bg-background/95 px-4 py-3 backdrop-blur-md">
+        <div className="flex items-center justify-between">
+          <h1 className="font-heading text-xl font-bold text-foreground">
+            Meine Listen
+          </h1>
+          <span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-medium text-muted-foreground">
+            {lists.length}
+          </span>
+        </div>
+      </header>
+
+      <div className="px-4 pt-4">
+        {/* New list button */}
+        <button
+          onClick={() => setShowNewList(!showNewList)}
+          className="mb-4 flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-card py-3 text-sm font-medium text-muted-foreground transition-colors hover:border-primary hover:text-primary"
+          type="button"
+        >
+          <Plus className="h-4 w-4" />
+          Neue Liste erstellen
+        </button>
+
+        {/* New list form */}
+        {showNewList && (
+          <form onSubmit={createList} className="mb-4 flex flex-col gap-2 rounded-xl border border-border bg-card p-4">
+            <input
+              value={newListName}
+              onChange={(e) => setNewListName(e.target.value)}
+              placeholder="Listenname..."
+              className="h-10 rounded-lg border border-border bg-secondary px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              autoFocus
+            />
+            <input
+              value={newListDesc}
+              onChange={(e) => setNewListDesc(e.target.value)}
+              placeholder="Beschreibung (optional)..."
+              className="h-10 rounded-lg border border-border bg-secondary px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => setShowNewList(false)}
+                className="flex-1 rounded-lg border border-border bg-card py-2.5 text-sm font-medium text-muted-foreground"
+              >
+                Abbrechen
+              </button>
+              <button
+                type="submit"
+                disabled={creatingList || !newListName.trim()}
+                className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-primary py-2.5 text-sm font-semibold text-primary-foreground disabled:opacity-50"
+              >
+                {creatingList ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  "Erstellen"
+                )}
+              </button>
+            </div>
+          </form>
+        )}
+
+        {/* Lists */}
+        {lists.length === 0 && !showNewList ? (
+          <div className="flex flex-col items-center gap-3 rounded-xl border border-border bg-card px-6 py-12 text-center">
+            <ListIcon className="h-10 w-10 text-muted-foreground" />
+            <div>
+              <p className="text-sm font-medium text-foreground">
+                Keine Listen vorhanden
+              </p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Erstelle Listen wie &quot;Beste Weihnachtsfilme&quot; oder &quot;Familienabend-Favoriten&quot;
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-3">
+            {lists.map((list) => (
+              <div
+                key={list.id}
+                className="group flex items-center gap-3 rounded-xl border border-border bg-card p-4 transition-colors hover:bg-secondary"
+              >
+                <Link
+                  href={`/lists/${list.id}`}
+                  className="flex flex-1 items-center justify-between"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                      <Film className="h-5 w-5 text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="text-sm font-semibold text-foreground">
+                        {list.name}
+                      </h3>
+                      {list.description && (
+                        <p className="mt-0.5 text-xs text-muted-foreground">
+                          {list.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-medium text-muted-foreground">
+                    {list.list_items?.[0]?.count || 0} Filme
+                  </span>
+                </Link>
+                <button
+                  onClick={() => deleteList(list.id)}
+                  className="p-1 text-muted-foreground opacity-0 transition-opacity hover:text-destructive group-hover:opacity-100"
+                  type="button"
+                  aria-label="Liste loeschen"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="h-24" />
+    </main>
+  )
+}

components/bottom-nav.tsx

@@ -2,13 +2,14 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { Home, Search, PlusCircle, BookOpen, User } from "lucide-react"
+import { Home, Search, PlusCircle, BookOpen, User, ListIcon } from "lucide-react"
 
 const navItems = [
   { href: "/feed", label: "Feed", icon: Home },
   { href: "/search", label: "Suche", icon: Search },
   { href: "/log", label: "Loggen", icon: PlusCircle },
-  { href: "/diary", label: "Tagebuch", icon: BookOpen },
+  { href: "/diary", label: "Filme", icon: BookOpen },
+  { href: "/lists", label: "Listen", icon: ListIcon },
   { href: "/profile", label: "Profil", icon: User },
 ]
 

components/movie-detail.tsx

@@ -15,7 +15,8 @@ import {
   PenLine,
   Clock,
   Film,
-  Share2,
+  Link2,
+  Check,
 } from "lucide-react"
 
 interface FamilyEntry {
@@ -39,6 +40,7 @@ export function MovieDetail({
 }: MovieDetailProps) {
   const [inWatchlist, setInWatchlist] = useState(initialWatchlist)
   const [saving, setSaving] = useState(false)
+  const [copied, setCopied] = useState(false)
   const router = useRouter()
   const backdrop = backdropUrl(movie.backdrop_path, "w1280")
   const poster = posterUrl(movie.poster_path, "w500")
@@ -70,20 +72,21 @@ export function MovieDetail({
     setSaving(false)
   }
 
-  async function handleShare() {
+  async function handleCopyLink() {
-    const shareData = {
+    try {
-      title: movie.title,
-      text: `Schau dir "${movie.title}" an - ${movie.tagline || movie.overview?.slice(0, 100)}`,
-      url: window.location.href,
-    }
-    if (navigator.share) {
-      try {
-        await navigator.share(shareData)
-      } catch {
-        // User cancelled
-      }
-    } else {
       await navigator.clipboard.writeText(window.location.href)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Fallback for older browsers
+      const textArea = document.createElement("textarea")
+      textArea.value = window.location.href
+      document.body.appendChild(textArea)
+      textArea.select()
+      document.execCommand("copy")
+      document.body.removeChild(textArea)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
     }
   }
 
@@ -115,14 +118,18 @@ export function MovieDetail({
           <ArrowLeft className="h-5 w-5" />
         </button>
 
-        {/* Share button */}
+        {/* Copy link button */}
         <button
-          onClick={handleShare}
+          onClick={handleCopyLink}
-          className="absolute right-4 top-4 flex h-9 w-9 items-center justify-center rounded-full bg-background/80 text-foreground backdrop-blur-sm"
+          className={`absolute right-4 top-4 flex h-9 w-9 items-center justify-center rounded-full backdrop-blur-sm transition-colors ${
+            copied
+              ? "bg-primary/80 text-primary-foreground"
+              : "bg-background/80 text-foreground"
+          }`}
           type="button"
-          aria-label="Teilen"
+          aria-label="Link kopieren"
         >
-          <Share2 className="h-5 w-5" />
+          {copied ? <Check className="h-5 w-5" /> : <Link2 className="h-5 w-5" />}
         </button>
       </div>