The topbar is icons only: the leading Project dropdown, the Scene picker and the labelled Play/Pause buttons are gone and in their place stand five icon buttons - menu, undo, redo on the left, play and pause in the middle - while Notice, the save state, fps and the Account menu keep the right side; the Play button swaps its icon for a stop square while the project runs and Pause swaps for a second play sign while it is held (Button.setIcon()), and iconSpace() drops the gap between icon and label when a button has no label, which is what kept a 24 px icon button 3 px off its own centre; the menu carries New project, Open project..., a separator and Project settings..., where the picker (src/editor/OpenProjectDialog.ts) preselects the open project and marks it "open", opens on a double click and puts Delete on the left of Cancel and Open - it closes itself before it asks whether to delete, because two modals on top of each other would have left the question standing over a list it no longer speaks about - and the settings dialog (src/editor/ProjectSettingsDialog.ts) holds the name, the "Play starts" switch (Start scene / Active scene, a preference of this browser and so no command) and the collision layers from #152, which retires CollisionLayersDialog.ts and the "Collision layers..." entry; what Apply actually writes is the pure function settingsChanges(), so renaming and the layers are each their own undo step and each drop out when nothing differs; the Scene dropdown falls away without replacement, the active scene is switched by double clicking it in the Assets panel, which is the way that was there anyway; new module 46 runs last with 9 checks (no label left in the bar, the run buttons in edit mode, the four menu entries, the picker with the open project preselected, Cancel leaving the project standing, the settings dialog on the state of the project, renaming with undo and redo through the icon buttons) and it neither opens nor deletes a project, because that would pull the project out from under every earlier module; modules 8, 18 and 35 and the harness follow the new bar, 6 unit tests cover settingsChanges and 3 the icons (#183)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/editor/OpenProjectDialog.ts

@@ -0,0 +1,91 @@
+import { Button, HStack, Label, ListView, Popup, ScrollContainer, Spacer, Theme } from '../ui';
+
+/** One project as the list shows it. */
+export interface ProjectChoice {
+  id: string;
+  name: string;
+}
+
+const LIST_WIDTH = 320;
+const LIST_HEIGHT = 220;
+
+/**
+ * The project picker behind "Open project…" (#183): the list the top bar's Project dropdown used
+ * to be, now a dialog, because it has two things to do with a project rather than one.
+ *
+ * Delete closes this dialog and hands the choice on; the caller asks for confirmation. Two modals
+ * stacked over one another would leave the question standing over a list it is no longer about.
+ */
+export class OpenProjectDialog extends Popup {
+  private readonly list = new ListView();
+  private readonly scroll = new ScrollContainer();
+  private readonly openButton: Button;
+  private readonly deleteButton: Button;
+  private picked: string | null;
+  private readonly names: string[];
+
+  constructor(
+    projects: readonly ProjectChoice[],
+    currentId: string,
+    actions: { onOpen(id: string): void; onDelete(id: string): void },
+  ) {
+    super({ modal: true, padding: Theme.padding * 2, gap: Theme.gap });
+    this.picked = projects.some((p) => p.id === currentId) ? currentId : (projects[0]?.id ?? null);
+    this.names = projects.map((p) => p.name);
+
+    this.content.add(new Label('Open project', { style: 'bodyBold' }));
+    this.list.minWidth = LIST_WIDTH;
+    this.list.setItems(
+      projects.map((p) => ({
+        id: p.id,
+        label: p.name,
+        hint: p.id === currentId ? 'open' : undefined,
+      })),
+    );
+    this.list.select(this.picked, true);
+    this.list.onSelect = (id) => {
+      this.picked = id;
+      this.refresh();
+    };
+    // A double click is how an asset is opened everywhere else in the editor, so it is here too.
+    this.list.onActivate = (id) => this.closeThen(() => actions.onOpen(id))();
+    this.scroll.minWidth = LIST_WIDTH;
+    this.scroll.minHeight = LIST_HEIGHT;
+    this.scroll.setContent(this.list);
+    this.content.add(this.scroll);
+
+    const buttons = new HStack({ gap: Theme.gap, align: 'center' });
+    this.deleteButton = new Button('Delete', { variant: 'danger' });
+    this.deleteButton.onClick = () => this.withPicked(actions.onDelete);
+    buttons.add(this.deleteButton);
+    buttons.add(new Spacer(), 1);
+    const cancel = new Button('Cancel');
+    cancel.onClick = this.closeThen();
+    buttons.add(cancel);
+    this.openButton = new Button('Open', { variant: 'primary' });
+    this.openButton.onClick = () => this.withPicked(actions.onOpen);
+    buttons.add(this.openButton);
+    this.content.add(buttons);
+    this.refresh();
+  }
+
+  /** What the list shows and which row is picked (test hook). */
+  info(): { names: string[]; picked: string | null } {
+    return { names: [...this.names], picked: this.picked };
+  }
+
+  /** Global centre of a row, so a check can click it. */
+  rowPosition(id: string): { x: number; y: number } | null {
+    return this.list.rowGlobal(id);
+  }
+
+  private withPicked(action: (id: string) => void): void {
+    const id = this.picked;
+    if (id) this.closeThen(() => action(id))();
+  }
+
+  private refresh(): void {
+    this.openButton.setEnabled(this.picked !== null);
+    this.deleteButton.setEnabled(this.picked !== null);
+  }
+}