Show header information of the gedcom file on the side panel

[FrankBuchholz]

Gedcom files contain a HEAD section with information about the data source file itself. I like to show this information on the side panel. First I used a third tab but realized that the side panel is too narrow to show three tabs. Therefore. I put it onto the settings tab.
Example:

Data souce:
Gramps
4 FEB 2026
buchholz-sommer.ged
Frank Buchholz
frank.buchholz@web.de
Copyright (c) 2026 Frank Buchholz.

1. Pass the gedcom data to the side panel.
   File sidepanel\side-panel.tsx function SidePanel:

...
    {
      menuItem: intl.formatMessage({
        id: 'tab.settings',
        defaultMessage: 'Settings',
      }),
      render: () => <ConfigPanel gedcom={data.gedcom} config={config} onChange={onConfigChange} />,
    },
...

2. While rendering the settings tab, call the new function which renders the HEAD element of the gedcom data:
   File sidepanel\config\config.tsx function ConfigPanel:

...
import {SourceHead} from '../head/head';
import {GedcomData} from '../../util/gedcom_util';
...
export function ConfigPanel(props: {
  gedcom: GedcomData;
  config: Config;
  onChange: (config: Config) => void;
}) {
...
return (
    <>
    {SourceHead(props.gedcom)}
    <Form className="details">
...

3. Render the HEAD element of the gedcom data. In this proposal, I show some selected elements (software name, file date, filen ame, copyright, author name, phone, email, and location) and use icons to reduce the count of texts which require a translation.
   File sidepanel\head\head.tsx function SourceHead:

import {
  dereference,
  GedcomData,
} from '../../util/gedcom_util';
import {FormattedMessage} from 'react-intl';
import {Header, Divider, List} from 'semantic-ui-react';

export function SourceHead(gedcom: GedcomData){
  const head = gedcom.head;
  /* Don't show the section if there is no relevant information */
  if (!head || !head.tree) {
    return null;
  } 

  const sour = head.tree.find((entry) => entry.tag === 'SOUR');
  const sour_name = sour && sour.tree && sour.tree.find((entry) => entry.tag === 'NAME')?.data; // Software name
  const date = head.tree.find((entry) => entry.tag === 'DATE')?.data; // Creation date
  const file = head.tree.find((entry) => entry.tag === 'FILE')?.data; // File path
  const filename = file && ( file.split('\\').pop() || file.split('/').pop() ); // Extract file name from path
  const copr = head.tree.find((entry) => entry.tag === 'COPR')?.data; // Copyright

  // Reference to submitter
  const submReference = head.tree.find((entry) => entry.tag === 'SUBM');
  const subm = submReference && dereference(submReference, gedcom, (gedcom) => gedcom.other);

  const name = subm && subm.tree && subm.tree.find((entry) => entry.tag === 'NAME')?.data; // Submitter name
  const phon = subm && subm.tree && subm.tree.find((entry) => entry.tag === 'PHON')?.data; // Phone number
  const email = subm && subm.tree && subm.tree.find((entry) => entry.tag === 'EMAIL')?.data; // Email

  const addr = subm && subm.tree && subm.tree.find((entry) => entry.tag === 'ADDR'); // Address
  const adr1 = addr && addr.tree && addr.tree.find((entry) => entry.tag === 'ADR1')?.data; // Street address
  const city = addr && addr.tree && addr.tree.find((entry) => entry.tag === 'CITY')?.data; // City
  const post = addr && addr.tree && addr.tree.find((entry) => entry.tag === 'POST')?.data; // Postal code
  const location = [adr1, post, city].filter(Boolean).join(', '); // Combined location

  /* Don't show the section if there is no relevant information */
  if (!(sour_name || date || filename || copr || name || phon || email || location)) {
    return null;
  }

  // Icons: https://react.semantic-ui.com/elements/icon/
    return (
      <>
      <Header sub>
        <FormattedMessage id="head.source" defaultMessage="Data source" />
      </Header>
      <List>
        {sour_name && (          
          <List.Item>
            <List.Icon name='edit' />
            <List.Content>{sour_name}</List.Content>
          </List.Item>
        )}
        
        {date && (
          <List.Item>
            <List.Icon name='calendar' />
            <List.Content>{date}</List.Content>
          </List.Item>
        )}
        {file && (
          <List.Item>
            <List.Icon name='file' />
            <List.Content>{filename}</List.Content>
          </List.Item>
        )}
        {name && (
          <List.Item>
            <List.Icon name='user' />
            <List.Content>{name}</List.Content>
          </List.Item>
        )}
        {adr1 && (
          <List.Item>
            <List.Icon name='marker' />
            <List.Content>{location}</List.Content>
          </List.Item>
        )}
         {phon && (
          <List.Item>
            <List.Icon name='phone' />
            <List.Content>{phon}</List.Content>
          </List.Item>
        )}
        {email && (
          <List.Item>
            <List.Icon name='mail' />
            <List.Content>{email}</List.Content>
          </List.Item>
        )}
        {copr && (
          <List.Item>
            <List.Icon name='copyright' />
            <List.Content>{copr}</List.Content>
          </List.Item>
        )}
      </List>

      <Divider />
      </>
    );
}

4. Style the element to match the settings part (I guess, there exist a better solution than this):
   File index.css:

...
.ui.sub.header, .ui.list {
  margin-left: 20px;
}
...

5. Add the translation for the heading:
   File translations\de.json:

...
  "head.source": "Datenquelle",
...

What do you think about it? Should I create a pull request?

Greetings
Frank

[PeWu]

Good idea. A third tab would be the best place to put these details. Maybe it could work if we put icons on the tabs?
Anyway, putting the header info in settings is a good start. It can be moved to a tab later. If you're willing to create a pull request, it would be great!

[FrankBuchholz]

I've created pull request #252

[FrankBuchholz]

PeWu merged commit 7c5203b into PeWu:master