jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add forgotten-shape tooltip and "Hide Faded" toggle 

Hovering a forgotten shape now shows a tooltip explaining the state.
A new "Hide Faded" toolbar button lets users hide all forgotten shapes
entirely, with the preference persisted in localStorage. Hidden shapes
reappear automatically when another user remembers them.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-01 15:05:20 -08:00
parent 384ef23ae1
commit 7db6068229
2 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
lib/folk-shape.ts
View File

@ -112,6 +112,25 @@ const styles = css`
transition: opacity 0.3s ease, filter 0.3s ease; transition: opacity 0.3s ease, filter 0.3s ease;
} }
[part="forgotten-tooltip"] {
display: none;
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.85);
color: #fff;
font-size: 11px;
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
z-index: 9999;
}
:host(:state(forgotten)):hover [part="forgotten-tooltip"] {
display: block;
}
:host(:state(move)), :host(:state(move)),
:host(:state(rotate)), :host(:state(rotate)),
:host(:state(resize-top-left)), :host(:state(resize-top-left)),
@ -351,7 +370,8 @@ export class FolkShape extends FolkElement {
<button part="resize-top-right" aria-label="Resize shape from top right"></button> <button part="resize-top-right" aria-label="Resize shape from top right"></button>
<button part="resize-bottom-right" aria-label="Resize shape from bottom right"></button> <button part="resize-bottom-right" aria-label="Resize shape from bottom right"></button>
<button part="resize-bottom-left" aria-label="Resize shape from bottom left"></button> <button part="resize-bottom-left" aria-label="Resize shape from bottom left"></button>
<div class="slot-container"><slot></slot></div>`, <div class="slot-container"><slot></slot></div>
<div part="forgotten-tooltip">Forgotten — right-click to remember or delete</div>`,
); );
this.#handles = Object.fromEntries( this.#handles = Object.fromEntries(

19
website/canvas.html
View File

@ -663,6 +663,10 @@
overflow: visible; overflow: visible;
} }
#canvas-content.hide-forgotten :state(forgotten) {
display: none !important;
}
#select-rect { #select-rect {
position: fixed; position: fixed;
border: 1.5px solid #3b82f6; border: 1.5px solid #3b82f6;
@ -1128,6 +1132,7 @@
<button id="new-arrow" title="Connect rSpaces">↗️ Connect</button> <button id="new-arrow" title="Connect rSpaces">↗️ Connect</button>
<button id="new-feed" title="New Feed from another layer">🔄 Feed</button> <button id="new-feed" title="New Feed from another layer">🔄 Feed</button>
<button id="toggle-memory" title="Forgotten rSpaces">💭 Memory</button> <button id="toggle-memory" title="Forgotten rSpaces">💭 Memory</button>
<button id="toggle-hide-forgotten" title="Hide forgotten items">👁 Hide Faded</button>
<button id="toggle-theme" title="Toggle dark mode">🌙 Dark</button> <button id="toggle-theme" title="Toggle dark mode">🌙 Dark</button>
<span class="toolbar-sep"></span> <span class="toolbar-sep"></span>
@ -2907,6 +2912,18 @@
if (isOpen) renderMemoryPanel(); if (isOpen) renderMemoryPanel();
}); });
// Hide Faded toggle — hides all forgotten shapes from the canvas
const hideForgottenBtn = document.getElementById("toggle-hide-forgotten");
if (localStorage.getItem("rspace_hide_forgotten") === "1") {
canvasContent.classList.add("hide-forgotten");
hideForgottenBtn.classList.add("active");
}
hideForgottenBtn.addEventListener("click", () => {
const hidden = canvasContent.classList.toggle("hide-forgotten");
hideForgottenBtn.classList.toggle("active", hidden);
localStorage.setItem("rspace_hide_forgotten", hidden ? "1" : "0");
});
// Refresh panel when shapes change state via remote sync // Refresh panel when shapes change state via remote sync
sync.addEventListener("shape-forgotten", () => { sync.addEventListener("shape-forgotten", () => {
if (memoryPanel.classList.contains("open")) renderMemoryPanel(); if (memoryPanel.classList.contains("open")) renderMemoryPanel();
@ -2977,7 +2994,7 @@
const btn = e.target.closest("button"); const btn = e.target.closest("button");
if (!btn) return; if (!btn) return;
// Keep open for connect, memory, group toggles, collapse, whiteboard tools // Keep open for connect, memory, group toggles, collapse, whiteboard tools
const keepOpen = ["new-arrow", "toggle-memory", "toggle-theme", "zoom-in", "zoom-out", "reset-view", "toolbar-collapse", const keepOpen = ["new-arrow", "toggle-memory", "toggle-hide-forgotten", "toggle-theme", "zoom-in", "zoom-out", "reset-view", "toolbar-collapse",
"wb-pencil", "wb-rect", "wb-circle", "wb-line", "wb-eraser"]; "wb-pencil", "wb-rect", "wb-circle", "wb-line", "wb-eraser"];
if (btn.classList.contains("toolbar-group-toggle")) return; if (btn.classList.contains("toolbar-group-toggle")) return;
if (!keepOpen.includes(btn.id)) { if (!keepOpen.includes(btn.id)) {