diff --git a/help/guide/custom-library.md b/help/guide/custom-library.md index 3169d2dd..1761846b 100644 --- a/help/guide/custom-library.md +++ b/help/guide/custom-library.md @@ -12,7 +12,7 @@ For example: https://andeplane.github.io/atomify/?examplesUrl=https%3A%2F%2Fyou.github.io%2Fphysics101%2Fexamples.json ``` -The **Example library**, the sidebar's **Examples** list, the examples on Home and **Quick-run an example** then use that library, and the library's `title` becomes the heading. The parameter stays in the address as you move around the app, so the link can be bookmarked and shared. +The **Example library**, the examples on Home and **Quick-run an example** then use that library, and the library's `title` becomes the heading. The parameter stays in the address as you move around the app, so the link can be bookmarked and shared. ## Requirements diff --git a/help/guide/examples.md b/help/guide/examples.md index 752d3246..c32ac8b8 100644 --- a/help/guide/examples.md +++ b/help/guide/examples.md @@ -5,8 +5,7 @@ Atomify comes with more than 50 ready-to-run examples, from simple Lennard-Jones ## Find examples - **Example library** in the sidebar shows every example as a card with a picture and description. -- The sidebar's **Examples** list shows every example by name. -- Home shows four of them under **Start from an example**. +- Home shows up to 16 of them (a 4×4 grid) under **Start from an example**. - **New project → From example** has a search box that filters by title, description and keyword. ![The Example library](/screenshots/example-library.webp) diff --git a/help/guide/projects.md b/help/guide/projects.md index 0114f800..24eff66d 100644 --- a/help/guide/projects.md +++ b/help/guide/projects.md @@ -27,7 +27,7 @@ The folder name is the project name in lowercase, with accents removed and anyth ### Other ways to start a project -- **Use as project** on any example (Home, Example library, or click an example in the sidebar's **Examples** list). +- **Use as project** on any example (Home or the Example library). - **Save as project** on a [quick run](/guide/quick-runs). ## Open a project diff --git a/help/guide/quick-runs.md b/help/guide/quick-runs.md index 4e453855..10a53e67 100644 --- a/help/guide/quick-runs.md +++ b/help/guide/quick-runs.md @@ -8,7 +8,6 @@ Any of these: - **Quick-run an example** on Home (runs the first example in the library). - The ▶ button on an example card on Home or in the **Example library**. -- The ▶ button next to an example in the sidebar's **Examples** list. The buttons are disabled until the engine has loaded. diff --git a/help/reference/bundled-examples.md b/help/reference/bundled-examples.md index cb6f5206..c3785f0b 100644 --- a/help/reference/bundled-examples.md +++ b/help/reference/bundled-examples.md @@ -8,7 +8,7 @@ import { data as examples } from "./examples.data"; # Bundled examples -Atomify ships with {{ examples.length }} examples. Open any of them from the **Example library**, the sidebar's **Examples** list, or **New project → From example**. This table is generated from the app's own example list, so it is always current. +Atomify ships with {{ examples.length }} examples. Open any of them from the **Example library**, Home, or **New project → From example**. This table is generated from the app's own example list, so it is always current. - **Multithreaded**: the script uses `suffix kk` and runs on 4 threads ([Multithreading](/guide/multithreading)). - **Notebook**: the example ships its own analysis notebook. diff --git a/help/tutorials/example-library.md b/help/tutorials/example-library.md index 16b34655..d9cba44f 100644 --- a/help/tutorials/example-library.md +++ b/help/tutorials/example-library.md @@ -62,7 +62,7 @@ Add `?examplesUrl=` and the address of your `examples.json` to the Atomify link. https://andeplane.github.io/atomify/?examplesUrl=https%3A%2F%2Fyou.github.io%2Fphysics101%2Fexamples.json ``` -Open it. The **Example library** now shows your examples under your title, the sidebar's **Examples** list shows them too, and **Quick-run an example** on Home runs your first one. +Open it. The **Example library** now shows your examples under your title, Home shows them under **Start from an example**, and **Quick-run an example** on Home runs your first one. ## 5. Share the link 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) => ( ))}
diff --git a/src/shell/Shell.test.tsx b/src/shell/Shell.test.tsx index 9f8493e2..35365f4b 100644 --- a/src/shell/Shell.test.tsx +++ b/src/shell/Shell.test.tsx @@ -199,35 +199,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 aa61b31b..6fd0f9a5 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, HelpIcon, HomeIcon, @@ -30,7 +28,6 @@ import { import { HELP_URL } from "./helpUrl"; 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"; @@ -91,102 +88,6 @@ const sectionLabelStyle: CSSProperties = { 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 ( -
- - -
- ); -}; /** * A NavButton look-alike that is a real link, so it opens in a new tab and * middle-click / "copy link" work as users expect. @@ -239,7 +140,6 @@ const Sidebar = () => { ); const ui = useShellUI(); const [aboutOpen, setAboutOpen] = useState(false); - const examples = ui.examples.examples; const [collapsed, setCollapsed] = useState(() => { try { @@ -248,8 +148,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; @@ -361,11 +259,10 @@ const Sidebar = () => { flexDirection: "column", }} > - {/* Nav + projects: natural height, scrolls only when space is tight. */}
{ )}
- - {showExamples && ( -
-
- Examples -
-
- {examples.map((example) => ( - - ))} - {examples.length === 0 && ui.examples.loading && ( - - Loading examples… - - )} -
-
- )} {!ui.engineReady && (