Enhance ViewDesigner UX and document console running modes#446
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Make view type selection more prominent with larger buttons - Reorder UI: view type first, then view name - Use bolder styling and better visual hierarchy - Follow Airtable's design pattern where view type is a key decision at creation Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
- Add clear documentation for Development Mode vs Plugin Mode - Explain when to use each mode - Update README with running mode details - Include port information and use cases Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
- Update console port from 5175 to 5173 (Vite's default) - Ensure consistency throughout documentation Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR improves the ViewDesigner “create view” workflow by making view type selection the primary, prominent choice (Airtable-style), and updates console documentation to clarify the two supported run modes and correct the dev-server port.
Changes:
- Reorders ViewDesigner header UI to emphasize view type selection before naming, with updated button/input styling.
- Updates console README to document “Development Mode” vs “Plugin Mode” and fixes the dev URL port to 5173.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/plugin-designer/src/ViewDesigner.tsx | Makes view type selection more prominent and moves view naming below it with updated styling. |
| apps/console/README.md | Documents console running modes and corrects the dev server port in Quick Start. |
| <div className="flex flex-col gap-2"> | ||
| <label className="text-xs font-semibold text-foreground">View Type</label> | ||
| <div className="flex gap-2 flex-wrap"> | ||
| {VIEW_TYPE_OPTIONS.map(({ type, label, icon: Icon }) => ( | ||
| <button | ||
| key={type} | ||
| onClick={() => !readOnly && setViewType(type)} | ||
| className={cn( | ||
| 'flex items-center gap-1 px-2 py-1 text-xs rounded border transition-colors', | ||
| 'flex items-center gap-2 px-3 py-2 text-sm rounded-md border-2 transition-all font-medium', | ||
| viewType === type | ||
| ? 'border-primary bg-primary/10 text-primary' | ||
| : 'border-border hover:bg-accent', | ||
| ? 'border-primary bg-primary text-primary-foreground shadow-sm' | ||
| : 'border-border bg-background hover:border-primary/50 hover:bg-accent', | ||
| )} | ||
| data-testid={`view-type-${type}`} | ||
| > | ||
| <Icon className="h-3 w-3" /> | ||
| <Icon className="h-4 w-4" /> | ||
| {label} | ||
| </button> |
There was a problem hiding this comment.
The view type selector is implemented as a set of toggle buttons, but it currently has no ARIA state (e.g., aria-pressed/aria-checked) and remains focusable/clickable in readOnly mode (only guarded in onClick). Consider rendering this as a proper radio group (fieldset/legend or role="radiogroup" + role="radio") and expose selection state via aria-checked/aria-pressed; also set disabled={readOnly} (and adjust styles) so keyboard users don’t tab into non-interactive controls.
| <label className="text-xs font-semibold text-foreground">View Name</label> | ||
| <input | ||
| type="text" | ||
| value={viewLabel} | ||
| onChange={(e) => !readOnly && setViewLabel(e.target.value)} | ||
| placeholder="Enter view name..." | ||
| className="px-3 py-2 text-sm border-2 rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" | ||
| readOnly={readOnly} | ||
| data-testid="view-label-input" |
There was a problem hiding this comment.
The "View Name" label isn’t programmatically associated with the input. For accessibility, give the input an id and set the label’s htmlFor (or wrap the input with the label) so screen readers correctly announce the control name.
| **Command:** `pnpm start` | ||
|
|
||
| - Runs via `@objectstack/cli serve` with ObjectStack runtime | ||
| - Serves the console as a UI plugin from `dist/` directory |
There was a problem hiding this comment.
Plugin mode serves the console from the built dist/ directory, but the README doesn’t mention that pnpm build must be run before pnpm start (otherwise dist/ may be missing and the UI won’t load). Please add that prerequisite (or document an alternative like a watch/build step) in this section.
| - Serves the console as a UI plugin from `dist/` directory | |
| - Serves the console as a UI plugin from `dist/` directory | |
| - Requires a production build: run `pnpm build` before `pnpm start` so `dist/` exists |
| - Tests plugin integration and routing | ||
| - Simulates production deployment pattern | ||
| - Useful for testing the plugin architecture | ||
| - Opens at http://localhost:3000 (default CLI port) |
There was a problem hiding this comment.
The plugin-mode port is coming from this repo’s apps/console/objectstack.config.ts (dev.port = 3000), not necessarily an inherent "default CLI port". Suggest wording like "Opens at http://localhost:3000 (configured in objectstack.config.ts)" to avoid confusion if the port is changed.
| - Opens at http://localhost:3000 (default CLI port) | |
| - Opens at http://localhost:3000 (configured in apps/console/objectstack.config.ts) |
Improves view creation workflow following Airtable's design pattern where view type is the primary upfront decision. Clarifies console's dual-mode architecture.
Changes
ViewDesigner UI Enhancement
Reordered and emphasized view type selection:
px-3 py-2,border-2) and icon size (h-4 w-4)Before/After:
Console Documentation
Documented dual running modes:
pnpm dev): Vite HMR + MSW on port 5173 for fast iterationpnpm start): ObjectStack CLI integration on port 3000 for deployment testingFixed port number inconsistencies in README (5175 → 5173).
Technical Details
packages/plugin-designer/src/ViewDesigner.tsxapps/console/README.mdOriginal prompt
Start implementation
The user has attached the following file paths as relevant context:
- .github/copilot-instructions.md
- .github/copilot-instructions.md
[Chronological Review: The conversation began with the user requesting a UI improvement proposal for a list page, emphasizing a modern design style. The user then suggested that the list view type should be fixed at creation, referencing a clean design similar to Airtable. The user expressed readiness to start implementation, followed by inquiries about supporting plugin usage in development mode for the console. The user confirmed support for this feature and reiterated the desire to start implementation again.][Intent Mapping:
[Technical Inventory:
[Code Archaeology:
[Progress Assessment:
[Context Validation: All critical information for continuation is captured, including user requests for UI improvements, confirmation of plugin support, and readiness to start implementation.]
[Recent Commands Analysis:
1. Conversation Overview: - Primary Objectives: - "优化布局。编写ui改进方案。" - User requested a UI improvement proposal. - "列表视图的类型应该是创建的时候就选择好的，我觉得不需要切换。" - User suggested fixing the list view type. - "Start implementation" - User indicated readiness to begin implementation. - "目前是否支持 使用 插件的方式..." - User inquired about plugin support for console operation. - Session Context: The conversation flowed from UI design requests to technical inquiries about implementation and plugin support. - User Intent Evolution: The user transitioned from requesting design improvements to confirming technical capabilities and expressing readiness to implement changes.- Technical Foundation:
- @objectstack/cli: CLI tool for development.
- object-ui: Framework being modified for UI improvements.
- Airtable-like design: User referenced this style for UI enhancements.
- Codebase Status:
- File Name: objectstack.config.ts
- Purpose: Configuration file for the object-ui project.
- Current State: Focused on UI layout and functionality improvements.
- Key Code Segments: Discussions around list view types and console operations.
- Dependencies: Related to the overall object-ui framework.
- Problem Resolution:
- Issues Encountered: Need for a cleaner UI layout and fixed list view type.
- Solutions Implemented: User confirmed plugin support for console operations.
- Debugging Context: No ongoing issues reported; focus is on implementation.
- Lessons Learned: Importance of aligning UI design with user expectations.
- Progress Tracking:
- Completed Tasks: Confirmation of plugin support.
- Partially Complete Work: UI improvements and fixed list view type are pending.
- Validated Outcomes: User readiness to start implementation.
- Active Work State:
- Current Focus: Implementing UI improvements and confirming plugin support.
- Recent Context: User confirmed plugin support and expressed readiness to start implementation.
- Working Code: Discussions around objectstack.config.ts and its configurations.
- Immediate Context: User was preparing to start implementation of UI changes.
- Recent Operations:
- Last Agent Commands: User executed commands to start implementation and confirm plugin support.
- Tool Results Summary: User confirmed that the plugin feature is supported for running the console in a specific directory.
- Pre-Summary State: The ...
Created from VS Code.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.