feat: eigene Sammlung — „hab ich" mit Quelle

Streaming-Verfügbarkeit beantwortet nur die halbe Frage: manche Filme laufen
nirgends mehr, die hat man gekauft und liegen zu Hause — in Jellyfin, Plex,
Emby, auf dem NAS oder als Scheibe.

Bewusst getrennt vom Feld „wo schaue ich das": das eine sagt, wo ein Titel
gerade läuft, und das ändert sich ständig; das andere sagt, was einem gehört,
und das bleibt. Auf der Detailseite steht die Sammlung deshalb vor der
Verfügbarkeit — was man hat, ist die verlässlichere Antwort.

Durchgezogen bis in Filter, Export, CSV-Import und REST-API.

src/components/library/EntryNotes.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useRef, useState, useTransition } from "react";
+import { useRef, useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
+import { clsx } from "clsx";
 import { setTagsAction, updateEntryAction } from "@/app/actions/library";
 import { useToasts } from "@/components/Toasts";
 
@@ -17,6 +18,8 @@ export function EntryNotes({
   whereToWatch,
   tags,
   suggestion,
+  owned,
+  ownedSource,
 }: {
   entryId: string;
   notes: string | null;
@@ -24,9 +27,12 @@ export function EntryNotes({
   tags: string[];
   /** Vorschlag aus der Streaming-Verfügbarkeit. */
   suggestion: string | null;
+  owned: boolean;
+  ownedSource: string | null;
 }) {
   return (
     <div className="space-y-4">
+      <OwnedEditor entryId={entryId} owned={owned} source={ownedSource} />
       <WhereToWatch entryId={entryId} value={whereToWatch} suggestion={suggestion} />
       <TagEditor entryId={entryId} tags={tags} />
       <Notes entryId={entryId} value={notes} />
@@ -34,6 +40,94 @@ export function EntryNotes({
   );
 }
 
+/**
+ * „Hab ich" — der Titel liegt in der eigenen Sammlung.
+ *
+ * Bewusst getrennt von „wo schaue ich das": Streaming-Verfügbarkeit kommt und
+ * geht, der gekaufte Film auf dem Heimserver bleibt. Genau die Titel, die
+ * nirgends mehr laufen, will man ja wiederfinden.
+ */
+function OwnedEditor({
+  entryId,
+  owned,
+  source,
+}: {
+  entryId: string;
+  owned: boolean;
+  source: string | null;
+}) {
+  const save = useAutosave(entryId);
+  const [isOwned, setIsOwned] = useState(owned);
+  const [text, setText] = useState(source ?? "");
+  const initial = useRef(source ?? "");
+
+  return (
+    <div className="space-y-2 rounded-xl border border-[var(--fl-border)] p-3">
+      <label className="flex cursor-pointer items-start gap-3">
+        <input
+          type="checkbox"
+          checked={isOwned}
+          onChange={(event) => {
+            setIsOwned(event.target.checked);
+            save({ owned: event.target.checked });
+          }}
+          className="sr-only"
+        />
+        <span
+          aria-hidden
+          className={clsx(
+            "mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-md border transition-all duration-200",
+            isOwned ? "border-transparent" : "border-[var(--fl-border-strong)]",
+          )}
+          style={isOwned ? { backgroundImage: "var(--fl-gradient)" } : undefined}
+        >
+          {isOwned && (
+            <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="var(--fl-on-accent)" strokeWidth="3.5">
+              <path d="m5 13 4.5 4.5L19 7" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          )}
+        </span>
+        <span className="min-w-0">
+          <span className="block text-sm font-medium">Hab ich</span>
+          <span className="block text-xs text-[var(--fl-faint)]">
+            Liegt in der eigenen Sammlung — unabhängig davon, ob es gerade irgendwo läuft.
+          </span>
+        </span>
+      </label>
+
+      {isOwned && (
+        <div className="pl-8">
+          <label htmlFor="ownedSource" className="sr-only">
+            Wo liegt der Titel?
+          </label>
+          <input
+            id="ownedSource"
+            value={text}
+            onChange={(event) => setText(event.target.value)}
+            onBlur={() => {
+              if (text === initial.current) return;
+              initial.current = text;
+              save({ ownedSource: text });
+            }}
+            list="fl-owned-quellen"
+            placeholder="Jellyfin, Plex, NAS, Blu-ray …"
+            className="fl-input py-1.5 text-sm"
+          />
+          <datalist id="fl-owned-quellen">
+            <option value="Jellyfin" />
+            <option value="Plex" />
+            <option value="Emby" />
+            <option value="NAS" />
+            <option value="Blu-ray" />
+            <option value="DVD" />
+            <option value="Gekauft (digital)" />
+          </datalist>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function useAutosave(entryId: string) {
   const { report } = useToasts();
   const router = useRouter();