From 3ba4f464471a35e18f351dadc61255b2c95fd750 Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sat, 7 Mar 2026 17:59:16 +0200 Subject: [PATCH 1/2] Delete dead code (components.tsx sidenav) --- app/components/Main.tsx | 1 - .../components-showcase/routes/components.tsx | 68 +------------------ 2 files changed, 2 insertions(+), 67 deletions(-) diff --git a/app/components/Main.tsx b/app/components/Main.tsx index aafb94aac..d17b134bb 100644 --- a/app/components/Main.tsx +++ b/app/components/Main.tsx @@ -18,7 +18,6 @@ export const Main = ({ halfWidth?: boolean; bigger?: boolean; style?: React.CSSProperties; - sideNav?: React.ReactNode; }) => { const error = useRouteError(); const isMinorSupporter = useHasRole("MINOR_SUPPORT"); diff --git a/app/features/components-showcase/routes/components.tsx b/app/features/components-showcase/routes/components.tsx index 7231e46e1..85b7bb1b5 100644 --- a/app/features/components-showcase/routes/components.tsx +++ b/app/features/components-showcase/routes/components.tsx @@ -1,6 +1,6 @@ import { parseDate } from "@internationalized/date"; import { Check, Plus, Search, SquarePen, Trash } from "lucide-react"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { Ability } from "~/components/Ability"; import { AddNewButton } from "~/components/AddNewButton"; import { Alert } from "~/components/Alert"; @@ -41,7 +41,6 @@ import { Pagination } from "~/components/Pagination"; import { Placement } from "~/components/Placement"; import { RelativeTime } from "~/components/RelativeTime"; import { Section } from "~/components/Section"; -import { ListLink, SideNav } from "~/components/SideNav"; import { StageSelect } from "~/components/StageSelect"; import { SubmitButton } from "~/components/SubmitButton"; import { SubNav, SubNavLink } from "~/components/SubNav"; @@ -99,7 +98,7 @@ export const SECTIONS = [ export default function ComponentsShowcasePage() { return ( -
}> +

Components

{SECTIONS.map(({ id, component: Component }) => ( @@ -108,69 +107,6 @@ export default function ComponentsShowcasePage() { ); } -function ComponentsSideNav() { - const [activeSection, setActiveSection] = useState(null); - - useEffect(() => { - const sectionIds = SECTIONS.map((s) => s.id); - const elements = sectionIds - .map((id) => document.getElementById(id)) - .filter(Boolean) as HTMLElement[]; - - const observer = new IntersectionObserver( - (entries) => { - const visibleEntries = entries.filter((entry) => entry.isIntersecting); - - if (visibleEntries.length > 0) { - const topMostEntry = visibleEntries.reduce((prev, curr) => - prev.boundingClientRect.top < curr.boundingClientRect.top - ? prev - : curr, - ); - - setActiveSection(topMostEntry.target.id); - } - }, - { rootMargin: "-10% 0px -80% 0px", threshold: 0 }, - ); - - for (const element of elements) { - observer.observe(element); - } - - return () => observer.disconnect(); - }, []); - - const handleClick = ( - event: React.MouseEvent, - id: string, - ) => { - event.preventDefault(); - const element = document.getElementById(id); - - if (element) { - element.scrollIntoView({ behavior: "instant" }); - window.history.replaceState(null, "", `#${id}`); - setActiveSection(id); - } - }; - - return ( - - {SECTIONS.map(({ title, id }) => ( - handleClick(e, id)} - isActive={activeSection === id} - > - {title} - - ))} - - ); -} - function SectionTitle({ id, children, From 543c5f4b2a2cbaa528ed6f77fb7e59b1cd53d2e6 Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sat, 7 Mar 2026 18:07:39 +0200 Subject: [PATCH 2/2] Small tweak to site logo CSS --- app/components/layout/index.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css index d8ace9a88..84c7bfd25 100644 --- a/app/components/layout/index.module.css +++ b/app/components/layout/index.module.css @@ -60,7 +60,7 @@ } .siteLogoS { - font-size: 15px; + font-size: 14px; position: relative; top: -4px; } @@ -68,7 +68,7 @@ .siteLogoInk { font-size: 12px; position: relative; - top: 5px; + bottom: -4px; } .siteLogo:focus-visible {