Desktop & Window Manager

The Niuton desktop provides a full windowing environment in the browser, inspired by macOS and GNOME.

Window Manager

Every app opens in a managed window with:

• Drag — Click and drag the title bar to move
• Resize — Drag any edge or corner
• Minimize — Click the yellow button or dock icon
• Maximize — Click the green button or double-click title bar
• Close — Click the red button
• Z-ordering — Click a window to bring it to front
• Cascade — New windows open at 12 staggered positions to prevent overlap v3.12

Keyboard Shortcuts

Shortcut	Action
Click dock icon	Open / focus / minimize app
Double-click title bar	Toggle maximize
Ctrl+K	Omnibar oeffnen (Suche + Rechner)
Ctrl+Shift+3	Screenshot: Full desktop
Ctrl+Shift+4	Screenshot: Region selection
Ctrl+Shift+5	Screenshot: Open toolbar

Dock

The dock defaults to the bottom of the screen and can be repositioned to the left or right via Settings > Darstellung > Dock Position. It contains:

1. System apps — Notes, Files, Terminal, Settings, Rechner, Kalender, etc.
2. Custom apps — User-created apps via App Builder
3. Separator — Visual divider
4. Trash — Drag apps here to trash them

Apps can be rearranged and the dock updates dynamically when apps are installed or removed.

Protected Apps

The following apps cannot be trashed: notes, files, settings, terminal, finanzen, dokumente, app-builder, team-chat, chess, rechner, kontakte, kalender, aufgaben, wetter, zeichnen

v4.1

pdf-viewer, sprachmemos und bildschirmfoto wurden in die Desktop-Shell konsolidiert und als separate Apps deaktiviert.

Dock Pin System v3.9.1

Apps can be pinned and unpinned from the dock:

• Pin to Dock — Right-click any app icon on the desktop grid or in Activities > "An Dock anheften"
• Unpin from Dock — Right-click a dock icon > "Vom Dock entfernen"
• Reorder — Drag dock icons to rearrange them
• Drag & Drop — Drag apps from the desktop grid into the dock, or from the dock back to the desktop
• Running apps — Apps that are running but not pinned appear as temporary items with a subtle dot indicator

Dock configuration is persisted per user in preferences.dock_apps (array of app slugs). The server-rendered dock respects this preference to avoid visual flashing on page load.

Desktop Grid Customization v3.9.1

Apps can also be removed from the desktop grid:

• Remove from Desktop — Right-click > "Vom Desktop entfernen"
• Add to Desktop — In Activities, right-click > "An Desktop anheften"

Removed apps remain accessible through Activities and can be re-added at any time. Desktop layout is persisted in preferences.desktop_apps.

Activities Overview v3.9.1

Press the Activities button (top-left) to open a full-screen overlay with:

• Open Windows — Horizontal scrollable row showing live previews (scaled-down iframe snapshots) of all open windows. Click to focus, X to close.
• All Apps Grid — Complete grid of every installed app, regardless of dock/desktop pin status
• Search — Filter apps by name
• Context Menu — Right-click apps to pin/unpin to dock or desktop

Activities always shows every app, making it the central place to find and launch anything.

Wallpaper v3.9.1

Change the desktop wallpaper through Settings > Darstellung. Options:

• Built-in Gradients — 9 gradient wallpapers (Cosmic, Ocean, Aurora, Sunset, Midnight, Nebula, Forest, Rose, Arctic), each with light and dark variants
• Custom Images — Upload JPG, PNG, WebP, GIF (max 5 per user)
• Bing Daily Images — Browse 8 curated daily landscape images from Bing, click to apply
• Random Daily Wallpaper — Enable the "Taeglich zufaelliges Hintergrundbild" checkbox to automatically set a new Bing image each day

The Bing wallpaper API (/api/wallpapers.php?action=bing_daily) caches results for 6 hours in /tmp/. Error handling was improved in v3.12 for more robust fallback when the Bing API is unavailable.

Light Mode v3.9.1

Niuton supports a full light mode, switchable in Settings > Darstellung > Erscheinungsbild.

Desktop Shell

The light theme overrides all desktop shell components: top panel, dock, context menus, search overlay, modals, Activities, window titlebars, Alt-Tab switcher, toast notifications, chat panel, Aurora orb, cloud sidebar, file picker, widget toolbar, view toggle, and MOTD banner. All use frosted glass styling with light backgrounds and dark text.

App Iframes

Every app iframe receives the light theme via injected CSS (/assets/css/niuton-light.css, ~2500 lines). This file overrides:

• CSS custom properties (apps using --variables)
• Universal structural classes (.sidebar, .toolbar, .modal, inputs, buttons, tables)
• App-specific selectors for all 23 apps with comprehensive coverage
• Inline style attribute overrides for hardcoded dark colors
• Preserved accent/semantic colors adjusted for light backgrounds

