feat(schema): render the Referrals section under each instance

Mirrors the legacy Joomla /content/schema/instance/browser/{id} layout
that lists every other instance referencing the current one, grouped by
attribute name. Fetches the new
/ContentService/data/instance/{id}/referrers endpoint
(content-service@7b9eceb) after the instance loads and renders the
groups in a table below the attribute view. Silently degrades to no
section if the endpoint 500s or isn't deployed, so the page is still
useful in that fallback state.

Author: adamjohnwright

projects/website-angular/src/app/content/schema/instance-browser/instance-browser.component.html

@@ -51,4 +51,32 @@ <h2>
       <p>No attributes found for this instance.</p>
     </div>
   }
+
+  @if (referrals.length > 0) {
+    <div class="referrals-section">
+      <h3>Referrals</h3>
+      <p class="section-desc">Other instances that reference this one, grouped by attribute:</p>
+      <table class="attr-table referrals">
+        <tbody>
+          @for (group of referrals; track group.referral) {
+            <tr>
+              <td class="attr-name">
+                <em>({{ group.referral }})</em>
+              </td>
+              <td class="attr-value">
+                @for (obj of group.objects; track obj.dbId; let last = $last) {
+                  <a
+                    class="instance-link"
+                    href="#"
+                    (click)="onLinkClick(obj.dbId, $event)"
+                  >[{{ obj.schemaClass }}:{{ obj.stId || obj.dbId }}] {{ obj.displayName }}</a>
+                  @if (!last) { <br /> }
+                }
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  }
 }

projects/website-angular/src/app/content/schema/instance-browser/instance-browser.component.scss

@@ -89,6 +89,25 @@
   word-break: break-word;
 }
 
+.referrals-section {
+  margin-top: 32px;
+
+  h3 {
+    margin-bottom: 4px;
+  }
+
+  .section-desc {
+    color: var(--on-surface-variant);
+    font-size: 0.85rem;
+    margin-bottom: 12px;
+  }
+
+  .attr-name em {
+    color: var(--on-surface-variant);
+    font-style: italic;
+  }
+}
+
 .instance-link {
   color: var(--primary);
   text-decoration: none;

projects/website-angular/src/app/content/schema/instance-browser/instance-browser.component.ts

@@ -12,6 +12,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import {
   ContentDataService,
+  InstanceReferrals,
   SchemaAttribute,
 } from '../../../../services/content-data.service';
 
@@ -43,6 +44,7 @@ export class InstanceBrowserComponent implements OnChanges, OnDestroy {
   schemaClass = '';
   dbId: number | string = '';
   rows: AttributeRow[] = [];
+  referrals: InstanceReferrals[] = [];
   loading = true;
   error = false;
 
@@ -63,6 +65,7 @@ export class InstanceBrowserComponent implements OnChanges, OnDestroy {
     this.loading = true;
     this.error = false;
     this.rows = [];
+    this.referrals = [];
 
     this.contentDataService
       .getInstance(this.instanceId)
@@ -73,6 +76,7 @@ export class InstanceBrowserComponent implements OnChanges, OnDestroy {
           this.schemaClass = instance.schemaClass || instance.className || '';
           this.dbId = instance.dbId;
           this.loadAttributes();
+          this.loadReferrals();
         },
         error: () => {
           this.error = true;
@@ -81,6 +85,22 @@ export class InstanceBrowserComponent implements OnChanges, OnDestroy {
       });
   }
 
+  private loadReferrals() {
+    this.contentDataService
+      .getInstanceReferrers(this.instanceId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (groups) => {
+          this.referrals = groups || [];
+        },
+        error: () => {
+          // Endpoint absent or 500 -- silently degrade; the page is still
+          // useful without the referrals list.
+          this.referrals = [];
+        },
+      });
+  }
+
   private loadAttributes() {
     this.contentDataService.getSchemaAttributes(this.schemaClass).subscribe({
       next: (attrs) => {

projects/website-angular/src/services/content-data.service.ts

@@ -78,6 +78,11 @@ export interface SimpleDatabaseObject {
   schemaClass: string;
 }
 
+export interface InstanceReferrals {
+  referral: string;
+  objects: SimpleDatabaseObject[];
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -136,4 +141,10 @@ export class ContentDataService {
       `${CONTENT_SERVICE}/data/query/enhanced/${id}`
     );
   }
+
+  getInstanceReferrers(id: string | number): Observable<InstanceReferrals[]> {
+    return this.http.get<InstanceReferrals[]>(
+      `${CONTENT_SERVICE}/data/instance/${id}/referrers`
+    );
+  }
 }