Skip to content

Fix/UI ux bugfixes#28

Merged
SparrowVic merged 25 commits into
mainfrom
fix/ui-ux-bugfixes
Apr 25, 2026
Merged

Fix/UI ux bugfixes#28
SparrowVic merged 25 commits into
mainfrom
fix/ui-ux-bugfixes

Conversation

@SparrowVic
Copy link
Copy Markdown
Owner

No description provided.

…obe country click

Language switcher: clicking Poland on the globe now sets PL, any other
country sets EN and closes the overlay.

Algorithm card: removed the WebGL insane-shader and the difficulty-tinted
wash/blob backgrounds; the card body is now neutral. Difficulty signals
are a thin top stripe plus a four-segment pip meter in the eyebrow, and
the hover effect is internal — the preview art zooms in place instead of
lifting the whole card.

Call-tree-lab (MCTS, Minimax α/β): HTML node cards (148px wide) were
placed 1:1 against tree-layout's 62-unit logical gap, so neighbours
overlapped. Added a 2.8× logical→pixel scale with matching viewBox
padding so edges and cards line up. The stage now scrolls on both axes,
supports drag-to-pan, and auto-centers on preset change.
… alive

The whole UI was reading as "fading": secondary/tertiary text near the
floor of the contrast budget, vitesse-dark muting code tokens. Bumped
--text-secondary, --text-tertiary, --text-quaternary brighter while
preserving the gap between tiers, switched the Shiki theme to dark-plus
(literal VS Code default) so syntax tokens get their full saturation
back, and tightened a few component-level mutes (side-tab inactive
state, disabled toolbar buttons, the toolbar accent line).
…tions

