sojorn/sojorn_app/lib/widgets/composer/composer_themes.dart
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

114 lines
3.1 KiB
Dart

import 'package:flutter/material.dart';
import '../../theme/app_theme.dart';
/// Simple text styling options (Twitter/Bluesky style)
enum TextStyleOption {
normal,
bold,
italic,
}
/// Text style controller for the composer
class TextStyleController extends ChangeNotifier {
final Set<TextStyleOption> _activeStyles = {};
Set<TextStyleOption> get activeStyles => _activeStyles;
void toggleStyle(TextStyleOption style) {
if (_activeStyles.contains(style)) {
_activeStyles.remove(style);
} else {
_activeStyles.add(style);
}
notifyListeners();
}
void clearStyles() {
_activeStyles.clear();
notifyListeners();
}
TextStyle applyStyles(TextStyle base) {
TextStyle result = base;
if (_activeStyles.contains(TextStyleOption.bold)) {
result = result.copyWith(fontWeight: FontWeight.bold);
}
if (_activeStyles.contains(TextStyleOption.italic)) {
result = result.copyWith(fontStyle: FontStyle.italic);
}
return result;
}
}
/// Simple formatting toolbar (Twitter style - minimal)
class FormattingToolbar extends StatelessWidget {
final TextStyleController styleController;
final VoidCallback? onAddImage;
const FormattingToolbar({
super.key,
required this.styleController,
this.onAddImage,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: AppTheme.spacingSm, vertical: AppTheme.spacingXs),
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: AppTheme.egyptianBlue.withValues(alpha: 0.2)),
),
),
child: Row(
children: [
_buildStyleButton(
icon: Icons.format_bold,
label: 'Bold',
isActive: styleController.activeStyles.contains(TextStyleOption.bold),
onTap: () => styleController.toggleStyle(TextStyleOption.bold),
),
const SizedBox(width: AppTheme.spacingSm),
_buildStyleButton(
icon: Icons.format_italic,
label: 'Italic',
isActive: styleController.activeStyles.contains(TextStyleOption.italic),
onTap: () => styleController.toggleStyle(TextStyleOption.italic),
),
const SizedBox(width: AppTheme.spacingSm),
if (onAddImage != null)
IconButton(
onPressed: onAddImage,
icon: const Icon(Icons.image_outlined),
color: AppTheme.egyptianBlue,
tooltip: 'Add image',
),
],
),
);
}
Widget _buildStyleButton({
required IconData icon,
required String label,
required bool isActive,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: isActive ? AppTheme.queenPink.withValues(alpha: 0.3) : Colors.transparent,
borderRadius: BorderRadius.circular(4),
),
child: Icon(
icon,
size: 20,
color: isActive ? AppTheme.royalPurple : AppTheme.egyptianBlue,
),
),
);
}
}