more fixes

Author: xPaw

web/src/components/Docs/ContentList.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { ContentWrapper, ListItem, TextMessage } from "~components/layout/Content";
 import { LazyList, ScrollableList } from "~components/Lists";
@@ -7,6 +8,76 @@ import { SchemaClassView } from "./SchemaClass";
 import { SchemaEnumView } from "./SchemaEnum";
 import { Declaration } from "~components/Docs/api";
 import { DeclarationsContext } from "~components/Docs/DeclarationsContext";
+import { GAMES } from "~games";
+
+const InfoBlock = styled.div`
+  max-width: 560px;
+  margin: 24px auto 0;
+  padding: 16px 20px;
+  background: ${(props) => props.theme.group};
+  border: 1px solid ${(props) => props.theme.groupBorder};
+  border-radius: 10px;
+  color: ${(props) => props.theme.textDim};
+  font-size: 16px;
+  line-height: 1.6;
+
+  p {
+    margin: 0;
+  }
+
+  p + p {
+    margin-top: 8px;
+  }
+`;
+
+const GameChip = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: ${(props) => props.theme.groupMembers};
+  border: 1px solid ${(props) => props.theme.groupBorder};
+  color: ${(props) => props.theme.text};
+  cursor: pointer;
+  vertical-align: middle;
+  transition: border-color 0.1s;
+
+  &:hover {
+    border-color: ${(props) => props.theme.highlight};
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+  }
+`;
+
+function GameList() {
+  const navigate = useNavigate();
+  return (
+    <>
+      {GAMES.map((g, i) => (
+        <React.Fragment key={g.id}>
+          {i > 0 && " "}
+          <GameChip onClick={() => navigate(`/${g.id}`)}>
+            {g.icon} {g.name}
+          </GameChip>
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+
+const InfoLink = styled.a`
+  color: ${(props) => props.theme.highlight};
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
 
 const OffsetsNote = styled.div`
   font-size: 14px;
@@ -48,7 +119,14 @@ export function ContentList() {
       ) : isSearching ? (
         <TextMessage>No results found</TextMessage>
       ) : (
-        <TextMessage>Choose a class or enum from the sidebar, or use search...</TextMessage>
+        <>
+          <TextMessage>Choose a class or enum from the sidebar, or use search...</TextMessage>
+          <InfoBlock>
+            <p>Source 2 includes a schema system that describes the engine's classes, fields, and enumerations along with their types, offsets, and metadata. These schemas comprehensively map engine internals, making them useful for modding and reverse engineering.</p>
+            <p>Currently tracking: <GameList /></p>
+            <p>The schemas displayed here are generated by <InfoLink href="https://github.com/ValveResourceFormat/DumpSource2">DumpSource2</InfoLink> and automatically updated by <InfoLink href="https://github.com/SteamTracking/GameTracking">GameTracking</InfoLink>. The code for this site is on <InfoLink href="https://github.com/ValveResourceFormat/SchemaExplorer">GitHub</InfoLink>.</p>
+          </InfoBlock>
+        </>
       )}
       {data.length > 0 && <OffsetsNote>Offsets are from Windows build xxx</OffsetsNote>}
     </ContentWrapper>

web/src/components/ElementLink.tsx

@@ -1,10 +1,10 @@
 import styled from "styled-components";
 
 export const ContentWrapper = styled.main`
-  grid-column: 2;
-  grid-row: 2;
+  flex: 1;
   padding: 0 0 0 24px;
   min-width: 0;
