Redesign the options page and drop bootstrap-vue - #873
Merged
Merged
Conversation
Rebuilds the options page (Basics/Styles/Sync) against the popup's bootstrap-free design language instead of bootstrap-vue, reusing and extending shared primitives across popup, options, and readability: - New shared primitives in src/components/: Heading, TextBlock, ShortcutRecorderField, plus ToggleSwitch/IconButton/MenuBox/icons promoted from popup/readability for cross-feature reuse. - Style editor becomes a full in-panel page (was a modal), with line numbers, dark-mode-aware Monaco theme, and a decoupled options-only Monaco entry point (options-index.html/ts) so it can evolve independently of the in-page "Style this page" editor. - New Appearance setting (Auto/Light/Dark) controlling Stylebot's own UI theme via a `data-theme` attribute, layered over the existing prefers-color-scheme support in src/styles/theme.scss. - Fonts list becomes removable chips with an inline add-field instead of a raw comma-separated textarea. - bootstrap-vue removed from the options bundle only; src/editor/ (the in-page CSS editor panel) is untouched and keeps bootstrap-vue. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
ankit
force-pushed
the
worktree-options-page-redesign
branch
from
September 9, 2026 22:54
95bc614 to
91c13e4
Compare
…-redesign # Conflicts: # src/components/ToggleSwitch.vue # src/components/icons/ArrowRepeatIcon.vue # src/components/icons/ChevronLeftIcon.vue # src/components/icons/IconKeyboard.vue # src/components/icons/IconX.vue # src/components/icons/MoreIcon.vue # src/icons/ArrowRepeatIcon.vue # src/icons/ChevronLeftIcon.vue # src/icons/IconKeyboard.vue # src/icons/IconX.vue # src/icons/MoreIcon.vue # src/popup/components/MoreButton.vue # src/popup/components/PopupMoreMenu.vue # src/popup/components/SyncStylebot.vue # src/popup/components/icons/ArrowRepeatIcon.vue # src/popup/components/icons/ChevronLeftIcon.vue # src/popup/components/icons/MoreIcon.vue # src/popup/components/notifications/ReleaseNotification.vue # src/readability/components/dock/MoreMenu.vue # src/readability/components/dock/ShortcutMenu.vue # src/readability/components/icons/IconKeyboard.vue # src/readability/components/icons/IconX.vue
ankit
marked this pull request as draft
September 10, 2026 01:02
…-redesign-pr873 # Conflicts: # src/components/Heading.vue # src/components/IconButton.vue # src/components/TextBlock.vue # src/components/ToggleSwitch.vue # src/popup/App.vue # src/popup/components/MoreButton.vue # src/popup/components/PopupButton.vue # src/popup/components/PopupMoreMenu.vue # src/popup/components/PopupRow.vue # src/popup/components/notifications/ReleaseNotification.vue # src/readability/components/dock/ShortcutMenu.vue # src/styles/theme.scss
…onflicts # Conflicts: # src/components/index.ts # src/popup/components/Style.vue
- Revert the manual light/dark/auto theme setting added by the options
redesign (TheAppearance.vue, StylebotTheme, the theme option) — both
popup and options page now just follow OS prefers-color-scheme, same
as before the redesign; a real toggle can come in a follow-up PR.
- Fix scripts/launch-chrome.mjs forcing prefers-color-scheme: light on
every tab (a Playwright default), which made dev:chrome unable to
preview dark mode at all.
- Add keyboard/tab accessibility: ConfirmDialog traps focus, autofocuses
its cancel button, and restores focus on close; AnchoredMenu supports
arrow-key navigation and returns focus to its trigger; menus/menuitems
get proper ARIA roles; the embedded Monaco editor lets Tab move focus
out instead of trapping it.
- Style editor: track unsaved changes and only prompt before discarding
when there's something to lose (leaving via back/breadcrumb/sidebar
nav, or the Discard button, which is now disabled when clean); new
styles autofocus the URL field instead of the editor stealing it.
- Visual polish: font chips preview in their own (loaded) font, larger
touch targets, tighter section spacing, a 760px content cap on the
Basics/Styles/Sync tabs, fewer redundant borders/hover states, fixed
pluralization ("1 rule" not "1 rules"), dropped a stray monospace font
from timestamps, Monaco's own top/bottom padding instead of a clipped
outer wrapper.
- Removed CSS comments (project convention) and trimmed remaining
comments to 1-2 lines across the touched files.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
ankit
force-pushed
the
worktree-options-page-redesign
branch
from
September 11, 2026 03:43
121b66b to
b6c1061
Compare
…ui-* set The redesign renamed every CSS custom property to a new --ui-* family with identical values, then aliased the shared src/components/ primitives' existing token names (--main-foreground, --border-color, etc.) on top of it. Reverts that: restores the original names from main (--background, --foreground, --border, --accent, --primary, --input, --info/--info-border, --ring) since the values never actually changed, and names two genuinely new concepts (--active, --icon-foreground) to match that same bare-noun style instead of inventing a prefixed scheme. Also drops --ui-row-hover-bg (dead — its only consumer was removed earlier this PR) and inlines --ui-editor-bg (a single consumer isn't worth a shared token). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds the options-redesign's new strings (right-click menu description, font browse/placeholder text, keyboard shortcuts help, add-a-style, edit/enabled/search/discard-changes, singular/plural site counts, the unsaved-changes warning) and updates the two changed ones (fonts description, delete-all-styles casing) across all 13 locale files — previously only en/en_US had them, so every other language fell back to English for this whole page. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The redesign replaced TextBlock's existing variant: 'default' | 'muted' prop with a new muted boolean (defaulting to true, inverting the default). Reverts that API change and updates every consumer to pass variant="muted" explicitly where the muted look is wanted, matching main's original call sites (popup/App.vue, ShortcutMenu.vue) and the new options-page components that need the same look. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
ToggleSwitch's bare prop rendered it without a slotted label, leaving callers to place the label as a sibling element (with no click-to-toggle behavior, since it's outside the <label> wrapping the checkbox). Puts the label content back inside the slot in all three usages instead — the native <label> already makes it clickable — and removes bare entirely now that nothing needs it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Drops the light-vars/dark-vars SCSS mixins in favor of plain duplicated :root / prefers-color-scheme blocks, matching main's existing (mixin-free) structure instead of introducing new build-time abstraction for a static theme file. Also renames the .ui-icon utility class to .icon, matching the --icon-foreground variable naming now that the --ui-* prefix is gone. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…onflicts # Conflicts: # src/components/utils/keydown-to-shortcut.test.ts # src/components/utils/keydown-to-shortcut.ts # src/icons/ArrowRepeatIcon.vue # src/icons/ChevronLeftIcon.vue # src/icons/MoreIcon.vue # src/icons/XIcon.vue # src/readability/components/dock/MoreMenu.vue # src/readability/components/dock/ShortcutMenu.vue # src/readability/components/dock/utils/__tests__/keydown-to-shortcut.test.ts # src/readability/components/dock/utils/keydown-to-shortcut.ts # src/utils/keydown-to-shortcut.test.ts # src/utils/keydown-to-shortcut.ts
ankit
marked this pull request as ready for review
September 12, 2026 03:11
Sites-count subtitle, per-row timestamp, and the style editor's line/rule-count footer were each hand-rolling the exact same body/caption + muted-foreground styling TextBlock already provides. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Move AppButton (renamed SButton), AnchoredMenu, and ConfirmDialog into src/components for reuse, and extract a shared MenuItem for menu rows, consumed by StyleRowMenu and StylesBulkMenu. A11y fixes: visible focus ring on menu items, ConfirmDialog uses role="alertdialog" and no longer loses focus after the confirmed action removes its trigger from the DOM, and a race with the closing parent menu that stole focus back from the dialog. Restructure the options page layout so the sidebar footer links no longer intercept tab order before the main content. Also: red "danger" colors moved to theme tokens, font chip styling cleanup, and a couple of visual fixes (darker-than-intended URL placeholder, IconButton size prop applying regardless of border). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
It was using Heading's md size (15px), smaller than the lg (17px) page titles it sits above in the sidebar. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test plan
🤖 Generated with Claude Code