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/LibraryCard.tsx

@@ -19,15 +19,31 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
       <div className="relative">
         <Poster path={item.posterPath} alt={item.title} size="w342" />
 
-        <span
-          className="absolute left-2 top-2 rounded-full px-2 py-0.5 text-[0.65rem] font-semibold backdrop-blur-md"
-          style={{
-            color: STATUS_COLOR[status],
-            backgroundColor: `color-mix(in oklab, var(--fl-bg) 72%, transparent)`,
-            boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${STATUS_COLOR[status]} 45%, transparent)`,
-          }}
-        >
-          {STATUS_LABEL[status]}
+        {/* Status und Sammlung teilen sich die obere Zeile — unten sitzt bei
+            den Postern oft der Titel, dort würden sie ihn verdecken. */}
+        <span className="absolute left-2 top-2 flex flex-wrap gap-1">
+          <span
+            className="rounded-full px-2 py-0.5 text-[0.65rem] font-semibold backdrop-blur-md"
+            style={{
+              color: STATUS_COLOR[status],
+              backgroundColor: `color-mix(in oklab, var(--fl-bg) 72%, transparent)`,
+              boxShadow: `inset 0 0 0 1px color-mix(in oklab, ${STATUS_COLOR[status]} 45%, transparent)`,
+            }}
+          >
+            {STATUS_LABEL[status]}
+          </span>
+
+          {item.owned && (
+            <span
+              className="rounded-full px-2 py-0.5 text-[0.65rem] font-semibold text-[var(--fl-on-accent)]"
+              style={{ backgroundImage: "var(--fl-gradient)" }}
+              title={
+                item.ownedSource ? `In deiner Sammlung: ${item.ownedSource}` : "In deiner Sammlung"
+              }
+            >
+              Hab ich
+            </span>
+          )}
         </span>
 
         {item.rating != null && (
@@ -51,7 +67,11 @@ export function LibraryCard({ item }: { item: LibraryItem }) {
         <p className="text-xs text-[var(--fl-faint)]">
           {item.type === "SERIES" ? "Serie" : "Film"}
           {item.year ? ` · ${item.year}` : ""}
-          {item.whereToWatch ? ` · ${item.whereToWatch}` : ""}
+          {item.owned && item.ownedSource
+            ? ` · ${item.ownedSource}`
+            : item.whereToWatch
+              ? ` · ${item.whereToWatch}`
+              : ""}
         </p>
 
         {showProgress && (