v3.11 Light Mode Expansion v3.11

Five apps received comprehensive light mode overrides (previously had minimal or no coverage):

• Karten — Sidebar, search, map controls, Leaflet zoom/attribution, popups. Auto-switches from dark CartoDB tiles to OSM tiles via MutationObserver.
• Dateien — App header, toolbar buttons, breadcrumbs, editor toolbar/preview, context/sort menus
• Dokumente — ID-based selectors for sidebar, content header, editor toolbar, revision modals
• Team Chat — Rooms sidebar, DM section, messages area, member panel, context menus, typing indicator, Aurora processing
• App Builder — CSS variable overrides, preview area, floating toolbar/chat, editor panel, quick-fix bar, template cards

The terminal app intentionally stays dark in both modes (welcome/system text brightened to #a0dbb8 for readability).

Live Preview

Changing the theme dropdown in Settings immediately previews the change on the desktop via postMessage — no save required.

Pastel Wallpapers

Each gradient wallpaper has a light-mode variant using pastel colors.

Topbar-Popovers v4.1

Ab v4.1 sind 7 Apps als Popovers und Inline-Funktionen direkt in die Desktop-Shell integriert:

Element	Ausloeser	Funktion
Kalender	Klick auf Uhrzeit	Mini-Kalender mit Monatsgitter + Tages-Agenda
Wetter	Klick auf Wetter-Icon/Temperatur	Aktuelle Bedingungen + 3-Tage-Vorhersage
Aufgaben	Klick auf Aufgaben-Badge	"Mein Tag" mit Quick-Add
Rechner	= 2+3 in Omnibar (Ctrl+K)	Inline-Ergebnis in der Suchliste
PDF Viewer	PDF in Dateien anklicken	Split-View in der Dateien-App
Bildschirmfoto	Ctrl+Shift+3/4/5	Toast mit Vorschau (kein App-Fenster)
Sprachmemos	Klick auf Mikrofon in Topbar	Aufnahme-Popover

3 Apps wurden als separate Fenster deaktiviert: pdf-viewer, bildschirmfoto, sprachmemos.

Siehe Topbar-Popovers fuer Details.

Aurora Orb

The Aurora AI assistant is always available via the floating orb in the bottom-right corner. Click it to open a split-view chat panel. The orb pulses when Aurora is processing.

Aurora in Chat v3.11

Enable "Aurora in Chat" via right-click on the Aurora orb. When enabled, Aurora appears as the first item in the ChatPanel. Click it to open a conversation powered by the /api/assistant.php endpoint — conversation history is maintained within the session.

ChatPanel v3.11

The ChatPanel (bottom-right chat button, or Ctrl+M / Cmd+M) provides quick access to Aurora conversations, Team Chat DMs, and rooms without opening the full app.

Multiple Aurora Conversations

Create unlimited Aurora conversations via the + button in the AURORA section. Each conversation is independent with its own history, stored in localStorage. Features:

• Markdown rendering — All messages render via marked.js with XSS sanitization (script/style/iframe stripped, event handlers blocked)
• Thinking toggle — Enable "Denken" to activate Auto-Thinking (thinking: -1). Thinking output appears in a collapsible <details> block
• Timestamps — Relative timestamps on every message ("19:15", "Gestern", "Fr 23:48", "17.02. 19:54")
• Message grouping — Consecutive messages from the same sender within 5 minutes share a single name label
• Aurora avatar — Gradient purple circle next to all Aurora messages in the conversation view
• Typing indicator — Animated 3-dot bounce (iMessage-style) while waiting for Aurora's response
• Delete confirmation — confirm() dialog before deleting a conversation
• Preview text — Overview strips markdown syntax for clean previews

v3.12 ChatPanel Updates v3.12

• Typing-Indicator — ChatPanel sendet Typing-Events an den Team Chat Server (3s Throttle)
• "In Team Chat oeffnen" — Button zum Wechsel in die volle Team Chat App mit aktivem Raum
• Aurora Conversations Sync — localStorage storage-Event synchronisiert Unterhaltungen zwischen Browser-Tabs
• Unread Badge Sync — niuton-unread-changed PostMessage fuer sofortige Badge-Updates (statt 30s Polling)
• Lazy Unread-Polling — Polling startet erst beim ersten Oeffnen des Panels
• SSE Memory Leak Fix — _sseFails-Counter wird korrekt zurueckgesetzt

Popup & Window Mode

Mode	Trigger	Size	Behavior
Popup	Default	420x520px	Bottom-right, closes on outside click
Window	Click icon	560x680px, resizable	Centered, stays open on outside click, draggable

• The window button visually indicates the active mode (purple highlight when window mode is on)
• Drag boundary clamping: top >= 30px to keep the header always accessible
• Position persistence: Drag position is saved to localStorage and restored on reopen

Unread Badges

The Team Chat top bar button shows a red badge with total unread count across all DMs and rooms. Badge updates every 30 seconds and on panel open.

Empty State

When no Aurora conversations exist, a polished empty state shows the gradient icon with the text "Starte eine Unterhaltung mit Aurora, deiner KI-Assistentin".

Keyboard Shortcut

Ctrl+M (or Cmd+M on macOS) toggles the ChatPanel open/closed from anywhere on the desktop.

Smooth Animations

• Panel show/hide: 250ms cubic-bezier scale + opacity
• Message appear: 150ms fadeIn from bottom
• Window mode transition: 300ms ease for size change
• Typing dots: Staggered bounce animation

Architecture

Room/DM items use data-room-id, data-room-name, and data-is-dm attributes with a single delegated click handler on #cpBody for reliable click handling.

ChatPanel object in desktop.js:
  _auroraConvos[]     → localStorage('niuton-aurora-convos')
  _messageCache{}     → Room messages cached per session
  _windowMode         → Popup vs window state
  _auroraThinking     → Thinking toggle state

Helper functions (via NiutonChat shared module):
  NiutonChat.renderMd(text)     → marked.parse() + XSS sanitizer
  NiutonChat.stripMd(text)      → Strip markdown for previews
  NiutonChat.formatTime(date)   → Relative timestamp formatting
  NiutonChat.splitThinking()    → Extract thinking from response text
  NiutonChat.escHtml(text)      → HTML escaping
  NiutonChat.parseMentions()    → @mention highlighting
  NiutonChat.shouldGroup()      → 5-minute grouping check

v3.12 Window Cascade v3.12

Neue Fenster werden an 12 verschiedenen Positionen ge-cascadet (statt zuvor 5). Dies verhindert Ueberlappung bei vielen gleichzeitig geoeffneten Fenstern und verbessert die Uebersichtlichkeit.

Design System

All 23 apps share a unified design system via niuton-app.css:

• Unified buttons — Every app uses the n-btn class family (primary, danger, success, sm, lg, icon variants)
• Inline SVG icons — All UI icons use Feather-style inline SVGs (viewBox="0 0 24 24", stroke="currentColor", fill="none"). No emojis in UI elements.
• Glassmorphism — Buttons and toolbars use semi-transparent glass styling with backdrop-blur
• Consistent spacing — Shared CSS variables for padding, gaps, and border-radius
• Responsive — Sidebar-overlay pattern at 768px, stacked layouts at 480px

See Tech Stack > CSS Component Library for details.

Icon Redesign v3.9.1

8 app icons were redesigned to Apple/KDE quality: Files, Notes, Team Chat, Finanzen, Chess, Settings, Zeichnen, Wetter. Design language:

• 48x48 viewBox with rx="10" rounded corners
• linearGradient backgrounds (dark to light)
• radialGradient subtle glow behind main element
• Multi-layered foreground elements with transparency
• White/light main elements with accent highlights

Desktop Vibe-Coding v3.8

Aurora can live-modify your desktop at runtime. Ask Aurora to change your theme, add widgets, customize the dock — and it happens instantly, persisted per user.

• 12 Aurora tools for desktop modification (themes, widgets, hooks, profiles)
• 5 hook points for custom rendering (dock items, window chrome, panel, app grid)
• Version history with rollback for every change
• Desktop profiles — save and switch between complete customizations
• Safe Mode — append ?safe=1 to bypass all overrides

See Desktop Vibe-Coding for full documentation.

NiutonShell

The client-side runtime loader desktop-shell.js manages all overrides:

window.NiutonShell = {
    init(),              // Fetch and apply all active components
    apply(component),    // Inject CSS/JS/Widget
    remove(id),          // Remove an override
    reset(id),           // Reset to default
    applyTheme(vars),    // Quick theme change
    preview(comp, dur),  // Temporary preview
    getState(),          // Get current state
    refresh(),           // Re-fetch from server
};

Desktop Architecture

desktop.php          → Main HTML shell, loads all assets
assets/js/
  ├── desktop.js       → Dock, app grid, drag-drop, trash, 5 hook points
  ├── desktop-shell.js → Vibe-Coding runtime (NiutonShell, overrides, widgets)
  ├── window-manager.js → WM.open(), resize, minimize, z-order
  ├── chat-shared.js   → NiutonChat shared rendering module (v3.12)
  └── aurora.js        → Aurora orb, chat panel, AI integration
assets/css/
  ├── desktop.css      → Dock, wallpaper, layout, light mode shell overrides
  ├── niuton-light.css → Light mode overrides injected into app iframes (~2500 lines)
  ├── window-manager.css → Window chrome, animations
  └── niuton-app.css   → Shared design system (buttons, icons, layout)

Each app loads in an <iframe> managed by the window manager. Apps communicate with the desktop via postMessage.