Redesign action editor + fix Save-button hover fade; release v0.8.1

Fix: the --primary CTA was missing from the hover exclusion :where()
list, so a translucent-white overlay overrode its accent fill on hover
(specificity 0,3,0 beat the base 0,1,0). Added it to the exclusion, then
consolidated the byte-identical --primary into --accent so the drift
cannot recur.

Redesign "Assign action" modal: wider dialog (580->880), clickable
token chips inserting at the caret with live in-field token highlighting
(backdrop overlay), auto-growing text field (field-sizing) without the
resize grip, HelpTip "?" primitive on throttle/trigger/conditions/name/
signal, and removal of the left accent bars on notices/linked-hint.

Bump to 0.8.1 across the 5 manifest/lockfiles + CHANGELOG.

Author: danscMax

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.8.1] — 2026-07-14
+
+### Fixed
+- The Save button in the action editor no longer washes out on hover — the accent call-to-action keeps its green fill and brightens, instead of fading to a translucent white. (Root cause: the `--primary` button variant was missing from the hover exclusion list, so a translucent-white overlay overrode its accent fill.)
+
+### Changed
+- Reworked the "Assign action" editor: a noticeably wider dialog; clickable token chips (`{date}`, `{clipboard}`, `{cursor}`) that insert at the caret, with live in-field highlighting of tokens; "?" help tooltips on throttle, trigger mode, execution conditions, name and signal; an auto-growing text field without the old resize grip; and removal of the left accent bars on notices.
+- Consolidated the duplicate `--primary` button style into `--accent` (they were byte-identical), so the hover-fade class of bug cannot recur.
+
 ## [0.8.0] — 2026-07-06
 
 ### Added

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "sidearm",
   "private": true,
-  "version": "0.8.0",
+  "version": "0.8.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package.json

@@ -1,6 +1,6 @@
 [package]
 name = "sidearm"
-version = "0.8.0"
+version = "0.8.1"
 description = "Desktop workflow studio for multi-button mice"
 authors = ["User"]
 edition = "2024"

src-tauri/Cargo.lock

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Sidearm",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "identifier": "com.sidearm.desktop",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/Cargo.toml

