patrick/sojorn
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity
sojorn/sojorn_app/THEME_SYSTEM.md
Patrick Britton 3c4680bdd7 Initial commit: Complete threaded conversation system with inline replies 
**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.
2026-01-30 07:40:19 -06:00

2.9 KiB
Raw Blame History

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