From 49ec6e3b4481512a6f99a5196a717a7be96aad29 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 1 Nov 2026 07:15:59 +0000 Subject: [PATCH 1/2] Revert "Show all examples in a scrollable sidebar list (#473)" This reverts commit d827f90a6501fe661ad057742d198145ed65cb2c, reversing changes made to a9d83b73201f9721c0841bef65bb5aa274d37426. --- src/shell/Shell.test.tsx | 29 --- src/shell/Sidebar.tsx | 394 ++++++++++++--------------------------- 2 files changed, 119 insertions(+), 304 deletions(-) diff --git a/src/shell/Shell.test.tsx b/src/shell/Shell.test.tsx index 65cadb5e..06b40cb0 100644 --- a/src/shell/Shell.test.tsx +++ b/src/shell/Shell.test.tsx @@ -185,35 +185,6 @@ describe("Shell", () => { ); }); - it("lists examples in the sidebar below the projects", async () => { - renderShell(); - - const row = await screen.findByTestId("sidebar-example-diffusion"); - expect(screen.getByTestId("sidebar-examples-list")).toContainElement(row); - expect(row).toHaveTextContent("Diffusion"); - // Projects come first, examples below. - expect( - screen - .getByTestId("sidebar-projects-section") - .compareDocumentPosition(screen.getByTestId("sidebar-examples")) & - Node.DOCUMENT_POSITION_FOLLOWING, - ).toBeTruthy(); - // Quick run waits for the engine, which never loads in these tests. - expect( - screen.getByTestId("sidebar-example-quick-diffusion"), - ).toBeDisabled(); - - await userEvent.click(screen.getByTestId("sidebar-example-use-diffusion")); - expect(screen.getByTestId("new-project-modal")).toBeInTheDocument(); - }); - - it("hides the sidebar examples list when collapsed", async () => { - renderShell(); - await screen.findByTestId("sidebar-example-diffusion"); - await userEvent.click(screen.getByTestId("sidebar-collapse")); - expect(screen.queryByTestId("sidebar-examples")).not.toBeInTheDocument(); - }); - it("creates a blank project from the modal and opens its workspace", async () => { renderShell(); diff --git a/src/shell/Sidebar.tsx b/src/shell/Sidebar.tsx index 08a67b3b..5d954c74 100644 --- a/src/shell/Sidebar.tsx +++ b/src/shell/Sidebar.tsx @@ -1,7 +1,6 @@ /** * Global sidebar (ADR-003 §2): Home, Example library, the PROJECTS list with - * color dots + running pulse, New project, a scrollable EXAMPLES list (click - * to use as a project, play to quick-run), and a footer with the theme + * color dots + running pulse, New project, and a footer with the theme * toggle, Settings, and the engine-loading chip (loading never blocks * browsing — ADR-003 §6). Collapsible to a narrow icon rail (persisted) so * the simulation gets the horizontal room. @@ -17,7 +16,6 @@ import { AtomLogo, ChevronRightIcon, CompassIcon, - PlayIcon, GridIcon, HomeIcon, InfoIcon, @@ -28,7 +26,6 @@ import { } from "./icons"; import AboutModal, { AUTHOR_NAME, AUTHOR_URL } from "./modals/AboutModal"; import { ColorDot, PulseDot } from "./ui"; -import type { Example } from "../hooks/useExamples"; /** Persisted collapse choice — the rail should survive reloads. */ const SIDEBAR_COLLAPSED_KEY = "atomify_sidebar_collapsed"; @@ -81,111 +78,6 @@ const NavButton = ({ ); -const sectionLabelStyle: CSSProperties = { - fontSize: 11, - fontWeight: 700, - textTransform: "uppercase", - letterSpacing: "0.07em", - color: "var(--text-3)", -}; - -/** - * One row of the sidebar examples list: thumbnail + title opens the - * "use as project" flow; the play button quick-runs it. - */ -const SidebarExample = ({ example }: { example: Example }) => { - const ui = useShellUI(); - return ( -
- - -
- ); -}; - const Sidebar = () => { const screen = useStoreState((state) => state.projects.screen); const projects = useStoreState((state) => state.projects.projects); @@ -204,7 +96,6 @@ const Sidebar = () => { ); const ui = useShellUI(); const [aboutOpen, setAboutOpen] = useState(false); - const examples = ui.examples.examples; const [collapsed, setCollapsed] = useState(() => { try { @@ -213,8 +104,6 @@ const Sidebar = () => { return false; } }); - // The icon rail has no room for a list; "Example library" still links there. - const showExamples = !collapsed; const toggleCollapsed = () => setCollapsed((previous) => { const next = !previous; @@ -321,198 +210,153 @@ const Sidebar = () => { From 1bd15e14bc5a5dd735016dadbbbe499a37f4c99e Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 1 Nov 2026 07:17:51 +0000 Subject: [PATCH 2/2] Show a 4x4 grid of examples on the Home page Home only showed four examples, leaving the page half empty. Show up to 16; the Example library still lists them all. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01E2eZ9wWtnyAnPdiFQNLgEB --- src/shell/HomeScreen.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/shell/HomeScreen.tsx b/src/shell/HomeScreen.tsx index baddedcd..b8fd96f0 100644 --- a/src/shell/HomeScreen.tsx +++ b/src/shell/HomeScreen.tsx @@ -18,6 +18,9 @@ import { PlayIcon, PlusIcon } from "./icons"; export const LAST_PROJECT_KEY = "atomify_last_project"; +/** Home shows a 4×4 grid of examples; the library has the rest. */ +const HOME_EXAMPLE_COUNT = 16; + const HomeScreen = () => { const projects = useStoreState((state) => state.projects.projects); const activeRun = useStoreState((state) => state.projects.activeRun); @@ -339,13 +342,14 @@ const HomeScreen = () => {
- {ui.examples.examples.slice(0, 4).map((example) => ( + {ui.examples.examples.slice(0, HOME_EXAMPLE_COUNT).map((example) => ( ))}