3c4680bdd7
**Major Features Added:** - **Inline Reply System**: Replace compose screen with inline reply boxes - **Thread Navigation**: Parent/child navigation with jump functionality - **Chain Flow UI**: Reply counts, expand/collapse animations, visual hierarchy - **Enhanced Animations**: Smooth transitions, hover effects, micro-interactions **Frontend Changes:** - **ThreadedCommentWidget**: Complete rewrite with animations and navigation - **ThreadNode Model**: Added parent references and descendant counting - **ThreadedConversationScreen**: Integrated navigation handlers - **PostDetailScreen**: Replaced with threaded conversation view - **ComposeScreen**: Added reply indicators and context - **PostActions**: Fixed visibility checks for chain buttons **Backend Changes:** - **API Route**: Added /posts/:id/thread endpoint - **Post Repository**: Include allow_chain and visibility fields in feed - **Thread Handler**: Support for fetching post chains **UI/UX Improvements:** - **Reply Context**: Clear indication when replying to specific posts - **Character Counting**: 500 character limit with live counter - **Visual Hierarchy**: Depth-based indentation and styling - **Smooth Animations**: SizeTransition, FadeTransition, hover states - **Chain Navigation**: Parent/child buttons with visual feedback **Technical Enhancements:** - **Animation Controllers**: Proper lifecycle management - **State Management**: Clean separation of concerns - **Navigation Callbacks**: Reusable navigation system - **Error Handling**: Graceful fallbacks and user feedback This creates a Reddit-style threaded conversation experience with smooth animations, inline replies, and intuitive navigation between posts in a chain.
102 lines
2.9 KiB
Markdown
102 lines
2.9 KiB
Markdown
# Sojorn Theme System
|
|
|
|
## Overview
|
|
The Sojorn app now supports two themes that users can switch between:
|
|
|
|
### 1. **Basic Theme** (Original)
|
|
- Calm and elegant design
|
|
- Lighter feel with subtle pink tints
|
|
- Slightly larger font sizes
|
|
- Perfect for reading and reflection
|
|
|
|
### 2. **Pop Theme** (New - "Awakening")
|
|
- High contrast and energetic
|
|
- Vibrant and defined structure
|
|
- Sharp dividers and clean backgrounds
|
|
- Editorial typography with professional feel
|
|
|
|
## How to Switch Themes
|
|
|
|
Users can switch themes by:
|
|
1. Going to their Profile
|
|
2. Tapping Settings (gear icon)
|
|
3. Scrolling to the "Appearance" section
|
|
4. Selecting either "Basic" or "Pop" theme
|
|
|
|
The selected theme is automatically saved and persists across app sessions.
|
|
|
|
## Technical Implementation
|
|
|
|
### Files Created/Modified:
|
|
|
|
1. **lib/providers/theme_provider.dart** (NEW)
|
|
- State management for theme selection
|
|
- Persists theme preference using SharedPreferences
|
|
|
|
2. **lib/theme/app_theme.dart** (UPDATED)
|
|
- Refactored to support multiple themes
|
|
- Dynamic color getters based on selected theme
|
|
- Maintains backward compatibility
|
|
|
|
3. **lib/main.dart** (UPDATED)
|
|
- Integrated theme provider
|
|
- Watches theme changes and rebuilds UI
|
|
|
|
4. **lib/screens/profile/profile_settings_screen.dart** (UPDATED)
|
|
- Added "Appearance" section with theme switcher
|
|
- Visual radio button selection for themes
|
|
|
|
5. **lib/models/notification.dart** (NEW)
|
|
- Notification model for app notifications
|
|
- Supports appreciate, chain, and follow notifications
|
|
|
|
6. **lib/screens/notifications/notifications_screen.dart** (NEW)
|
|
- Full notifications screen
|
|
- Shows appreciates, chains, and follows
|
|
- Empty state when no notifications
|
|
|
|
7. **lib/screens/home/home_shell.dart** (UPDATED)
|
|
- Instagram-style header with centered "Sojorn" title
|
|
- New post button on the left
|
|
- Notifications button on the right
|
|
- Professional and clean layout
|
|
|
|
## Theme Differences
|
|
|
|
### Basic Theme:
|
|
- Background: Very pale lavender/pink (#F9F2F7)
|
|
- Text: 19px body, softer navy
|
|
- Spacing: More generous
|
|
- Feel: Calm, elegant, reflective
|
|
|
|
### Pop Theme:
|
|
- Background: Clean pale lavender (#F9F6F9)
|
|
- Text: 18px body, sharper navy (#0D1050)
|
|
- Spacing: Tighter, more compact
|
|
- Dividers: 2px thick, more defined
|
|
- Feel: Energetic, vibrant, editorial
|
|
|
|
## Features Added
|
|
|
|
### Instagram-Style Header:
|
|
- Centered "Sojorn" branding in elegant serif font
|
|
- Left: New post button (⊞)
|
|
- Right: Notifications button (🔔)
|
|
- Clean white background with bottom border
|
|
|
|
### Notifications System:
|
|
- Three types: Appreciates, Chains, Follows
|
|
- Visual icons for each type
|
|
- Unread indicator (purple dot)
|
|
- Time stamps with relative formatting
|
|
- Empty state with helpful message
|
|
|
|
## Future Enhancements
|
|
|
|
Potential additions:
|
|
- Notification badge count on header icon
|
|
- Real-time notification updates
|
|
- Push notifications
|
|
- More theme options (Dark mode, Custom colors)
|
|
- Per-feed theme customization
|