**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.
114 lines
3.1 KiB
Dart
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,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|