add references, fix expanding in search, switch virt

Author: xPaw

web/package-lock.json

@@ -8,13 +8,12 @@
     "test": "tsc --noEmit && npm run lint"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.13.22",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/react-virtualized": "^9.21.10",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router-dom": "^7.13.1",
-    "react-virtualized": "^9.22.2",
     "styled-components": "^6.3.11"
   },
   "devDependencies": {

web/package.json

@@ -7,7 +7,7 @@ import { SchemaEnumView } from "./SchemaEnum";
 import { Declaration } from "~components/Docs/api";
 import { DeclarationsContext } from "~components/Docs/DeclarationsContext";
 
-function renderItem(declaration: Declaration, style?: React.CSSProperties) {
+function renderItem(declaration: Declaration) {
   let children: React.JSX.Element;
   switch (declaration.kind) {
     case "class":
@@ -19,7 +19,7 @@ function renderItem(declaration: Declaration, style?: React.CSSProperties) {
   }
 
   return (
-    <ListItem style={style} key={declaration.name}>
+    <ListItem key={declaration.name}>
       {children}
     </ListItem>
   );

web/src/components/Docs/ContentList.tsx

@@ -1,9 +1,17 @@
 import { createContext } from "react";
 import { Declaration } from "~components/Docs/api";
 
+export type ReferenceEntry = {
+  declarationName: string;
+  declarationKind: "class" | "enum";
+  fieldName?: string;
+  relation: "field" | "parent";
+};
+
 export type DeclarationsContextType = {
   root: string;
   declarations: Declaration[];
+  references: Map<string, ReferenceEntry[]>;
 };
 
-export const DeclarationsContext = createContext<DeclarationsContextType>({ root: "", declarations: [] });
+export const DeclarationsContext = createContext<DeclarationsContextType>({ root: "", declarations: [], references: new Map() });

web/src/components/Docs/DeclarationsContext.ts

@@ -0,0 +1,96 @@
+import React, { useContext, useState } from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { DeclarationsContext } from "./DeclarationsContext";
+import { KindIcon } from "./utils/components";
+
+const COLLAPSE_THRESHOLD = 8;
+
+const Wrapper = styled.div`
+  padding: 8px 12px;
+  border-top: 1px solid ${(props) => props.theme.groupBorder};
+`;
+
+const Title = styled.div`
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: ${(props) => props.theme.textDim};
+  margin-bottom: 4px;
+`;
+
+const RefList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+`;
+
+const RefLink = styled(Link)`
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  text-decoration: none;
+  color: ${(props) => props.theme.text};
+  background: ${(props) => props.theme.groupMembers};
+  border: 1px solid ${(props) => props.theme.groupBorder};
+  transition: border-color 0.1s;
+
+  &:hover {
+    border-color: ${(props) => props.theme.highlight};
+  }
+`;
+
+const RefField = styled.span`
+  color: ${(props) => props.theme.textDim};
+
+  &::before {
+    content: ".";
+  }
+`;
+
+const ToggleButton = styled.button`
+  background: none;
+  border: none;
+  color: ${(props) => props.theme.textDim};
+  font-size: 12px;
+  cursor: pointer;
+  padding: 2px 4px;
+
+  &:hover {
+    color: ${(props) => props.theme.text};
+  }
+`;
+
+export function ReferencedBy({ name }: { name: string }) {
+  const { root, references } = useContext(DeclarationsContext);
+  const [expanded, setExpanded] = useState(false);
+
+  const refs = references.get(name);
+  if (!refs || refs.length === 0) return null;
+
+  const collapsible = refs.length > COLLAPSE_THRESHOLD;
+  const visible = collapsible && !expanded ? refs.slice(0, COLLAPSE_THRESHOLD) : refs;
+
+  return (
+    <Wrapper>
+      <Title>Referenced by ({refs.length})</Title>
+      <RefList>
+        {visible.map((ref, i) => (
+          <RefLink key={`${ref.declarationName}-${ref.fieldName ?? ""}-${i}`} to={`${root}/${ref.declarationName}`}>
+            <KindIcon kind={ref.declarationKind} size="small" />
+            <span>{ref.declarationName}{ref.fieldName && <RefField>{ref.fieldName}</RefField>}</span>
+          </RefLink>
+        ))}
+        {collapsible && (
+          <ToggleButton onClick={() => setExpanded(!expanded)}>
+            {expanded ? "show less" : `+${refs.length - COLLAPSE_THRESHOLD} more…`}
+          </ToggleButton>
+        )}
+      </RefList>
+    </Wrapper>
+  );
+}

web/src/components/Docs/ReferencedBy.tsx

@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 import styled from "styled-components";
 import * as api from "./api";
 import { SchemaTypeView, MetadataTags } from "./SchemaType";
+import { ReferencedBy } from "./ReferencedBy";
 import { KindIcon } from "./utils/components";
 import { DeclarationsContext } from "./DeclarationsContext";
 import {
@@ -93,6 +94,7 @@ export const SchemaClassView: React.FC<{
         ))}
       </ClassMembers>
     )}
+    <ReferencedBy name={declaration.name} />
   </CommonGroupWrapper>
   );
 };