Add breadcrumbs

xPaw · xPaw · commit 80b924d55c6f · 2026-03-18T17:06:19.000+02:00
diff --git a/src/components/DeclarationsSidebar.tsx b/src/components/DeclarationsSidebar.tsx
@@ -48,12 +48,12 @@ const HEADER_GAP = 8;
 const ITEM_HEIGHT = 28;
 
 export const DeclarationsSidebar = ({ onNavigate }: { onNavigate?: () => void }) => {
-  const { declarations } = useContext(DeclarationsContext);
+  const { declarations, game } = useContext(DeclarationsContext);
   const { filter, setFilter } = useContext(SidebarFilterContext);
   const { module: activeModule = "", scope = "" } = useParams();
   const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
   const [hydrated, setHydrated] = useState(false);
-  const parentRef = useRef<HTMLDivElement>(null);
+  const parentRef = useRef<HTMLUListElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const activeStickyIndexRef = useRef(0);
   const navigatedFromSidebarRef = useRef(false);
@@ -212,10 +212,8 @@ export const DeclarationsSidebar = ({ onNavigate }: { onNavigate?: () => void })
     onNavigate?.();
   }, [onNavigate]);
 
-  const { game } = useContext(DeclarationsContext);
-
   return (
-    <SidebarWrapper ref={wrapperRef}>
+    <SidebarWrapper ref={wrapperRef} aria-label="Classes and enums">
       <SidebarHeader>
         <SidebarBrandRow>
           <SidebarBrand href="https://s2v.app/">
@@ -236,15 +234,15 @@ export const DeclarationsSidebar = ({ onNavigate }: { onNavigate?: () => void })
         />
       </SidebarHeader>
       {hydrated ? (
-        <div ref={parentRef} style={{ flex: 1, overflow: "auto" }}>
+        <SidebarList ref={parentRef}>
           <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
             {virtualizer.getVirtualItems().map((virtualRow) => {
               const row = rows[virtualRow.index];
               const isHeader = row.type === "header";
               const isActiveSticky = activeStickyIndexRef.current === virtualRow.index;
 
               return (
-                <div
+                <li
                   key={virtualRow.key}
                   style={{
                     ...(isActiveSticky
@@ -276,17 +274,17 @@ export const DeclarationsSidebar = ({ onNavigate }: { onNavigate?: () => void })
                       onClick={handleSidebarNavigate}
                     />
                   )}
-                </div>
+                </li>
               );
             })}
           </div>
-        </div>
+        </SidebarList>
       ) : (
-        <div style={{ flex: 1, overflow: "auto" }}>
+        <SidebarList>
           {staticRows.map((row, i) => {
             if (row.type === "header") {
               return (
-                <div
+                <li
                   key={`h-${row.module}`}
                   style={{
                     height: HEADER_HEIGHT + (i > 0 ? HEADER_GAP : 0),
@@ -296,17 +294,16 @@ export const DeclarationsSidebar = ({ onNavigate }: { onNavigate?: () => void })
                   <SidebarGroupHeader>
                     {row.module} ({row.count})
                   </SidebarGroupHeader>
-                </div>
+                </li>
               );
             }
             return (
-              <DeclarationSidebarElement
-                key={`${row.declaration.module}-${row.declaration.name}`}
-                declaration={row.declaration}
-              />
+              <li key={`${row.declaration.module}-${row.declaration.name}`}>
+                <DeclarationSidebarElement declaration={row.declaration} />
+              </li>
             );
           })}
-        </div>
+        </SidebarList>
       )}
     </SidebarWrapper>
   );
@@ -340,3 +337,11 @@ const SidebarBrand = styled.a`
 const SidebarSearchInput = styled(SearchInput)`
   background: var(--background);
 `;
+
+const SidebarList = styled.ul`
+  flex: 1;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
diff --git a/src/components/layout/NavBar.tsx b/src/components/layout/NavBar.tsx
@@ -74,7 +74,7 @@ export function GameSwitcher({ currentGame }: { currentGame: GameId }) {
         onClick={() => setOpen(!open)}
         title={currentGameInfo?.name}
         aria-expanded={open}
-        aria-haspopup="listbox"
+        aria-haspopup="menu"
       >
         <SwitcherChevron
           viewBox="0 0 24 24"
@@ -97,10 +97,11 @@ export function GameSwitcher({ currentGame }: { currentGame: GameId }) {
         </SwitcherIcon>
       </SwitcherToggle>
       {open && (
-        <SwitcherDropdown>
+        <SwitcherDropdown role="menu" aria-label="Select game">
           {GAME_LIST.map((g) => (
             <SwitcherOption
               key={g.id}
+              role="menuitem"
               onClick={() => switchTo(g.id)}
               data-active={g.id === currentGame || undefined}
             >
diff --git a/src/components/schema/Breadcrumb.tsx b/src/components/schema/Breadcrumb.tsx
@@ -0,0 +1,92 @@
+import React, { useContext } from "react";
+import { href } from "react-router";
+import { Link } from "../Link";
+import { styled } from "@linaria/react";
+import { DeclarationsContext, declarationPath } from "./DeclarationsContext";
+import { getGameDef, SITE_ORIGIN } from "../../games-list";
+
+const BreadcrumbNav = styled.nav`
+  margin: 0 0 10px 4px;
+  font-size: 13px;
+`;
+
+const BreadcrumbList = styled.ol`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+const BreadcrumbItem = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-dim);
+
+  &:not(:last-child)::after {
+    content: "›";
+    color: var(--text-dim);
+    opacity: 0.5;
+  }
+`;
+
+const BreadcrumbLink = styled(Link)`
+  color: var(--text-dim);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--highlight);
+  }
+`;
+
+export const DeclarationBreadcrumb: React.FC<{
+  module: string;
+  name: string;
+  parent?: { name: string; module: string };
+}> = ({ module, name, parent }) => {
+  const { game } = useContext(DeclarationsContext);
+  const gameData = getGameDef(game);
+  if (!gameData) return null;
+
+  const nameUrl = declarationPath(game, module, name);
+  let position = 1;
+
+  return (
+    <BreadcrumbNav aria-label="Breadcrumb">
+      <BreadcrumbList itemScope itemType="https://schema.org/BreadcrumbList">
+        <BreadcrumbItem itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
+          <BreadcrumbLink to={href("/:game/:module?/:scope?", { game })} itemProp="item">
+            <span itemProp="name">{gameData.name}</span>
+          </BreadcrumbLink>
+          <meta itemProp="position" content={String(position++)} />
+        </BreadcrumbItem>
+        <BreadcrumbItem itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
+          <BreadcrumbLink to={href("/:game/:module?/:scope?", { game, module })} itemProp="item">
+            <span itemProp="name">{module}</span>
+          </BreadcrumbLink>
+          <meta itemProp="position" content={String(position++)} />
+        </BreadcrumbItem>
+        {parent && (
+          <BreadcrumbItem
+            itemProp="itemListElement"
+            itemScope
+            itemType="https://schema.org/ListItem"
+          >
+            <BreadcrumbLink to={declarationPath(game, parent.module, parent.name)} itemProp="item">
+              <span itemProp="name">{parent.name}</span>
+            </BreadcrumbLink>
+            <meta itemProp="position" content={String(position++)} />
+          </BreadcrumbItem>
+        )}
+        <BreadcrumbItem itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
+          <span itemProp="name">{name}</span>
+          <link itemProp="item" href={`${SITE_ORIGIN}${nameUrl}`} />
+          <meta itemProp="position" content={String(position)} />
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </BreadcrumbNav>
+  );
+};
diff --git a/src/components/schema/ContentList.tsx b/src/components/schema/ContentList.tsx
@@ -5,6 +5,7 @@ import { styled } from "@linaria/react";
 import { ContentWrapper, ListItem, TextMessage } from "../layout/Content";
 import { LazyList, ScrollableList } from "../Lists";
 import { useFilteredData, useParsedSearch, searchDeclarations } from "../../utils/filtering";
+import { DeclarationBreadcrumb } from "./Breadcrumb";
 import { SchemaClassView } from "./SchemaClass";
 import { SchemaEnumView } from "./SchemaEnum";
 import { ClassTree } from "./ClassTree";
@@ -214,6 +215,13 @@ function ModuleList() {
 function renderItem(declaration: Declaration, isSearchResult?: boolean) {
   return (
     <ListItem key={declarationKey(declaration.module, declaration.name)}>
+      {!isSearchResult && (
+        <DeclarationBreadcrumb
+          module={declaration.module}
+          name={declaration.name}
+          parent={declaration.kind === "class" ? declaration.parents[0] : undefined}
+        />
+      )}
       {declaration.kind === "class" ? (
         <SchemaClassView declaration={declaration} isSearchResult={isSearchResult} />
       ) : (
diff --git a/src/components/schema/SchemaClass.tsx b/src/components/schema/SchemaClass.tsx
@@ -19,6 +19,7 @@ import {
   CommonGroupSignature,
   CommonGroupWrapper,
   DeclarationHeader,
+  DeclarationHeading,
   DeclarationNameLink,
   GridContent,
   GridIcon,
@@ -82,7 +83,7 @@ const GitHubIcon = styled.a`
   display: inline-flex;
   align-items: center;
   color: var(--text-dim);
-  margin-left: 4px;
+  margin-left: auto;
 
   &:hover {
     color: var(--highlight);
@@ -146,12 +147,12 @@ export const SchemaClassView: React.FC<{
       <DeclarationHeader>
         <CommonGroupSignature>
           <KindIcon kind="class" size="big" />
-          <h2>
+          <DeclarationHeading>
             <DeclarationNameLink to={declPath} title={`class in ${declaration.module}`}>
               {declaration.name}
             </DeclarationNameLink>
-          </h2>
-          <ModuleBadge module={declaration.module} />
+          </DeclarationHeading>
+          {isSearchResult && <ModuleBadge module={declaration.module} />}
           <GitHubFileLink module={declaration.module} name={declaration.name} />
         </CommonGroupSignature>
       </DeclarationHeader>
diff --git a/src/components/schema/SchemaEnum.tsx b/src/components/schema/SchemaEnum.tsx
@@ -19,6 +19,7 @@ import {
   CommonGroupSignature,
   CommonGroupWrapper,
   DeclarationHeader,
+  DeclarationHeading,
   DeclarationNameLink,
   GridContent,
   GridIcon,
@@ -86,13 +87,13 @@ export const SchemaEnumView: React.FC<{
       <DeclarationHeader>
         <CommonGroupSignature>
           <KindIcon kind="enum" size="big" />
-          <h2>
+          <DeclarationHeading>
             <DeclarationNameLink to={declPath} title={`enum in ${declaration.module}`}>
               {declaration.name}
             </DeclarationNameLink>
-          </h2>
+          </DeclarationHeading>
           <AlignmentBadge>{declaration.alignment}</AlignmentBadge>
-          <ModuleBadge module={declaration.module} />
+          {isSearchResult && <ModuleBadge module={declaration.module} />}
           <GitHubFileLink module={declaration.module} name={declaration.name} />
         </CommonGroupSignature>
       </DeclarationHeader>
diff --git a/src/components/schema/styles.tsx b/src/components/schema/styles.tsx
@@ -30,12 +30,12 @@ export const CommonGroupSignature = styled.div`
   align-items: center;
   flex-wrap: wrap;
   gap: 0 4px;
+`;
 
-  & > h2 {
-    margin: 0;
-    font-size: inherit;
-    font-weight: inherit;
-  }
+export const DeclarationHeading = styled.h1`
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
 `;
 
 export const DeclarationHeader = styled.div`
