The interface

A top-to-bottom tour of the chrome — sidebar, doc toolbar, side panels, mobile bottom nav. Every label, icon, and button verified against the live app.

The sweetdocs UI has three parts, left to right: the sidebar, the main pane, and any side panel you’ve opened on the right.

The sidebar

Fixed 240px wide on desktop. Becomes an off-canvas drawer (288px) on mobile, opened from the Library button in the bottom nav. Three stacked sections, top to bottom: a header, a scrollable middle, the profile menu.

Sidebar header

• Logo at the top-left — the sweetdocs lockup at 22px.
• Action button row. In your Personal library or any team library, the buttons are:
  • + Doc — accent-filled. Creates a new document in the current folder.
  • + Folder — bordered. Creates a folder at the current location. In the org library list, this changes to + Library.
  • Upload — icon-only (up-arrow). Picks files from your computer; supports the same formats as drag-drop (see Importing files).
  • Gear — org mode only. Jumps to the Manage Organization page.
• Search input — placeholder reads Search this library…. Fuzzy-ranks every doc and folder inside the current library. Up to 30 results. A Search everything → button at the bottom of the results opens the cross-library command palette.
• Space switcher chip — a full-width bordered chip with a chevron. Click to open the popover with:
  • My Documents (personal)
  • Shared with Me
  • Each org you belong to, listed below a separator

Sidebar middle

This part scrolls. Contents change with your current location:

• Pinned — if you’ve pinned anything, a PINNED header sits at the top followed by your pinned docs. See Pinning documents.
• .. back button — when you’re inside a nested folder, a chevron-up row at the top takes you up one level.
• Folder + doc list — the contents of the current location. Folders show first with faFolder (muted), docs follow with their doc-type icon (md / svg).
• Search results — when you’ve typed in the sidebar search, this list is replaced by ranked results. Clear the search to return to the normal browse view.

Sidebar rows

Each row in the list is the same shape:

• Icon (left): folder icon, doc-type icon, or — if pinned — the accent-colored thumbtack.
• Title (center): truncates to fit. The currently open doc renders in accent color with font-medium.
• Overflow menu (right, hover-reveal): a three-dot button. Click for the row’s context menu (rename, move, pin, duplicate, delete, share). Double-clicking the row enters inline rename mode.

Profile menu (bottom-left)

Click your avatar + name to open the menu (it opens upward into the sidebar). Items in order:

1. Profile → /app/settings
2. Billing → /app/billing
3. Notifications → /app/notifications (with an accent badge for unread count)
4. Recycling Bin → /app/recycling-bin
5. Help & Support → /app/help
6. (separator + org block, if you’re in an org)
7. Manage [org name] → /app/org/{id}
8. (separator)
9. Sign out (turns red on hover)

The main pane

The doc you have open. Top-to-bottom:

1. Doc toolbar — 48px fixed bar (covered in detail below).
2. Edit-mode stripe — a 2px accent-color bar across the top, only visible in Edit mode.
3. Banners (when relevant): conflict banner, recovery banner.
4. Editor / Preview — the writing surface, or the rendered preview, or the version-diff view if you’re previewing history.

The doc toolbar

Left to right, every element:

Left side: breadcrumb + title

• Breadcrumb path — clickable crumbs separated by ›, sized 10px in mono. When the path is too long for the available width, the middle crumbs collapse to ….
• Title — text-sm font-semibold. Click to enter edit mode (the field gets a bordered focus state). Press Enter to commit, Esc to cancel. Empty titles fall back to Untitled.

Center: status

• Presence avatars — up to 4 colored circles overlapping with -space-x-2. Each avatar is 24px with a 2px border. Dedup’d by user id (same person on two devices = one avatar). Overflow shows as +N. See Real-time collaboration.
• “Editing” indicator — only in Edit mode. Shimmering accent text (the same shine effect as the homepage hero), 60px shine width, 5-second loop.
• Save status — hidden when idle. Surfaces when something’s happening:
  • Saving… (shimmer)
  • Offline — will save when you reconnect
  • Save failed — retrying
  • Conflict — needs resolution

