th/hyprcrd
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

collab-buckets: exclusive locks, server-enforced, with editor takeover

Browse Source 
The previous lock implementation was advisory only — the relay's lock
table PK was (bucket_uid, card_uid, holder_id), so multiple users could
"hold" the same card simultaneously and the plugin only used the locks
to draw a small badge. Concurrent writers raced through LWW, and an
unsaved editor on User A could be silently overwritten when User B
saved (the symptom: cards appearing to "disappear" from User A's view
once their version was clobbered by an LWW pull).

Now an exclusive, server-enforced lock:

* relay schema: collab_card_locks PK is (bucket_uid, card_uid). One
  lock per card. Migration drops the old 3-column-PK table on the
  next bootstrap (locks are 60s ephemeral, no data to preserve).
* /api/collab-locks POST: returns 409 + holder info when another
  tenant already holds it. Same holder refreshes the TTL.
* /api/collab-cards POST/DELETE: refuse with 423 + locked_by when a
  foreign tenant holds the lock. The plugin's local edit is preserved
  — the push just stays queued and retries on the next poll until
  the lock expires or is released. Tombstones are gated the same way
  so a card can't be deleted under the holder's editor.
* Plugin push phase: tracks blocked count + holder names, surfaces
  them in the poll response so the frontend can toast the user.

Frontend lock-on-first-keystroke flow:

* The lock is no longer acquired on editor-open — opening for read
  doesn't lock anything. On the FIRST input event in #inp-title or
  #editor-body the plugin tries to acquire. On success, heartbeat
  every 30 s; on 409, immediately enter editor takeover.
* Takeover mode: title + body inputs disabled, all three save
  buttons get a capture-phase click blocker (stopImmediatePropagation
  to defeat the editor's own listener), a window-level capture-phase
  keydown blocker swallows Ctrl/Cmd+S (app.js binds save directly to
  the shortcut, bypassing the buttons), and a banner inside the
  modal explains the situation. The user can still copy their
  unsaved text out before closing.
* If a foreign lock arrives via the regular poll while the editor is
  already open on that card, the same takeover engages mid-session.
* Opening the editor on a card whose lock is *already* known to be
  foreign starts in takeover mode without arming the input listeners
  at all.
* Self-detection: poll response now carries `self` (the relay
  username), cached as window._collabSelf, so we don't take ourselves
  over and the board decoration ignores our own lock.

Visual:

* Board cards held by a foreign lock now get a frosted overlay +
  centered lock icon + holder name (replaces the small corner badge).
* Editor takeover banner uses the danger accent. Save buttons get a
  .collab-save-blocked dim style.
* New `.collab-lock-toast` variant of the existing conflict toast,
  used for both "your push is queued because X is editing" and
  "this card just got locked by X" notifications.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.6 committed 2026-04-11 19:36:57 +02:00
1 parent c8fe15b0c9
commit f6cf7b4358
6 files changed
+407 -48
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/plugins/collab-buckets/collab-buckets.css
+81 -10
View File
@@ -235,27 +235,84 @@ body.anim-slow .bucket-tab.bucket-tab-collab.pulsing {
font-style: italic;
}
/* ── Phase 4: edit-lock indicator on board cards ── */
/* ── Phase 4: exclusive edit-lock indicator on board cards ──
Locked cards get a frosted overlay + centered lock icon. The card
content underneath stays visible enough to read but is clearly
"off-limits" — the cue is intentionally heavier than the old badge
so the user can't miss it. */
.board-card.collab-locked {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t-accent2) 55%, transparent);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t-accent2) 70%, transparent);
}
.board-card.collab-locked > *:not(.collab-lock-badge) {
filter: blur(2px);
opacity: 0.55;
transition: filter 0.15s, opacity 0.15s;
}
.collab-lock-badge {
position: absolute;
top: 6px;
right: 6px;
width: 20px;
height: 20px;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--t-accent2);
background: color-mix(in srgb, var(--t-surface) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--t-accent2) 60%, var(--t-border));
border-radius: 50%;
background: color-mix(in srgb, var(--t-surface) 60%, transparent);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
z-index: 6;
pointer-events: none;
font-size: 11px;
font-family: var(--t-font-pixel, 'Silkscreen', cursive);
font-size: 9px;
text-align: center;
padding: 4px 8px;
}
.collab-lock-badge i {
font-size: 22px;
}
.collab-lock-badge span {
color: var(--t-text);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Editor takeover (foreign lock arrived while editing) ── */
.collab-readonly-modal #inp-title,
.collab-readonly-modal #editor-body {
opacity: 0.7;
cursor: not-allowed;
}
.collab-readonly-modal #editor-body {
background: color-mix(in srgb, var(--t-danger) 6%, transparent) !important;
}
.collab-save-blocked {
opacity: 0.4 !important;
cursor: not-allowed !important;
pointer-events: auto;
}
.collab-takeover-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: color-mix(in srgb, var(--t-danger) 12%, transparent);
border-bottom: 1px solid var(--t-danger);
color: var(--t-bright);
font-family: var(--t-font-pixel, 'Silkscreen', cursive);
font-size: 10px;
line-height: 1.5;
}
.collab-takeover-banner i {
color: var(--t-danger);
font-size: 16px;
flex-shrink: 0;
}
.collab-takeover-banner b { color: var(--t-danger); }
/* ── Conflict toast (LWW losers stashed into the Conflicts bucket) ── */
.collab-conflict-toast {
@@ -302,3 +359,17 @@ body.anim-slow .bucket-tab.bucket-tab-collab.pulsing {
align-items: center;
}
.collab-conflict-close:hover { color: var(--t-danger); }
/* Lock toast: same shape as the conflict toast but accented with the
collab/lock color. Reused for both the editor-takeover notification
and the "your push was queued because someone else is editing" toast. */
.collab-conflict-toast.collab-lock-toast {
border-color: var(--t-accent2);
}
.collab-conflict-toast.collab-lock-toast i.ph-lock-simple-fill {
color: var(--t-accent2);
flex-shrink: 0;
}
.collab-conflict-toast.collab-lock-toast b {
color: var(--t-accent2);
}