diff --git a/packages/extension/src/content-script.ts b/packages/extension/src/content-script.ts index 0a3bd40..c016245 100644 --- a/packages/extension/src/content-script.ts +++ b/packages/extension/src/content-script.ts @@ -202,9 +202,14 @@ function renderState(state: PublicState): void { status.textContent = "Waiting for Claude Code"; hint.textContent = "Open a terminal and start Claude Code"; } else { + const idleSessions = state.sessions - state.working; message.textContent = "Your job finished!"; setDotColor(dot, "green"); - status.textContent = `${state.sessions} session${state.sessions > 1 ? "s" : ""} idle`; + if (state.sessions === 1) { + status.textContent = "1 session idle"; + } else { + status.textContent = `${idleSessions} of ${state.sessions} sessions idle`; + } hint.textContent = "Type a prompt in Claude Code to unblock"; } } diff --git a/packages/extension/src/options.css b/packages/extension/src/options.css index 10ff207..a90c6be 100644 --- a/packages/extension/src/options.css +++ b/packages/extension/src/options.css @@ -475,6 +475,90 @@ footer p { letter-spacing: 0.3px; } +/* Mode Toggle Section */ +.mode-section { + background: var(--bg-base); +} + +.mode-toggle { + margin-top: 8px; +} + +.toggle-container { + display: flex; + align-items: flex-start; + gap: 16px; + padding: 20px; + background: var(--bg-surface); + border: 1px solid var(--border-subtle); + border-radius: 12px; + cursor: pointer; + transition: all 0.2s ease; +} + +.toggle-container:hover { + background: var(--bg-hover); + border-color: var(--border-default); +} + +.toggle-container input { + position: absolute; + opacity: 0; + width: 0; + height: 0; +} + +.toggle-slider { + position: relative; + flex-shrink: 0; + width: 44px; + height: 24px; + background: var(--bg-elevated); + border: 1px solid var(--border-default); + border-radius: 12px; + transition: all 0.2s ease; +} + +.toggle-slider::after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 18px; + height: 18px; + background: var(--text-muted); + border-radius: 50%; + transition: all 0.2s ease; +} + +.toggle-container input:checked + .toggle-slider { + background: var(--accent-green); + border-color: var(--accent-green); +} + +.toggle-container input:checked + .toggle-slider::after { + transform: translateX(20px); + background: #fff; +} + +.toggle-content { + display: flex; + flex-direction: column; + gap: 4px; +} + +.toggle-label { + font-size: 15px; + font-weight: 600; + color: var(--text-primary); +} + +.toggle-desc { + font-size: 13px; + color: var(--text-muted); + line-height: 1.4; +} + /* Responsive */ @media (max-width: 600px) { .container { diff --git a/packages/extension/src/options.html b/packages/extension/src/options.html index a42ca41..4eceee5 100644 --- a/packages/extension/src/options.html +++ b/packages/extension/src/options.html @@ -52,6 +52,27 @@
How strictly should Claude Blocker enforce focus
+