From 96d5ca086db3fd50d2082a3d10b12b2d38cb46b8 Mon Sep 17 00:00:00 2001
From: Florian Hoech <code@florians-web.de>
Date: Mon, 27 Oct 2025 23:03:01 +0100
Subject: [PATCH 1/3] feat: add tmdb- and imdb link on person detail page

This commit adds links to tmdb and imdb on the person detail page

Signed-off-by: Florian Hoech <code@florians-web.de>
---
 src/components/ExternalLinkBlock/index.tsx | 18 ++++++++++++------
 src/components/PersonDetails/index.tsx     | 15 ++++++++++++---
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/ExternalLinkBlock/index.tsx b/src/components/ExternalLinkBlock/index.tsx
index 9199da7d02..3dbc3ca365 100644
--- a/src/components/ExternalLinkBlock/index.tsx
+++ b/src/components/ExternalLinkBlock/index.tsx
@@ -12,8 +12,10 @@ import useSettings from '@app/hooks/useSettings';
 import { MediaType } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 
+type ExternalLinkType = 'movie' | 'tv' | 'person';
+
 interface ExternalLinkBlockProps {
-  mediaType: 'movie' | 'tv';
+  mediaType: ExternalLinkType;
   tmdbId?: number;
   tvdbId?: number;
   imdbId?: string;
@@ -31,6 +33,10 @@ const ExternalLinkBlock = ({
 }: ExternalLinkBlockProps) => {
   const settings = useSettings();
   const { locale } = useLocale();
+  const isMovie = mediaType === MediaType.MOVIE;
+  const isTv = mediaType === MediaType.TV;
+  const isPerson = mediaType === 'person';
+  const imdbType = isPerson ? 'name' : 'title';
 
   return (
     <div className="flex w-full items-center justify-center space-x-5">
@@ -61,7 +67,7 @@ const ExternalLinkBlock = ({
           <TmdbLogo />
         </a>
       )}
-      {tvdbId && mediaType === MediaType.TV && (
+      {tvdbId && isTv && (
         <a
           href={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
           className="w-9 opacity-50 transition duration-300 hover:opacity-100"
@@ -73,7 +79,7 @@ const ExternalLinkBlock = ({
       )}
       {imdbId && (
         <a
-          href={`https://www.imdb.com/title/${imdbId}`}
+          href={`https://www.imdb.com/${imdbType}/${imdbId}`}
           className="w-8 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
@@ -91,10 +97,10 @@ const ExternalLinkBlock = ({
           <RTLogo />
         </a>
       )}
-      {tmdbId && (
+      {tmdbId && !isPerson && (
         <a
           href={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=${
-            mediaType === 'movie' ? 'movie' : 'show'
+            isMovie ? 'movie' : 'show'
           }`}
           className="w-8 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
@@ -103,7 +109,7 @@ const ExternalLinkBlock = ({
           <TraktLogo />
         </a>
       )}
-      {tmdbId && mediaType === MediaType.MOVIE && (
+      {tmdbId && isMovie && (
         <a
           href={`https://letterboxd.com/tmdb/${tmdbId}`}
           className="w-8 opacity-50 transition duration-300 hover:opacity-100"
diff --git a/src/components/PersonDetails/index.tsx b/src/components/PersonDetails/index.tsx
index 1b22252f07..4e5f9ee277 100644
--- a/src/components/PersonDetails/index.tsx
+++ b/src/components/PersonDetails/index.tsx
@@ -3,6 +3,7 @@ import CachedImage from '@app/components/Common/CachedImage';
 import ImageFader from '@app/components/Common/ImageFader';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
+import ExternalLinkBlock from '@app/components/ExternalLinkBlock';
 import TitleCard from '@app/components/TitleCard';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
@@ -255,9 +256,8 @@ const PersonDetails = () => {
         </div>
       )}
       <div
-        className={`relative z-10 mb-8 mt-4 flex flex-col items-center lg:flex-row ${
-          data.biography ? 'lg:items-start' : ''
-        }`}
+        className={`relative z-10 mb-8 mt-4 flex flex-col items-center lg:flex-row ${data.biography ? 'lg:items-start' : ''
+          }`}
       >
         {data.profilePath && (
           <div className="relative mb-6 mr-0 h-36 w-36 flex-shrink-0 overflow-hidden rounded-full ring-1 ring-gray-700 lg:mb-0 lg:mr-6 lg:h-44 lg:w-44">
@@ -277,6 +277,15 @@ const PersonDetails = () => {
               {mediaTypePicker}
             </div>
           </div>
+          <div className="flex w-full items-center justify-center lg:justify-between">
+            <div className="mt-3 mb-3">
+              <ExternalLinkBlock
+                mediaType="person"
+                tmdbId={data.id}
+                imdbId={data.imdbId}
+              />
+            </div>
+          </div>
           <div className="mb-2 mt-1 space-y-1 text-xs text-white sm:text-sm lg:text-base">
             <div>{personAttributes.join(' | ')}</div>
             {(data.alsoKnownAs ?? []).length > 0 && (

From c02c48ede398ca1b76cf0b6d6c18d3631c649ccf Mon Sep 17 00:00:00 2001
From: Florian Hoech <code@florians-web.de>
Date: Tue, 28 Oct 2025 18:28:58 +0100
Subject: [PATCH 2/3] fix: implement feedback from gauthier-th

Signed-off-by: Florian Hoech <code@florians-web.de>
---
 src/components/ExternalLinkBlock/index.tsx | 26 +++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/ExternalLinkBlock/index.tsx b/src/components/ExternalLinkBlock/index.tsx
index 3dbc3ca365..d78b69318d 100644
--- a/src/components/ExternalLinkBlock/index.tsx
+++ b/src/components/ExternalLinkBlock/index.tsx
@@ -33,10 +33,6 @@ const ExternalLinkBlock = ({
 }: ExternalLinkBlockProps) => {
   const settings = useSettings();
   const { locale } = useLocale();
-  const isMovie = mediaType === MediaType.MOVIE;
-  const isTv = mediaType === MediaType.TV;
-  const isPerson = mediaType === 'person';
-  const imdbType = isPerson ? 'name' : 'title';
 
   return (
     <div className="flex w-full items-center justify-center space-x-5">
@@ -67,7 +63,7 @@ const ExternalLinkBlock = ({
           <TmdbLogo />
         </a>
       )}
-      {tvdbId && isTv && (
+      {tvdbId && mediaType === MediaType.TV && (
         <a
           href={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
           className="w-9 opacity-50 transition duration-300 hover:opacity-100"
@@ -77,9 +73,19 @@ const ExternalLinkBlock = ({
           <TvdbLogo />
         </a>
       )}
-      {imdbId && (
+      {imdbId && mediaType !== 'person' && (
         <a
-          href={`https://www.imdb.com/${imdbType}/${imdbId}`}
+          href={`https://www.imdb.com/title/${imdbId}`}
+          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ImdbLogo />
+        </a>
+      )}
+      {imdbId && mediaType === 'person' && (
+        <a
+          href={`https://www.imdb.com/name/${imdbId}`}
           className="w-8 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
           rel="noreferrer"
@@ -97,10 +103,10 @@ const ExternalLinkBlock = ({
           <RTLogo />
         </a>
       )}
-      {tmdbId && !isPerson && (
+      {tmdbId && mediaType !== 'person' && (
         <a
           href={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=${
-            isMovie ? 'movie' : 'show'
+            mediaType === 'movie' ? 'movie' : 'show'
           }`}
           className="w-8 opacity-50 transition duration-300 hover:opacity-100"
           target="_blank"
@@ -109,7 +115,7 @@ const ExternalLinkBlock = ({
           <TraktLogo />
         </a>
       )}
-      {tmdbId && isMovie && (
+      {tmdbId && mediaType === MediaType.MOVIE && (
         <a
           href={`https://letterboxd.com/tmdb/${tmdbId}`}
           className="w-8 opacity-50 transition duration-300 hover:opacity-100"

From 442d0979f045513554cb0a0d11a1b81285578298 Mon Sep 17 00:00:00 2001
From: Florian Hoech <code@florians-web.de>
Date: Thu, 5 Mar 2026 19:35:39 +0100
Subject: [PATCH 3/3] fix: indentation (back to HEAD)

Signed-off-by: Florian Hoech <code@florians-web.de>
---
 src/components/PersonDetails/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/PersonDetails/index.tsx b/src/components/PersonDetails/index.tsx
index 4e5f9ee277..7929ad4c7b 100644
--- a/src/components/PersonDetails/index.tsx
+++ b/src/components/PersonDetails/index.tsx
@@ -256,8 +256,9 @@ const PersonDetails = () => {
         </div>
       )}
       <div
-        className={`relative z-10 mb-8 mt-4 flex flex-col items-center lg:flex-row ${data.biography ? 'lg:items-start' : ''
-          }`}
+        className={`relative z-10 mb-8 mt-4 flex flex-col items-center lg:flex-row ${
+          data.biography ? 'lg:items-start' : ''
+        }`}
       >
         {data.profilePath && (
           <div className="relative mb-6 mr-0 h-36 w-36 flex-shrink-0 overflow-hidden rounded-full ring-1 ring-gray-700 lg:mb-0 lg:mr-6 lg:h-44 lg:w-44">
@@ -278,7 +279,7 @@ const PersonDetails = () => {
             </div>
           </div>
           <div className="flex w-full items-center justify-center lg:justify-between">
-            <div className="mt-3 mb-3">
+            <div className="mb-3 mt-3">
               <ExternalLinkBlock
                 mediaType="person"
                 tmdbId={data.id}