feat(web): integrate RelatedEntitiesSection into entity routes (task-17)

Integrated RelatedEntitiesSection into works, authors, and institutions
routes to display related entities for each entity type.

Author: Mearman

apps/web/src/routes/authors/$_.lazy.tsx

@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { createLazyFileRoute,useParams, useSearch  } from "@tanstack/react-router";
 import { useState } from "react";
 
-import { type DetailViewMode, EntityDetailLayout, ErrorState, LoadingState } from "@/components/entity-detail";
+import { type DetailViewMode, EntityDetailLayout, ErrorState, LoadingState, RelatedEntitiesSection } from "@/components/entity-detail";
 import { ENTITY_TYPE_CONFIGS } from "@/components/entity-detail/EntityTypeConfig";
 import { IncomingRelationships } from "@/components/relationship/IncomingRelationships";
 import { OutgoingRelationships } from "@/components/relationship/OutgoingRelationships";
@@ -63,7 +63,7 @@ const AuthorRoute = () => {
   });
 
   // Get relationship counts from API queries
-  const { incomingCount, outgoingCount } = useEntityRelationshipQueries(
+  const { incomingCount, outgoingCount, incoming: incomingSections, outgoing: outgoingSections } = useEntityRelationshipQueries(
     decodedAuthorId || '',
     'authors'
   );
@@ -94,6 +94,12 @@ const AuthorRoute = () => {
       onViewModeChange={setViewMode}
       data={author as Record<string, unknown>}>
       <RelationshipCounts incomingCount={incomingCount} outgoingCount={outgoingCount} />
+      <RelatedEntitiesSection
+        incomingSections={incomingSections}
+        outgoingSections={outgoingSections}
+        entityId={decodedAuthorId}
+        entityType="authors"
+      />
       <IncomingRelationships
         entityId={decodedAuthorId}
         entityType="authors"

apps/web/src/routes/institutions/$_.lazy.tsx

@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { createLazyFileRoute,useParams, useSearch  } from "@tanstack/react-router";
 import { useState } from "react";
 
-import { type DetailViewMode, EntityDetailLayout, ErrorState, LoadingState } from "@/components/entity-detail";
+import { type DetailViewMode, EntityDetailLayout, ErrorState, LoadingState, RelatedEntitiesSection } from "@/components/entity-detail";
 import { ENTITY_TYPE_CONFIGS } from "@/components/entity-detail/EntityTypeConfig";
 import { IncomingRelationships } from "@/components/relationship/IncomingRelationships";
 import { OutgoingRelationships } from "@/components/relationship/OutgoingRelationships";
@@ -63,7 +63,7 @@ const InstitutionRoute = () => {
   });
 
   // Get relationship counts for summary display - MUST be called before early returns (Rules of Hooks)
-  const { incomingCount, outgoingCount } = useEntityRelationshipQueries(
+  const { incomingCount, outgoingCount, incoming: incomingSections, outgoing: outgoingSections } = useEntityRelationshipQueries(
     decodedInstitutionId || '',
     'institutions'
   );
@@ -94,6 +94,12 @@ const InstitutionRoute = () => {
       onViewModeChange={setViewMode}
       data={institution as Record<string, unknown>}>
       <RelationshipCounts incomingCount={incomingCount} outgoingCount={outgoingCount} />
+      <RelatedEntitiesSection
+        incomingSections={incomingSections}
+        outgoingSections={outgoingSections}
+        entityId={decodedInstitutionId}
+        entityType="institutions"
+      />
       <IncomingRelationships entityId={decodedInstitutionId} entityType="institutions" />
       <OutgoingRelationships entityId={decodedInstitutionId} entityType="institutions" />
     </EntityDetailLayout>

apps/web/src/routes/works/$_.lazy.tsx

@@ -6,7 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import { createLazyFileRoute,useParams, useSearch  } from "@tanstack/react-router";
 import { useEffect,useState } from "react";
 
-import { type DetailViewMode, EntityDetailLayout, ErrorState, LoadingState } from "@/components/entity-detail";
+import { type DetailViewMode, EntityDetailLayout, ErrorState, LoadingState, RelatedEntitiesSection } from "@/components/entity-detail";
 import { ENTITY_TYPE_CONFIGS } from "@/components/entity-detail/EntityTypeConfig";
 import { PdfViewer } from "@/components/pdf";
 import { IncomingRelationships } from "@/components/relationship/IncomingRelationships";
@@ -128,7 +128,7 @@ const WorkRoute = () => {
   });
 
   // Get relationship counts for summary display - MUST be called before early returns (Rules of Hooks)
-  const { incomingCount, outgoingCount } = useEntityRelationshipQueries(
+  const { incomingCount, outgoingCount, incoming: incomingSections, outgoing: outgoingSections } = useEntityRelationshipQueries(
     normalizedWorkId || '',
     'works'
   );
@@ -243,6 +243,12 @@ const WorkRoute = () => {
         />
       )}
       <RelationshipCounts incomingCount={incomingCount} outgoingCount={outgoingCount} />
+      <RelatedEntitiesSection
+        incomingSections={incomingSections}
+        outgoingSections={outgoingSections}
+        entityId={normalizedWorkId}
+        entityType="works"
+      />
       <IncomingRelationships entityId={normalizedWorkId} entityType="works" />
       <OutgoingRelationships entityId={normalizedWorkId} entityType="works" />
     </EntityDetailLayout>