Right side: action buttons (left → right)

These all live as 32×32 icon buttons unless noted. The first four are markdown-only — they don’t show on SVG docs.

1. Mode toggle (markdown only). The icon switches based on which mode you’re in:
   • In Edit: accent-filled, faEye icon. Title: Switch to Preview (⌘E).
   • In Preview: bordered, faPencil icon. Title: Switch to Edit (⌘E).
2. Copy as Markdown (markdown only). faClone icon by default, swaps to faCheck after click. Title: Copy as Markdown. Prepends # title if the body doesn’t already start with an H1.
3. Print (markdown only). faPrint icon. Title: Print. Opens the browser print dialog. See Printing.
4. Export dropdown (markdown only). faArrowDownToLine + a small faChevronDown, bordered. Click for the menu:
   • Markdown (.md)
   • Word (.docx)
   • PDF (via Print)
5. Comments (all doc types). faComment icon. An accent badge on the top-right shows the open comment count (capped at 9+). Title: Comments.
6. History (all doc types). faClock icon. Title: Version history.
7. Share (all doc types). faShareNodes icon. Title: Share this document.
8. AI Author (all doc types). Accent-filled chip with the literal text AI (11px bold, all-caps, letter-spaced). Title: Toggle AI Author panel (⌘⇧A).

Side panels (right side)

Up to four panels can open on the right. Each is 320px wide on desktop (flex-shrink: 0) and renders as a 60vh bottom sheet on mobile. On mobile, only one panel can be open at a time — opening a new one closes the others. On desktop, multiple panels can stack to the right of each other.

Every panel has the same header structure: an icon, an h2 title, and a close button (faXmark).

Comments panel

• Trigger: Comments toolbar button or the Esc-closes-it semantic.
• Header: faCommentDots icon + “Comments” title.
• Body: A tab strip of Open | Resolved, then a scrollable list of comment threads. A MentionInput textarea at the bottom for a new comment.
• Interaction: Clicking a comment from the editor scrolls + highlights its thread here.

History panel

• Trigger: History (clock) toolbar button.
• Header: faClock icon + “History” title.
• Body: A timeline of audit entries — each save snapshot, each share event, each public-link toggle. The top entry reads Current if the doc hasn’t changed since.
• Click a row to preview that version in the editor (the full pane swaps to a VersionDiffView). Click the same row again to exit preview.

AI Author panel

• Trigger: AI button or ⌘⇧A.
• Header: faSparkles icon + “AI Author” title. A small Clear button appears when there are messages.
• Body: Quick-action buttons across the top (Improve writing, Make shorter, Fix grammar, Add conclusion, Summarize, Suggest title), then a chat log, then an input box. When the AI returns a diff, Accept and Discard buttons render above the diff.
• See AI Author for the full panel guide.

Share dialog

Not a side panel — opens as a centered modal with a dimmed backdrop. Triggered by the Share button. Has two tabs: Invite people (default) and Public link. See Share by public link + Invite by email.

Command palette

Triggered by ⌘K (Ctrl+K on Windows / Linux) from any screen. Renders as a centered card at 20vh from the top with a dimmed backdrop.

• Quick actions at the top (Create document, Settings).
• Templates below.
• Search results — types as you go, searches across every library you have access to (not just the current one).
• ↑ / ↓ to navigate, Enter to select, Esc to dismiss.

See Command palette.

Mobile bottom nav

On screens narrower than 768px, the sidebar collapses and a 52px bottom bar appears with five icon + label buttons. Left to right:

URL structure

The pages under /app/* are rendered inside the AppShell (sidebar + toolbar + panels). Everything else (/login, /share/:token, /invite/:token, /legal/*) renders without the app chrome.

Keyboard shortcuts at a glance

See Keyboard shortcuts for the full list.