+  overflow-y: auto;
 
   @media (max-width: 768px) {
     grid-column: 1;

web/src/components/layout/Content.tsx

@@ -1,47 +1,28 @@
 import React from "react";
 import styled from "styled-components";
-import { NavLink, useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { AppContext } from "~components/AppContext";
-import { SearchBox, SearchInput } from "~components/Search";
-import { SidebarFilterContext } from "~components/layout/SidebarFilterContext";
+import { SearchBox } from "~components/Search";
 import { GAMES, GameId, getGame } from "~games";
 
-export const NavBar = ({ baseUrl, game }: { baseUrl?: string; game?: GameId }) => {
+export const NavBar = ({ baseUrl }: { baseUrl?: string }) => {
   if (!baseUrl) {
     return (
       <NavBarSimple>
-        <HomeBrandLink to="/cs2">Source 2 Schemas</HomeBrandLink>
         <NavBarThemeSwitcher />
       </NavBarSimple>
     );
   }
 
-  return <NavBarWithSearch baseUrl={baseUrl} game={game} />;
-};
-
-function NavBarWithSearch({ baseUrl, game }: { baseUrl: string; game?: GameId }) {
-  const { filter, setFilter } = React.useContext(SidebarFilterContext);
-
   return (
-    <>
-      <NavBarSidebarCell>
-        <SidebarSearchInput
-          placeholder="Filter sidebar..."
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        />
-      </NavBarSidebarCell>
-      <NavBarContentCell>
-        <NavBarSearchBox baseUrl={baseUrl} placeholder="Search... (module: or offset: to filter)" />
-        {game && <GameSwitcher currentGame={game} />}
-        <HomeBrandLink to="/cs2">Source 2 Schemas</HomeBrandLink>
-        <NavBarThemeSwitcher />
-      </NavBarContentCell>
-    </>
+    <NavBarContentCell>
+      <NavBarSearchBox baseUrl={baseUrl} placeholder="Search... (module: or offset: to filter)" />
+      <NavBarThemeSwitcher />
+    </NavBarContentCell>
   );
-}
+};
 
-function GameSwitcher({ currentGame }: { currentGame: GameId }) {
+export function GameSwitcher({ currentGame }: { currentGame: GameId }) {
   const [open, setOpen] = React.useState(false);
   const ref = React.useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
@@ -71,10 +52,10 @@ function GameSwitcher({ currentGame }: { currentGame: GameId }) {
   return (
     <SwitcherWrapper ref={ref}>
       <SwitcherToggle onClick={() => setOpen(!open)} title={currentGameInfo?.name}>
-        <SwitcherIcon>{currentGameInfo?.icon}</SwitcherIcon>
         <SwitcherChevron viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
           <path d="m6 9 6 6 6-6" />
         </SwitcherChevron>
+        <SwitcherIcon>{currentGameInfo?.icon}</SwitcherIcon>
       </SwitcherToggle>
       {open && (
         <SwitcherDropdown>
@@ -120,8 +101,8 @@ const SwitcherIcon = styled.span`
 
   svg {
     display: block;
-    width: 37px;
-    height: 37px;
+    width: 28px;
+    height: 28px;
   }
 `;
 
@@ -132,13 +113,13 @@ const SwitcherChevron = styled.svg`
 const SwitcherDropdown = styled.div`
   position: absolute;
   top: 100%;
-  left: 0;
+  right: 0;
   margin-top: 4px;
   background: ${(props) => props.theme.group};
   border: 1px solid ${(props) => props.theme.groupBorder};
   border-radius: 8px;
   box-shadow: ${(props) => props.theme.groupShadow};
-  z-index: 100;
+  z-index: 200;
   overflow: hidden;
   min-width: 200px;
 `;
@@ -161,44 +142,21 @@ const SwitcherOption = styled.button<{ $active: boolean }>`
   }
 `;
 
-const NavBarCell = styled.div`
-  grid-row: 1;
+const NavBarContentCell = styled.div`
   display: flex;
   align-items: center;
-`;
-
-const NavBarSidebarCell = styled(NavBarCell)`
-  grid-column: 1;
-  padding: 10px 14px;
-  background-color: ${(props) => props.theme.sidebar};
-  position: sticky;
-  top: 0;
-  z-index: 10;
-
-  @media (max-width: 768px) {
-    display: none;
-  }
-`;
-
-const NavBarContentCell = styled(NavBarCell)`
-  grid-column: 2;
   gap: 14px;
   padding: 10px 14px 10px 24px;
   min-width: 0;
+  flex-shrink: 0;
   background-color: ${(props) => props.theme.background};
-  position: sticky;
-  top: 0;
-  z-index: 10;
 
   @media (max-width: 768px) {
     grid-column: 1;
     padding: 10px 14px;
   }
 `;
 
-const SidebarSearchInput = styled(SearchInput)`
-  background: ${(props) => props.theme.background};
-`;
 
 const NavBarSearchBox = styled(SearchBox)`
   flex: 1;
@@ -216,21 +174,6 @@ const NavBarSimple = styled.nav`
   background-color: ${(props) => props.theme.background};
 `;
 
-const HomeBrandLink = styled(NavLink)`
-  font-weight: 600;
-  font-size: 16px;
-  letter-spacing: -0.01em;
-  text-decoration: none;
-  color: ${(props) => props.theme.textDim};
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: color 0.15s;
-
-  &:hover {
-    color: ${(props) => props.theme.text};
-  }
-`;
-
 const ToggleTrack = styled.label<{ $active: boolean }>`
   display: flex;
   align-items: center;
@@ -276,6 +219,30 @@ const ToggleLabelRight = styled(ToggleLabel)`
   right: 5px;
 `;
 
+export function S2VLogo() {
+  return (
+    <svg viewBox="0 0 160 160" width="28" height="28">
+      <circle cx="75.25" cy="72.75" r="64.58" fill="#242a40" />
+      <path
+        fill="#458fff"
+        d="M143.69 21.16q0 1.04-.12 2.04s-4.59 27.94-7.58 45.96c-.5 3.03-1.46 9.4-1.66 10.01v.02a7.06 7.06 0 0 1-9.48 4.27 6.8 6.8 0 0 1-4.18-6.39v-.08c0-.38.21-3.16.22-4.18a48 48 0 0 0-.25-4.82 44 44 0 0 0-1.58-8.09 45.7 45.7 0 0 0-38.68-32.5 47 47 0 0 0-5.07-.29c-.84 0-4.1.21-4.19.19a7 7 0 0 1-1.68-13.74c.46-.14 6.66-1.18 9.68-1.72 18.25-3.24 44.55-7.88 44.55-7.88a17.3 17.3 0 0 1 11.74 2.35 17.4 17.4 0 0 1 8.29 14.83Z"
+      />
+      <path
+        fill="#385283"
+        d="M132.81 87.2q-.22.88-.46 1.75a58 58 0 0 1-3.85 9.98c-.68 1.27-2.45 4.5-3.65 6.42a60 60 0 0 1-10.27 11.84s6.76 18.06 7.05 19.22q.5 1.94.5 4.05a16.6 16.6 0 0 1-16.66 16.61 16.6 16.6 0 0 1-13.92-7.56c-.37-.55-10.13-17.74-10.13-17.74q-4.34.46-8.84.26c-29.95-1.32-54.48-25.23-56.5-55.13a59.2 59.2 0 0 1 20.11-48.78 56 56 0 0 1 8.23-6.05 58 58 0 0 1 16.79-6.97 11.42 11.42 0 0 0 2.33 13.52c-4.7 1.15-12.04 3.47-18.94 10.35-9.78 9.76-16.33 23.06-14.72 38.42 2.35 22.4 20.95 40.03 43.46 40.95l.43.01a45.5 45.5 0 0 0 39.4-20.18c1.43-2.08 4.97-8.87 6.06-13.09l.08-.33a11.4 11.4 0 0 0 13.53 2.45Z"
+      />
+      <path
+        fill="#edf3fc"
+        d="M95.73 68.92q5.22 2.91 7.4 9.5a20 20 0 0 1 .33 11.94 23 23 0 0 1-6.4 10.5 29 29 0 0 1-11.44 6.71A28 28 0 0 1 72 108.65a24 24 0 0 1-11.36-5.05c-2.46-2-4.34-4.73-5.5-6.92a8 8 0 0 1-.79-1.99 7.5 7.5 0 0 1 4.93-8.87 7.3 7.3 0 0 1 7.31 1.74l.11.12c.46.47 1.38 1.88 1.46 2.02a12.4 12.4 0 0 0 5.41 4.72q3.49 1.63 7.91.21c4.42-1.42 5.04-2.47 6.5-4.66a8 8 0 0 0 .91-7.22q-.9-2.77-3.51-3.34c-1.74-.38-10.38-.46-10.94-.46-.45 0-8.67.03-11.77-.26A25 25 0 0 1 52.6 75.3q-5.1-2.91-7.08-9.41a19 19 0 0 1-.02-11.59 23 23 0 0 1 6.41-10.04q4.63-4.35 11.11-6.41c6.48-2.06 8.91-1.83 13.17-1.14a24 24 0 0 1 11.11 4.67 22 22 0 0 1 5.51 6.58 9 9 0 0 1 .82 1.92 7.16 7.16 0 0 1-4.77 8.65c-2.63.84-5.4.11-7.28-1.67l-.11-.12a18 18 0 0 1-1.46-1.96q-1.92-3-5.34-4.54-3.41-1.53-7.74-.16c-4.33 1.37-4.94 2.4-6.39 4.52a7.7 7.7 0 0 0-.98 7.02q.86 2.7 3.42 3.27c1.71.37 10.28.44 10.84.43.45 0 8.64-.05 11.74.23q4.96.45 10.17 3.36Z"
+      />
+      <path
+        fill="#242a40"
+        d="M137.85 33.08c.21.71.26 1.89-.03 2.48a2.3 2.3 0 0 1-1.44 1.23l-14.56 4.05c-4.59.83-6.59-2.59-5.54-5.66s9.05-15.2 9.55-15.77 1.03-1.54.78-2.4a3.8 3.8 0 0 0-2.08-2.54 4.6 4.6 0 0 0-3.33-.2 4.2 4.2 0 0 0-2.64 1.98 6 6 0 0 0-.72 3.12c0 .07.02.84-.02 1.14l-.01.07a3.1 3.1 0 0 1-2.11 2.47c-1.56.45-3.22-.55-3.79-2.25l-.07-.21a11.23 11.23 0 0 1 .16-4.72 10.72 10.72 0 0 1 7.53-7.41q2.76-.8 5.43-.22 2.69.57 4.71 2.38a10 10 0 0 1 2.86 4.59c.62 2.04.64 4.09-.05 5.7s-8.63 12.3-8.45 12.91l10.66-2.94c.79-.23 1.62 0 2.24.55a4 4 0 0 1 .93 1.62Z"
+      />
+    </svg>
+  );
+}
+
 function NavBarThemeSwitcher() {
   const appContext = React.useContext(AppContext);
 

web/src/components/layout/NavBar.tsx

@@ -4,7 +4,6 @@ import styled from "styled-components";
 import { IconKind, KindIcon } from "~components/KindIcon";
 import { Declaration } from "~components/Docs/api";
 import { DeclarationsContext } from "~components/Docs/DeclarationsContext";
-import { NAVBAR_HEIGHT } from "./constants";
 
 const SidebarLink = styled(NavLink)`
   display: flex;
@@ -93,15 +92,13 @@ export const SidebarGroupHeader = styled.div<{ $collapsed: boolean }>`
 
 export const SidebarWrapper = styled.div`
   grid-column: 1;
-  grid-row: 2;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   min-width: 0;
   padding: 6px 8px 4px 10px;
   background-color: ${(props) => props.theme.sidebar};
-  position: sticky;
-  top: ${NAVBAR_HEIGHT}px;
-  height: calc(100dvh - ${NAVBAR_HEIGHT}px);
-  align-self: start;
 
   @media (max-width: 768px) {
     display: none;

web/src/components/layout/Sidebar.tsx

@@ -11,7 +11,7 @@ const AppWrapper = styled.div`
   display: flex;
   flex-flow: column;
   height: 100%;
-  max-width: 1600px;
+  max-width: 1440px;
   margin: 0 auto;
   background-color: ${(props) => props.theme.background};
   color: ${(props) => props.theme.text};