diff --git a/CHANGELOG.md b/CHANGELOG.md index 913aaf5..d79753e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ ### Added - App mode: live workflows work in ComfyUI's App view. Each person keeps their own graph or App view through live edits, and App inputs sync. Cursors are off in the App view. Workflows saved as Apps (`.app.json`) show with an app icon in Files and in the Live list, and Save keeps them Apps -- In the App view, where ComfyUI shows only its own sidebar tabs, a small dock at the bottom left opens the RigShare panel and Files in a drawer, with the unread chat badge +- In the App view, where ComfyUI shows only its own sidebar tabs, RigShare adds **RigShare** and **Files** buttons to that sidebar, with the unread chat badge. They open the panels in a drawer beside it - ComfyUI's own Workflows and Apps sidebar tabs are hidden, since Files replaces them, and their shortcuts open Files. Admin setting `hide_comfy_file_tabs`, on by default ## 1.1.0 (2026-09-26) diff --git a/docs/sharing.md b/docs/sharing.md index 3b46a73..97c29a6 100644 --- a/docs/sharing.md +++ b/docs/sharing.md @@ -29,7 +29,7 @@ Only the tab on screen is live. Switch to another tab and you leave the room; sw - Two people editing the same node at once: the last change wins. - Two people adding or connecting nodes at the same moment both keep their work. If both picked the same node or link id, the server renumbers the later one and quietly resyncs that person. Links and groups merge one by one, so a connection made by one person never erases another's. -**App mode.** Each person chooses for themselves whether a workflow shows as the node graph or as an App. Switching doesn't change anyone else's view, and live edits keep it. Inputs changed in the App view sync like any other widget value. The app's layout, meaning its chosen inputs and outputs, belongs to the workflow and syncs. Cursors aren't shown in the App view. ComfyUI's App view shows only its own sidebar tabs, so RigShare adds a small dock at the bottom left there: it opens the RigShare panel and Files in a drawer, and shows the unread chat badge. +**App mode.** Each person chooses for themselves whether a workflow shows as the node graph or as an App. Switching doesn't change anyone else's view, and live edits keep it. Inputs changed in the App view sync like any other widget value. The app's layout, meaning its chosen inputs and outputs, belongs to the workflow and syncs. Cursors aren't shown in the App view. ComfyUI's App view shows only its own sidebar tabs, so RigShare adds **RigShare** and **Files** buttons to that sidebar, with the unread chat badge. They open the panels in a drawer beside it. Viewers (no *Edit* permission) see a read-only canvas. Anything they change locally is put back. diff --git a/web/rigshare/app-dock.js b/web/rigshare/app-dock.js index 1b89fef..dd04240 100644 --- a/web/rigshare/app-dock.js +++ b/web/rigshare/app-dock.js @@ -1,12 +1,15 @@ // RigShare in ComfyUI's App mode. // -// The App view shows a fixed set of sidebar tabs (assets and apps), so the +// The App view's sidebar shows a fixed set of tabs (assets and apps), so the // RigShare and Files tabs disappear there. While the tab on screen is in the -// App view, a small dock offers them instead, each opening the same panel in -// a drawer. +// App view, RigShare adds its own buttons to that sidebar, copied from +// ComfyUI's so they look the same, and opens the panels in a drawer next to it. +// If the sidebar can't be found, a small floating dock offers them instead. import { h } from "./ui.js"; +const RAIL = 'nav[data-testid="side-toolbar"]'; + export class AppDock { /** * views: { id: { icon, title, mount(el), unmount() } } @@ -15,7 +18,9 @@ export class AppDock { this.sync = sync; this.views = views; this.open = null; - this.buttons = {}; + this.badges = {}; + this.railButtons = {}; + this.dockButtons = {}; this.body = h("div", { class: "rs-host rs-dock-drawer-body" }); this.drawer = h("div", { class: "rs-dock-drawer rs-panel-vars", role: "dialog" }, h("button", { class: "rs-dock-close", title: "Close", onclick: () => this.show(null) }, h("i", { class: "pi pi-times" })), @@ -24,37 +29,122 @@ export class AppDock { const badge = h("span", { class: "rs-dock-badge" }); const btn = h("button", { class: "rs-dock-btn", title: v.title, "aria-label": v.title, - onclick: () => this.show(this.open === id ? null : id), + onclick: () => this.toggle(id), }, h("i", { class: `pi ${v.icon}` }), badge); - this.buttons[id] = { btn, badge }; + this.dockButtons[id] = { btn, badge }; return btn; })); this.dock.style.display = "none"; this.drawer.style.display = "none"; document.body.append(this.dock, this.drawer); document.addEventListener("keydown", (e) => { if (e.key === "Escape" && this.open) this.show(null); }); - setInterval(() => this.update(), 500); + setInterval(() => this.update(), 400); + } + + toggle(id) { + this.show(this.open === id ? null : id); } update() { const active = this.sync.inAppMode; - this.dock.style.display = active ? "" : "none"; + const rail = active ? document.querySelector(RAIL) : null; + if (rail) this.addToRail(rail); + else this.removeFromRail(); + this.dock.style.display = active && !rail ? "" : "none"; if (!active && this.open) this.show(null); + if (this.open) this.place(rail); + } + + /** Copy one of ComfyUI's sidebar buttons for each view, placed after its own tabs. */ + addToRail(rail) { + const ours = Object.values(this.railButtons); + if (ours.length && ours.every((b) => rail.contains(b.btn))) return; + const tabs = [...rail.querySelectorAll('[data-testid$="-tab-button"]')].filter((b) => !b.dataset.rigshare); + const template = tabs.at(-1); + if (!template) return; + this.removeFromRail(); + let after = template; + for (const [id, view] of Object.entries(this.views)) { + const btn = template.cloneNode(true); + btn.removeAttribute("data-testid"); + btn.dataset.rigshare = id; + btn.classList.remove("side-bar-button-selected"); + btn.setAttribute("aria-label", view.title); + btn.title = view.title; + const icon = btn.querySelector(".side-bar-button-icon"); + if (icon) { + const mine = document.createElement("i"); + mine.className = `pi ${view.icon} side-bar-button-icon`; + mine.style.fontSize = "18px"; + icon.replaceWith(mine); + } + btn.querySelector(".sidebar-icon-badge")?.remove(); + const label = [...btn.querySelectorAll("span")].find((s) => s.textContent.trim()); + if (label) label.textContent = view.title; + const badge = document.createElement("span"); + badge.className = "sidebar-icon-badge rs-rail-badge"; + const holder = btn.querySelector(".side-bar-button-icon")?.parentElement ?? btn; + holder.style.position = "relative"; // the badge sits on the icon's corner + holder.append(badge); + btn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(id); }); + after.after(btn); + after = btn; + this.railButtons[id] = { btn, badge }; + } + this.refreshButtons(); + } + + removeFromRail() { + for (const b of Object.values(this.railButtons)) b.btn.remove(); + this.railButtons = {}; + } + + /** Beside the sidebar when there is one, above the floating dock otherwise. */ + place(rail) { + const d = this.drawer.style; + if (rail) { + const r = rail.getBoundingClientRect(); + d.left = `${Math.round(r.right + 8)}px`; + d.top = `${Math.round(r.top + 8)}px`; + d.bottom = "8px"; + } else { + d.left = "64px"; + d.top = "8px"; + d.bottom = "64px"; + } } show(id) { if (this.open) this.views[this.open].unmount?.(); this.open = id; - for (const [key, b] of Object.entries(this.buttons)) b.btn.classList.toggle("active", key === id); + this.refreshButtons(); this.drawer.style.display = id ? "" : "none"; - if (id) this.views[id].mount(this.body); - else this.body.replaceChildren(); + if (id) { + this.place(document.querySelector(RAIL)); + this.views[id].mount(this.body); + } else { + this.body.replaceChildren(); + } + } + + refreshButtons() { + for (const [id, b] of Object.entries(this.railButtons)) { + b.btn.classList.toggle("side-bar-button-selected", id === this.open); + this.paintBadge(b.badge, this.badges[id]); + } + for (const [id, b] of Object.entries(this.dockButtons)) { + b.btn.classList.toggle("active", id === this.open); + this.paintBadge(b.badge, this.badges[id]); + } + } + + paintBadge(el, text) { + el.textContent = text || ""; + el.style.display = text ? "block" : "none"; } setBadge(id, text) { - const b = this.buttons[id]; - if (!b) return; - b.badge.textContent = text || ""; - b.badge.style.display = text ? "block" : "none"; + this.badges[id] = text || null; + this.refreshButtons(); } } diff --git a/web/rigshare/styles.js b/web/rigshare/styles.js index 111befb..085b81c 100644 --- a/web/rigshare/styles.js +++ b/web/rigshare/styles.js @@ -257,6 +257,8 @@ body.rs-no-manager [aria-label="ComfyUI Manager"] { display: none !important; } background: var(--rs-bg); border: 1px solid var(--rs-border); border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .45); overflow: hidden; } .rs-dock-drawer-body { height: 100%; } .rs-dock-drawer .rs-header { padding-right: 40px; } +.rs-rail-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; + background: #ef4444; color: #fff; font-size: 10px; line-height: 16px; font-weight: 700; text-align: center; } .rs-dock-close { position: absolute; top: 8px; right: 8px; z-index: 2; border: 0; background: none; color: var(--rs-muted); cursor: pointer; padding: 4px; } .rs-dock-close:hover { color: var(--rs-fg); } .rs-cursor-layer { position: fixed; inset: 0; pointer-events: none; z-index: 900; overflow: hidden; }