ref(board): refine UI layouts and pagination - #172
Merged
Conversation
- Route list load failures through the notification center. - Remove legacy inline inspect diagnostics and cover the regression.
- Keep catalog state fresh after imports and transitions. - Add responsive pagination with persistent controls and page-size selection. - Remove the obsolete server list inspect action.
- Render compact current/total page indicator with balanced slash spacing. - Remove focus ring glow from pagination icon and per-page controls. - Export catalogPaginationClassName for pinned catalog footers.
- Add mirror-label grid so toolbar selects size to the selected option. - Reuse the component for toolbar sort and secrets lifecycle filter.
- Accept optional viewMode prop that overrides stored dashboard default. - Keep grid/list class selection aligned with toolbar URL state.
- Centralize catalog scroll shell and hover inset class names. - Export getCatalogGridColumnCount and useCatalogGridColumnCount.
- Use shared catalog section/scroll/pagination layout tokens. - Pass explicit viewMode into ListGridContainer and PageToolbarSelect. - Add e2e coverage for clients grid/list toggle highlighting.
- Wire useResponsiveCatalogPagination with review-filter toolbar data. - Match servers/clients scroll shell and pinned pagination footer. - Type toolbar entities and view mode for PageToolbar integration.
- Derive per-page options as multiples of responsive column count. - Snap stored/URL page sizes when breakpoints change. - Pin market pagination footer with shared catalog class.
- Add fillHeight mode to AuditLogsPanel with internal table scroll. - Pin metadata/stats above logs on server, client, and profile detail. - Tighten main layout footer spacing for full-height catalog pages.
- Add topRightBadgePosition corner mode with absolute placement. - Use corner badge on profile suit grid cards to protect title width.
- Centralize settings row/grid/control class tokens in settings-layout. - Remove sidebar Beta and About WIP labels; update About copy in EN/zh/JP. - Add bun test src script and tighten preset/test fixture typing.
- Keep valid requested pages across responsive layout changes. - Preserve explicit Market page sizes when they remain valid. - Restore visible keyboard focus across shared pagination controls.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 320bf54d55
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
Pull request overview
This PR refines the Board (frontend) catalog and detail-page UI contract by removing legacy diagnostics UI, standardizing layout tokens, and introducing responsive, scrollable pagination patterns shared across Servers/Clients/Profiles/Market—without backend/API changes.
Changes:
- Introduce shared responsive catalog pagination + layout shells (sticky footer pagination with internal scroll) and apply across Servers/Clients/Profiles/Market.
- Remove legacy Server list inline diagnostics/inspect UI while preserving the formal
InspectorDrawerworkflow. - Normalize Settings and detail-page layouts (shared class tokens, pinned overview sections, fill-height logs) and remove preview/beta labels in user-facing navigation copy.
Reviewed changes
Copilot reviewed 45 out of 45 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| board/src/pages/settings/settings-page.tsx | Replaces duplicated Tailwind layout strings with shared settings layout tokens. |
| board/src/pages/settings/settings-layout.ts | Adds shared Settings layout class tokens for consistent tab/row styling. |
| board/src/pages/settings/providers-settings.tsx | Applies shared Settings card/content typography tokens. |
| board/src/pages/settings/i18n/index.ts | Removes “preview build” wording from About copy across locales. |
| board/src/pages/settings/about-licenses-section.tsx | Removes WIP badge and aligns About description copy with i18n update. |
| board/src/pages/servers/server-list-polling.ts | Extracts server-list refetch-interval logic into a reusable helper. |
| board/src/pages/servers/server-list-polling.test.ts | Adds unit coverage for transitional-status polling interval behavior. |
| board/src/pages/servers/server-list-page.tsx | Removes legacy diagnostics UI, adds responsive pagination + internal scroll shell, and notification-based error surfacing. |
| board/src/pages/servers/server-detail-page.tsx | Refactors overview layout to support pinned sections + fill-height logs. |
| board/src/pages/servers/i18n/index.ts | Removes legacy debug/inspect translation strings no longer used by the UI. |
| board/src/pages/secrets/secrets-page.tsx | Switches toolbar filter select to shared PageToolbarSelect. |
| board/src/pages/profile/profile-preset-page.tsx | Tightens mutation typing for preset updates (removes any). |
| board/src/pages/profile/profile-page.tsx | Adds responsive pagination + internal scroll shell and normalizes toolbar typing/filters. |
| board/src/pages/profile/profile-detail-page.tsx | Aligns overview layout with pinned sections + fill-height logs panel behavior. |
| board/src/pages/profile/components/profile-suit-grid-card.tsx | Adjusts badge positioning via new EntityCard badge placement option. |
| board/src/pages/market/types.ts | Extends market pagination shape to include pageSizeOptions. |
| board/src/pages/market/market-page.tsx | Moves pagination into a shared catalog footer style and uses dynamic page-size options. |
| board/src/pages/market/market-list-pagination-storage.ts | Reworks market page-size storage/parsing for responsive grid column counts. |
| board/src/pages/market/market-list-pagination-storage.test.ts | Adds coverage for responsive market page-size snapping/selection parsing. |
| board/src/pages/market/hooks/use-market-data.ts | Adds responsive page-size handling tied to grid column count and URL params. |
| board/src/pages/clients/i18n/index.test.ts | Tightens literal typing in client form schema test values. |
| board/src/pages/clients/clients-page.tsx | Adds responsive pagination + internal scroll shell; aligns toolbar filtering to PageToolbarSelect. |
| board/src/pages/clients/client-detail-page.tsx | Invalidates server catalog after imports and aligns overview/log layout with fill-height logs. |
| board/src/lib/server-query-cache.ts | Adds a small helper to invalidate the server list query after imports. |
| board/src/lib/server-query-cache.test.ts | Adds unit coverage for server catalog invalidation behavior. |
| board/src/lib/hooks/use-responsive-catalog-pagination.ts | Introduces shared responsive pagination logic + URL page param handling. |
| board/src/lib/hooks/use-responsive-catalog-pagination.test.ts | Adds unit tests for core pagination sizing/clamping/slicing utilities. |
| board/src/lib/catalog-layout.ts | Adds shared layout tokens for catalog scroll shells and section spacing. |
| board/src/components/ui/page-toolbar.tsx | Adds isDataReady gating and switches sort-field selection to PageToolbarSelect. |
| board/src/components/ui/page-toolbar-select.tsx | Adds a shared select component with width mirroring for toolbar controls. |
| board/src/components/ui/page-toolbar-select.test.ts | Adds unit coverage for select label mirroring helper. |
| board/src/components/servers/server-catalog-entry.tsx | Removes legacy inspect/debug action button from server list entries. |
| board/src/components/servers/server-catalog-entry.test.tsx | Ensures legacy debug props no longer render inspect action, switch remains. |
| board/src/components/pagination.tsx | Adds sticky catalog footer class, compact page indicator, and focus-visible styling improvements. |
| board/src/components/pagination.test.tsx | Adds coverage for compact current/total indicator rendering behavior. |
| board/src/components/list-grid-container.tsx | Allows explicit view mode override (URL-driven) instead of only stored default. |
| board/src/components/list-grid-container.test.tsx | Verifies explicit view mode overrides store default layout. |
| board/src/components/layout/sidebar.tsx | Removes production-facing “Beta” label from the brand header. |
| board/src/components/layout/layout.tsx | Refines outlet/viewport spacing and footer spacing semantics. |
| board/src/components/entity-card.tsx | Adds cn usage and supports “corner” badge positioning without shrinking title row. |
| board/src/components/detail-tab-content-class.ts | Adds shared overview stack/pinned section layout classes for detail pages. |
| board/src/components/audit-logs-panel.tsx | Adds fillHeight mode to allow logs panel to grow and scroll internally. |
| board/package.json | Adds test script (bun test src) for board package. |
| board/e2e/server-list-error.spec.ts | Adds Playwright coverage ensuring server list errors use notification center only. |
| board/e2e/catalog-pagination.spec.ts | Adds Playwright coverage for responsive pagination behaviors across catalogs. |
Suppressed comments (1)
board/src/pages/servers/server-list-page.tsx:769
- The catalog list uses
loading={isLoading}but pagination usesisLoading || !isCatalogDataReady. While data is present but beforeonSortedDataChangefires, this can briefly render the empty state ("No servers found") even though results exist. Gate list rendering/empty state onisCatalogDataReadyto keep the UI consistent.
- Tie catalog readiness to the current toolbar data source.\n- Constrain long overview lists without changing short-list layout.\n- Remove legacy server diagnostics and cover review regressions.
Deploying mcpmate-site with
|
| Latest commit: |
3d6c6bf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f67ae0e9.mcp-umate.pages.dev |
| Branch Preview URL: | https://ref-board-ui-ux-refinement.mcp-umate.pages.dev |
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.
Summary
InspectorDrawerworkflowMotivation
The Board had accumulated overlapping debug UI, stale catalog state after mutations, and inconsistent pagination and layout behavior across operational pages. This refines those surfaces into one coherent UI contract without changing backend APIs or the formal Inspector product workflow.
User impact
Scope
InspectorDrawerbehaviorValidation
bun test src— 325 tests passedbun run e2e -- catalog-pagination.spec.ts server-list-error.spec.ts— 6 tests passedbun run build— passedbun run lint— 0 errors, 118 existing warningsgit diff --check origin/main...HEAD— passedProject tracking
This small Board UI refinement was explicitly handled without a GitHub Project item.