---
id: TASK-66
title: Vertical canvas toolbar + whiteboard tools + zoom dropdown
status: Done
assignee: []
created_date: '2026-02-27 22:46'
labels:
  - canvas
  - ux
  - toolbar
dependencies: []
priority: medium
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Convert the canvas toolbar from horizontal (top center) to vertical (left side). Add whiteboard drawing tools dropdown and nest zoom controls under a dropdown. Includes collapsible toggle.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [ ] #1 Toolbar is vertical on the left side with dropdowns opening to the right
- [ ] #2 Whiteboard 'Draw' dropdown with pencil, sticky note, rectangle, circle, line, eraser
- [ ] #3 Zoom controls nested under a 'Zoom' dropdown group
- [ ] #4 Toolbar collapsible via subtle toggle pill at bottom
- [ ] #5 Mobile responsive layout preserved
- [ ] #6 SVG overlay for whiteboard drawing on canvas
<!-- AC:END -->

## Final Summary

<!-- SECTION:FINAL_SUMMARY:BEGIN -->
Implemented in commits f8bd09d, 683df43, merged to main as 76f7da8.\n\nChanges to website/canvas.html:\n- #toolbar CSS: flex-direction column, fixed left:12px, scrollable, dropdowns open right\n- New 'Draw' toolbar group: pencil (freehand SVG path), sticky note (yellow markdown shape), rectangle, circle, line, eraser (click SVG elements to delete)\n- SVG overlay inside canvas-content for whiteboard strokes\n- Zoom in/out/reset nested under 'Zoom' dropdown group\n- Collapse toggle moved to bottom as subtle '···' pill, collapses to '▶'\n- Separators now horizontal (full width, 1px height)\n- Mobile styles updated for vertical layout\n- SHAPE_ICONS updated with creative tool entries
<!-- SECTION:FINAL_SUMMARY:END -->
