[UX/Feature Request]: Screenshot Editor Improvements (Fixed Zoom Bar & Persistent Tool Settings)

[dennyschroeder]

Hi @richiemcilroy,

While using the Screenshot Annotation/Editor tool, I noticed two major user experience (UX) friction points that slow down the editing workflow significantly.

I would love to see the following improvements to make the annotation process much more fluid:

1. Pin the Zoom Controls (Avoid Floating Overlaps)

Currently, the Zoom (+ / -) controls float directly on top of the canvas.

• The Problem: When zooming into an image or when resizing the Editor window to a smaller scale, these floating buttons frequently overlap the actual screenshot content, making edits near that area difficult or impossible.
• Proposed Solution: Instead of a floating bubble, please integrate the zoom controls into a fixed, stationary bottom toolbar layout so they never obstruct the canvas content.

2. Tool Behavior, Live Previews & Session Persistence

Right now, drawing shapes (like arrows or rectangles) feels clunky due to three limitations:

• Immediate Tool Reset: The moment I finish drawing an arrow, Cap instantly switches back to the default "Select" tool. If I want to draw 3 arrows in a row, I have to re-click the arrow icon 3 times.
• No Pre-Draw Customization: I cannot adjust properties like Stroke Width, Color, or Opacity before drawing. I am forced to draw a default shape first and modify it retroactively.
• No Persistence: Cap does not remember the style settings of the tools.

Proposed Solution:

• Keep Tool Active: Keep the selected drawing tool active until the user manually presses Escape or switches to another tool.
• Live Properties: Allow users to adjust Stroke Width, Color, and Opacity in the sidebar before placing the element.
• Tool-Specific Persistence (Across Sessions): Save the last used settings individually for each tool (e.g., Arrows stay Red with 100% Opacity, while Rectangles can have a distinct Blue style). These preferences should persist across app restarts and new sessions.

This would elevate Cap's built-in annotation tool to the level of professional standalone screenshot utilities!
Greetings, Denny

[linear]

CAP-725

[tembo]

For anyone looking to implement these improvements, here's what I found in the codebase:

Zoom Controls Location

The zoom controls are in apps/desktop/src/routes/screenshot-editor/Preview.tsx - specifically the floating div at line 437 with absolute left-4 bottom-4 positioning. Moving this to a fixed bottom toolbar would require restructuring the layout in this file.

Tool Reset Behavior

The automatic reset to "select" after drawing happens in AnnotationLayer.tsx at line 462 inside handleMouseUp. The line setActiveTool("select") fires immediately after each shape is completed. To keep the tool active, this line would need to be removed or made conditional.

Default Tool Properties

Default values (stroke color #F05656, stroke width 4, opacity 1, etc.) are hardcoded in AnnotationLayer.tsx lines 203-218 when creating new annotations. For pre-draw customization and persistence, you'd need to:

1. Add state for "pending" tool settings (separate from the selected annotation config)
2. Read from persistent storage (the app already uses Store from @tauri-apps/plugin-store in other places)
3. Expose those settings in the UI before drawing, likely in AnnotationConfig.tsx or a new sidebar component

The AnnotationConfig.tsx component currently only shows properties for already-selected annotations - it would need to be extended or a parallel component created to configure tools before drawing.

Related Issues

Issue #1698 also reports screenshot editor issues, and there are several related UX requests open today (#1860, #1861, #1862) that could potentially be coordinated together.