Round 2 of the readability lift. Where the global token bump didn't
reach (component SCSS using literal rgba grays, semantic muting set
deliberately too low), pull the floor up so data values stay legible:
- graph muted edges 0.22 → 0.42, muted nodes 0.34 → 0.55
- string frequency columns inactive 0.28 → 0.55
- sieve-grid skipped/composite tightened (still readable as "marked
  out" but the digit no longer disappears)
- search eliminated cells 0.5 → 0.65
- network saturated edges 0.45 → 0.62
- five geometry trace-panels: hardcoded rgba(226,232,240,0.64) on
  queued chip → var(--text-secondary) so they participate in the
  global ramp
- radix strip/bucket/matrix: handcrafted rgba(196,206,226,…) and
  rgba(148,163,184,…) hierarchy → var(--text-secondary)/-tertiary
  /-quaternary tokens
- info-panel card accent rail and sidebar chevron lifted off the
  floor of visibility
Default border was rgba(255,255,255,0.07) — close to invisible on the
app background. Bumped the rest tier to 0.10 and nudged hover/strong
to 0.18/0.24 in lockstep so the rest/hover/active escalation still
reads. Single token change cascades to every panel, chip, card,
metric tile, control field across the app.
Code panel: bumped resting line-number opacity 0.5 → 0.7 and hover
0.78 → 0.95. With dark-plus syntax tokens carrying real saturation,
the gutter at 0.5 was the only "dim" element left in the editor and
it hurt scannability — line numbers should be readable without
hovering.

Algorithm-detail topbar pills: hover state was barely-tinted
(rgba(...0.08/0.05)). Bumped accent gradient to 0.14/0.08, lifted
border-color from 0.24 → 0.32 of chrome-accent, and added a soft
inner highlight + outer accent glow on hover so Browse / Chalkboard
/ scenario / step counter feel like real hit targets.
Soft: border 0.22 → 0.30 of tone, gradient 0.16/0.08 → 0.20/0.10,
inner highlight 0.05 → 0.06 — soft pills (status badges, semantic
tags throughout the app) now read as actual chips instead of
suggestions.

Ghost: hardcoded rgba(255,255,255,0.07) border → var(--border) so
"empty" tags participate in the global border ramp, plus a hair more
fill (0.03 → 0.035).
…pbar

The "small uppercase tertiary microtype" recipe shows up in roughly
every panel header, eyebrow tag, log column, and section label across
the app — same idea, slightly different sizes and tracking. Pulled
the recipe into shared/styles/_eyebrow.scss (one mixin with sane
defaults + size/tracking/weight/colour/mono knobs, plus an eyebrow-dot
helper) and migrated four representative call sites: viz-header phase
tag, toolbar progress eyebrow, log-panel sticky head, algorithm-detail
topbar eyebrow.

Future eyebrows should use this mixin so any global tweak (tracking,
colour drift, mono override) propagates cleanly.
The five geometry trace-panels (delaunay, half-plane, minkowski-sum,
sweep-line, voronoi) all duplicated the same .trace__chip skeleton —
padding, radius, font, weight, and the queued state. Pulled the
skeleton + queued state into shared/styles/_trace-chip.scss and
migrated all five panels. Per-panel tone differences (current/done
colours) stay local since they're genuinely different per algorithm.
Both catalogue cards (algorithm-card 537 lines, structure-card 340)
were carrying near-identical SCSS — the same surface, stripe, pips,
hover internal-glow, preview frame, layout helpers, responsive +
reduce-motion rules. Pulled the shared recipe into
shared/styles/_browse-card.scss as a single `everything` mixin and
slimmed both consumers to just their feature-specific bits:

  algorithm-card.scss: 537 → 134 lines (metrics block + CTA ink)
  structure-card.scss: 340 →  50 lines (saturate desaturate + CTA ink)

A future tweak to card hover/stripe/pip/preview now lands in one
place and propagates to both catalogues.
Made the eyebrow partial reusable via partial composition: browse-card
now @uses eyebrow internally for .card__section, so the catalogue
cards' label typography is sourced from the same single recipe as the
panels. Then propagated the mixin to:
  - algorithm-card.scss   .card__metric dt
  - info-panel.scss       .info__eyebrow / .info__label /
                          .info__tutorial-badge / .info__tradeoff-label
  - code-panel.scss       .code-missing__eyebrow
  - scratchpad-lab.scss   .scratchpad__task-eyebrow
  - algorithm-detail.scss .unavailable__eyebrow

Each call site keeps its tone-specific colour by passing the existing
hue as $color; the recipe (size/tracking/weight/uppercase) is now
centralized.
Algorithm-detail topbar carries a family of status pills (default
view chip, strong mono numeric chip for step counters, live accent
chip with pulsing dot). Pulled the recipe into
shared/styles/_chrome-pill.scss as base / base-hover / strong / live
mixins and slimmed .topbar__pill from ~57 lines of inline CSS to
4 mixin includes. Future chrome-pill consumers (other status chips
across the app) can pull from the same recipe.

Distinct from controls/_control-chrome.scss::glass-pill which targets
interactive form-field chrome — this partial is for read-only chrome
that displays state.
Pulled four more micro-label sites onto the shared eyebrow recipe so
the type-system stays uniform end-to-end:
  - log-panel.scss          .log__step-key
  - search-trace-panel.scss .trace__summary-item-label
                            .trace__queue-label
  - string-trace-panel.scss .trace__summary-preset-label
  - sieve-grid-trace-panel.scss .trace__pivot-chip-label
Six trace-panel labels (dp, graph, call-stack-lab, call-tree-lab,
number-lab, pointer-lab) were duplicating the same uppercase mono
microtype recipe. Migrated each to the shared eyebrow mixin so
the type-system stays uniform across every Trace tab variant.
…call-tree)

Migrated label typography in the four lab-style visualizations onto
the shared eyebrow mixin: cell index, stat labels, frame depth chip,
register labels, history-tape header, sidecar head, result labels.
Final sweep through visualization SCSS: sieve-grid (3 labels),
viz-custom-values-popover, minkowski-sum, string-visualization
(unified label cluster + RLE output), tree-visualization strip
label, radix-strip lane title, radix-matrix ordered title.

