From 5175fad47cc77c25f697a81cdac15ef0086c40e2 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Fri, 3 Jul 2026 15:36:22 +0530 Subject: [PATCH 1/4] feat(live-share): improve first-time session flow --- index.html | 37 ++++++++++++--- script.js | 44 ++++++++++++++++++ styles.css | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 205 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 92266f86..d00da450 100644 --- a/index.html +++ b/index.html @@ -761,6 +761,20 @@

Open-source credits

+
+
+ 1 + Start session +
+
+ 2 + Copy invite link +
+
+ 3 + Watch participants +
+
@@ -769,12 +783,23 @@

Open-source credits

No live room active
-
- diff --git a/script.js b/script.js index 929646b4..33f32f77 100644 --- a/script.js +++ b/script.js @@ -11912,6 +11912,10 @@ document.addEventListener("DOMContentLoaded", async function () { const liveShareStatus = document.getElementById('live-share-status'); const liveShareStatusText = document.getElementById('live-share-status-text'); const liveShareParticipants = document.getElementById('live-share-participants'); + const liveShareFlow = document.getElementById('live-share-flow'); + const liveShareInviteSection = document.getElementById('live-share-invite-section'); + const liveShareInviteState = document.getElementById('live-share-invite-state'); + const liveShareInviteHelp = document.getElementById('live-share-invite-help'); const liveShareToolbarParticipants = document.getElementById('live-share-toolbar-participants'); const liveShareExpiredModal = document.getElementById('live-share-expired-modal'); const liveShareExpiredMessage = document.getElementById('live-share-expired-message'); @@ -12519,6 +12523,44 @@ document.addEventListener("DOMContentLoaded", async function () { container.appendChild(fragment); } + function updateLiveShareGuidance(isActive, participantCount) { + const hasCollaborators = isActive && participantCount > 1; + const state = !isActive ? 'idle' : (hasCollaborators ? 'joined' : 'active'); + + if (liveShareFlow) { + liveShareFlow.dataset.state = state; + liveShareFlow.querySelectorAll('.live-share-flow-step').forEach(function(step) { + const stepName = step.dataset.liveStep; + step.classList.remove('is-current', 'is-complete'); + if (!isActive && stepName === 'start') { + step.classList.add('is-current'); + } else if (isActive && !hasCollaborators && stepName === 'copy') { + step.classList.add('is-current'); + } else if (hasCollaborators && stepName === 'join') { + step.classList.add('is-current'); + } + if ((isActive && stepName === 'start') || (hasCollaborators && stepName === 'copy')) { + step.classList.add('is-complete'); + } + }); + } + + if (liveShareInviteSection) { + liveShareInviteSection.dataset.state = state; + } + if (liveShareInviteState) { + liveShareInviteState.textContent = isActive ? 'Ready to copy' : 'Created after session starts'; + } + if (liveShareInviteHelp) { + liveShareInviteHelp.textContent = isActive + ? 'Copy this link and send it to collaborators. New participants appear above when they join.' + : 'Click Start session to create a temporary room and generate an invite link.'; + } + if (liveShareCopyBtn) { + liveShareCopyBtn.title = isActive ? 'Copy invite link' : 'Start a session first'; + } + } + function renderLiveParticipants() { const participants = getLiveParticipants(); const participantCount = participants.length || 1; @@ -12540,6 +12582,7 @@ document.addEventListener("DOMContentLoaded", async function () { showLiveParticipantsPopover(event.currentTarget, allParticipants); } }); + updateLiveShareGuidance(true, participantCount); setLiveShareStatus(status, state); } @@ -12568,6 +12611,7 @@ document.addEventListener("DOMContentLoaded", async function () { liveShareToolbarParticipants.hidden = true; } if (liveShareUrlInput) liveShareUrlInput.value = ''; + updateLiveShareGuidance(false, 0); } else { renderLiveParticipants(); } diff --git a/styles.css b/styles.css index 14f3825d..6d2a175f 100644 --- a/styles.css +++ b/styles.css @@ -3347,6 +3347,75 @@ a:focus { background: var(--color-danger-fg); } +.live-share-flow { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 8px; + margin: 12px 0; +} + +.live-share-flow-step { + display: flex; + align-items: center; + gap: 7px; + min-width: 0; + padding: 8px; + border: 1px solid var(--border-color); + border-radius: 8px; + background: var(--button-bg); + color: var(--text-secondary); + font-size: 12px; + font-weight: 600; +} + +.live-share-flow-step span:last-child { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.live-share-flow-number { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 20px; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--editor-bg); + color: var(--text-secondary); + font-size: 11px; + font-weight: 700; +} + +.live-share-flow-step.is-current { + border-color: var(--accent-color); + background: rgba(3, 102, 214, 0.08); + color: var(--accent-color); +} + +.live-share-flow-step.is-current .live-share-flow-number, +.live-share-flow-step.is-complete .live-share-flow-number { + background: var(--accent-color); + color: #ffffff; +} + +.live-share-flow-step.is-complete { + color: var(--text-color); +} + +.live-share-section-title { + font-size: 12px; + font-weight: 700; + color: var(--text-secondary); +} + +.live-share-participant-panel { + display: grid; + gap: 7px; +} + .live-share-participants { display: flex; flex-wrap: nowrap; @@ -3467,6 +3536,55 @@ button.live-share-participant-overflow { background: var(--button-hover); } +.live-share-invite { + display: grid; + gap: 8px; + padding: 10px; + border: 1px solid var(--border-color); + border-radius: 8px; + background: var(--editor-bg); +} + +.live-share-invite[data-state="active"], +.live-share-invite[data-state="joined"] { + border-color: rgba(3, 102, 214, 0.45); + background: rgba(3, 102, 214, 0.05); +} + +.live-share-invite-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.live-share-invite-state { + color: var(--text-secondary); + font-size: 11px; + font-weight: 600; + white-space: nowrap; +} + +.live-share-invite[data-state="active"] .live-share-invite-state, +.live-share-invite[data-state="joined"] .live-share-invite-state { + color: var(--accent-color); +} + +.live-share-copy-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + min-width: 74px; +} + +.live-share-invite-help { + margin: 0; + color: var(--text-secondary); + font-size: 12px; + line-height: 1.35; +} + .live-share-participant-popover { position: fixed; z-index: 3500; @@ -3513,6 +3631,18 @@ button.live-share-participant-overflow { align-items: stretch; } +@media (max-width: 560px) { + .live-share-flow { + grid-template-columns: 1fr; + } + + .live-share-invite-header { + align-items: flex-start; + flex-direction: column; + gap: 3px; + } +} + /* ========================================================================== Multilingual & CJK Optimization styles added by Aegis SEO agency ========================================================================== */ From 15a5b1852c6b0c90cbaa5967749082cce59386f1 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Fri, 3 Jul 2026 15:40:21 +0530 Subject: [PATCH 2/4] fix(live-share): remove first-time step strip --- index.html | 14 ------------ script.js | 19 ----------------- styles.css | 62 ------------------------------------------------------ 3 files changed, 95 deletions(-) diff --git a/index.html b/index.html index d00da450..f20782f8 100644 --- a/index.html +++ b/index.html @@ -761,20 +761,6 @@

Open-source credits

-
-
- 1 - Start session -
-
- 2 - Copy invite link -
-
- 3 - Watch participants -
-
diff --git a/script.js b/script.js index 33f32f77..4501d4ed 100644 --- a/script.js +++ b/script.js @@ -11912,7 +11912,6 @@ document.addEventListener("DOMContentLoaded", async function () { const liveShareStatus = document.getElementById('live-share-status'); const liveShareStatusText = document.getElementById('live-share-status-text'); const liveShareParticipants = document.getElementById('live-share-participants'); - const liveShareFlow = document.getElementById('live-share-flow'); const liveShareInviteSection = document.getElementById('live-share-invite-section'); const liveShareInviteState = document.getElementById('live-share-invite-state'); const liveShareInviteHelp = document.getElementById('live-share-invite-help'); @@ -12527,24 +12526,6 @@ document.addEventListener("DOMContentLoaded", async function () { const hasCollaborators = isActive && participantCount > 1; const state = !isActive ? 'idle' : (hasCollaborators ? 'joined' : 'active'); - if (liveShareFlow) { - liveShareFlow.dataset.state = state; - liveShareFlow.querySelectorAll('.live-share-flow-step').forEach(function(step) { - const stepName = step.dataset.liveStep; - step.classList.remove('is-current', 'is-complete'); - if (!isActive && stepName === 'start') { - step.classList.add('is-current'); - } else if (isActive && !hasCollaborators && stepName === 'copy') { - step.classList.add('is-current'); - } else if (hasCollaborators && stepName === 'join') { - step.classList.add('is-current'); - } - if ((isActive && stepName === 'start') || (hasCollaborators && stepName === 'copy')) { - step.classList.add('is-complete'); - } - }); - } - if (liveShareInviteSection) { liveShareInviteSection.dataset.state = state; } diff --git a/styles.css b/styles.css index 6d2a175f..f95e4ffc 100644 --- a/styles.css +++ b/styles.css @@ -3347,64 +3347,6 @@ a:focus { background: var(--color-danger-fg); } -.live-share-flow { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 8px; - margin: 12px 0; -} - -.live-share-flow-step { - display: flex; - align-items: center; - gap: 7px; - min-width: 0; - padding: 8px; - border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--button-bg); - color: var(--text-secondary); - font-size: 12px; - font-weight: 600; -} - -.live-share-flow-step span:last-child { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.live-share-flow-number { - display: inline-flex; - align-items: center; - justify-content: center; - flex: 0 0 20px; - width: 20px; - height: 20px; - border-radius: 50%; - background: var(--editor-bg); - color: var(--text-secondary); - font-size: 11px; - font-weight: 700; -} - -.live-share-flow-step.is-current { - border-color: var(--accent-color); - background: rgba(3, 102, 214, 0.08); - color: var(--accent-color); -} - -.live-share-flow-step.is-current .live-share-flow-number, -.live-share-flow-step.is-complete .live-share-flow-number { - background: var(--accent-color); - color: #ffffff; -} - -.live-share-flow-step.is-complete { - color: var(--text-color); -} - .live-share-section-title { font-size: 12px; font-weight: 700; @@ -3632,10 +3574,6 @@ button.live-share-participant-overflow { } @media (max-width: 560px) { - .live-share-flow { - grid-template-columns: 1fr; - } - .live-share-invite-header { align-items: flex-start; flex-direction: column; From 69f936e315309b718ddf81517426397c3a155aa8 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Fri, 3 Jul 2026 16:16:01 +0530 Subject: [PATCH 3/4] feat(live-share): clarify active session state --- index.html | 11 ++++++++++ script.js | 7 +++++++ styles.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 77 insertions(+) diff --git a/index.html b/index.html index f20782f8..48614ee1 100644 --- a/index.html +++ b/index.html @@ -765,6 +765,17 @@

Open-source credits

+
No live room active diff --git a/script.js b/script.js index 4501d4ed..1c87e134 100644 --- a/script.js +++ b/script.js @@ -11912,6 +11912,7 @@ document.addEventListener("DOMContentLoaded", async function () { const liveShareStatus = document.getElementById('live-share-status'); const liveShareStatusText = document.getElementById('live-share-status-text'); const liveShareParticipants = document.getElementById('live-share-participants'); + const liveShareActivePanel = document.getElementById('live-share-active-panel'); const liveShareInviteSection = document.getElementById('live-share-invite-section'); const liveShareInviteState = document.getElementById('live-share-invite-state'); const liveShareInviteHelp = document.getElementById('live-share-invite-help'); @@ -12526,6 +12527,10 @@ document.addEventListener("DOMContentLoaded", async function () { const hasCollaborators = isActive && participantCount > 1; const state = !isActive ? 'idle' : (hasCollaborators ? 'joined' : 'active'); + if (liveShareActivePanel) { + liveShareActivePanel.hidden = !isActive; + liveShareActivePanel.dataset.state = state; + } if (liveShareInviteSection) { liveShareInviteSection.dataset.state = state; } @@ -12580,6 +12585,8 @@ document.addEventListener("DOMContentLoaded", async function () { liveShareEndBtn.disabled = !isActive; liveShareEndBtn.hidden = !isActive; liveShareEndBtn.textContent = isHost ? 'End session' : 'Leave session'; + liveShareEndBtn.classList.toggle('reset-modal-confirm', isHost); + liveShareEndBtn.classList.toggle('reset-modal-cancel', !isHost); } if (liveShareCopyBtn) { liveShareCopyBtn.disabled = !isActive || !liveShareUrlInput || !liveShareUrlInput.value; diff --git a/styles.css b/styles.css index f95e4ffc..6d0b33e0 100644 --- a/styles.css +++ b/styles.css @@ -3347,6 +3347,61 @@ a:focus { background: var(--color-danger-fg); } +.live-share-active-panel { + display: grid; + gap: 9px; + padding: 11px 12px; + border: 1px solid rgba(26, 127, 55, 0.25); + border-radius: 8px; + background: rgba(26, 127, 55, 0.08); +} + +.live-share-active-panel[hidden] { + display: none; +} + +.live-share-active-badge { + display: inline-flex; + align-items: center; + gap: 7px; + width: fit-content; + padding: 4px 9px; + border: 1px solid rgba(26, 127, 55, 0.28); + border-radius: 999px; + background: var(--editor-bg); + color: #1a7f37; + font-size: 12px; + font-weight: 700; +} + +.live-share-active-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: #1a7f37; + box-shadow: 0 0 0 4px rgba(26, 127, 55, 0.12); +} + +.live-share-active-steps { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 8px; + color: var(--text-secondary); + font-size: 12px; +} + +.live-share-active-steps span { + display: inline-flex; + align-items: center; + gap: 6px; + min-width: 0; +} + +.live-share-active-steps i { + color: #1a7f37; + flex-shrink: 0; +} + .live-share-section-title { font-size: 12px; font-weight: 700; @@ -3574,6 +3629,10 @@ button.live-share-participant-overflow { } @media (max-width: 560px) { + .live-share-active-steps { + grid-template-columns: 1fr; + } + .live-share-invite-header { align-items: flex-start; flex-direction: column; From 44977251518d8d6fdc8ee14f82267893821aa246 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Fri, 3 Jul 2026 16:21:43 +0530 Subject: [PATCH 4/4] style(live-share): move active badge to header --- index.html | 19 +++++++------------ script.js | 8 ++++---- styles.css | 46 +++++++++++++--------------------------------- 3 files changed, 24 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 48614ee1..dc9b560b 100644 --- a/index.html +++ b/index.html @@ -754,7 +754,13 @@

Open-source credits