pulse: 1× local vs 3× remote, local cards don't trigger all-tab dot
Locally-created cards (editor, quick capture, duplicate) now get a single subtle pulse instead of the triple-pulse reserved for relay- synced cards. Local cards also never trigger the unread dot on the fixed "all" bucket tab — the user just created them, there's nothing "unseen" about their own work. state.js: new state.recentlyCreatedIds Set. Populated by editor.js doSave (POST), app.js quick capture (POST), and context-menu.js duplicate (both date-rename and copy paths). board.js renderBoard diff: new card ids are checked against recentlyCreatedIds at diff time. Local ids go into a renderBoard- local newLocalIds set (never into state.unseenCardIds). Remote ids go into unseenCardIds as before. board.js drain block (end of renderBoard): two-phase drain. Phase 1: newLocalIds → pulseCards(local, 'card-pulse-local') with 900ms timeout, works in any bucket. Consumed recentlyCreatedIds entries are deleted. Phase 2: remaining unseenCardIds (remote only) → pulseCards(remote, 'card-pulse-new') with 2400ms timeout, only on activeBucket=all. decorateAllUnreadDot() reads only state.unseenCardIds which now contains exclusively remote ids → no dot from local card creation. style.css: new .card-pulse-local class — same @keyframes but animation-iteration-count:1. Anim-fast/slow overrides added. chore: bump version to 0.9.16 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
088c225202
commit
ce6ca73ea0
7 files changed
+51
-17
No files matched your search
+1
-1
@@ -1,7 +1,7 @@
|
||||
<?php
|
||||
|
||||
define('APP_NAME', 'hyprcrd');
|
||||
define('APP_VERSION', '0.9.15');
|
||||
define('APP_VERSION', '0.9.16');
|
||||
|
||||
// Database path — writable directory, outside webroot
|
||||
define('DB_PATH', __DIR__ . '/data/hyprcrd.db');
|
||||
|
||||
@@ -786,12 +786,24 @@ body.detail-image-fs-open { overflow: hidden; }
|
||||
animation: card-pulse-new 0.8s ease-in-out 3;
|
||||
z-index: 5;
|
||||
}
|
||||
/* Single pulse for cards the user just created themselves — subtler
|
||||
than the triple-pulse for relay-synced cards so the user registers
|
||||
"I made this" without the urgency of "someone else sent this". */
|
||||
.board-card.card-pulse-local {
|
||||
animation: card-pulse-new 0.8s ease-in-out 1;
|
||||
z-index: 5;
|
||||
}
|
||||
/* Pin the cadence so anim-fast/anim-slow can't strobe it */
|
||||
body.anim-fast .board-card.card-pulse-new,
|
||||
body.anim-slow .board-card.card-pulse-new {
|
||||
animation: card-pulse-new 0.8s ease-in-out 3 !important;
|
||||
animation-duration: 0.8s !important;
|
||||
}
|
||||
body.anim-fast .board-card.card-pulse-local,
|
||||
body.anim-slow .board-card.card-pulse-local {
|
||||
animation: card-pulse-new 0.8s ease-in-out 1 !important;
|
||||
animation-duration: 0.8s !important;
|
||||
}
|
||||
|
||||
/* Super-bucket dropdown popover. Positioned via inline styles by
|
||||
openSuperDropdown() in buckets.js. Lives on document.body (not
|
||||
|
||||
+2
-1
@@ -401,7 +401,8 @@ document.getElementById('quick-capture-input')?.addEventListener('keydown', asyn
|
||||
// don't map to a bucket_id — cards captured there stay unsorted.
|
||||
const VIRTUAL = ['all', 'current', 'favorites', 'journal', 'none'];
|
||||
const bucketId = VIRTUAL.includes(state.activeBucket) ? null : state.activeBucket;
|
||||
await api('api/cards', { method: 'POST', body: { title: cardTitle, body, color: '#38bdf8', position: -1, bucket_id: bucketId } });
|
||||
const captured = await api('api/cards', { method: 'POST', body: { title: cardTitle, body, color: '#38bdf8', position: -1, bucket_id: bucketId } });
|
||||
if (captured?.id) state.recentlyCreatedIds?.add(String(captured.id));
|
||||
|
||||
e.target.value = '';
|
||||
document.getElementById('quick-capture').classList.add('hidden');
|
||||
|
||||
+26
-13
@@ -38,17 +38,19 @@ const draggingCardIds = new Set();
|
||||
// the all view) or wait for the next visit to the all tab to pulse.
|
||||
let knownCardIds = null;
|
||||
|
||||
/** Add an accent pulse class to the matching board cards and strip it
|
||||
* again after the animation finishes. The animation itself is in
|
||||
* public/css/style.css `@keyframes card-pulse-new`. */
|
||||
function pulseCardsNew(ids) {
|
||||
/** Add a pulse class to matching board cards and strip it after the
|
||||
* animation. `cls` controls the variant: 'card-pulse-new' (3×, for
|
||||
* relay-synced cards) or 'card-pulse-local' (1×, for cards the user
|
||||
* just created themselves). */
|
||||
function pulseCards(ids, cls = 'card-pulse-new') {
|
||||
if (!ids || !ids.size) return;
|
||||
const durationMs = cls === 'card-pulse-local' ? 900 : 2400;
|
||||
requestAnimationFrame(() => {
|
||||
for (const id of ids) {
|
||||
const el = board.querySelector(`[data-id="${id}"]`);
|
||||
if (!el) continue;
|
||||
el.classList.add('card-pulse-new');
|
||||
setTimeout(() => el.classList.remove('card-pulse-new'), 2400);
|
||||
el.classList.add(cls);
|
||||
setTimeout(() => el.classList.remove(cls), durationMs);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -487,9 +489,14 @@ export function renderBoard() {
|
||||
// the first real load looks like "every card just arrived" and the
|
||||
// entire board pulses on page open.
|
||||
const currentIds = new Set(state.cards.map(c => String(c.id)));
|
||||
const newLocalIds = new Set();
|
||||
if (knownCardIds && knownCardIds.size > 0) {
|
||||
for (const id of currentIds) {
|
||||
if (!knownCardIds.has(id)) state.unseenCardIds.add(id);
|
||||
if (knownCardIds.has(id)) continue;
|
||||
// Locally-created cards go into a separate set — they get a
|
||||
// 1× pulse but must NOT trigger the unread dot on the all-tab.
|
||||
if (state.recentlyCreatedIds.has(id)) newLocalIds.add(id);
|
||||
else state.unseenCardIds.add(id);
|
||||
}
|
||||
}
|
||||
knownCardIds = currentIds;
|
||||
@@ -733,14 +740,20 @@ export function renderBoard() {
|
||||
// Notification banner
|
||||
renderNotifs();
|
||||
|
||||
// Unread tracking: if we're on the all view, drain the unseen set
|
||||
// by pulsing every matching card on the board (the "look at me"
|
||||
// accent flash). If we're on a different view, the unseen ids stay
|
||||
// accumulated and the all-tab gets a dot until the user opens it.
|
||||
// Pulse locally-created cards in ANY bucket (1× subtle pulse).
|
||||
// These never enter unseenCardIds so they can't trigger the all-tab
|
||||
// dot — the user just made them, there's nothing "unseen" about it.
|
||||
if (newLocalIds.size) {
|
||||
for (const id of newLocalIds) state.recentlyCreatedIds.delete(id);
|
||||
pulseCards(newLocalIds, 'card-pulse-local');
|
||||
}
|
||||
// Remote (relay-synced) cards: pulse 3× only when the user is on
|
||||
// the all view. On other views, the unseen ids accumulate and
|
||||
// the all-tab gets a dot until the user opens it.
|
||||
if (state.activeBucket === 'all' && state.unseenCardIds.size) {
|
||||
const toPulse = new Set(state.unseenCardIds);
|
||||
const remote = new Set(state.unseenCardIds);
|
||||
state.unseenCardIds.clear();
|
||||
pulseCardsNew(toPulse);
|
||||
pulseCards(remote, 'card-pulse-new');
|
||||
}
|
||||
decorateAllUnreadDot();
|
||||
}
|
||||
|
||||
@@ -283,9 +283,11 @@ export function showContextMenu(x, y, card) {
|
||||
const newDate = await showDialog({ title: 'duplicate_to_date', input: 'date', defaultValue: curDate, okLabel: 'Duplicate' });
|
||||
if (!newDate) return;
|
||||
const newTitle = card.title.replace(/^\d{4}-\d{2}-\d{2}/, newDate.trim());
|
||||
await api('api/cards', { method: 'POST', body: { title: newTitle, body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } });
|
||||
const dup1 = await api('api/cards', { method: 'POST', body: { title: newTitle, body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } });
|
||||
if (dup1?.id) state.recentlyCreatedIds?.add(String(dup1.id));
|
||||
} else {
|
||||
await api('api/cards', { method: 'POST', body: { title: card.title + ' (copy)', body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } });
|
||||
const dup2 = await api('api/cards', { method: 'POST', body: { title: card.title + ' (copy)', body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } });
|
||||
if (dup2?.id) state.recentlyCreatedIds?.add(String(dup2.id));
|
||||
}
|
||||
await window._reloadAll();
|
||||
}
|
||||
|
||||
@@ -415,6 +415,7 @@ async function doSave(close, { animate = true } = {}) {
|
||||
if (created?.id) {
|
||||
if (!close) state.editingId = created.id;
|
||||
state._lastSavedId = created.id;
|
||||
state.recentlyCreatedIds?.add(String(created.id));
|
||||
}
|
||||
}
|
||||
await window._reloadAll();
|
||||
|
||||
@@ -37,6 +37,11 @@ export const state = {
|
||||
// accent pulse on the cards themselves once the user looks at them.
|
||||
// Updated by board.js renderBoard() — see the diff there.
|
||||
unseenCardIds: new Set(),
|
||||
// Ids of cards the user just created locally (editor save, quick
|
||||
// capture, duplicate, undo-recreate). These get a single-pulse (1x)
|
||||
// instead of the triple-pulse (3x) that relay-synced cards get.
|
||||
// Consumed by renderBoard's diff — once used, the id is removed.
|
||||
recentlyCreatedIds: new Set(),
|
||||
|
||||
// Detail / editor
|
||||
editingId: null,
|
||||
|
||||
Reference in new issue
Block a user