Skip to content

The webtop (Desktop theme)

Imaginook's Desktop theme is a full in-browser window manager — a little Windows-95-style desktop for the console. It's one of three themes (Light, Dark, Desktop); switch any time from the theme toggle in the top bar. Light and Dark render the console as ordinary document pages, unchanged.

What it does

  • Windows. Apps open in real windows: drag them by the title bar, resize from any edge or corner, maximize (double-click the title bar or the □ control), minimize, and close. Windows are stacked by z-index and focus on click. Open windows persist as you move between pages (the window layer lives in a persistent root, so an Inertia navigation never tears them down).
  • Taskbar. The charcoal footer shows a button per open window — click to focus or minimize, exactly like a classic taskbar.
  • Start menu. The Start lozenge lists your apps and, under the Desktop theme, a "programs" group (Help, About) that open as windows.
  • Desktop surface. Shortcut icons on the wallpaper: double-click (or Enter) to open, single-click to select, drag to rearrange (icons snap to a grid and the layout is remembered), and marquee-drag to select several. Right-click the wallpaper or an icon for a context menu (Refresh, Line up icons, Open, …). The context menu is keyboard-reachable with the ContextMenu key / Shift+F10.
  • Apps in windows. My Computer (your sites), the File Manager, the Studio editor, the Control Panel, Help and About all run as windowed apps. Opening a site from My Computer or a desktop icon opens its File Manager in a window; a file's "edit" opens the Studio in a window.

The focused window is reflected in the URL hash for the singleton apps, e.g. …/dashboard#app=about. Visiting such a link opens that window, and the browser back button behaves sanely. The File Manager / Studio windows carry a specific site in their state and aren't reflected in the hash.

Mobile

Below the sm breakpoint the desktop surface is hidden and windows render full-screen, one app at a time; the taskbar becomes the app switcher. Tiny draggable frames aren't used on touch.

Accessibility & escape hatch

Windows are role="dialog"; the context menu and Start menu are keyboard operable; icons open with Enter/Space. If the desktop metaphor isn't wanted, Light or Dark are always one click away in the theme toggle — the console is fully usable as plain document pages.

Persistence

  • The chosen theme is stored in an unencrypted first-party theme cookie (so the pre-paint script can avoid a flash) and, when signed in, on the account.
  • Open windows and the desktop icon arrangement are remembered per browser in localStorage (imaginook.webtop.v1, imaginook.desktop.layout.v1). Poisoned or stale entries are validated/clamped on load, never trusted verbatim.

Notes for operators

  • The webtop is currently an opt-in theme. Making it the default console experience (light/dark as escape hatches) is tracked for launch — it needs an auth-aware default that leaves the public www origin neutral and keeps the no-flash pre-paint script in sync.
  • A windowed Studio's live preview iframe is same-origin in dev; in production (cross-origin site host) it's blocked by the console CSP until the deploy/CSP work lands. Tracked separately.

AGPL-3.0 · built in the open.