Display types for attributes/facts in the sidebar (#221)

* feat: Show attribute names in sidebar

* feat: Take into account case when no TYPE tag for FACT is found

src/sidepanel/details/details.tsx

@@ -26,6 +26,7 @@ const EXCLUDED_TAGS = [
   'FAMS',
   'NOTE',
   'SOUR',
+  'FACT',
 ];
 
 function dataDetails(entry: GedcomEntry) {
@@ -53,6 +54,43 @@ function dataDetails(entry: GedcomEntry) {
   );
 }
 
+function attributeDetails(entry: GedcomEntry) {
+  if (!entry.data) {
+    return null;
+  }
+
+  let attributeName = entry.tree
+      .filter((subentry) => subentry.tag === 'TYPE')
+      .flatMap((type) => getData(type))
+      .join()
+      .trim();
+
+  let attributeValue = getData(entry).join(' ').trim();
+  if(attributeName) {
+    return (
+        <>
+          <Header sub>
+            <TranslatedTag tag={entry.tag}/>
+          </Header>
+          <div>
+            <b>{attributeName}</b>: {attributeValue}
+          </div>
+        </>
+    );
+  } else {
+    return (
+      <>
+        <Header sub>
+          <TranslatedTag tag={entry.tag}/>
+        </Header>
+        <div>
+          {attributeValue}
+        </div>
+      </>
+    );
+  }
+}
+
 function imageDetails(objectEntryReference: GedcomEntry, gedcom: GedcomData) {
   const imageEntry = dereference(
     objectEntryReference,
@@ -289,6 +327,12 @@ export function Details(props: Props) {
           imageDetails,
         )}
         <Events gedcom={props.gedcom} entries={entries} indi={props.indi} />
+        {getSectionForEachMatchingEntry(
+            entries,
+            props.gedcom,
+            ['FACT'],
+            attributeDetails,
+        )}
         {getOtherSections(entries, props.gedcom)}
         {getSectionForEachMatchingEntry(
           entries,