From fbe82dd9fcc33ccaadbdefd2bf7abf69681ca4d8 Mon Sep 17 00:00:00 2001
From: Frank Buchholz <frank.buchholz@web.de>
Date: Sat, 18 Apr 2026 22:28:10 +0200
Subject: [PATCH] Show ID on the details pane (depending on config) (#278)

---
 src/sidepanel/details/details.tsx | 16 ++++++++++++++++
 src/sidepanel/side-panel.tsx      |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/sidepanel/details/details.tsx b/src/sidepanel/details/details.tsx
index 3236eaa..059b433 100644
--- a/src/sidepanel/details/details.tsx
+++ b/src/sidepanel/details/details.tsx
@@ -17,6 +17,7 @@ import {MultilineText} from './multiline-text';
 import {Sources} from './sources';
 import {TranslatedTag} from './translated-tag';
 import {WrappedImage} from './wrapped-image';
+import {Config, Ids} from '../config/config';
 
 const EXCLUDED_TAGS = [
   ...ALL_SUPPORTED_EVENT_TYPES,
@@ -306,9 +307,23 @@ function getOtherSections(entries: GedcomEntry[], gedcom: GedcomData) {
     ));
 }
 
+function getSectionForId(indi: string) : React.ReactNode {
+  return (
+    <Item>
+      <Item.Content>
+        <Header sub>
+          <FormattedMessage id="config.ids" defaultMessage="Identification" />
+        </Header>
+        <div><i>{indi}</i></div>
+      </Item.Content>
+    </Item>
+  );
+}
+
 interface Props {
   gedcom: GedcomData;
   indi: string;
+  config: Config;
 }
 
 export function Details(props: Props) {
@@ -330,6 +345,7 @@ export function Details(props: Props) {
           imageDetails,
         )}
         <Events gedcom={props.gedcom} entries={entries} indi={props.indi} />
+        {props.config.id === Ids.SHOW ? getSectionForId(props.indi) : null}
         {getSectionForEachMatchingEntry(
             entries,
             props.gedcom,
diff --git a/src/sidepanel/side-panel.tsx b/src/sidepanel/side-panel.tsx
index 4ef5c47..f1aea5f 100644
--- a/src/sidepanel/side-panel.tsx
+++ b/src/sidepanel/side-panel.tsx
@@ -30,7 +30,7 @@ export function SidePanel({
         id: 'tab.info',
         defaultMessage: 'Info',
       }),
-      render: () => <Details gedcom={data.gedcom} indi={selectedIndiId} />,
+      render: () => <Details gedcom={data.gedcom} indi={selectedIndiId} config={config} />,
     },
     {
       menuItem: intl.formatMessage({