silentmode/theseus
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(theseus/screenshot): 0.6.2 — Copy/Save move to toolbar, Discard, right-anchored topbar

Browse source 
Layout reorganisation from user's diagram:

- Copy + Save move out of the topbar into the toolbar as their own
  right-anchored tgroup (margin-left:auto). On wide sidebars they sit at
  the end of the drawing-tool row; when the sidebar is narrow, the
  actions cluster wraps as its own row on the right instead of nudging
  the drawing tools around. Toolbar switches from justify-content:center
  to flex-start so the leading tool groups pack left and the actions
  group can find the right edge cleanly.

- Topbar right cluster is now Discard / Sound / Maximize / Close — Copy
  and Save are gone from the topbar entirely so the right edge reads
  as controls-only, not action-mixed.

- Discard button (X icon, danger red on hover) throws away the current
  capture — silentmode.invoke("clearRecent", {name}) removes it from the
  ring and unlinks the scratch file — then navigates back to the panel.
  Distinct from Back, which is non-destructive.

- Close button already existed from 0.6.1 but stays in the same
  right-edge position for continuity.

Bundled but not shipped separately — parent session signs and pushes.
This commit is contained in:
Local Dev 2026-09-09 11:46:21 +02:00
parent 8a99c0959c
commit 744574ba96
4 changed files with 46 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bundled-addons/screenshot/addon.json
View file

@ -1,7 +1,7 @@
{
"id": "screenshot",
"name": "Screenshot",
"version": "0.6.1",
"version": "0.6.2",
"description": "Capture the current tab — visible viewport, full page, or a rectangle you draw. Preview + annotate editor (crop, arrow, rect, ellipse, pen, text, blur/mosaic redaction, undo, copy, save) live inside the sidebar. Expand the sidebar to full window for a canvas-sized editor.",
"author": "Silent Mode",
"icon": "📸",

18
bundled-addons/screenshot/editor.css
View file

@ -23,17 +23,19 @@ body { background: var(--bg); color: var(--ink);
.topbar, .toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px;
border-bottom: 1px solid var(--line); background: var(--panel);
user-select: none; flex-wrap: wrap; }
/* Older versions grouped the drawing tools in the middle of the bar — keep
the drawing / swatch / width / undo cluster centred while the top-bar
(back / name → save / copy / sound / max / close) stays edge-anchored. */
.toolbar { justify-content: center; gap: 10px; row-gap: 6px; }
/* Each visible group of tools wraps as a unit — when the sidebar gets
narrow, the whole swatch row moves to the next line instead of a
single dot spilling by itself. */
/* Toolbar layout: drawing groups pack left/centre, the Copy/Save actions
pin to the right. When the sidebar is too narrow to hold everything in
one row, each group wraps as a unit (never a single dot orphaned) and
the actions cluster wraps as its own row on the right. */
.toolbar { justify-content: flex-start; gap: 10px; row-gap: 6px; }
.tgroup { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.tgroup.actions { margin-left: auto; }
/* Close-sidebar button — reads as danger without shouting. */
#close-sidebar:hover { border-color: rgba(255,91,91,.55); color: var(--danger); }
#close-sidebar:hover,
#discard:hover { border-color: rgba(255,91,91,.55); color: var(--danger); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: rgba(255,91,91,.55); }
.topbar .name { color: var(--dim); font-size: 11.5px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; max-width: 200px; margin: 0 4px; }
.topbar .spacer, .toolbar .spacer { flex: 1; }

30
bundled-addons/screenshot/editor.html
View file

@ -13,8 +13,9 @@
<span class="name" id="name">screenshot</span>
<!-- Crop mode splits the topbar into a confirm/cancel prompt while the
user is dragging a crop rectangle. Everything else in the topbar
fades in and out around these two buttons. -->
user is dragging a crop rectangle. Copy / Save / Discard live in
the toolbar now, so only the maximize + sound + close cluster on
the right needs to yield to the crop confirm buttons. -->
<button class="btn wide" id="apply-crop" hidden title="Apply the crop (Enter)">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8l3 3 7-7"/></svg>
<span>Apply crop</span>
@ -25,13 +26,8 @@
</button>
<span class="spacer"></span>
<button class="btn wide" id="copy" title="Copy PNG to clipboard (Ctrl+C)">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="9" height="10"/><path d="M3 12V3h9"/></svg>
<span>Copy</span>
</button>
<button class="btn wide primary" id="save" title="Save PNG (Ctrl+S)">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9M4 7l4 4 4-4M2 14h12"/></svg>
<span>Save</span>
<button class="btn danger" id="discard" title="Discard this capture and return to the panel">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
</button>
<button class="btn" id="toggle-sound" title="Toggle sound"></button>
<button class="btn" id="toggle-max" title="Expand the sidebar to full window / restore">
@ -97,6 +93,22 @@
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M13 8c0-3-2-5-5-5S3 5 3 8s2 5 5 5"/><path d="M10 5l3 3-3 3"/></svg>
</button>
</div>
<!-- Actions cluster — Copy / Save — anchored to the right of the toolbar.
Uses margin-left:auto so on wide sidebars it lives out at the end
of the drawing-tool row; when the sidebar is narrow enough that the
drawing tools already ate the width, it wraps as its own row to the
right instead of jumping the tools around. -->
<div class="tgroup actions" role="group" aria-label="Actions">
<button class="btn wide" id="copy" title="Copy PNG to clipboard (Ctrl+C)">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="9" height="10"/><path d="M3 12V3h9"/></svg>
<span>Copy</span>
</button>
<button class="btn wide primary" id="save" title="Save PNG (Ctrl+S)">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9M4 7l4 4 4-4M2 14h12"/></svg>
<span>Save</span>
</button>
</div>
</div>
<div class="board" id="board">

15
bundled-addons/screenshot/editor.js
View file

@ -596,7 +596,20 @@ if (applyCropBtn) applyCropBtn.addEventListener("click", applyCrop);
if (cancelCropBtn) cancelCropBtn.addEventListener("click", cancelCrop);
// -- top-bar navigation ----------------------------------------------
$("back").addEventListener("click", () => { playDiscard(); location.href = "panel.html"; });
$("back").addEventListener("click", () => { location.href = "panel.html"; });
// Discard — throw away this capture entirely (delete it from the Recent
// ring) and return to the panel. Back is non-destructive; Discard is not.
const discardBtn = document.getElementById("discard");
if (discardBtn) discardBtn.addEventListener("click", async () => {
playDiscard();
try {
if (NAME && window.silentmode?.invoke) {
await window.silentmode.invoke("clearRecent", { name: NAME });
}
} catch (e) { console.warn("discard: clearRecent failed:", e); }
location.href = "panel.html";
});
// Close the sidebar entirely — same IPC the dock icon toggles. We stop
// on the panel side (see panel.html); the editor mirrors the affordance