Amazing UI fallout#657
Open
coiseiw wants to merge 48 commits into
Open
Conversation
Updates Material form-field/snack-bar defaults; extracts header into LayoutHeaderModule; drops removed AlertComponent/PaginationModule/ LoadingButtonDirective from shared barrels; preconnects design-system fonts in index.html; adapts auth focus selector to the new input-text wrapper.
HomeComponentsModule and TasksComponentsModule export the same declarations as HomeModule/TasksModule but omit *RoutingModule so other feature modules can embed <app-home> / <app-show-tasks> without inheriting their route tables.
… guard, extra-actions slot
Adds isNumeric on HTTableColumn (right-aligns + tabular-nums on counts,
sizes, speeds, IDs, priorities) and applies it to agents/chunks/files/
hashes/hashlists/pretasks/super*/tasks/vouchers tables. Expands task
status rendering to handle COMPLETED and IDLE (was RUNNING-only).
Guards rowActionDelete against missing taskWrapperId. Adds ng-content
extra-actions projection slot in tasks-table; host: { class: 'block' }
on ht-table.
Theme tokens replace raw hex colors in pass-strenght; refactor
app-table to mat-card outlined; add styleUrls + host: { class: 'block' }
to several task components; align dynamicform field defaults with the
new app.module values; replace native alert() with AlertService in
tus upload; add TextFieldModule and ButtonsModule barrel imports.
Rename app-page-title test mocks to app-page; update validation
selectors to [data-testid="form-validation-error"]; add Symbol.iterator
to FileList mock; add MetadataService sender-settings title; sprinkle
?? defaults for stricter null checks.
Introduce a `readonly` + `linkTo` API on every <input-*> component so the same building blocks can render display-only values, replacing the parallel <simulate-form-field*> shells. - readonly: re-skins the field via `.input--readonly` (full opacity, `--well` background, no edit affordances, no required-marker, default cursor). Distinct from `disabled` semantically: readable/selectable value display, not a locked form participant. - linkTo: wraps the label text in a routerLink for cross-record navigation. Requires RouterModule in the InputModule. Also refactor color.component to host the random-color button via matSuffix inside the form field instead of a sibling flex wrapper, and flex-center the inline help icon in checkbox labels so optical alignment no longer depends on font metrics.
The <simulate-form-field> and <simulate-form-field-multi> components
were parallel display-only shells that mirrored the field-stack layout
of the real inputs. Now that <input-*> components accept `readonly`
and `linkTo`, those shells are redundant.
- Delete simulate-form-field{,-multi}; drop them from GridModule.
- Migrate all consumers (edit-agent, view-health-check, edit-hashlist,
import-cracked-hashes, edit-users, edit-tasks) to <input-text> or
<input-multiselect> with `[readonly]="true"` and `[linkTo]` where the
legacy `routerLink` input was used.
- Remove the now-unused `.simulate-form-field*` styles from _card.scss.
One source of truth for "labelled field" rendering, editable or not.
The new-tasks "Help" icon and the edit-tasks "Assign agent" / "Reload" icons were positioned via per-page flex containers (`.form-section__cmd` and `.custom-agent-container`), each with its own baseline-alignment quirks (the 22px magic margin, hiding the form-field subscript so flex-end on the row aligned with the input). Project these as `matSuffix` children of <input-text-area> and <input-multiselect> instead — Material already aligns suffixes correctly against the input baseline, so both container styles and their magic offsets can go.
Replace the hardcoded #00ff00 / #ff0000 / #ffff00 / #c0c0c0 fills in
task-visual with `--visual-graph-{cracked,error,no-crack,not-processed}`
tokens that alias to the existing semantic status tokens.
Domain-specific aliasing (rather than reading --status-* directly) lets
the graph retune in isolation without disturbing other --status-*
consumers, and keeps the canvas in sync with light/dark theme flips.
Also drop the long-dead commented-out conditional branches that mirrored
the cracked/not-processed fills.
The Next / Back / Finish buttons in the new-agent stepper sat left-aligned in raw <div>s. Add `flex gap-sm justify-end` to all three action rows so they cluster at the right edge with consistent spacing, matching the action-row pattern used elsewhere.
The prior commit themed task-visual.component.ts via new --visual-graph-* tokens, but that component is only mounted in Storybook. The production hover-preview rendered by ht-table-type-link fetches a server-rendered PNG from /api/v2/helper/getTaskProgressImage in the hashtopolis-server repo, whose colors are hardcoded in PHP (GD's imagecolorallocate). The token plumbing had no user-visible effect, so undo it to keep the design system free of unused tokens.
Lift the `.light-theme` and `.dark-theme` CSS variable blocks out of base/_tokens.scss into dedicated sibling stylesheets and `@use` them from theme.scss. base/_tokens.scss now holds only theme-agnostic tokens (primitives, geometry, motion, typography bindings, semantic baselines on :root), making the theming a self-contained trio of theme.scss + light.scss + dark.scss.
Both call sites passed `width: '100%'` to MatDialog.open, which overrides Material's default max-width and stretches the panel edge-to-edge so its built-in centering is no longer visible. - HashtypeDetectorComponent (Create Hashlist help): 720px / 90vw - ModalPretasksComponent (Edit Subtasks from supertasks table): 80vw / 80vw, matching the sibling ModalSubtasksComponent
Wrap the matSuffix ng-content in a span that stops click propagation so buttons projected into the suffix slot (e.g. browse/add) don't bubble up to the multiselect's wrapping form-field and reopen the autocomplete panel.
Open the cheatsheet help dialog with width 840px / maxWidth 90vw so it centers consistently with the other help and pretasks dialogs.
Switch the dialog container surface (in both the design-system shell rule and the Material token block) from --card to --popover. --card is intentionally translucent in dark mode so it can sit on the page background; dialogs overlay arbitrary content above a dim backdrop and need a solid floating-surface token, otherwise the backdrop bleeds through the surface.
The compact form-field rules pin the filled wrapper, flex container, and infix to 36px so labelless single-line inputs line up. Textareas need to grow with their content, so opt them out via :has(textarea.custom-textarea) and let cdkTextareaAutosize plus the textarea's own min-height drive the field height.
Material's horizontal connector defaults to `margin: 0 -16px`, bleeding the line 16px into each adjacent step header. Combined with the hover state-layer's rounded rect, the line visibly punctures the rect's side wall. Replace the negative margin with a small positive one so the line endpoints sit just clear of the rect. Also opt .mat-step-header out of the global :focus-visible outline. The global 2px outline at 2px offset draws a second rectangle 4px outside the header and reproduces the same overshoot — Material's own internal focus indicator is enough.
Switches the host to flex-wrap with start justification so children sit at their natural width instead of being stretched across grid tracks. Useful for rows of checkboxes where the default grid would push items awkwardly far apart.
Replaces ad-hoc flex-wrap divs and misapplied [columns] grids around checkbox groups in edit-agent, edit-tasks, import-supertasks (masks, wrbulk), new-tasks, and new-preconfigured-tasks. edit-tasks also splits its mixed number/checkbox row into a 4-column number row plus a left- aligned checkbox row so the inputs no longer share misleading track widths.
Introduces a token-driven divider with faint/default/strong variants and horizontal/vertical orientations, plus a Storybook showcase. Adopted in new-files, new-hashlist, new-tasks and report-builder so separators pick up theme border tokens instead of relying on UA <hr> styling or inline Tailwind utility classes.
Add OverflowTooltipDirective and wire it into the dynamic form so long field and checkbox labels stay on one line, ellipsize, and reveal their full text via Material tooltip only when actually truncated. Keeps paired card sections at matching row heights across config tabs.
Drop the optional `target` selector input and the `measuredElement` indirection. All current consumers measure the host element directly, so the descendant-lookup escape hatch is dead code.
Introduces a `fullWidth` flag on MetadataFormField that makes a cell span the full grid row via `.custom-form__cell--full`. Applied to the "Enable Hashcat Brain" checkbox so the row-following fields don't crowd against the narrow checkbox in the next column.
Tighten the brand pill (52→44px, padding 4px 6px→4px) and shrink the logo cap (44→36px) to match the smaller container. In dark mode the logo flips to the red devedis variant; add a solid white pill behind it so the red mark keeps contrast on the near-black header surface. Color-only override — geometry stays in the theme-agnostic block.
Step the shared subtitle one size up so it reads as a clear section heading under the page title rather than competing with body text.
Let a parent page own the large title (e.g. tabbed Settings page) by hiding the dynamic form's own <app-page> wrapper. When opted out, the form's title renders inline as a smaller subtitle inside the section.
Uppercase + 0.08em tracking already mark this row as a label, so size sits one step below the per-card subtitle to keep clear hierarchy between page subtitle, section label and field.
The tabbed Settings screen now owns the "Settings" page title; the inner dynamic form opts out of its own wrapper so each tab renders under the same heading instead of duplicating it per form.
Replace the raw <h2> with the shared <app-page-subtitle> so the "Database tools" heading matches the rest of the Settings tabs. Drop the .item horizontal padding so action buttons stay flush with the subtitle at the card's natural left edge.
correct-horse-battery-bench
assigned
coiseiw and unassigned
correct-horse-battery-bench
correct-horse-battery-bench
changed the base branch from
master
to
1974-ui-cleanup-and-design-system-usage-before-release
…create theme. Modification of the docker compose to mount a dedicated volume for the front-end to host the custom css files.
Base automatically changed from
1974-ui-cleanup-and-design-system-usage-before-release
to
master
May 22, 2026 12:19
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
2 participants
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.
This is the PR for the fallout theme update