Eyebrow mixin is now the single source of truth for uppercase
microtype across panels, traces, lab visualizations and chrome
in this app.
Six lab control labels (slider, select, multi-select, text-input,
number-input, difficulty-filter) duplicated the same 8px uppercase
0.14em tracking recipe. Migrated each to the shared eyebrow mixin
plus the multi-select section eyebrow + group title (which use the
chrome-accent ink variant). Now every form control label in the app
sources its typography from one mixin call.
Two top-level browse pages had their hero eyebrow chip and stat
labels using the same uppercase microtype recipe. Pulled them
through the shared mixin so the catalog hero copy (the first thing
the user sees on each section) participates in the unified
type-system.
Miller-Rabin was chalkboard-only because the author judged the
register dashboard would just restate values. The user wants the
toggle anyway, so dual-emit numberLab alongside scratchpadLab:

  - Track live state (current base a, current x_i value, squaring
    chain) by pattern-matching on the chalkboard line ids the
    generator already emits — no duplication of the algorithm logic.
  - Build registers (n, s, d as settled; a + x_i as active when set)
    and a history tape of the squaring chain x_0, x_1, x_2 …
  - Switch MILLER_RABIN_VIEW_CONFIG variant options from
    SCRATCHPAD_LAB_ONLY to NUMBER_LAB_WITH_SCRATCHPAD; default stays
    on chalkboard so the editorial flow is unchanged.
  - Add the `numberLab.millerRabin.modeLabel` i18n entry in PL/EN.
Same dual-emit pattern as Miller-Rabin: track live state (modulus,
constant c, current iteration with x/y/diff/gcd) by lifting values
off the chalkboard line ids and contents the generator already
emits, then build registers + an iteration history tape that reads
"i=k → gcd=d" for each Floyd row. The chalkboard remains the
default variant so the editorial story is unchanged; users can
toggle to the dashboard from the toolbar.
Live registers: k (target sample size), i (current stream index),
j (random draw / replacement index), r (predicate-flow real counter
for the predicate variant), decision (start / replace / skip / add /
ignore — read off the chalkboard "decyzja" notation), R (current
reservoir snapshot). History tape carries one entry per stream tick
labeled with its decision, so the reservoir's decision pattern is
visible at a glance from the toolbar variant toggle.
Creates a new dedicated visualization component (matrix-grid-
visualization) that renders the augmented matrix as a colour-coded
CSS grid with state-based cell tinting (pivot, pivot-row, pivot-col,
eliminating, updated, leading, free, rhs). The augmented divider
sits between coefficient columns and the RHS column as a subtle
grid track gap rather than a heavy line.

Wiring:
  - new shared trace-state model: models/matrix-grid.ts (lighter than
    the existing models/matrix.ts which is sized for Floyd-Warshall /
    Hungarian)
  - new SortStep slot: matrixGrid
  - new variant value: 'matrix-grid'
  - new variant pair: MATRIX_GRID_WITH_SCRATCHPAD_VARIANT_OPTIONS
    (default stays on chalkboard so the editorial story is unchanged)
  - visualization-canvas routes the variant
  - i18n: features.algorithms.runtime.matrixGrid.gaussianElimination.*

Generator: gaussian-elimination.ts now dual-emits scratchpadLab +
matrixGrid. The dual emit lifts row-operation context off the
existing chalkboard line ids (forward-eliminate-N-M-matrix etc.)
so the algorithm logic stays a single source of truth.

This is the foundation for Simplex too — the trace-state schema is
already mode-tagged ('gaussian-elimination' | 'simplex') and the
component is mode-agnostic.
The matrix-grid component is mode-agnostic by design. Wired Simplex
through the same dual-emit pattern: per pivot iteration, track the
(leaving row, entering col) pair so the tableau view can colour the
pivot cell, the entering column (pivot-col), the leaving row
(pivot-row), the pivot apex (pivot), and the rows that just changed
(updated). Ratio-test lines highlight the row being tested.

Switch SIMPLEX_ALGORITHM_VIEW_CONFIG to
MATRIX_GRID_WITH_SCRATCHPAD_VARIANT_OPTIONS; default stays on
chalkboard. Add simplex i18n.modeLabel.
Same dual-emit pattern as Miller-Rabin / Pollard / Reservoir: track
live state (current congruence index i, currently merged-in (a_i,
n_i), running residue x and running modulus M) by lifting values off
the chalkboard line ids the generator already emits. History tape
shows every congruence in the system with the active one highlighted.
Copilot AI review requested due to automatic review settings April 25, 2026 12:52
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR focuses on UI/UX consistency across the app by introducing shared SCSS mixins/partials (eyebrow typography, trace chips, browse cards, chrome pills), tuning the global dark theme ramps, and adding a new matrix-grid visualization variant for matrix-pivoting algorithms (Gaussian Elimination + Simplex). It also extends several “chalkboard” algorithms with Number Lab register views and refines interaction/visual affordances in multiple visualization panels and cards.

