Skip to content

fix: compact the machine filter menu - #1743

Merged
Lampese merged 2 commits into
mainfrom
codex/compact-machine-filter
Oct 19, 2026
Merged

Lampese merged 2 commits into
mainfrom
codex/compact-machine-filter

Conversation

@Lampese

@Lampese Lampese commented Oct 19, 2026

Copy link
Copy Markdown
Contributor

Related issue

Same-repository UI fix; no intake issue.

Problem / pressure

The machine filter popup has two short options, but uses the regular menu width, a redundant heading and separator, and an empty leading checkbox column. This leaves Online and My machines indented inside an oversized popup even when neither filter is selected.

Summary

Use the existing compact menu width and keep only the two filter rows. Place their checkmarks after the labels using an optional Menu.CheckboxItem indicatorSide="end" prop, matching the radio item's placement API. The reserved mark box keeps labels stable when checked; other checkbox menus retain their existing leading indicator by default.

Both filters remain independent, and selecting either keeps the menu open. Update the UI gallery, package documentation, and bilingual implementation note.

Visual explanation

MachineListFilterButton (components: owns the two independent filter values)
└── Menu.Content width="compact" (UI: existing 180px minimum)
    ├── CheckboxItem indicatorSide="end": Online
    └── CheckboxItem indicatorSide="end": My machines
        └── Base UI retains checkbox state and keyboard navigation

Actual Storybook component captures with synthetic machine fixtures, Chinese labels, and the dark theme:

No filters selected Online selected
No filters selected Online selected

Before / after

Before After
Regular menu with heading and separator Two-row compact popup; 180px × 64px in English and Chinese browser cases
Short labels start after an empty leading mark column Labels begin at the normal row inset; selected marks appear at the end
Two independent filters with keyboard support Same filter behavior, including combined filters and persistence when reopening

Test plan

  • NODE_ENV=test pnpm --filter @lody/ui exec vitest run test/menu.test.tsx test/gallery.test.tsx: 52 passed. Covers pointer and keyboard toggling with both indicator placements.
  • pnpm --filter @lody/components exec playwright test tests/e2e/desktop-settings-layout.spec.ts --grep 'machine filters keep labels' --workers=1 --timeout=90000: both locale cases passed. Checks compact dimensions, stable label position, trailing ticks, actual filtered machine counts, keyboard toggling, and reopening.
  • Both @lody/ui and @lody/components type checks and targeted typed lint passed.
  • pnpm format: passed.
  • pnpm check: passed, including workspace type checks, lint, tests, and boundary checks.
  • pnpm check:public-boundary: passed.
  • pnpm run docs check: reports the existing six broken Kimi/Pi submodule links in the bilingual subagent-events note; no new errors or SHA-protected topic changes.

Context handoff

This is an internal, same-repository branch. The change uses the existing compact width and preserves the default shared checkbox layout. Screenshots contain repository fixtures only. Implementation decisions and verification are recorded in the owning bilingual note.

@Lampese
Lampese marked this pull request as ready for review October 19, 2026 22:51
@Lampese
Lampese merged commit ac05909 into main Oct 19, 2026
16 checks passed
@Lampese
Lampese deleted the codex/compact-machine-filter branch October 19, 2026 22:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant