Skip to content

refactor: simplify quick start OS selector #107

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
thewilloftheshadow merged 1 commit into from
Mar 17, 2026
Merged

refactor: simplify quick start OS selector #107

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
64 changes: 2 additions & 62 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,10 +172,6 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
<button class="hackable-btn active" data-hackable="installer">installer</button>
<button class="hackable-btn" data-hackable="pnpm">pnpm</button>
</div>
<div class="os-indicator" id="os-indicator">
<span class="os-detected" id="os-detected">macOS/Linux</span>
<button class="os-change-btn" id="os-change-btn">change</button>
</div>
<div class="os-switch" id="os-switch" style="display: none;">
<button class="os-btn active" data-os="unix">macOS/Linux</button>
<button class="os-btn" data-os="windows">Windows</button>
Expand Down Expand Up @@ -288,17 +284,11 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
const windowsCmd = 'powershell -c "irm https://openclaw.ai/install.ps1 | iex"';
const windowsBetaCmd = 'powershell -c "& ([scriptblock]::Create((irm https://openclaw.ai/install.ps1))) -Tag beta"';

const osLabels = {
unix: 'macOS/Linux',
windows: 'Windows'
};

// State
let currentPm = 'npm';
let currentMode = 'oneliner';
let currentHackable = 'installer';
let currentBeta = false;
let osPickerExpanded = false;
// Auto-detect OS using modern API with fallback
const isWindows = navigator.userAgentData?.platform === 'Windows' ||
navigator.userAgent.toLowerCase().includes('windows');
Expand All @@ -312,9 +302,6 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
const pmSwitch = document.getElementById('pm-switch');
const hackableSwitch = document.getElementById('hackable-switch');
const osSwitch = document.getElementById('os-switch');
const osIndicator = document.getElementById('os-indicator');
const osDetected = document.getElementById('os-detected');
const osChangeBtn = document.getElementById('os-change-btn');
const betaSwitch = document.getElementById('beta-switch');
const betaBtn = document.getElementById('beta-btn');
const switchPlaceholder = document.getElementById('switch-placeholder');
Expand Down Expand Up @@ -371,8 +358,6 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
// Update hackable OS command for installer mode
const hackableOsCmd = "curl -fsSL https://openclaw.ai/install.sh | bash -s -- --install-method git";
osCmdHackableElements.forEach(cmd => cmd.textContent = hackableOsCmd);
// Update OS indicator text (null-safe)
if (osDetected) osDetected.textContent = osLabels[currentOs];
// Update hackable content visibility (null-safe)
if (currentMode === 'hackable') {
if (hackableInstallerContent) hackableInstallerContent.style.display = currentHackable === 'installer' ? 'block' : 'none';
Expand All @@ -397,14 +382,13 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
if (codeHackable) codeHackable.style.display = currentMode === 'hackable' ? 'block' : 'none';
if (codeMacos) codeMacos.style.display = currentMode === 'macos' ? 'block' : 'none';

// Show OS indicator for one-liner, PM switch for quick, hackable switch for hackable, nothing for macos
// Show OS switch for one-liner, PM switch for quick, hackable switch for hackable, nothing for macos
const showOsControls = currentMode === 'oneliner';
const showPmControls = currentMode === 'quick';
const showHackableControls = currentMode === 'hackable';
// Beta only applies to oneliner and npm modes (git always gets main branch)
const showBetaControls = currentMode === 'oneliner' || currentMode === 'quick';
if (osIndicator) osIndicator.style.display = showOsControls && !osPickerExpanded ? 'flex' : 'none';
if (osSwitch) osSwitch.style.display = showOsControls && osPickerExpanded ? 'flex' : 'none';
if (osSwitch) osSwitch.style.display = showOsControls ? 'flex' : 'none';
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Restore layout fit when showing OS switch by default

Showing the full os-switch whenever one-liner mode is active makes the Quick Start header wider than before, and on mid-size mobile/tablet widths (roughly 481–560px) it can overflow because .code-header only wraps at @media (max-width: 480px). In this range, the mode tabs + OS toggle + beta toggle no longer reliably fit on one row, so controls can clip or overflow horizontally; this regression is introduced by always rendering the larger OS control instead of the compact indicator.

Useful? React with 👍 / 👎.

if (pmSwitch) pmSwitch.style.display = showPmControls ? 'flex' : 'none';
if (hackableSwitch) hackableSwitch.style.display = showHackableControls ? 'flex' : 'none';
if (betaSwitch) betaSwitch.style.display = showBetaControls ? 'flex' : 'none';
Expand All @@ -413,14 +397,6 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
if (switchPlaceholder) switchPlaceholder.style.display = noSwitchesVisible ? 'block' : 'none';
}

// OS change toggle (null-safe)
if (osChangeBtn) {
osChangeBtn.addEventListener('click', () => {
osPickerExpanded = true;
updateVisibility();
});
}

// Beta toggle (null-safe)
if (betaBtn) {
betaBtn.addEventListener('click', () => {
Expand Down Expand Up @@ -452,9 +428,7 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
currentOs = btn.dataset.os;
osBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
osPickerExpanded = false; // Collapse after selection
updateCommands();
updateVisibility();
});
});

Expand All @@ -463,7 +437,6 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
currentMode = btn.dataset.mode;
modeBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
osPickerExpanded = false; // Reset when switching modes
updateVisibility();
});
});
Expand Down Expand Up @@ -1610,38 +1583,6 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
text-align: center;
}

/* OS Indicator */
.os-indicator {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-muted);
}

.os-detected {
color: var(--text-secondary);
}

.os-change-btn {
background: none;
border: none;
color: var(--coral-bright);
font-family: var(--font-mono);
font-size: 0.7rem;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: all 0.15s ease;
}

.os-change-btn:hover {
background: var(--surface-coral-soft);
color: var(--cyan-bright);
}

/* macOS App Download Section */
.macos-app-content {
display: flex;
Expand Down Expand Up @@ -2104,7 +2045,6 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
}

/* Contextual switches appear first (after dots), right-aligned */
.os-indicator,
.os-switch,
.pm-switch,
.hackable-switch,
Expand Down
Loading