mirror of
https://github.com/SamyRai/tercul-frontend.git
synced 2025-12-27 02:31:34 +00:00
7859c113fd
Adds component analysis reports and implementation plan documents covering missing author and work components, plus core UI elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/d1468a00-d93a-40b6-8ef2-3b7ba89b0f76.jpg
347 lines
7.4 KiB
Markdown
347 lines
7.4 KiB
Markdown
# Component Implementation Plan for Tercul Platform
|
|
|
|
This document outlines a prioritized plan for implementing the missing components identified in the component analysis.
|
|
|
|
## Phase 1: Critical UI Components
|
|
|
|
### Rich Text Editor
|
|
**Priority: High**
|
|
**Target folder:** `components/ui/rich-text-editor.tsx`
|
|
|
|
This component is essential for blog post creation/editing and content management.
|
|
|
|
Features to implement:
|
|
- Basic formatting (bold, italic, underline)
|
|
- Headings (h1-h6)
|
|
- Lists (ordered, unordered)
|
|
- Links
|
|
- Image embedding
|
|
- Markdown support
|
|
- Preview mode
|
|
|
|
Implementation approach:
|
|
1. Evaluate existing libraries (TipTap, Slate, etc.)
|
|
2. Implement with shadcn UI styling
|
|
3. Create toolbar component
|
|
4. Add content parser/renderer
|
|
5. Implement preview functionality
|
|
|
|
### Stat Card
|
|
**Priority: High**
|
|
**Target folder:** `components/ui/stat-card.tsx`
|
|
|
|
Needed for dashboard statistics display.
|
|
|
|
Features to implement:
|
|
- Title and description
|
|
- Value display
|
|
- Icon support
|
|
- Trend indicator (up/down)
|
|
- Comparison to previous period
|
|
- Loading state
|
|
|
|
Implementation approach:
|
|
1. Extract from Dashboard.tsx
|
|
2. Create standardized component
|
|
3. Support theme variants
|
|
4. Add animation options
|
|
|
|
### Empty State
|
|
**Priority: High**
|
|
**Target folder:** `components/ui/empty-state.tsx`
|
|
|
|
Used throughout the application to show when data is missing.
|
|
|
|
Features to implement:
|
|
- Icon display
|
|
- Title and description
|
|
- Optional action button
|
|
- Customizable appearance
|
|
- Size variants
|
|
|
|
Implementation approach:
|
|
1. Extract patterns from existing pages
|
|
2. Create standardized component
|
|
3. Support different contexts (empty list, no search results, etc.)
|
|
|
|
### Tag Input
|
|
**Priority: High**
|
|
**Target folder:** `components/ui/tag-input.tsx`
|
|
|
|
Used for blog post tags, work metadata, and filtering.
|
|
|
|
Features to implement:
|
|
- Add tags by typing
|
|
- Tag selection from existing options
|
|
- Tag removal
|
|
- Validation
|
|
- Limit maximum tags
|
|
|
|
Implementation approach:
|
|
1. Extract from BlogCreate.tsx
|
|
2. Create reusable component
|
|
3. Add autocomplete functionality
|
|
4. Support controlled and uncontrolled modes
|
|
|
|
## Phase 2: Dashboard Components
|
|
|
|
### Data Table with Actions
|
|
**Priority: High**
|
|
**Target folder:** `components/dashboard/data-table.tsx`
|
|
|
|
Core component for all dashboard management pages.
|
|
|
|
Features to implement:
|
|
- Sortable columns
|
|
- Filtering
|
|
- Pagination
|
|
- Row selection
|
|
- Action menu
|
|
- Bulk actions
|
|
- Loading states
|
|
- Empty states
|
|
|
|
Implementation approach:
|
|
1. Extend shadcn table components
|
|
2. Add consistent action patterns
|
|
3. Implement with shadcn styling
|
|
4. Create reusable filters
|
|
|
|
### Dashboard Header
|
|
**Priority: Medium**
|
|
**Target folder:** `components/dashboard/dashboard-header.tsx`
|
|
|
|
Consistent header for all dashboard pages.
|
|
|
|
Features to implement:
|
|
- Title and description
|
|
- Action buttons
|
|
- Breadcrumbs
|
|
- Back navigation
|
|
- Quick filters
|
|
|
|
Implementation approach:
|
|
1. Extract patterns from existing dashboard pages
|
|
2. Create standardized component
|
|
3. Support different contexts and permissions
|
|
|
|
### Activity Feed
|
|
**Priority: Medium**
|
|
**Target folder:** `components/dashboard/activity-feed.tsx`
|
|
|
|
For showing recent activity in the dashboard.
|
|
|
|
Features to implement:
|
|
- Activity items with icons
|
|
- User attribution
|
|
- Timestamp
|
|
- Activity types
|
|
- Loading state
|
|
- Empty state
|
|
|
|
Implementation approach:
|
|
1. Design consistent item layout
|
|
2. Support different activity types
|
|
3. Implement virtual scrolling for performance
|
|
|
|
## Phase 3: User Experience Components
|
|
|
|
### Comment Thread
|
|
**Priority: Medium**
|
|
**Target folder:** `components/comment/comment-thread.tsx`
|
|
|
|
For discussions on works, blog posts, etc.
|
|
|
|
Features to implement:
|
|
- Nested comments
|
|
- User information
|
|
- Timestamps
|
|
- Voting/liking
|
|
- Reply functionality
|
|
- Moderation tools
|
|
- Loading states
|
|
|
|
Implementation approach:
|
|
1. Design threaded comments UI
|
|
2. Handle nested data structure
|
|
3. Add moderation capabilities based on user role
|
|
|
|
### User Profile Card
|
|
**Priority: Medium**
|
|
**Target folder:** `components/user/profile-card.tsx`
|
|
|
|
For displaying user information consistently.
|
|
|
|
Features to implement:
|
|
- Avatar
|
|
- User name and handle
|
|
- Role badge
|
|
- Stats summary
|
|
- Action buttons
|
|
- Size variants
|
|
|
|
Implementation approach:
|
|
1. Extract patterns from Profile.tsx
|
|
2. Create standardized component
|
|
3. Support different contexts (dashboard, comments, etc.)
|
|
|
|
### Work Preview
|
|
**Priority: Medium**
|
|
**Target folder:** `components/work/work-preview.tsx`
|
|
|
|
For consistent display of works in lists and grids.
|
|
|
|
Features to implement:
|
|
- Title and author
|
|
- Publication info
|
|
- Tags
|
|
- Preview snippet
|
|
- Action menu
|
|
- Size variants
|
|
|
|
Implementation approach:
|
|
1. Standardize from WorkCard component
|
|
2. Add variants for different contexts
|
|
3. Support loading and error states
|
|
|
|
## Phase 4: Editorial Components
|
|
|
|
### Publication Scheduler
|
|
**Priority: Medium**
|
|
**Target folder:** `components/blog/publication-scheduler.tsx`
|
|
|
|
For scheduling content publication.
|
|
|
|
Features to implement:
|
|
- Date and time selection
|
|
- Time zone handling
|
|
- Preview of scheduled time
|
|
- Status indicator
|
|
|
|
Implementation approach:
|
|
1. Create date/time picker with validation
|
|
2. Add status visualization
|
|
3. Handle scheduling logic
|
|
|
|
### Work Editor
|
|
**Priority: High**
|
|
**Target folder:** `components/work/work-editor.tsx`
|
|
|
|
For creating and editing literary works.
|
|
|
|
Features to implement:
|
|
- Line-numbered text editing
|
|
- Syntax highlighting for poetry
|
|
- Metadata editor
|
|
- Translation alignment
|
|
- Version comparison
|
|
|
|
Implementation approach:
|
|
1. Create specialized text editor
|
|
2. Add line numbering and navigation
|
|
3. Implement metadata form
|
|
4. Support translations
|
|
|
|
### Author Editor
|
|
**Priority: Medium**
|
|
**Target folder:** `components/author/author-editor.tsx`
|
|
|
|
For creating and editing author profiles.
|
|
|
|
Features to implement:
|
|
- Author details form
|
|
- Timeline event management
|
|
- Works association
|
|
- Image upload
|
|
|
|
Implementation approach:
|
|
1. Create form component
|
|
2. Add timeline event editor
|
|
3. Implement work selection
|
|
4. Add image upload and cropping
|
|
|
|
## Phase 5: Advanced UI Components
|
|
|
|
### Timeline
|
|
**Priority: Low**
|
|
**Target folder:** `components/ui/timeline.tsx`
|
|
|
|
For displaying chronological events.
|
|
|
|
Features to implement:
|
|
- Vertical/horizontal layout
|
|
- Event nodes
|
|
- Connectors
|
|
- Date display
|
|
- Interactive events
|
|
|
|
Implementation approach:
|
|
1. Create base timeline component
|
|
2. Add event rendering
|
|
3. Support interactive features
|
|
|
|
### File Uploader
|
|
**Priority: Medium**
|
|
**Target folder:** `components/ui/file-uploader.tsx`
|
|
|
|
For uploading images and documents.
|
|
|
|
Features to implement:
|
|
- Drag and drop
|
|
- File selection
|
|
- Progress indicator
|
|
- Preview
|
|
- Validation
|
|
- Error handling
|
|
|
|
Implementation approach:
|
|
1. Create upload component
|
|
2. Add drag-drop functionality
|
|
3. Implement preview rendering
|
|
4. Add validation and error handling
|
|
|
|
### Comparison Slider
|
|
**Priority: Low**
|
|
**Target folder:** `components/ui/comparison-slider.tsx`
|
|
|
|
For comparing translations or versions.
|
|
|
|
Features to implement:
|
|
- Side-by-side view
|
|
- Draggable divider
|
|
- Synchronized scrolling
|
|
- Highlighting differences
|
|
|
|
Implementation approach:
|
|
1. Create slider component
|
|
2. Implement dragging behavior
|
|
3. Add content synchronization
|
|
|
|
## Implementation Timeline
|
|
|
|
### Week 1: Critical UI Components
|
|
- Rich Text Editor
|
|
- Stat Card
|
|
- Empty State
|
|
- Tag Input
|
|
|
|
### Week 2: Dashboard Components
|
|
- Data Table with Actions
|
|
- Dashboard Header
|
|
- Work Preview standardization
|
|
|
|
### Week 3: User Experience Components
|
|
- Comment Thread
|
|
- User Profile Card
|
|
- Publication Scheduler
|
|
|
|
### Week 4: Editorial Components
|
|
- Work Editor
|
|
- Author Editor
|
|
- File Uploader
|
|
|
|
### Week 5: Advanced UI Components
|
|
- Timeline
|
|
- Comparison Slider
|
|
- Remaining UI improvements
|