diff --git a/tests/integration/test_webui_static_assets.py b/tests/integration/test_webui_static_assets.py index 94b3ac9d..ab8cb51b 100644 --- a/tests/integration/test_webui_static_assets.py +++ b/tests/integration/test_webui_static_assets.py @@ -72,6 +72,21 @@ def test_dashboard_review_details_use_backend_structured_fields(): assert "renderContextExamples(item)" in text +def test_dashboard_review_queue_uses_sidebar_categories(): + text = (PLUGIN_ROOT / "web_res" / "static" / "html" / "dashboard.html").read_text(encoding="utf-8") + + assert "review-sidebar" in text + assert "review-workspace" in text + assert 'data-review-tab="persona"' in text + assert 'data-review-tab="style"' in text + assert 'data-review-tab="jargon"' in text + assert 'data-review-tab="persona-state"' in text + assert 'data-review-tab="reviewed"' in text + assert 'data-review-tab="batches"' in text + assert "setReviewTab" in text + assert "updateReviewNavCounts" in text + + def test_dashboard_review_deletes_use_inline_confirmation(): text = (PLUGIN_ROOT / "web_res" / "static" / "html" / "dashboard.html").read_text(encoding="utf-8") diff --git a/web_res/static/html/dashboard.html b/web_res/static/html/dashboard.html index a602100c..b4fd6d05 100644 --- a/web_res/static/html/dashboard.html +++ b/web_res/static/html/dashboard.html @@ -769,6 +769,164 @@ gap: 16px; } + .review-workspace { + display: grid; + grid-template-columns: 280px minmax(0, 1fr); + gap: 16px; + align-items: start; + } + + .review-sidebar { + position: sticky; + top: 16px; + padding: 14px; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: var(--panel); + box-shadow: var(--shadow-sm); + } + + .review-sidebar-head { + padding: 2px 4px 12px; + border-bottom: 1px solid var(--border); + margin-bottom: 12px; + } + + .review-sidebar-kicker { + color: var(--muted); + font-size: 11px; + font-weight: 700; + } + + .review-sidebar-head h3 { + margin: 4px 0 2px; + font-size: var(--text-lg); + line-height: 1.25; + } + + .review-sidebar-head p { + margin: 0; + color: var(--muted); + font-size: 12px; + } + + .review-nav { + display: grid; + gap: 8px; + } + + .review-nav-group { + margin: 14px 4px 8px; + color: var(--muted); + font-size: 11px; + font-weight: 700; + } + + .review-nav-btn { + width: 100%; + min-height: 58px; + display: grid; + grid-template-columns: 32px minmax(0, 1fr) auto; + align-items: center; + gap: 10px; + padding: 10px; + border: 1px solid transparent; + border-radius: 8px; + background: transparent; + color: var(--text); + cursor: pointer; + text-align: left; + } + + .review-nav-btn:hover { + border-color: var(--border); + background: var(--surface-hover); + } + + .review-nav-btn.active { + border-color: var(--accent); + background: var(--selection); + box-shadow: inset 3px 0 0 var(--accent); + } + + .review-nav-icon { + width: 32px; + height: 32px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--panel-soft); + color: var(--accent); + } + + .review-nav-icon .material-icons { + font-size: 18px; + } + + .review-nav-text { + min-width: 0; + } + + .review-nav-title { + display: block; + font-size: 13px; + font-weight: 700; + line-height: 1.2; + } + + .review-nav-desc { + display: block; + margin-top: 3px; + color: var(--muted); + font-size: 12px; + line-height: 1.25; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .review-nav-badge { + min-width: 28px; + height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 8px; + border: 1px solid var(--border); + border-radius: var(--radius-full); + background: var(--panel-soft); + color: var(--muted); + font-size: 12px; + font-weight: 700; + } + + .review-nav-btn.active .review-nav-badge { + border-color: transparent; + background: var(--accent); + color: #fff; + } + + .review-main { + min-width: 0; + } + + .review-tab-panel { + display: none; + gap: 16px; + } + + .review-tab-panel.active { + display: grid; + } + + .review-split-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr); + gap: 16px; + } + .panel { background: var(--panel); border: 1px solid var(--border); @@ -2007,6 +2165,15 @@ grid-template-columns: 1fr; } + .review-workspace, + .review-split-grid { + grid-template-columns: 1fr; + } + + .review-sidebar { + position: static; + } + .settings-head { flex-direction: column; align-items: stretch; @@ -2046,6 +2213,14 @@ grid-template-columns: 1fr; } + .review-sidebar { + padding: 12px; + } + + .review-nav-btn { + min-height: 54px; + } + .panel-head { flex-direction: column; } @@ -2456,135 +2631,210 @@