tercul-frontend/COMPONENT-IMPLEMENTATION-PLAN.md

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