Skip to content

feat(platform): app details page + assorted UI polish fixes#2136

Merged
Israeltheminer merged 6 commits into
mainfrom
fix/ui-polish-batch
Jun 25, 2026
Merged

feat(platform): app details page + assorted UI polish fixes#2136
Israeltheminer merged 6 commits into
mainfrom
fix/ui-polish-batch

Conversation

@Israeltheminer

Copy link
Copy Markdown
Collaborator

What & why

Four independent UI fixes/improvements, split out from the canvas-viewer PR. Each is its own atomic commit.

  1. feat: pre-install app details page — replaces the bare "install it first" EmptyState (org route, uninstalled app) with a real details page: full description, what the app brings (pages / workflows / agents as chip groups), what it needs (required integrations), Install CTA, with the wizard inside. Removes the now-orphaned apps.install.notInstalledTitle key (the old EmptyState was its only user).
  2. fix: data-table checkbox skeleton + row height — adds a checkbox skeleton type (16px size-4, mirrors the real checkbox in the pinned 40px select column rather than the edge-to-edge 32px action shape); skeleton rows use h-12 instead of min-h-12 (CSS ignores min-height on display: table-row, so rows were collapsing).
  3. fix: searchable-select dropdown width — binds the Popover min-width to --radix-popover-trigger-width via max(14.5rem, …), so a full-width trigger (the install wizard's project picker) opens a full-width dropdown while compact toolbar pickers keep the floor.
  4. fix: notification row action inset — wraps row actions in pl-9 pr-4 pb-3 so they line up with the body text and regain the missing bottom gutter.

Verification

  • typecheck + lint green against latest main
  • lint:sast (Opengrep) — 0 findings in changed files
  • ✅ i18n parity + usage enforce green (incl. the orphaned-key removal — the usage check caught it)
  • test:ui (data-table + searchable-select) green — 8 files / 79 tests
  • ⚠️ Authenticated in-browser walkthrough not run locally (no dev credential); relying on CI e2e + reviewer check

Definition of Done

  • Translations — all base locales — en/de/fr: added apps.details.*, removed orphaned apps.install.notInstalledTitle. de-CH falls back to de.
  • Accessibility — Install is a button; chips/scope are Badges; the data-table & searchable-select changes are presentational (no a11y semantics change).
  • Tests — typecheck + test:ui green. No new e2e spec for the details page (presentational enhancement of the existing install flow; CI e2e + existing specs cover installation).
  • Docs — N/A (internal UI polish; the documented install steps are unchanged).
  • Migrations — N/A (no data-model change).
  • Storybook — N/A (app components under services/platform, not packages/ui primitives).
  • Instructions — N/A (no documented path/command/pattern changed).

Israeltheminer and others added 6 commits June 24, 2026 23:50
Replace the bare "install it first" EmptyState (org route, app not
installed) with a real pre-install details page: the full description,
what the app brings (pages / workflows / agents as chip groups), and what
it needs (required integrations), with Install as the CTA. The wizard
(project pick / required integrations) lives inside, matching the
one-click-vs-wizard split on the hub.

Translations: en/de/fr - added apps.details.* (scope labels, includes /
requires sections, setup hint); removed the now-orphaned
apps.install.notInstalledTitle (the old EmptyState was its only user)
Docs: N/A | Migrations: N/A | Storybook: N/A
a11y: Install CTA is a button; chips are Badges; scope is a labelled Badge
Tests: i18n parity/usage green; typecheck green
Two skeleton fixes in the shared DataTable:
- The select column's skeleton used the 32px `action` shape, which in the
  pinned 40px column read edge-to-edge. Add a `checkbox` skeleton type
  (16px size-4) mirroring the real checkbox, keeping the gutter.
- Skeleton rows used `min-h-12`, which CSS ignores on a table row
  (display: table-row); `h-12` acts as a min-height there, so the
  skeleton matches the loaded table's row height.

Translations: N/A | Docs: N/A | Migrations: N/A | Storybook: N/A
a11y: no change (skeleton is presentational)
Tests: platform test:ui (data-table.test.tsx) green
Radix Popover, unlike Radix Select, does not auto-size its content to the
trigger, so a full-width field (e.g. the install wizard's project picker)
opened a 14.5rem dropdown centered under it. Bind min-width to
--radix-popover-trigger-width via max(14.5rem, ...) so full-width triggers
get a full-width dropdown while compact toolbar triggers keep the floor.

Translations: N/A | Docs: N/A | Migrations: N/A | Storybook: N/A
a11y: no change
Tests: platform test:ui (searchable-select.test.tsx) green
Notification actions render outside the interactive row body (to avoid
nested buttons), so they sat flush with no bottom gutter and ignored the
body's content inset. Wrap children in pl-9 pr-4 pb-3: pl-9 (36px) lines
actions up with the body text (px-4 + unread dot size-2 + gap-3); pb-3
restores the missing bottom gutter.

Translations: N/A | Docs: N/A | Migrations: N/A | Storybook: N/A
a11y: no change (actions already outside the interactive body)
Tests: typecheck green
Pre-existing oxfmt breakage on main (merged via #2122) that fails the
repo-wide Format CI check; unrelated to this PR but blocks its gate.
Pure formatting, no content change.
@Israeltheminer Israeltheminer merged commit e5cdc88 into main Jun 25, 2026
30 of 31 checks passed
@Israeltheminer Israeltheminer deleted the fix/ui-polish-batch branch June 25, 2026 08:03
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