fix: Fix authorship section and background on detail pages

Provide DatePipe in DetailComponent to fix NullInjectorError that
silently broke the authorship template rendering. Add Created as a
separate row, fix @for tracking to use $index instead of dbId to
avoid JSOG shared-reference conflicts, and unset the background
override so detail pages match the standard page background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: adamjohnwright

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html

@@ -244,13 +244,13 @@
 
 <ng-template #authorsTemplate>
   <div class="element-container">
-    @for (item of authorship(); track item) {
+    @for (item of authorship(); track item.label) {
       <div class="row">
         <div class="label-container">{{ item.label }}</div>
         <div class="composition-container flex-column">
-          @for (ie of item.data |sortByDate:'dataTime'; track ie.dbId) {
+          @for (ie of item.data; track $index) {
             <div class="authorship-item">
-              @for (author of ie.author; let i = $index; track author.dbId) {
+              @for (author of ie.author; let i = $index; track $index) {
                 <a [href]="`${CONTENT_DETAIL}/${author.dbId}`"
                    [ngClass]="{'margin-right': !author.orcidId}">
                   {{ author.firstname }} {{ author.surname }}

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts

@@ -53,7 +53,6 @@ import HasModifiedResidue = Relationship.HasModifiedResidue;
 import {KeyValuePipe, NgClass, NgTemplateOutlet} from "@angular/common";
 import {RouterLink} from "@angular/router";
 import {SortByTextPipe} from "../../../pipes/sort-by-text.pipe";
-import {SortByDatePipe} from "../../../pipes/sort-by-date.pipe";
 import {IncludeRefPipe} from "../../../pipes/include-ref.pipe";
 import {AuthorshipDateFormatPipe} from "../../../pipes/authorship-date-format.pipe";
 import {MatDivider} from "@angular/material/divider";
@@ -90,7 +89,6 @@ import {
     KeyValuePipe,
     RouterLink,
     SortByTextPipe,
-    SortByDatePipe,
     IncludeRefPipe,
     AuthorshipDateFormatPipe,
     MatDivider,
@@ -190,21 +188,23 @@ export class DescriptionTabComponent implements OnDestroy {
 
   referenceEntity: Signal<ReferenceEntity> = computed(() => getProperty(this.obj(), DataKeys.REFERENCE_ENTITY));
 
-  readonly authorship: Signal<{ label: string, data: InstanceEdit[] }[]> = computed(() => {
+  readonly authorship: Signal<{label: string, data: InstanceEdit[]}[]> = computed(() => {
     const arrayWrap = <E>(a: E[] | E) => Array.isArray(a) ? a : [a];
 
     const obj = this.obj();
     // Ensure it's an array, either returning the existing array or wrapping it in one, it complains without this line.
-    const finalAuthored = arrayWrap(getProperty(obj, DataKeys.AUTHORED) || getProperty(obj, DataKeys.CREATED) || []);
+    const authored = arrayWrap(getProperty(obj, DataKeys.AUTHORED) || []);
     const reviewed = getProperty(obj, DataKeys.REVIEWED) || [];
     const edited = getProperty(obj, DataKeys.EDITED) || [];
     const revised = getProperty(obj, DataKeys.REVISED) || [];
+    const created = arrayWrap(getProperty(obj, DataKeys.CREATED) || []);
 
     return [
-      ...(finalAuthored.length > 0 ? [{label: Labels.AUTHOR, data: finalAuthored}] : []),
+      ...(authored.length > 0 ? [{label: Labels.AUTHOR, data: authored}] : []),
       ...(reviewed.length > 0 ? [{label: Labels.REVIEWER, data: reviewed}] : []),
       ...(edited.length > 0 ? [{label: Labels.EDITOR, data: edited}] : []),
       ...(revised.length > 0 ? [{label: Labels.REVISER, data: revised}] : []),
+      ...(created.length > 0 ? [{label: 'Created', data: created}] : []),
     ];
   });
 

projects/website-angular/src/app/content/detail/detail.component.scss

@@ -39,6 +39,7 @@
     overflow-y: visible;
     overflow-x: visible;
     padding: 0;
+    background: unset;
   }
 
   #details {

projects/website-angular/src/app/content/detail/detail.component.ts

@@ -1,4 +1,5 @@
 import {Component, inject, OnInit, signal} from '@angular/core';
+import {DatePipe} from '@angular/common';
 import {ActivatedRoute} from '@angular/router';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material/icon';
@@ -41,6 +42,7 @@ import {DetailSpeciesService} from './providers/detail-species.provider';
     {provide: SpeciesService, useClass: DetailSpeciesService},
     {provide: DiagramService, useValue: {}},
     {provide: ParticipantService, useValue: {getReferenceEntities: () => of([])}},
+    DatePipe,
   ],
   templateUrl: './detail.component.html',
   styleUrl: './detail.component.scss',