feat: ENG-1706: Removing UI buttons, except for zoom and revert.

[ArielMn22]

Description

Hide all default Excalidraw UI elements, keeping only the zoom controls, undo, and redo buttons visible.

How does it work?

I've added a "UI Mode" property, that the user can pass either "minimal" (keeps only zoom, undo and redo buttons) or "default", which keeps the default Excalidraw's UI.

Screenshot

Desktop

Mobile

---

Summary by CodeRabbit

• New Features

  • Introduced a new "minimal" UI mode that hides non-essential interface elements including the main menu, welcome screen, sidebars, and scroll buttons for a cleaner workspace.

• Style

  • Improved touch target size for the mobile panning mode trigger to enhance usability on touch devices.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between fd63214 and aa4449d.

📒 Files selected for processing (1)

• packages/excalidraw/components/MobileMenu.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/excalidraw/components/MobileMenu.tsx

---

Walkthrough

This pull request introduces a new "minimal" UI mode for Excalidraw. The feature adds a uiMode property to UIOptions, allowing users to toggle between "default" and "minimal" display modes. When minimal mode is active, the main menu, welcome screen, sidebars, and other UI elements are conditionally hidden, with this preference threaded through the component tree.

Changes

Cohort / File(s)	Summary
Type definitions and configuration packages/excalidraw/types.ts, packages/common/src/constants.ts	Added new UIMode type union ("default" | "minimal") and extended UIOptions with uiMode field. Set default value to "minimal" in DEFAULT_UI_OPTIONS constant.
Component tree integration packages/excalidraw/index.tsx	Added uiMode defaulting logic in ExcalidrawBase to ensure the prop has a defined value when absent from props.
Main layout controller packages/excalidraw/components/LayerUI.tsx	Introduced isMinimalUI guard derived from UIOptions. Conditionally renders main menu trigger and hides welcome screen tunnel, side containers, and scroll buttons in minimal mode. Propagates isMinimalUI to Footer and MobileMenu child components.
Mobile menu and footer packages/excalidraw/components/MobileMenu.tsx, packages/excalidraw/components/footer/Footer.tsx	Added isMinimalUI prop to both components. When minimal mode is active, MobileMenu renders only a Footer with reduced UI elements. Footer hides center tunnel, right footer container, welcome screen help hint, help button, and exit zen mode button.
Mobile styling packages/excalidraw/components/Actions.scss	Added CSS rule for .panning-mode-trigger.dropdown-menu-button--mobile setting explicit width and height to large button size for improved touch target on mobile.

Sequence Diagram

sequenceDiagram
    participant App as ExcalidrawBase
    participant LayerUI as LayerUI
    participant MobileMenu as MobileMenu
    participant Footer as Footer

    App->>App: Determine isMinimalUI from props.UIOptions.uiMode
    App->>LayerUI: Pass UIOptions with uiMode
    LayerUI->>LayerUI: Derive isMinimalUI (uiMode === "minimal")
    LayerUI->>LayerUI: Guard: render main menu only if !isMinimalUI
    LayerUI->>LayerUI: Guard: hide welcome screen, sidebars if isMinimalUI
    LayerUI->>MobileMenu: Pass isMinimalUI prop
    LayerUI->>Footer: Pass isMinimalUI prop
    
    alt Minimal UI Mode (isMinimalUI = true)
        MobileMenu->>MobileMenu: Render footer-only wrapper
        MobileMenu->>Footer: Render with isMinimalUI=true
        Footer->>Footer: Hide center tunnel, help button, exit zen mode
    else Default UI Mode (isMinimalUI = false)
        MobileMenu->>MobileMenu: Render full mobile menu
        Footer->>Footer: Render with all UI elements
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• kaique-lisboa
• TomFanella4

Poem

🐰 A minimal mode hops into view,
Where UI clutter just won't do!
With guards and props flowing down so clean,
The tidiest Excalidraw ever seen,
Less buttons, more canvas—quite the scene! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main objective: introducing a UI mode that hides most buttons except zoom and revert controls, which aligns with all file changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch ariel/eng-1706

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}