ClipSpacesClipSpaces Docs
Back to app

All releases

Onboarding empty state for blank boards

A new user landing on an empty space saw a blank canvas with no cue about what the app does. Empty boards now show an onboarding overlay (Excalidraw-style): a centered ClipSpaces logo + one-line explainer + quick-action buttons (Paste a link / Add a note / Ask AI), plus arrow annotations pointing at the space pill, Share, the toolbar, and the Ask AI FAB. It appears whenever the board has zero cards and disappears as soon as the first card is added. Styled with the app's own Inter + warm-monochrome tokens (not hand-drawn); arrow annotations are desktop-only.

Added

  • components/CanvasEmptyState.tsx — the overlay. Click-through except the quick-action buttons, which call back into the page's link/sticky/AI handlers.

Changed

  • components/Canvas.tsx — new onEmptyChange(empty) prop, fired from a nodes.length effect so the shell learns the true empty state on mount and on every add/remove/remote-sync (decoupled from the debounced onSync).
  • app/page.tsx — tracks canvasEmpty and renders CanvasEmptyState when the space is ready, editable, and empty.