@@ -987,10 +987,10 @@ select::checkmark {
 .notice .action-button { margin-top: 10px; }
 
 .notice--subtle  { background: var(--c-card-bg); border-color: var(--c-card-border); }
-/* Blocking states get a solid left accent so they never read as neutral info
-   (UI-review V5). */
-.notice--warning { background: color-mix(in srgb, var(--c-warning) 12%, transparent); border-color: color-mix(in srgb, var(--c-warning) 26%, transparent); border-left: 3px solid var(--c-warning); }
-.notice--error   { background: rgba(167, 56, 56, 0.14); border-color: rgba(196, 73, 73, 0.28); border-left: 3px solid var(--c-danger); }
+/* Blocking states read as distinct via a tinted fill + coloured border on all
+   sides (no left-only accent bar). */
+.notice--warning { background: color-mix(in srgb, var(--c-warning) 13%, transparent); border-color: color-mix(in srgb, var(--c-warning) 38%, transparent); }
+.notice--error   { background: rgba(167, 56, 56, 0.14); border-color: rgba(196, 73, 73, 0.42); }
 .notice--ok      { background: rgba(83, 145, 74, 0.14); border-color: color-mix(in srgb, var(--c-ok) 28%, transparent); }
 .notice--info    { background: rgba(67, 120, 176, 0.14); border-color: color-mix(in srgb, var(--c-info) 28%, transparent); }
 
@@ -1174,8 +1174,8 @@ input[type="radio"] {
 }
 
 /* ── Action Button ── */
-/* Buttons are QUIET by default — accent is reserved for the one primary action
-   per screen (--accent / --primary) and for pressed toggle state (--active).
+/* Buttons are QUIET by default — accent (--accent) is reserved for the one
+   primary action per screen and for pressed toggle state (--active).
    The old inverted polarity (bright base, quiet opt-in) made every Browse /
    Export / toggle read as a CTA. */
 .action-button {
@@ -1209,6 +1209,11 @@ input[type="radio"] {
   background: rgba(255, 255, 255, 0.12);
 }
 
+/* Filled accent CTA gets a slightly stronger brighten on hover than the base. */
+.action-button--accent:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
 /* Toggle "on" state — accent-tinted so pressed/unpressed is unmistakable. */
 .action-button--active {
   background: var(--c-accent-dim);
@@ -2933,8 +2938,8 @@ code {
   background: var(--c-bg);
   border: 1px solid var(--c-border);
   border-radius: var(--radius-modal);
-  width: min(580px, 90vw);
-  max-height: 80vh;
+  width: min(880px, 94vw);
+  max-height: 84vh;
   display: flex;
   flex-direction: column;
   box-shadow: var(--shadow-modal);
@@ -3163,17 +3168,6 @@ code {
   gap: 8px;
 }
 
-.action-button--primary {
-  background: var(--c-accent);
-  border-color: transparent;
-  color: var(--c-text-on-accent);
-  font-weight: 700;
-}
-
-.action-button--primary:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
 /* ── Confirm Modal ── */
 .confirm-modal {
   background: var(--c-bg);
@@ -4176,14 +4170,186 @@ code {
 /* "Linked to library snippet «…»" hint shown when a button references a snippet */
 .snippet-linked-hint {
   margin: 0;
-  padding: 8px 10px;
-  border-left: 3px solid var(--c-accent);
+  padding: 8px 12px;
+  border: 1px solid color-mix(in srgb, var(--c-accent) 32%, transparent);
   border-radius: var(--radius-sm);
-  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
+  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
   font-size: var(--fs-caption);
   color: var(--c-text);
 }
 
+/* ── Help tip: "?" badge + hover/focus explanation bubble ───────────────────
+   Reused beside field labels (throttle, trigger mode, conditions, …). Pure
+   CSS reveal — no native `title` delay, no inline styles (CSP). ── */
+.help-tip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  margin-left: 6px;
+  border-radius: 50%;
+  background: var(--c-card-border);
+  color: var(--c-text);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  cursor: help;
+  vertical-align: middle;
+  user-select: none;
+  transition: background 120ms ease, color 120ms ease;
+}
+.help-tip:hover,
+.help-tip:focus-visible {
+  background: var(--c-accent);
+  color: var(--c-text-on-accent);
+  outline: none;
+}
+.help-tip__badge {
+  pointer-events: none;
+}
+.help-tip__bubble {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  z-index: 10;
+  width: max-content;
+  max-width: 260px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  box-shadow: var(--shadow-popover);
+  color: var(--c-text);
+  font-size: var(--fs-caption);
+  font-weight: 400;
+  line-height: 1.45;
+  text-align: left;
+  white-space: normal;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+.help-tip:hover .help-tip__bubble,
+.help-tip:focus-visible .help-tip__bubble {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* ── Token toolbar: quick-insert chips for {date}/{clipboard}/{cursor} ── */
+.token-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.token-toolbar__label {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  color: var(--c-text-muted);
+}
+.token-chip {
+  padding: 4px 10px;
+  border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
+  border-radius: 999px;
+  background: var(--c-accent-dim);
+  color: var(--c-accent);
+  font-family: var(--font-mono);
+  font-size: var(--fs-caption);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+.token-chip:hover {
+  background: color-mix(in srgb, var(--c-accent) 26%, transparent);
+  border-color: var(--c-accent);
+  transform: translateY(-1px);
+}
+.token-chip:active {
+  transform: translateY(0);
+}
+
+/* ── Highlighting textarea: a transparent <textarea> over a backdrop that
+   renders the same text with the tokens <mark>ed. Both layers MUST share
+   identical text metrics (font/size/line-height/padding/wrapping) or the
+   highlight drifts off the glyphs. ── */
+.token-textarea {
+  position: relative;
+  border: 1px solid var(--c-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--c-input-bg);
+  box-shadow: var(--shadow-inset);
+  overflow: hidden;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+.token-textarea:hover {
+  border-color: var(--c-border-hover);
+}
+.token-textarea:focus-within {
+  border-color: var(--c-accent);
+  box-shadow: var(--shadow-inset), 0 0 0 3px var(--c-accent-dim);
+}
+.token-textarea__backdrop,
+.token-textarea .token-textarea__input {
+  margin: 0;
+  padding: 10px 12px;
+  border: 0;
+  font-family: var(--font-mono);
+  font-size: var(--fs-body-sm);
+  line-height: 1.5;
+  letter-spacing: normal;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  tab-size: 4;
+}
+.token-textarea__backdrop {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  color: transparent;
+  pointer-events: none;
+  user-select: none;
+}
+.token-textarea__mark {
+  /* Only the background/outline shows; the glyphs come from the input above. */
+  background: color-mix(in srgb, var(--c-accent) 22%, transparent);
+  color: transparent;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 45%, transparent);
+}
+.token-textarea .token-textarea__input {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-height: 148px;
+  max-height: 340px;
+  background: transparent;
+  box-shadow: none;
+  color: var(--c-text-bright);
+  caret-color: var(--c-accent);
+  resize: none;
+  /* Auto-grow to the content (Chromium/WebView2 123+); the min/max-height keep
+     it a comfortable box and clamp runaway growth. Falls back gracefully to a
+     fixed min-height box on older runtimes. */
+  field-sizing: content;
+  overflow: auto;
+}
+.token-textarea .token-textarea__input:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: transparent;
+}
+.token-textarea .token-textarea__input::placeholder {
+  color: var(--c-text-muted);
+}
+
 /* Snippet library tab: master-detail. Roster (own scroll) left, sticky editor
    right — selecting a row updates only the editor, so the list never jumps. */
 .snippet-library {

src-tauri/tauri.conf.json

@@ -12,7 +12,7 @@ import {
   upsertEncoderMapping,
 } from "../lib/config-editing";
 import { MenuItemsEditor } from "./MenuItemsEditor";
-import { CloseButton, ModalFooter, ModalShell, Notice } from "./shared";
+import { CloseButton, HelpTip, ModalFooter, ModalShell, Notice } from "./shared";
 import {
   autoName,
   buildAction,
@@ -424,7 +424,10 @@ export function ActionPickerModal({
             ) : null}
 
             <label className="field mt-12">
-              <span className="field__label">{t("picker.nameLabel")}</span>
+              <span className="field__label">
+                {t("picker.nameLabel")}
+                <HelpTip text={t("picker.nameHelp")} />
+              </span>
               <input
                 type="text"
                 value={nameDraft}
@@ -447,7 +450,10 @@ export function ActionPickerModal({
             />
 
             <label className="field mt-12">
-              <span className="field__label">{t("picker.throttleLabel")}</span>
+              <span className="field__label">
+                {t("picker.throttleLabel")}
+                <HelpTip text={t("picker.throttleHelp")} />
+              </span>
               <input
                 type="number"
                 min={0}
@@ -462,7 +468,6 @@ export function ActionPickerModal({
                   setThrottleDraft(clamped);
                 }}
               />
-              <span className="panel__muted">{t("picker.throttleHelp")}</span>
             </label>
           </div>
         </div>
@@ -490,7 +495,7 @@ export function ActionPickerModal({
           </button>
           <button
             type="button"
-            className="action-button action-button--primary"
+            className="action-button action-button--accent"
             onClick={handleSave}
             disabled={isSaveDisabled(effectiveCategory, drafts)}
           >

src/App.css

@@ -107,7 +107,7 @@ export function ConfirmModal({
         <button
           ref={confirmButtonRef}
           type="button"
-          className={`action-button ${danger ? "action-button--danger" : "action-button--primary"}`}
+          className={`action-button ${danger ? "action-button--danger" : "action-button--accent"}`}
           onClick={() => {
             void handleConfirm("primary");
           }}

src/components/ActionPickerModal.tsx

@@ -102,7 +102,7 @@ export function ErrorModal({ error, onDismiss, onAction }: ErrorModalProps) {
               disabled={busyAction !== null}
               className={
                 action.primary
-                  ? "action-button action-button--primary"
+                  ? "action-button action-button--accent"
                   : action.danger
                   ? "action-button action-button--danger"
                   : "action-button action-button--ghost"