Changes:

  • Centralized common UI styling into shared SCSS partials and migrated many components to use the new eyebrow, trace-chip, browse-card, and chrome-pill mixins.
  • Added matrix-grid trace state + visualization component and wired it through variants/config for Gaussian Elimination and Simplex.
  • Updated several Number Lab algorithm generators to emit register/history state alongside scratchpad output; removed shader-based “insane” card effects in favor of difficulty pips/stripes.

Reviewed changes

Copilot reviewed 81 out of 81 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
src/styles.scss Adjusts global border + text ramps and expands explanatory theme comments.
src/app/shared/styles/_trace-chip.scss Adds shared mixin for trace “queued/current/done” chip skeleton and queued state.
src/app/shared/styles/_eyebrow.scss Adds shared “eyebrow” typography + eyebrow-dot mixins used across UI.
src/app/shared/styles/_chrome-pill.scss Adds shared mixins for read-only chrome pills (base/hover/strong/live).
src/app/shared/styles/_browse-card.scss Adds shared browse card recipe (shell/stripe/eyebrow/title/preview/footer + responsive/motion).
src/app/shared/controls/lab-text-input/lab-text-input.scss Migrates label styling to shared eyebrow mixin.
src/app/shared/controls/lab-slider/lab-slider.scss Migrates label styling to shared eyebrow mixin.
src/app/shared/controls/lab-select/lab-select.scss Migrates label styling to shared eyebrow mixin.
src/app/shared/controls/lab-number-input/lab-number-input.scss Migrates label styling to shared eyebrow mixin.
src/app/shared/controls/lab-multi-select/lab-multi-select.scss Migrates multiple label/eyebrow styles to shared eyebrow mixin.
src/app/shared/controls/lab-difficulty-filter/lab-difficulty-filter.scss Migrates label styling to shared eyebrow mixin.
src/app/shared/components/ui-tag/ui-tag.scss Tweaks tag appearance alphas and aligns ghost border with --border.
src/app/shared/code-highlight.service.ts Switches Shiki theme to dark-plus.
src/app/features/structures/structures-page/structures-page.scss Migrates eyebrow/stat labels to shared eyebrow mixin.
src/app/features/structures/structure-card/structure-card.ts Removes shader/viewport observer logic; adds difficulty pips derivation and simplifies style vars.
src/app/features/structures/structure-card/structure-card.scss Replaces local card styling with shared browse-card mixin + local tweaks (saturation + CTA ink).
src/app/features/structures/structure-card/structure-card.html Replaces blob/shader ornaments with stripe + difficulty pips and adds data-difficulty.
src/app/features/algorithms/models/visualization-renderer.ts Adds matrix-grid as a supported visualization variant.
src/app/features/algorithms/models/sort-step.ts Adds optional matrixGrid trace state to steps.
src/app/features/algorithms/models/matrix-grid.ts Introduces MatrixGridTraceState and supporting types for the new visualization.
src/app/features/algorithms/components/voronoi-trace-panel/voronoi-trace-panel.scss Migrates trace chip styling to shared trace-chip mixin.
src/app/features/algorithms/components/viz-header/viz-header.scss Migrates phase label styling to shared eyebrow mixin (mono override).
src/app/features/algorithms/components/viz-custom-values-popover/viz-custom-values-popover.scss Migrates title styling to shared eyebrow mixin.
src/app/features/algorithms/components/visualization-toolbar/visualization-toolbar.scss Migrates eyebrow styling to shared mixin; tweaks divider and disabled opacity.
src/app/features/algorithms/components/visualization-canvas/visualization-canvas.ts Registers new MatrixGridVisualization component.
src/app/features/algorithms/components/visualization-canvas/visualization-canvas.html Adds rendering case for matrix-grid variant.
src/app/features/algorithms/components/tree-visualization/tree-visualization.scss Migrates label styling to shared eyebrow mixin (mono).
src/app/features/algorithms/components/sweep-line-trace-panel/sweep-line-trace-panel.scss Migrates trace chip styling to shared trace-chip mixin.
src/app/features/algorithms/components/string-visualization/string-visualization.scss Migrates multiple micro-labels to shared eyebrow mixin; adjusts some opacities.
src/app/features/algorithms/components/string-trace-panel/string-trace-panel.scss Migrates preset label styling to shared eyebrow mixin.
src/app/features/algorithms/components/sieve-grid-visualization/sieve-grid-visualization.scss Migrates multiple labels to shared eyebrow mixin; adjusts muted/composite styling.
src/app/features/algorithms/components/sieve-grid-trace-panel/sieve-grid-trace-panel.scss Migrates pivot chip label styling to shared eyebrow mixin.
src/app/features/algorithms/components/side-panel/side-panel.scss Adjusts side-panel button default/hover text colors.
src/app/features/algorithms/components/search-visualization/search-visualization.scss Tweaks eliminated cell opacity.
src/app/features/algorithms/components/search-trace-panel/search-trace-panel.scss Migrates summary/queue labels to shared eyebrow mixin.
src/app/features/algorithms/components/scratchpad-lab-visualization/scratchpad-lab-visualization.scss Migrates task eyebrow styling to shared eyebrow mixin.
src/app/features/algorithms/components/radix-strip-visualization/radix-strip-visualization.scss Migrates lane title to shared eyebrow; aligns text colors to theme vars.
src/app/features/algorithms/components/radix-matrix-visualization/radix-matrix-visualization.scss Migrates ordered title to shared eyebrow; aligns text colors to theme vars.
src/app/features/algorithms/components/radix-bucket-visualization/radix-bucket-visualization.scss Aligns copy colors to theme vars.
src/app/features/algorithms/components/pointer-lab-visualization/pointer-lab-visualization.scss Migrates labels to shared eyebrow (mono where needed).
src/app/features/algorithms/components/pointer-lab-trace-panel/pointer-lab-trace-panel.scss Migrates stat label styling to shared eyebrow (mono).
src/app/features/algorithms/components/number-lab-visualization/number-lab-visualization.scss Migrates labels to shared eyebrow (mono).
src/app/features/algorithms/components/number-lab-trace-panel/number-lab-trace-panel.scss Migrates register label to shared eyebrow (mono).
src/app/features/algorithms/components/network-visualization/network-visualization.scss Tweaks saturated edge stroke/opacity.
src/app/features/algorithms/components/minkowski-sum-visualization/minkowski-sum-visualization.scss Migrates eyebrow styling to shared eyebrow mixin.
src/app/features/algorithms/components/minkowski-sum-trace-panel/minkowski-sum-trace-panel.scss Migrates trace chip styling to shared trace-chip mixin.
src/app/features/algorithms/components/matrix-grid-visualization/matrix-grid-visualization.ts Adds the matrix-grid visualization component logic (grid template + header tone mapping).
src/app/features/algorithms/components/matrix-grid-visualization/matrix-grid-visualization.scss Adds styling for matrix-grid panel (cells, tints, operation label, result footer).
src/app/features/algorithms/components/matrix-grid-visualization/matrix-grid-visualization.html Adds template for rendering matrix-grid state as a CSS grid with result footer.
src/app/features/algorithms/components/log-panel/log-panel.scss Migrates sticky header + step keys to shared eyebrow mixin.
src/app/features/algorithms/components/info-panel/info-panel.scss Migrates several labels/badges to shared eyebrow mixin; tweaks rail gradient/opacity.
src/app/features/algorithms/components/half-plane-trace-panel/half-plane-trace-panel.scss Migrates trace chip styling to shared trace-chip mixin; tweaks ghost row/note styling.
src/app/features/algorithms/components/graph-visualization/graph-visualization.scss Tweaks muted opacities.
src/app/features/algorithms/components/graph-trace-panel/graph-trace-panel.scss Migrates eyebrow styling to shared eyebrow mixin.
src/app/features/algorithms/components/dp-trace-panel/dp-trace-panel.scss Migrates preset label styling to shared eyebrow mixin.
src/app/features/algorithms/components/delaunay-trace-panel/delaunay-trace-panel.scss Migrates trace chip styling to shared trace-chip mixin.
src/app/features/algorithms/components/code-panel/code-panel.scss Migrates missing-state eyebrow styling to shared eyebrow; tweaks gutter opacities.
src/app/features/algorithms/components/call-tree-lab-visualization/call-tree-lab-visualization.ts Adds auto-centering on preset change; adjusts viewBox/pixel scaling; adds drag-to-pan pointer handling.
src/app/features/algorithms/components/call-tree-lab-visualization/call-tree-lab-visualization.scss Updates stage container styling (scrollable framed stage, grab cursor, background grid).
src/app/features/algorithms/components/call-tree-lab-visualization/call-tree-lab-visualization.html Wires pointer events for drag-to-pan and changes SVG preserveAspectRatio to none.
src/app/features/algorithms/components/call-tree-lab-trace-panel/call-tree-lab-trace-panel.scss Migrates chip label styling to shared eyebrow mixin (mono).
src/app/features/algorithms/components/call-stack-lab-visualization/call-stack-lab-visualization.scss Migrates multiple labels to shared eyebrow; adjusts mixed-case depth label behavior.
src/app/features/algorithms/components/call-stack-lab-trace-panel/call-stack-lab-trace-panel.scss Migrates chip labels to shared eyebrow mixin (mono).
src/app/features/algorithms/algorithms/simplex-algorithm/simplex-algorithm.ts Emits matrixGrid state on each step, including operation parsing + cell tinting.
src/app/features/algorithms/algorithms/reservoir-sampling/reservoir-sampling.ts Switches to Number Lab step emission + scratchpad pairing; derives registers/history by parsing emitted lines.
src/app/features/algorithms/algorithms/pollards-rho/pollards-rho.ts Switches to Number Lab step emission + scratchpad pairing; derives registers/history by parsing emitted lines.
src/app/features/algorithms/algorithms/miller-rabin/miller-rabin.ts Switches to Number Lab step emission + scratchpad pairing; derives registers/history for squaring chain.
src/app/features/algorithms/algorithms/gaussian-elimination/gaussian-elimination.ts Emits matrixGrid state on each step, including op parsing + result capture.
src/app/features/algorithms/algorithms/crt/crt.ts Switches to Number Lab step emission + scratchpad pairing; derives registers/history from emitted lines.
src/app/features/algorithms/algorithms-page/algorithms-page.scss Migrates stat label styling to shared eyebrow mixin.
src/app/features/algorithms/algorithm-detail/algorithm-detail.scss Migrates eyebrow/pill chrome to shared mixins (eyebrow + chrome-pill).
src/app/features/algorithms/algorithm-detail/algorithm-detail-config/algorithm-detail-config.ts Adds matrix-grid variant options and enables Number Lab + Scratchpad dual variants for multiple algorithms.
src/app/features/algorithms/algorithm-card/algorithm-card.ts Removes shader/viewport observer logic; adds difficulty pips derivation.
src/app/features/algorithms/algorithm-card/algorithm-card.scss Replaces local card styling with shared browse-card mixin + algorithm-only metric/CTA styling.
src/app/features/algorithms/algorithm-card/algorithm-card.html Replaces blob/shader ornaments with stripe + difficulty pips and adds data-difficulty.
src/app/core/layout/sidebar/sidebar.scss Tweaks sidebar icon opacity.
src/app/core/layout/language-switcher/world-flag-globe/world-flag-globe.ts Adds countrySelected output and emits selection on marker click.
src/app/core/layout/language-switcher/language-switcher.ts Handles globe selection to toggle app language; imports APP_LANG.
src/app/core/layout/language-switcher/language-switcher.html Wires (countrySelected) event from globe to switcher handler.
public/i18n/pl.json Adds matrix-grid + number-lab mode labels for several algorithms.
public/i18n/en.json Adds matrix-grid + number-lab mode labels for several algorithms.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/app/features/algorithms/models/matrix-grid.ts
Comment thread src/styles.scss
@SparrowVic SparrowVic merged commit 0114505 into main Apr 25, 2026
8 checks passed
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.

2 participants