mirror of https://github.com/usememos/memos.git
4e37fcfa22
This refactor introduces a maintainable, unified component architecture for
memo metadata (Location, Attachments, Relations) that ensures visual and
functional consistency between editor and view modes.
## Key Changes
### New Shared Component Library (web/src/components/memo-metadata/)
- **MetadataBadge**: Reusable badge component for compact metadata display
- **MetadataCard**: Reusable card component for structured metadata
- **LocationDisplay**: Unified location component with mode support
- **AttachmentList**: Unified attachment list with thumbnail support
- **RelationList**: Unified relation list with bidirectional tabs
- **AttachmentCard**: Shared attachment rendering logic
- **RelationCard**: Shared relation item rendering logic
### Benefits
1. **Single Source of Truth**: One component handles both edit/view modes
2. **Visual Consistency**: Same badge/card styles across all contexts
3. **Better Maintainability**: Shared logic reduces duplication (9 files vs 6)
4. **Enhanced Features**:
- Thumbnails for images in editor mode
- Consistent badge sizing (h-7) across all metadata types
- Unified spacing and interaction patterns
### Component Updates
- **MemoEditor**: Now uses LocationDisplay, AttachmentList, RelationList
- **MemoView**: Now uses the same unified components with mode="view"
- Removed old separate implementations:
- MemoEditor/{LocationView, AttachmentListView, RelationListView}
- {MemoLocationView, MemoAttachmentListView, MemoRelationListView}
### Technical Details
- All components use `DisplayMode` type ("edit" | "view") for behavior
- Editor mode: Shows badges with remove buttons, drag-sort for attachments
- View mode: Shows rich previews, popovers, galleries, navigation links
- TypeScript strict mode compatible, passes all lint checks
- Production build tested and verified
This architecture follows modern React patterns and makes it easy to add
new metadata types or modify existing ones without duplicating code.
|
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .gitignore | ||
| .prettierrc.js | ||
| MARKDOWN_STYLE_GUIDE.md | ||
| README.md | ||
| components.json | ||
| eslint.config.mjs | ||
| index.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| tsconfig.json | ||
| vite.config.mts | ||