Chore/UI controls cleanup#38
Merged
Merged
Conversation
Drop the lab prefix from shared control component names, selectors, paths and usage sites. Rename the difficulty filter control to a generic select-button while keeping difficulty option helpers for current filters.
There was a problem hiding this comment.
Pull request overview
This PR performs a broad UI-controls cleanup/refactor by removing the legacy Lab* control naming, introducing shared primitives (app-button, app-popover + coordinator), and updating consuming feature pages to use the new control set.
Changes:
- Rename “Lab” form controls/components (selectors, classes, filenames) to simplified equivalents (
app-select,app-slider,app-number-input,app-text-input,app-multi-select,app-select-button,app-popover). - Introduce shared UI primitives:
AppButton,Popover, andPopoverCoordinator(to coordinate closing other popovers). - Refactor several feature UIs to use the new primitives, plus some caching/perf tweaks in algorithms utilities and card helpers.
Reviewed changes
Copilot reviewed 99 out of 101 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/shared/controls/text-input/text-input.ts | Rename component class/selector and update control accessor registration. |
| src/app/shared/controls/text-input/text-input.scss | Rename BEM classes from lab-text* to text-input*. |
| src/app/shared/controls/text-input/text-input.html | Update template classes to match renamed styles. |
| src/app/shared/controls/slider/slider.ts | Rename slider selector/class and template/style file references. |
| src/app/shared/controls/slider/slider.scss | Add/replace slider styling under new .slider* classes. |
| src/app/shared/controls/slider/slider.html | Add slider template using CSS-variable percent styling. |
| src/app/shared/controls/select/select.ts | Replace document listeners with Popover + PopoverCoordinator; rename API types. |
| src/app/shared/controls/select/select.scss | Move floating panel chrome responsibility to Popover; add .select__popover. |
| src/app/shared/controls/select/select.html | Render options inside app-popover; improve ARIA roles/selection attributes. |
| src/app/shared/controls/select-button/select-button.ts | Generalize difficulty filter into reusable SelectButton and option types. |
| src/app/shared/controls/select-button/select-button.scss | Rename CSS classes/vars from difficulty-specific to generic select-button. |
| src/app/shared/controls/select-button/select-button.html | New generic select-button radiogroup template and indicator. |
| src/app/shared/controls/number-input/number-input.ts | Rename number input selector/class and template/style references. |
| src/app/shared/controls/number-input/number-input.scss | Rename number input classes from lab-number* to number-input*. |
| src/app/shared/controls/number-input/number-input.html | Update template classes to match renamed number-input styles. |
| src/app/shared/controls/multi-select/multi-select.ts | Replace document listeners with Popover + PopoverCoordinator; rename option/group types. |
| src/app/shared/controls/multi-select/multi-select.scss | Shift floating panel chrome to Popover and update CSS variable name. |
| src/app/shared/controls/multi-select/multi-select.html | New multi-select markup using app-popover and updated trigger handling. |
| src/app/shared/controls/lab-multi-select/lab-multi-select.html | Remove legacy lab multi-select template. |
| src/app/shared/controls/lab-difficulty-filter/lab-difficulty-filter.html | Remove legacy lab difficulty filter template. |
| src/app/shared/components/popover/popover.ts | Rename popover component; add scroll-to-close behavior and configurable panelRole. |
| src/app/shared/components/popover/popover.scss | New unified floating-panel chrome + animation styling for popovers. |
| src/app/shared/components/popover/popover.html | New popover structure with underlay + body slots. |
| src/app/shared/components/popover/popover-coordinator.ts | New coordinator service to ensure only one popover stays open. |
| src/app/shared/components/lab-popover/lab-popover.scss | Remove legacy lab popover styles. |
| src/app/shared/components/lab-popover/lab-popover.html | Remove legacy lab popover template. |
| src/app/shared/components/copy-code-button/copy-code-button.ts | Adopt AppButton for consistent icon-button behavior. |
| src/app/shared/components/copy-code-button/copy-code-button.scss | Rework layout to overlay icons atop shared button primitive. |
| src/app/shared/components/copy-code-button/copy-code-button.html | Replace raw <button> with <app-button> and keep SR announcements. |
| src/app/shared/components/code-language-dial/code-language-dial.types.ts | Extract/centralize dial types. |
| src/app/shared/components/code-language-dial/code-language-dial.ts | Split dial into trigger/fan subcomponents; simplify viewChild usage. |
| src/app/shared/components/code-language-dial/code-language-dial.html | Replace inline fan/trigger markup with new subcomponents. |
| src/app/shared/components/code-language-dial/code-language-dial-trigger/code-language-dial-trigger.ts | New trigger component wrapping AppButton + measurement helper. |
| src/app/shared/components/code-language-dial/code-language-dial-trigger/code-language-dial-trigger.scss | Trigger host sizing. |
| src/app/shared/components/code-language-dial/code-language-dial-trigger/code-language-dial-trigger.html | Trigger template using AppButton inputs/outputs. |
| src/app/shared/components/code-language-dial/code-language-dial-item/code-language-dial-item.ts | New dial item component with guarded selection emit. |
| src/app/shared/components/code-language-dial/code-language-dial-item/code-language-dial-item.scss | Dial item styling migrated into dedicated stylesheet. |
| src/app/shared/components/code-language-dial/code-language-dial-item/code-language-dial-item.html | Dial item button template with i18n aria-label/title logic. |
| src/app/shared/components/code-language-dial/code-language-dial-fan/code-language-dial-fan.ts | New fan component exposing element() for body-portaling. |
| src/app/shared/components/code-language-dial/code-language-dial-fan/code-language-dial-fan.scss | Fan styling migrated into dedicated stylesheet. |
| src/app/shared/components/code-language-dial/code-language-dial-fan/code-language-dial-fan.html | Fan template hosting the backdrop/center logo and dial items. |
| src/app/shared/components/button/button.ts | Introduce shared AppButton primitive (icons, router links, variants). |
| src/app/shared/components/button/button.html | Button template supporting anchor/button/non-interactive modes. |
| src/app/features/structures/structures-page/structures-page.ts | Switch from lab difficulty filter to new select-button helper/options. |
| src/app/features/structures/structures-page/structures-page.scss | Update selector targeting and refresh glass styling tokens. |
| src/app/features/structures/structures-page/structures-page.html | Replace <app-lab-difficulty-filter> with <app-select-button>. |
| src/app/features/algorithms/components/viz-custom-values-popover/viz-custom-values-popover.ts | Migrate to Popover, NumberInput, TextInput, and AppButton. |
| src/app/features/algorithms/components/viz-custom-values-popover/viz-custom-values-popover.scss | Remove bespoke button styling now handled by AppButton. |
| src/app/features/algorithms/components/viz-custom-values-popover/viz-custom-values-popover.html | Replace lab inputs/popover and raw buttons with new primitives. |
| src/app/features/algorithms/components/visualization-toolbar/visualization-toolbar.ts | Migrate controls to Select/Slider/AppButton and add popover coordination. |
| src/app/features/algorithms/components/visualization-toolbar/visualization-toolbar.scss | Remove old control chrome mixin usage and legacy button styles. |
| src/app/features/algorithms/components/visualization-toolbar/visualization-toolbar.html | Replace raw buttons/lab controls with AppButton, Select, Slider. |
| src/app/features/algorithms/components/visualization-canvas/visualization-canvas.scss | Add canvas background grid overlay treatment. |
| src/app/features/algorithms/components/side-panel/side-panel.scss | Adjust glass/brand styling and simplify topbar atmospherics. |
| src/app/features/algorithms/components/scratchpad-lab-visualization/scratchpad-lab-visualization.scss | Remove redundant border styling. |
| src/app/features/algorithms/components/log-panel/log-panel.scss | Adjust grid columns after removing the “time” header column. |
| src/app/features/algorithms/components/log-panel/log-panel.html | Remove “time” column header. |
| src/app/features/algorithms/components/legend-bar/legend-bar.scss | Refresh legend bar background/border styling. |
| src/app/features/algorithms/algorithms-page/algorithms-page.utils/algorithms-page.utils.ts | Cache derived traits per algorithm to reduce repeated derivation. |
| src/app/features/algorithms/algorithms-page/algorithms-page.ts | Adopt new select-button + multi-select; consolidate filtered snapshot computations. |
| src/app/features/algorithms/algorithms-page/algorithms-page.html | Use <app-multi-select>/<app-select-button> and store filtered items in @let. |
| src/app/features/algorithms/algorithm-detail/algorithm-detail.ts | Add theme vars style computation and migrate back buttons to AppButton. |
| src/app/features/algorithms/algorithm-detail/algorithm-detail.html | Apply computed theme styles and replace raw back buttons with AppButton. |
| src/app/features/algorithms/algorithm-card/algorithm-card.utils/algorithm-card.utils.ts | Cache semantic tags and card style vars for reuse. |
| src/app/features/algorithms/algorithm-card/algorithm-card.ts | Replace CTA text with AppButton; simplify difficulty pip derivation. |
| src/app/features/algorithms/algorithm-card/algorithm-card.scss | Remove CTA ink overrides now that CTA is a button primitive. |
| src/app/features/algorithms/algorithm-card/algorithm-card.html | Render CTA using AppButton (icon-only, non-interactive). |
| src/app/features/algorithms/algorithm-card/algorithm-card-preview/algorithm-card-preview-spec/algorithm-card-preview-spec.ts | Cache resolved preview specs by algorithm id. |
| src/app/core/services/navigation-service.ts | Add disabled nav tab support; disable Structures tab and adjust active tab resolution. |
| src/app/core/models/navigation.ts | Extend NavTab model with disabled metadata. |
| src/app/core/layout/sidebar/sidebar.scss | Remove top atmospheric blob decoration. |
| src/app/core/layout/shell/shell.ts | Enable OnPush change detection. |
| src/app/core/layout/shell/shell.scss | Remove ambient drifting background blobs. |
| src/app/core/layout/navbar/navbar.ts | Enable OnPush and simplify tab deck usage. |
| src/app/core/layout/navbar/navbar.scss | Remove navbar ambient blob layers; minor layout tweak to right section. |
| src/app/core/layout/navbar/navbar.html | Remove now-unused tab deck variant input. |
| src/app/core/layout/navbar/navbar-tab-deck/navbar-tab-deck.ts | Simplify tab deck and extract per-item rendering to new component. |
| src/app/core/layout/navbar/navbar-tab-deck/navbar-tab-deck.html | Render tabs using NavbarTabDeckItem component. |
| src/app/core/layout/navbar/navbar-tab-deck/navbar-tab-deck-item/navbar-tab-deck-item.ts | New navbar tab item component handling disabled/active states. |
| src/app/core/layout/navbar/navbar-tab-deck/navbar-tab-deck-item/navbar-tab-deck-item.scss | New pill-style tab visuals including disabled state/badge. |
| src/app/core/layout/navbar/navbar-tab-deck/navbar-tab-deck-item/navbar-tab-deck-item.html | New markup supporting disabled tabs with “coming soon” badge. |
| src/app/core/layout/language-switcher/language-switcher.ts | Migrate trigger/close controls to AppButton and add icons/short label. |
| src/app/core/layout/language-switcher/language-switcher.scss | Remove old bespoke trigger/close button styling. |
| src/app/core/layout/language-switcher/language-switcher.html | Replace raw buttons with AppButton. |
| src/app/core/layout/bg-energy-layer/bg-energy-layer.ts | Add new standalone animated background energy layer component. |
| src/app/core/layout/bg-energy-layer/bg-energy-layer.scss | Styling for animated background streams; disabled under reduced motion. |
| src/app/core/layout/bg-energy-layer/bg-energy-layer.html | SVG stream rendering loop with gradient defs and animation bindings. |
| src/app/core/i18n/i18n-keys.ts | Remove unused log panel time header i18n key. |
| src/app/app.ts | Import background energy layer into root app component. |
| src/app/app.routes.ts | Redirect /structures routes to /algorithms. |
| src/app/app.html | Render the new background energy layer. |
| public/i18n/pl.json | Add comingSoon nav label; remove log-panel time header translation. |
| public/i18n/en.json | Add comingSoon nav label; remove log-panel time header translation. |
| docs/superpowers/specs/2026-04-23-unified-task-picker-architecture.md | Update spec wording to reference select instead of lab-select. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
No description provided.