Skip to content

feat(shared): add sidebar shortcut utility#45

Merged
singyichen merged 14 commits into
mainfrom
feat/appearance-toggle-mvp
May 14, 2026
Merged

feat(shared): add sidebar shortcut utility#45
singyichen merged 14 commits into
mainfrom
feat/appearance-toggle-mvp

Conversation

@singyichen

@singyichen singyichen commented May 12, 2026

Copy link
Copy Markdown
Owner

Summary

  • Add an icon-only sidebar shortcut help entry and shortcut modal for shared prototype pages.
  • Add a sidebar/mobile light-dark appearance toggle that shows only the next available theme icon.
  • Update the shared sidebar spec for shortcut utility behavior, i18n, independent keycap display, and one-action-per-row rules.
  • Add Playwright coverage for desktop/mobile shortcut entry, i18n, and appearance toggle behavior.

Validation

  • pnpm playwright test tests/shared/sidebar-shortcuts.spec.ts --workers=1
  • pnpm playwright test tests/shared/language-switch-consistency.spec.ts tests/shared/sidebar-shortcuts.spec.ts --workers=1

Review Resolutions

Round 1 — 2026-05-13

  • design/prototype/pages/shared/sidebar.js: extended interactive-target detection so the ? shortcut does not open shortcut help while focus is inside editable content.
  • design/prototype/tests/shared/sidebar-shortcuts.spec.ts: added regression coverage for the editable-content shortcut suppression case.
  • specs/account/005-profile-settings/spec.md: aligned APPEARANCE_STORAGE_KEY and AppearanceState.storage_key with the implemented label-suite-theme key.

singyichen and others added 3 commits May 12, 2026 13:48
- Add theme-fouc.js for FOUC-free synchronous theme application on load
- Add theme.js runtime module (LabelSuiteTheme API, localStorage persistence)
- Add dark-mode CSS tokens to tokens.css
- Wire shared sidebar appearance toggle (sun/moon/monitor icons) to theme API
- Apply data-theme attribute switching across all 10 prototype pages
- system mode resolves to light (app default, not OS prefers-color-scheme)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…settings

- spec 008 v1.2.0: add US6, FR-015/A/B/C/D, SC-008/A/B/C, AppearanceState entity,
  APPEARANCE_STORAGE_KEY/MODES/DEFAULT_RESOLVED constants, and process flow step 6
- spec 005 v1.2.5: add US6, FR-013/A, SC-009, AppearanceState reference to spec 008,
  and APPEARANCE_STORAGE_KEY constant
- Document that system mode is fixed light (not OS prefers-color-scheme)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: OpenAI Codex <noreply@openai.com>

@amazon-q-developer amazon-q-developer Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The implementation of the sidebar shortcut utility and theme toggle is well-executed with comprehensive test coverage. The code demonstrates good practices including proper error handling, accessibility support, and internationalization. All changes are working as intended with no critical defects identified that would block merge.


You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Code Review

This pull request implements a global theme management system (light, dark, and system modes) with FOUC prevention and migrates hardcoded styles to CSS variables across several prototype pages. Additionally, it introduces a keyboard shortcut overview modal within the shared sidebar. The review feedback highlights a potential ReferenceError due to an undefined utility function in the sidebar script and identifies naming inconsistencies for the theme storage key across the project's documentation and implementation.

Comment thread design/prototype/pages/shared/sidebar.js
Comment thread specs/account/005-profile-settings/spec.md Outdated
Comment thread specs/account/005-profile-settings/spec.md Outdated
singyichen and others added 6 commits May 13, 2026 08:37
Co-authored-by: OpenAI Codex <noreply@openai.com>
Co-authored-by: OpenAI Codex <noreply@openai.com>
…tail prototype

- Remove standalone stage breakdown section; merge selected-round progress
  bar into the overall summary panel (above metric grid)
- Add IAA as 6th summary metric; layout all 6 metrics in a single row
- Round pills now drive per-round progress bar rendering (only selected
  round shown); suppress redundant IAA text inside progress bar card
- Sync spec v1.7.8 with all prototype changes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…sults tab

Add independent footer pagination bar to the export history table,
keeping its page/pageSize state separate from the annotation results
table. Update spec to v1.7.11 with FR-015e-1.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@singyichen singyichen marked this pull request as ready for review May 13, 2026 08:12
@qodo-code-review

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

singyichen and others added 5 commits May 13, 2026 16:41
… placement

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…olors

Reviewer badge uses primary (indigo) token set; annotator badge uses
success (green) token set for clear visual distinction in member-management
and work-log tables. Adds missing --color-primary-border token to
tokens.css (light: #C7D2FE, dark: #3730A3). Syncs spec.md to v1.7.13.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…n system

- Fix workflow connector arrows invisible in dark mode by applying
  brightness(0) invert(1) filter to connector img elements
- Add badge-warning dark override (was missing, showing jarring light bg)
- Adjust badge-task-type-single and -relation text from cyan-300 to
  cyan-200 for consistent visual weight across task-type badges
- Add dark mode overrides for sidebar navbar border and dialog shadows
- Raise --color-text-muted in dark from zinc-500 to slate-400 for WCAG AA
- Add Dark Mode Tokens section to MASTER.md with implementation rules
  and badge dark override reference table (rule 5)
- Add four dark mode checklist items to MASTER.md pre-delivery checklist

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… layout

- Migrate remaining prototype pages to use external sidebar.css + theme-fouc.js
- Fix task-new.html sidebar layout break caused by missing sidebar.css link
- Fix user-management.html modal/form hardcoded white backgrounds for dark mode
- Update MASTER.md with dark mode token and theming documentation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…type pages

- sidebar.js: support roleLabel in applyGlobalLanguage to update #roleIndicator
- annotation-list: fix TEXT SUMMARY column to switch between ZH/EN sample text;
  add getSampleText() helper and textEn for all 30 sample texts across 6 task types
- annotation-list, dataset-analysis-list: pass roleLabel in applyGlobalLanguage
  so user chip shows localized role in EN mode
- dataset-analysis-list: add roleIndicatorLabel (Project Leader) to i18n
- annotation-workspace, dataset-analysis-detail, task-detail, task-new:
  add nav label i18n keys and apply them on lang switch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@singyichen singyichen merged commit aec8418 into main May 14, 2026
8 checks passed
@singyichen singyichen deleted the feat/appearance-toggle-mvp branch May 15, 2026 03:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant