From b36b72b8e047cb50cd37c6f394b7f7efbfaa8fa5 Mon Sep 17 00:00:00 2001
From: Lars Behrends <larsbehrends@yahoo.de>
Date: Sat, 11 Apr 2026 00:39:36 +0200
Subject: [PATCH] Update DetailView.tsx

---
 src/components/DetailView.tsx | 164 +++++++++++++++++-----------------
 1 file changed, 83 insertions(+), 81 deletions(-)

diff --git a/src/components/DetailView.tsx b/src/components/DetailView.tsx
index 30636b5..e424e99 100644
--- a/src/components/DetailView.tsx
+++ b/src/components/DetailView.tsx
@@ -45,8 +45,8 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
 
       {/* Content */}
       <div className="max-w-[1400px] mx-auto px-6 -mt-32 relative z-10 pb-24">
-        <div className="flex flex-col md:flex-row gap-8">
-          {/* Left Column: Poster */}
+        <div className="flex flex-col md:flex-row gap-6">
+          {/* Left Column: Poster + Metadata */}
           <div className="w-full md:w-[300px] shrink-0">
             <motion.div 
               layoutId={`media-${media.id}`}
@@ -63,10 +63,85 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
                 referrerPolicy="no-referrer"
               />
             </motion.div>
+            
+            {/* Compact metadata under poster */}
+            <div className="mt-4 space-y-2">
+              {media.studios && media.studios.length > 0 && (
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Studios:</span>
+                  {media.studios.join(', ')}
+                </p>
+              )}
+              {media.developers && media.developers.length > 0 && (
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Developers:</span>
+                  {media.developers.map(dev => (
+                    <Badge key={dev} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-2 py-0.5 font-bold text-[10px]">
+                      {dev}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+              {media.platforms && media.platforms.length > 0 && (
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Platforms:</span>
+                  {media.platforms.map(platform => (
+                    <Badge key={platform} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-2 py-0.5 font-bold text-[10px]">
+                      {platform}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+              {media.categories && media.categories.length > 0 && (
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Categories:</span>
+                  {media.categories.map(category => (
+                    <Badge key={category} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-2 py-0.5 font-bold text-[10px]">
+                      {category}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+              {media.completionStatus && (
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Completion:</span>
+                  {media.completionStatus}
+                </p>
+              )}
+              {media.source && (
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Source:</span>
+                  {media.source}
+                </p>
+              )}
+              {media.playCount !== undefined && media.playCount !== null && (
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Play Count:</span>
+                  {media.playCount}
+                </p>
+              )}
+              {media.playtime !== undefined && media.playtime !== null && media.playtime > 0 && (
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Playtime:</span>
+                  {media.playtime}h
+                </p>
+              )}
+              {media.lastActivity && (
+                <p className="text-xs font-bold text-muted-foreground">
+                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Last Activity:</span>
+                  {media.lastActivity}
+                </p>
+              )}
+              <div className="flex items-center gap-3">
+                <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Links:</span>
+                <Button variant="link" className="p-0 h-auto text-[#6d28d9] font-bold text-xs">Tvdb</Button>
+                <Button variant="link" className="p-0 h-auto text-[#6d28d9] font-bold text-xs">AniDb</Button>
+              </div>
+            </div>
           </div>
 
           {/* Right Column: Info */}
-          <div className="flex-1 pt-32 md:pt-40">
+          <div className="flex-1 pt-4 md:pt-8">
             <div className="flex flex-wrap items-end justify-between gap-4 mb-6">
               <div>
                 <h1 className="text-4xl font-black text-foreground mb-2">
@@ -103,92 +178,19 @@ export default function DetailView({ media, onPersonClick }: DetailViewProps) {
               </div>
             </div>
 
-            <p className="text-foreground leading-relaxed mb-8 max-w-3xl">
-              {media.description}
-            </p>
+            <div 
+              className="text-foreground leading-relaxed mb-6 max-w-3xl prose prose-sm dark:prose-invert"
+              dangerouslySetInnerHTML={{ __html: media.description || '' }}
+            />
 
             {/* Tags */}
-            <div className="flex flex-wrap gap-2 mb-8">
+            <div className="flex flex-wrap gap-2 mb-4">
               {media.tags?.map(tag => (
                 <Badge key={tag} variant="secondary" className="bg-[#6d28d9]/10 text-[#6d28d9] hover:bg-[#6d28d9]/20 border-none px-3 py-1 font-bold text-[10px] uppercase tracking-wider">
                   {tag}
                 </Badge>
               ))}
             </div>
-
-            <div className="space-y-4">
-              {media.studios && media.studios.length > 0 && (
-                <p className="text-xs font-bold text-muted-foreground">
-                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Studios:</span>
-                  {media.studios.join(', ')}
-                </p>
-              )}
-              {media.developers && media.developers.length > 0 && (
-                <div className="flex items-center gap-2 flex-wrap">
-                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Developers:</span>
-                  {media.developers.map(dev => (
-                    <Badge key={dev} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-3 py-1 font-bold text-[10px]">
-                      {dev}
-                    </Badge>
-                  ))}
-                </div>
-              )}
-              {media.platforms && media.platforms.length > 0 && (
-                <div className="flex items-center gap-2 flex-wrap">
-                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Platforms:</span>
-                  {media.platforms.map(platform => (
-                    <Badge key={platform} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-3 py-1 font-bold text-[10px]">
-                      {platform}
-                    </Badge>
-                  ))}
-                </div>
-              )}
-              {media.categories && media.categories.length > 0 && (
-                <div className="flex items-center gap-2 flex-wrap">
-                  <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Categories:</span>
-                  {media.categories.map(category => (
-                    <Badge key={category} variant="secondary" className="bg-muted text-foreground hover:bg-muted/80 border-none px-3 py-1 font-bold text-[10px]">
-                      {category}
-                    </Badge>
-                  ))}
-                </div>
-              )}
-              {media.completionStatus && (
-                <p className="text-xs font-bold text-muted-foreground">
-                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Completion:</span>
-                  {media.completionStatus}
-                </p>
-              )}
-              {media.source && (
-                <p className="text-xs font-bold text-muted-foreground">
-                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Source:</span>
-                  {media.source}
-                </p>
-              )}
-              {media.playCount !== undefined && media.playCount !== null && (
-                <p className="text-xs font-bold text-muted-foreground">
-                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Play Count:</span>
-                  {media.playCount}
-                </p>
-              )}
-              {media.playtime !== undefined && media.playtime !== null && media.playtime > 0 && (
-                <p className="text-xs font-bold text-muted-foreground">
-                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Playtime:</span>
-                  {media.playtime}h
-                </p>
-              )}
-              {media.lastActivity && (
-                <p className="text-xs font-bold text-muted-foreground">
-                  <span className="text-muted-foreground/70 uppercase tracking-widest mr-2">Last Activity:</span>
-                  {media.lastActivity}
-                </p>
-              )}
-              <div className="flex items-center gap-4">
-                <span className="text-xs font-bold text-muted-foreground uppercase tracking-widest">Links:</span>
-                <Button variant="link" className="p-0 h-auto text-[#6d28d9] font-bold text-xs">Tvdb</Button>
-                <Button variant="link" className="p-0 h-auto text-[#6d28d9] font-bold text-xs">AniDb</Button>
-              </div>
-            </div>
           </div>
         </div>