P18 phase 2: IDE shell – one bar, files drawer, stacked workspace

CLAUDE.md

@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## What this is
 
-The glpython IDE: a browser Python IDE for the classroom, deployed to GitHub Pages at the organization's root, https://glpython-edu.github.io/. The repo is `glpython-edu/glpython-edu.github.io` (that name is what makes it the root site); its local clone is `../glpython`. It is only the **shell**: header, file sidebar, language menu, Microsoft sign-in (MSAL redirect flow) and project persistence (local storage, folder/ZIP import, ZIP export, share links). Everything inside the workspace is the `<GlPythonWorkspace>` component from **glpython-editor** (`../glpython-editor`): the Monaco editor, the Pyodide worker, the REPL, the visualizer, the turtle panel. Changes to those belong there, not here.
+The glpython IDE: a browser Python IDE for the classroom, deployed to GitHub Pages at the organization's root, https://glpython-edu.github.io/. The repo is `glpython-edu/glpython-edu.github.io` (that name is what makes it the root site); its local clone is `../glpython`. It is only the **shell**: the top bar (with the workspace's buttons portaled in), the files drawer and the ⋮ menu (README «Layout»), Microsoft sign-in (MSAL redirect flow) and project persistence (local storage, folder/ZIP import, ZIP export, share links). Everything inside the workspace is the `<GlPythonWorkspace>` component from **glpython-editor** (`../glpython-editor`): the Monaco editor, the Pyodide worker, the REPL, the visualizer, the turtle panel. Changes to those belong there, not here.
 
 Sibling repos: `../glpython-editor` (the component, runtime and LiaScript embed; read its CLAUDE.md) and `../glpython-liascript` (the LiaScript macro).
 
@@ -20,7 +20,8 @@ There are no tests. `.github/workflows/ci.yml` runs `npm ci`, the build (tsc cat
 
 ## Layout
 
-- `src/App.tsx` — the shell. It renders `GlPythonWorkspace` and uses glpython-editor's project helpers (`addProjectFile`, `renameProjectFile`, …).
+- `src/App.tsx` — the shell. It renders `GlPythonWorkspace` (stacked layout; its buttons go into the bar through `actionsContainer`, every file is a tab with `closeFileTabs: false`) and uses glpython-editor's project helpers (`addProjectFile`, `renameProjectFile`, …).
+- `src/index.css` — the shell's styles (`ide-*` classes), from glpython-editor's `--glp-*` tokens. glpython-editor's `style.css` still has the old shell's rules (`.app-shell`, `.topbar`, `.sidebar`, …), now unused.
 - `src/i18n.ts` — only the shell's own strings (`ShellStrings`, de/en). The workspace's strings come from glpython-editor's `coreStrings`, so don't copy them here. A new workspace string goes into glpython-editor's `src/i18n.ts`.
 - `src/projectStorage.ts` (local storage, folder/ZIP) and `src/projectShare.ts` (`?project=` share links, lz-string, versioned payload).
 - `src/auth.ts` — MSAL. Only active with `VITE_ENTRA_CLIENT_ID` in `.env.local` (README «Microsoft sign-in»).

README.md

@@ -2,8 +2,8 @@
 
 A browser-based educational Python IDE with Microsoft 365 and OneDrive integration.
 
-This repository is the **shell application**: the classroom chrome (header, file
-sidebar, lesson header, auth, project persistence) that embeds the reusable
+This repository is the **shell application**: the classroom chrome (top bar,
+files drawer, menu, auth, project persistence) that embeds the reusable
 editor/visualizer/graphics core from
 [glpython-editor](https://github.com/glpython-edu/glpython-editor) via the
 `<GlPythonWorkspace>` component. The split exists so the editor, Python
@@ -13,9 +13,29 @@ in other contexts beyond this classroom shell.
 - **glpython-editor** owns: the Monaco-based code editor, the Pyodide Web
   Worker and its `input()`/`gturtle` runtime, the step-by-step execution
   visualizer, and the turtle graphics canvas.
-- **glpython** (this repo) owns: the overall page layout, the file
-  sidebar and lesson metadata, language switching, Microsoft sign-in, and
-  project persistence (local storage, ZIP/folder import-export, URL sharing).
+- **glpython** (this repo) owns: the overall page layout, the files drawer,
+  language switching, Microsoft sign-in, and project persistence (local
+  storage, ZIP/folder import-export, URL sharing).
+
+## Layout
+
+The IDE looks like the LiaScript embed, only larger:
+
+- **One bar on top:** the logo, the workspace's own buttons in the embed's
+  order and labels (**▶ Ausführen · Tests · Visualisieren**; ■ Stoppen in
+  place of ▶ while Python is busy), and on the right **Teilen** and **⋮**
+  (Python neu starten, open a folder or a ZIP project, download, language, and
+  under development tools: delete the local project, with a confirmation).
+  There is no Zurücksetzen in the bar: ▶ already starts with a fresh namespace
+  and an empty console, ■ stops a hung program, and «Python neu starten» (a new
+  workspace, as the embed's Reset; the code stays) is in ⋮.
+- **Left edge:** **Dateien** (a drawer over the editor: the project name, its
+  files, new, rename, delete) and **Python-Referenz**, labelled in their
+  tooltips. Every file is also a tab above the editor.
+- **Below:** the workspace in its stacked layout (editor on top, console
+  below, a draggable divider; graphics beside the editor only while a program
+  draws; the visualizer in place of the editor). See glpython-editor's README.
+- The runtime's status shows only while it loads or failed; no footer.
 
 ## Run locally
 
@@ -42,22 +62,23 @@ committing, and run `npm install` again to restore the published dependency.
 
 ## Language
 
-The interface language can be changed from the language menu in the header,
-which shows the currently active language and lists all available options in
-a dropdown. On first load, the language is auto-detected from the browser's
+The interface language can be changed in the ⋮ menu, which marks the active
+language. On first load, the language is auto-detected from the browser's
 language settings and then remembered per browser via local storage.
 
 ## Project persistence
 
 The current project is saved automatically in browser local storage. The
-header supports:
-
-- **Open folder** in browsers with the File System Access API
-- **Open ZIP** in all modern browsers with file upload support
-- **Download ZIP** with all project files and `glpython.json` metadata
-- **Share project**, which serializes the entire project structure (files,
-  contents, and metadata) into a compressed URL fragment so a project can be
-  shared or reopened without a server, similar to
+⋮ menu and the bar support:
+
+- **Ordner öffnen** in browsers with the File System Access API
+- **Projekt öffnen** (a ZIP) in all modern browsers with file upload support
+- **Projekt herunterladen** as a ZIP with all project files and `glpython.json`
+  metadata
+- **Teilen**, which serializes the entire project structure (files, contents,
+  and metadata) into a compressed link (`?project=`, or `#project=` beyond
+  GitHub Pages' URL limit) so a project can be shared or reopened without a
+  server, similar to
   [webtigerpython.ethz.ch](https://webtigerpython.ethz.ch/)
 
 ZIP projects preserve relative paths, the project name, and the configured

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@azure/msal-browser": "^5.22.0",
-    "glpython-editor": "git+https://github.com/glpython-edu/glpython-editor.git#v0.1.9",
+    "glpython-editor": "git+https://github.com/glpython-edu/glpython-editor.git#v0.1.11",
     "jszip": "^3.10.2",
     "lucide-react": "^1.47.0",
     "lz-string": "^1.5.0",