Skip to content

feat(live-share): improve first-time session flow #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ThisIs-Developer merged 4 commits into from
Jul 3, 2026
Merged

feat(live-share): improve first-time session flow #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5175fad
feat(live-share): improve first-time session flow
ThisIs-Developer Jul 3, 2026
15a5b18
fix(live-share): remove first-time step strip
ThisIs-Developer Jul 3, 2026
69f936e
feat(live-share): clarify active session state
ThisIs-Developer Jul 3, 2026
4497725
style(live-share): move active badge to header
ThisIs-Developer Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 24 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -754,7 +754,13 @@ <h3 class="modal-section-title">Open-source credits</h3>
<div id="live-share-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="live-share-modal-title" aria-hidden="true" style="display:none;">
<div class="reset-modal-box reset-modal-box--wide modal-box">
<div class="modal-header">
<p id="live-share-modal-title" class="reset-modal-message">Live Share</p>
<div class="live-share-title-row">
<p id="live-share-modal-title" class="reset-modal-message">Live Share</p>
<span class="live-share-active-badge" id="live-share-active-badge" hidden>
<span class="live-share-active-dot" aria-hidden="true"></span>
<span>Session Active</span>
</span>
</div>
<button type="button" class="modal-close-btn" id="live-share-modal-close-icon" aria-label="Close live share dialog">
<i class="bi bi-x-lg"></i>
</button>
Expand All @@ -769,12 +775,23 @@ <h3 class="modal-section-title">Open-source credits</h3>
<span class="live-share-status-dot" aria-hidden="true"></span>
<span id="live-share-status-text">No live room active</span>
</div>
<div class="live-share-participants" id="live-share-participants" aria-label="Live collaborators"></div>
<div class="share-url-row live-share-link-row">
<input type="text" id="live-share-url-input" class="rename-modal-input share-url-input" readonly placeholder="Start a session to create an invite link" aria-label="Live Share invite link" />
<button class="reset-modal-btn share-copy-btn" id="live-share-copy-btn" title="Copy invite link" disabled>
<i class="bi bi-clipboard"></i>
</button>
<div class="live-share-participant-panel">
<div class="live-share-section-title">Participants</div>
<div class="live-share-participants" id="live-share-participants" aria-label="Live collaborators"></div>
</div>
<div class="live-share-invite" id="live-share-invite-section">
<div class="live-share-invite-header">
<span class="live-share-section-title">Invite link</span>
<span class="live-share-invite-state" id="live-share-invite-state">Created after session starts</span>
</div>
<div class="share-url-row live-share-link-row">
<input type="text" id="live-share-url-input" class="rename-modal-input share-url-input" readonly placeholder="Start a session to create an invite link" aria-label="Live Share invite link" />
<button class="reset-modal-btn share-copy-btn live-share-copy-btn" id="live-share-copy-btn" title="Copy invite link" disabled>
<i class="bi bi-clipboard"></i>
<span>Copy</span>
</button>
</div>
<p class="live-share-invite-help" id="live-share-invite-help">Click Start session to create a temporary room and generate an invite link.</p>
</div>
<p class="share-modal-notice"><i class="bi bi-info-circle"></i> Live rooms are relayed in memory. Everyone with the live link can edit while the room is active.</p>
</div>
Expand Down
32 changes: 32 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 liveShareActiveBadge = document.getElementById('live-share-active-badge');
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');
Expand Down Expand Up @@ -12519,6 +12523,30 @@ 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 (liveShareActiveBadge) {
liveShareActiveBadge.hidden = !isActive;
liveShareActiveBadge.dataset.state = state;
}
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;
Expand All @@ -12540,6 +12568,7 @@ document.addEventListener("DOMContentLoaded", async function () {
showLiveParticipantsPopover(event.currentTarget, allParticipants);
}
});
updateLiveShareGuidance(true, participantCount);
setLiveShareStatus(status, state);
}

Expand All @@ -12556,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;
Expand All @@ -12568,6 +12599,7 @@ document.addEventListener("DOMContentLoaded", async function () {
liveShareToolbarParticipants.hidden = true;
}
if (liveShareUrlInput) liveShareUrlInput.value = '';
updateLiveShareGuidance(false, 0);
} else {
renderLiveParticipants();
}
Expand Down
107 changes: 107 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3347,6 +3347,56 @@ a:focus {
background: var(--color-danger-fg);
}

.live-share-title-row {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}

.modal-header .live-share-title-row .reset-modal-message {
flex: 0 0 auto;
}

.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;
white-space: nowrap;
}

.live-share-active-badge[hidden] {
display: none;
}

.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-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;
Expand Down Expand Up @@ -3467,6 +3517,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;
Expand Down Expand Up @@ -3513,6 +3612,14 @@ button.live-share-participant-overflow {
align-items: stretch;
}

@media (max-width: 560px) {
.live-share-invite-header {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
}

/* ==========================================================================
Multilingual & CJK Optimization styles added by Aegis SEO agency
========================================================================== */
Expand Down
Loading