 Acbox Liu
|
bca13a13fa
|
feat(web): introduce a brand new web ui (#281)
* feat(web): introduce a brand new web ui
* refactor(ui): align chat sidebar and UI components with Figma design
- Restyle chat page sidebar: header with icon/title, search input,
section labels, and "new session" footer button
- Simplify bot-sidebar and session-sidebar to card-based layout
matching Figma session card design (58px height, 26px avatar, status dots)
- Update master-detail-sidebar-layout with bg-sidebar and 53px header
- Unify border-radius across UI components to rounded-lg (8px):
Card, Toggle, Alert, Popover, Item; Dialog uses rounded-xl (12px)
* refactor(ui): move shared theme and design tokens from web to ui package
CSS variables, @theme inline mappings, @custom-variant, and base layer
styles now live in @memohai/ui/style.css. The web app imports them via
@import "@memohai/ui/style.css", keeping only the Tailwind entry point
and web-specific imports (markstream-vue, @source).
* refactor(ui): apply flat design system from Figma spec
Overhaul @memohai/ui component styles to match the new "high-contrast,
flat" design language defined in the Figma design spec (DESIGN.md).
Theme:
- --primary-foreground: pure white -> #fafafa
- --ring: purple -> foreground color (focus rings no longer use brand purple)
Atoms (zero shadow, monochrome):
- Button: default bg-primary -> bg-foreground; add explicit "primary" variant for Send CTA
- Badge: rounded-full -> rounded-sm; default bg-primary -> bg-foreground; add warning/outline/size variants
- Alert: rounded-lg -> rounded-[10px]; remove shadow-sm; destructive drops bg-red-50
- Card: add shadow-lg, rounded-lg -> rounded-xl, py-6 -> p-6
- Input/Textarea: remove shadow, text-sm -> text-[16px], focus ring non-purple
- Checkbox: checked bg-primary -> bg-foreground
- Switch: checked bg-primary -> bg-foreground
- RadioGroup: indicator fill-primary -> fill-foreground
- Slider: range/thumb border-primary -> border-foreground
Floating panels (shadow-md):
- DropdownMenu/Combobox/Select/ContextMenu Content: shadow-lg -> shadow-md
- Sheet: shadow-2xl -> shadow-lg
- MenuItem destructive focus: bg-red-50 -> bg-accent
Other:
- Pagination active: bg-foreground text-background (black, not purple)
- Item variants: bg-transparent -> bg-background/bg-accent
- Tabs active: shadow-sm -> border-border
- Toggle: remove shadow-xs, unify hover to accent
- SelectTrigger/NativeSelect: remove shadow, unify focus ring
Docs:
- Add packages/ui/DESIGN.md with full design system spec
- Simplify apps/web/AGENTS.md, remove duplicated design info, reference DESIGN.md
* refactor(chat-ui): restructure chat page components and styles (#288)
* refactor(chat-ui): restructure chat page components and styles
* feat(chat): add collapsible sidebar for both sides
* feat(ui): add PinInput and BadgeCount components, align styles with Figma spec
New components:
- PinInput (OTP input): PinInput, PinInputGroup, PinInputSlot, PinInputSeparator
based on reka-ui PinInput primitives with flat border-stitching design
- BadgeCount: circular numeric counter with default/destructive/secondary variants
Style updates to match Figma design:
- Sonner: border-radius from 1rem to var(--radius-lg) (10px)
- Table: add border border-border rounded-sm to container
- TagsInput: remove shadow-xs, rounded-md -> rounded-lg, ring-[3px] -> ring-2
Updated DESIGN.md with all new component specifications.
* chore: move up css to ui package
* refactor: change npm package from @memoh to @memohai
* Feat/chat layout (#295)
* refactor(chat-ui): restructure chat page components and styles
* feat(chat): add collapsible sidebar for both sides
* fix: update chat page icon
* style: refine UI components appearance
* style: refine UI components appearance
* chore(ci): update lock file
* refactor: new layout
* chore: adjust style
* fix: tauri ui size
* chore: remove bot session metadata
* refactor: text size and muted color
* fix: indirect height of bot-details pages
* feat: add 5 icons
* refactor: polish chat flow and settings navigation labels
Persist chat selection across pages, simplify provider/settings sidebars, and refine chat/session UX so navigation and composer behavior feel consistent without extra session/provider jumps.
* docs(web): refresh AGENTS frontend architecture guide
Expand and align the web AGENTS documentation with the current route structure, component inventory, chat transport flow, and store responsibilities so implementation guidance matches the codebase.
---------
Co-authored-by: Quincy <69751197+dqygit@users.noreply.github.com>
|
2026-03-28 19:15:39 +08:00 |
|