commit 6060e8f811dffd4f812cd38390190fb5840d34b2 · bretton.dev/coves-mobile

+325

lib/widgets/icons/animated_heart_icon.dart

···

       1
       1
       +
       import 'dart:math' as math;

     

       2
       2
       +
       

     

       3
       3
       +
       import 'package:flutter/material.dart';

     

       4
       4
       +
       

     

       5
       5
       +
       /// Animated heart icon with outline and filled states

     

       6
       6
       +
       ///

     

       7
       7
       +
       /// Features a dramatic animation sequence:

     

       8
       8
       +
       /// 1. Heart shrinks to nothing

     

       9
       9
       +
       /// 2. Red hollow circle expands outwards

     

       10
       10
       +
       /// 3. Small heart grows from center

     

       11
       11
       +
       /// 4. Heart pops to 1.3x with 7 particle dots

     

       12
       12
       +
       /// 5. Heart settles back to 1x filled

     

       13
       13
       +
       class AnimatedHeartIcon extends StatefulWidget {

     

       14
       14
       +
         const AnimatedHeartIcon({

     

       15
       15
       +
           required this.isLiked,

     

       16
       16
       +
           this.size = 18,

     

       17
       17
       +
           this.color,

     

       18
       18
       +
           this.likedColor,

     

       19
       19
       +
           super.key,

     

       20
       20
       +
         });

     

       21
       21
       +
       

     

       22
       22
       +
         final bool isLiked;

     

       23
       23
       +
         final double size;

     

       24
       24
       +
         final Color? color;

     

       25
       25
       +
         final Color? likedColor;

     

       26
       26
       +
       

     

       27
       27
       +
         @override

     

       28
       28
       +
         State<AnimatedHeartIcon> createState() => _AnimatedHeartIconState();

     

       29
       29
       +
       }

     

       30
       30
       +
       

     

       31
       31
       +
       class _AnimatedHeartIconState extends State<AnimatedHeartIcon>

     

       32
       32
       +
           with SingleTickerProviderStateMixin {

     

       33
       33
       +
         late AnimationController _controller;

     

       34
       34
       +
       

     

       35
       35
       +
         // Heart scale animations

     

       36
       36
       +
         late Animation<double> _heartShrinkAnimation;

     

       37
       37
       +
         late Animation<double> _heartGrowAnimation;

     

       38
       38
       +
         late Animation<double> _heartPopAnimation;

     

       39
       39
       +
       

     

       40
       40
       +
         // Hollow circle animation

     

       41
       41
       +
         late Animation<double> _circleScaleAnimation;

     

       42
       42
       +
         late Animation<double> _circleOpacityAnimation;

     

       43
       43
       +
       

     

       44
       44
       +
         // Particle burst animations

     

       45
       45
       +
         late Animation<double> _particleScaleAnimation;

     

       46
       46
       +
         late Animation<double> _particleOpacityAnimation;

     

       47
       47
       +
       

     

       48
       48
       +
         bool _hasBeenToggled = false;

     

       49
       49
       +
         bool _previousIsLiked = false;

     

       50
       50
       +
       

     

       51
       51
       +
         @override

     

       52
       52
       +
         void initState() {

     

       53
       53
       +
           super.initState();

     

       54
       54
       +
           _previousIsLiked = widget.isLiked;

     

       55
       55
       +
       

     

       56
       56
       +
           _controller = AnimationController(

     

       57
       57
       +
             duration: const Duration(milliseconds: 800),

     

       58
       58
       +
             vsync: this,

     

       59
       59
       +
           );

     

       60
       60
       +
       

     

       61
       61
       +
           // Phase 1 (0-15%): Heart shrinks to nothing

     

       62
       62
       +
           _heartShrinkAnimation = Tween<double>(begin: 1, end: 0).animate(

     

       63
       63
       +
             CurvedAnimation(

     

       64
       64
       +
               parent: _controller,

     

       65
       65
       +
               curve: const Interval(0, 0.15, curve: Curves.easeIn),

     

       66
       66
       +
             ),

     

       67
       67
       +
           );

     

       68
       68
       +
       

     

       69
       69
       +
           // Phase 2 (15-40%): Hollow circle expands

     

       70
       70
       +
           _circleScaleAnimation = Tween<double>(begin: 0, end: 2).animate(

     

       71
       71
       +
             CurvedAnimation(

     

       72
       72
       +
               parent: _controller,

     

       73
       73
       +
               curve: const Interval(0.15, 0.4, curve: Curves.easeOut),

     

       74
       74
       +
             ),

     

       75
       75
       +
           );

     

       76
       76
       +
       

     

       77
       77
       +
           _circleOpacityAnimation = TweenSequence<double>([

     

       78
       78
       +
             TweenSequenceItem(tween: Tween(begin: 0, end: 0.8), weight: 50),

     

       79
       79
       +
             TweenSequenceItem(tween: Tween(begin: 0.8, end: 0), weight: 50),

     

       80
       80
       +
           ]).animate(

     

       81
       81
       +
             CurvedAnimation(parent: _controller, curve: const Interval(0.15, 0.4)),

     

       82
       82
       +
           );

     

       83
       83
       +
       

     

       84
       84
       +
           // Phase 3 (25-55%): Heart grows from small in center

     

       85
       85
       +
           _heartGrowAnimation = Tween<double>(begin: 0.2, end: 1.3).animate(

     

       86
       86
       +
             CurvedAnimation(

     

       87
       87
       +
               parent: _controller,

     

       88
       88
       +
               curve: const Interval(0.25, 0.55, curve: Curves.easeOut),

     

       89
       89
       +
             ),

     

       90
       90
       +
           );

     

       91
       91
       +
       

     

       92
       92
       +
           // Phase 4 (55-65%): Particle burst at peak

     

       93
       93
       +
           _particleScaleAnimation = Tween<double>(begin: 0, end: 1).animate(

     

       94
       94
       +
             CurvedAnimation(

     

       95
       95
       +
               parent: _controller,

     

       96
       96
       +
               curve: const Interval(0.55, 0.65, curve: Curves.easeOut),

     

       97
       97
       +
             ),

     

       98
       98
       +
           );

     

       99
       99
       +
       

     

       100
       100
       +
           _particleOpacityAnimation = TweenSequence<double>([

     

       101
       101
       +
             TweenSequenceItem(tween: Tween(begin: 0, end: 1), weight: 30),

     

       102
       102
       +
             TweenSequenceItem(tween: Tween(begin: 1, end: 0), weight: 70),

     

       103
       103
       +
           ]).animate(

     

       104
       104
       +
             CurvedAnimation(parent: _controller, curve: const Interval(0.55, 0.75)),

     

       105
       105
       +
           );

     

       106
       106
       +
       

     

       107
       107
       +
           // Phase 5 (65-100%): Heart settles to 1x

     

       108
       108
       +
           _heartPopAnimation = Tween<double>(begin: 1.3, end: 1).animate(

     

       109
       109
       +
             CurvedAnimation(

     

       110
       110
       +
               parent: _controller,

     

       111
       111
       +
               curve: const Interval(0.65, 1, curve: Curves.elasticOut),

     

       112
       112
       +
             ),

     

       113
       113
       +
           );

     

       114
       114
       +
         }

     

       115
       115
       +
       

     

       116
       116
       +
         @override

     

       117
       117
       +
         void didUpdateWidget(AnimatedHeartIcon oldWidget) {

     

       118
       118
       +
           super.didUpdateWidget(oldWidget);

     

       119
       119
       +
       

     

       120
       120
       +
           if (widget.isLiked != _previousIsLiked) {

     

       121
       121
       +
             _hasBeenToggled = true;

     

       122
       122
       +
             _previousIsLiked = widget.isLiked;

     

       123
       123
       +
       

     

       124
       124
       +
             if (widget.isLiked) {

     

       125
       125
       +
               _controller.forward(from: 0);

     

       126
       126
       +
             }

     

       127
       127
       +
           }

     

       128
       128
       +
         }

     

       129
       129
       +
       

     

       130
       130
       +
         @override

     

       131
       131
       +
         void dispose() {

     

       132
       132
       +
           _controller.dispose();

     

       133
       133
       +
           super.dispose();

     

       134
       134
       +
         }

     

       135
       135
       +
       

     

       136
       136
       +
         double _getHeartScale() {

     

       137
       137
       +
           if (!widget.isLiked || !_hasBeenToggled) return 1;

     

       138
       138
       +
       

     

       139
       139
       +
           final progress = _controller.value;

     

       140
       140
       +
           if (progress < 0.15) {

     

       141
       141
       +
             // Phase 1: Shrinking

     

       142
       142
       +
             return _heartShrinkAnimation.value;

     

       143
       143
       +
           } else if (progress < 0.55) {

     

       144
       144
       +
             // Phase 3: Growing from center

     

       145
       145
       +
             return _heartGrowAnimation.value;

     

       146
       146
       +
           } else {

     

       147
       147
       +
             // Phase 5: Settling back

     

       148
       148
       +
             return _heartPopAnimation.value;

     

       149
       149
       +
           }

     

       150
       150
       +
         }

     

       151
       151
       +
       

     

       152
       152
       +
         @override

     

       153
       153
       +
         Widget build(BuildContext context) {

     

       154
       154
       +
           final effectiveColor =

     

       155
       155
       +
               widget.color ?? Theme.of(context).iconTheme.color ?? Colors.grey;

     

       156
       156
       +
           final effectiveLikedColor = widget.likedColor ?? Colors.red;

     

       157
       157
       +
       

     

       158
       158
       +
           // Use 2.5x size for animation overflow space (for 1.3x scale + particles)

     

       159
       159
       +
           final containerSize = widget.size * 2.5;

     

       160
       160
       +
       

     

       161
       161
       +
           return SizedBox(

     

       162
       162
       +
             width: widget.size,

     

       163
       163
       +
             height: widget.size,

     

       164
       164
       +
             child: OverflowBox(

     

       165
       165
       +
               maxWidth: containerSize,

     

       166
       166
       +
               maxHeight: containerSize,

     

       167
       167
       +
               child: SizedBox(

     

       168
       168
       +
                 width: containerSize,

     

       169
       169
       +
                 height: containerSize,

     

       170
       170
       +
                 child: AnimatedBuilder(

     

       171
       171
       +
                   animation: _controller,

     

       172
       172
       +
                   builder: (context, child) {

     

       173
       173
       +
                     return Stack(

     

       174
       174
       +
                       clipBehavior: Clip.none,

     

       175
       175
       +
                       alignment: Alignment.center,

     

       176
       176
       +
                       children: [

     

       177
       177
       +
                         // Phase 2: Expanding hollow circle

     

       178
       178
       +
                         if (widget.isLiked &&

     

       179
       179
       +
                             _hasBeenToggled &&

     

       180
       180
       +
                             _controller.value >= 0.15 &&

     

       181
       181
       +
                             _controller.value <= 0.4) ...[

     

       182
       182
       +
                           Opacity(

     

       183
       183
       +
                             opacity: _circleOpacityAnimation.value,

     

       184
       184
       +
                             child: Transform.scale(

     

       185
       185
       +
                               scale: _circleScaleAnimation.value,

     

       186
       186
       +
                               child: Container(

     

       187
       187
       +
                                 width: widget.size,

     

       188
       188
       +
                                 height: widget.size,

     

       189
       189
       +
                                 decoration: BoxDecoration(

     

       190
       190
       +
                                   shape: BoxShape.circle,

     

       191
       191
       +
                                   border: Border.all(

     

       192
       192
       +
                                     color: effectiveLikedColor,

     

       193
       193
       +
                                     width: 2,

     

       194
       194
       +
                                   ),

     

       195
       195
       +
                                 ),

     

       196
       196
       +
                               ),

     

       197
       197
       +
                             ),

     

       198
       198
       +
                           ),

     

       199
       199
       +
                         ],

     

       200
       200
       +
       

     

       201
       201
       +
                         // Phase 4: Particle burst (7 dots)

     

       202
       202
       +
                         if (widget.isLiked &&

     

       203
       203
       +
                             _hasBeenToggled &&

     

       204
       204
       +
                             _controller.value >= 0.55 &&

     

       205
       205
       +
                             _controller.value <= 0.75)

     

       206
       206
       +
                           ..._buildParticleBurst(effectiveLikedColor),

     

       207
       207
       +
       

     

       208
       208
       +
                         // Heart icon (all phases)

     

       209
       209
       +
                         Transform.scale(

     

       210
       210
       +
                           scale: _getHeartScale(),

     

       211
       211
       +
                           child: CustomPaint(

     

       212
       212
       +
                             size: Size(widget.size, widget.size),

     

       213
       213
       +
                             painter: _HeartIconPainter(

     

       214
       214
       +
                               color:

     

       215
       215
       +
                                   widget.isLiked

     

       216
       216
       +
                                       ? effectiveLikedColor

     

       217
       217
       +
                                       : effectiveColor,

     

       218
       218
       +
                               filled: widget.isLiked,

     

       219
       219
       +
                             ),

     

       220
       220
       +
                           ),

     

       221
       221
       +
                         ),

     

       222
       222
       +
                       ],

     

       223
       223
       +
                     );

     

       224
       224
       +
                   },

     

       225
       225
       +
                 ),

     

       226
       226
       +
               ),

     

       227
       227
       +
             ),

     

       228
       228
       +
           );

     

       229
       229
       +
         }

     

       230
       230
       +
       

     

       231
       231
       +
         List<Widget> _buildParticleBurst(Color color) {

     

       232
       232
       +
           const particleCount = 7;

     

       233
       233
       +
           final particles = <Widget>[];

     

       234
       234
       +
           final containerSize = widget.size * 2.5;

     

       235
       235
       +
       

     

       236
       236
       +
           for (int i = 0; i < particleCount; i++) {

     

       237
       237
       +
             final angle = (2 * math.pi * i) / particleCount;

     

       238
       238
       +
             final distance = widget.size * 1 * _particleScaleAnimation.value;

     

       239
       239
       +
             final dx = math.cos(angle) * distance;

     

       240
       240
       +
             final dy = math.sin(angle) * distance;

     

       241
       241
       +
       

     

       242
       242
       +
             particles.add(

     

       243
       243
       +
               Positioned(

     

       244
       244
       +
                 left: containerSize / 2 + dx - 2,

     

       245
       245
       +
                 top: containerSize / 2 + dy - 2,

     

       246
       246
       +
                 child: Opacity(

     

       247
       247
       +
                   opacity: _particleOpacityAnimation.value,

     

       248
       248
       +
                   child: Container(

     

       249
       249
       +
                     width: 2,

     

       250
       250
       +
                     height: 2,

     

       251
       251
       +
                     decoration: BoxDecoration(color: color, shape: BoxShape.circle),

     

       252
       252
       +
                   ),

     

       253
       253
       +
                 ),

     

       254
       254
       +
               ),

     

       255
       255
       +
             );

     

       256
       256
       +
           }

     

       257
       257
       +
       

     

       258
       258
       +
           return particles;

     

       259
       259
       +
         }

     

       260
       260
       +
       }

     

       261
       261
       +
       

     

       262
       262
       +
       /// Custom painter for heart icon

     

       263
       263
       +
       ///

     

       264
       264
       +
       /// SVG path data from Bluesky's Heart2 icon component

     

       265
       265
       +
       class _HeartIconPainter extends CustomPainter {

     

       266
       266
       +
         _HeartIconPainter({required this.color, required this.filled});

     

       267
       267
       +
       

     

       268
       268
       +
         final Color color;

     

       269
       269
       +
         final bool filled;

     

       270
       270
       +
       

     

       271
       271
       +
         @override

     

       272
       272
       +
         void paint(Canvas canvas, Size size) {

     

       273
       273
       +
           final paint =

     

       274
       274
       +
               Paint()

     

       275
       275
       +
                 ..color = color

     

       276
       276
       +
                 ..style = PaintingStyle.fill;

     

       277
       277
       +
       

     

       278
       278
       +
           // Scale factor to fit 24x24 viewBox into widget size

     

       279
       279
       +
           final scale = size.width / 24;

     

       280
       280
       +
           canvas.scale(scale);

     

       281
       281
       +
       

     

       282
       282
       +
           final path = Path();

     

       283
       283
       +
       

     

       284
       284
       +
           if (filled) {

     

       285
       285
       +
             // Filled heart path from Bluesky

     

       286
       286
       +
             path.moveTo(12.489, 21.372);

     

       287
       287
       +
             path.cubicTo(21.017, 16.592, 23.115, 10.902, 21.511, 6.902);

     

       288
       288
       +
             path.cubicTo(20.732, 4.961, 19.097, 3.569, 17.169, 3.139);

     

       289
       289
       +
             path.cubicTo(15.472, 2.761, 13.617, 3.142, 12, 4.426);

     

       290
       290
       +
             path.cubicTo(10.383, 3.142, 8.528, 2.761, 6.83, 3.139);

     

       291
       291
       +
             path.cubicTo(4.903, 3.569, 3.268, 4.961, 2.49, 6.903);

     

       292
       292
       +
             path.cubicTo(0.885, 10.903, 2.983, 16.593, 11.511, 21.373);

     

       293
       293
       +
             path.cubicTo(11.826, 21.558, 12.174, 21.558, 12.489, 21.372);

     

       294
       294
       +
             path.close();

     

       295
       295
       +
           } else {

     

       296
       296
       +
             // Outline heart path from Bluesky

     

       297
       297
       +
             path.moveTo(16.734, 5.091);

     

       298
       298
       +
             path.cubicTo(15.496, 4.815, 14.026, 5.138, 12.712, 6.471);

     

       299
       299
       +
             path.cubicTo(12.318, 6.865, 11.682, 6.865, 11.288, 6.471);

     

       300
       300
       +
             path.cubicTo(9.974, 5.137, 8.504, 4.814, 7.266, 5.09);

     

       301
       301
       +
             path.cubicTo(6.003, 5.372, 4.887, 6.296, 4.346, 7.646);

     

       302
       302
       +
             path.cubicTo(3.33, 10.18, 4.252, 14.84, 12, 19.348);

     

       303
       303
       +
             path.cubicTo(19.747, 14.84, 20.67, 10.18, 19.654, 7.648);

     

       304
       304
       +
             path.cubicTo(19.113, 6.297, 17.997, 5.373, 16.734, 5.091);

     

       305
       305
       +
             path.close();

     

       306
       306
       +
       

     

       307
       307
       +
             path.moveTo(21.511, 6.903);

     

       308
       308
       +
             path.cubicTo(23.115, 10.903, 21.017, 16.593, 12.489, 21.373);

     

       309
       309
       +
             path.cubicTo(12.174, 21.558, 11.826, 21.558, 11.511, 21.373);

     

       310
       310
       +
             path.cubicTo(2.983, 16.592, 0.885, 10.902, 2.49, 6.902);

     

       311
       311
       +
             path.cubicTo(3.269, 4.96, 4.904, 3.568, 6.832, 3.138);

     

       312
       312
       +
             path.cubicTo(8.529, 2.76, 10.384, 3.141, 12.001, 4.424);

     

       313
       313
       +
             path.cubicTo(13.618, 3.141, 15.473, 2.76, 17.171, 3.138);

     

       314
       314
       +
             path.cubicTo(19.098, 3.568, 20.733, 4.96, 21.511, 6.903);

     

       315
       315
       +
             path.close();

     

       316
       316
       +
           }

     

       317
       317
       +
       

     

       318
       318
       +
           canvas.drawPath(path, paint);

     

       319
       319
       +
         }

     

       320
       320
       +
       

     

       321
       321
       +
         @override

     

       322
       322
       +
         bool shouldRepaint(_HeartIconPainter oldDelegate) {

     

       323
       323
       +
           return oldDelegate.color != color || oldDelegate.filled != filled;

     

       324
       324
       +
         }

     

       325
       325
       +
       }

+115

lib/widgets/icons/reply_icon.dart

···

       1
       1
       +
       import 'package:flutter/material.dart';

     

       2
       2
       +
       

     

       3
       3
       +
       /// Reply/comment icon widget

     

       4
       4
       +
       ///

     

       5
       5
       +
       /// Speech bubble icon from Bluesky's design system.

     

       6
       6
       +
       /// Supports both outline and filled states.

     

       7
       7
       +
       class ReplyIcon extends StatelessWidget {

     

       8
       8
       +
         const ReplyIcon({this.size = 18, this.color, this.filled = false, super.key});

     

       9
       9
       +
       

     

       10
       10
       +
         final double size;

     

       11
       11
       +
         final Color? color;

     

       12
       12
       +
         final bool filled;

     

       13
       13
       +
       

     

       14
       14
       +
         @override

     

       15
       15
       +
         Widget build(BuildContext context) {

     

       16
       16
       +
           final effectiveColor =

     

       17
       17
       +
               color ?? Theme.of(context).iconTheme.color ?? Colors.grey;

     

       18
       18
       +
       

     

       19
       19
       +
           return CustomPaint(

     

       20
       20
       +
             size: Size(size, size),

     

       21
       21
       +
             painter: _ReplyIconPainter(color: effectiveColor, filled: filled),

     

       22
       22
       +
           );

     

       23
       23
       +
         }

     

       24
       24
       +
       }

     

       25
       25
       +
       

     

       26
       26
       +
       /// Custom painter for reply/comment icon

     

       27
       27
       +
       ///

     

       28
       28
       +
       /// SVG path data from Bluesky's Reply icon component

     

       29
       29
       +
       class _ReplyIconPainter extends CustomPainter {

     

       30
       30
       +
         _ReplyIconPainter({required this.color, required this.filled});

     

       31
       31
       +
       

     

       32
       32
       +
         final Color color;

     

       33
       33
       +
         final bool filled;

     

       34
       34
       +
       

     

       35
       35
       +
         @override

     

       36
       36
       +
         void paint(Canvas canvas, Size size) {

     

       37
       37
       +
           final paint = Paint()

     

       38
       38
       +
             ..color = color

     

       39
       39
       +
             ..style = PaintingStyle.fill; // Always fill - paths are pre-stroked

     

       40
       40
       +
       

     

       41
       41
       +
           // Scale factor to fit 24x24 viewBox into widget size

     

       42
       42
       +
           final scale = size.width / 24.0;

     

       43
       43
       +
           canvas.scale(scale);

     

       44
       44
       +
       

     

       45
       45
       +
           final path = Path();

     

       46
       46
       +
       

     

       47
       47
       +
           if (filled) {

     

       48
       48
       +
             // Filled reply icon path from Bluesky

     

       49
       49
       +
             // M22.002 15a4 4 0 0 1-4 4h-4.648l-4.727 3.781A1.001 1.001 0 0 1 7.002 22

     

       50
       50
       +
             // v-3h-1a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v8Z

     

       51
       51
       +
             path.moveTo(22.002, 15);

     

       52
       52
       +
             path.cubicTo(22.002, 17.209, 20.211, 19, 18.002, 19);

     

       53
       53
       +
             path.lineTo(13.354, 19);

     

       54
       54
       +
             path.lineTo(8.627, 22.781);

     

       55
       55
       +
             path.cubicTo(8.243, 23.074, 7.683, 22.808, 7.627, 22.318);

     

       56
       56
       +
             path.lineTo(7.002, 22);

     

       57
       57
       +
             path.lineTo(7.002, 19);

     

       58
       58
       +
             path.lineTo(6.002, 19);

     

       59
       59
       +
             path.cubicTo(3.793, 19, 2.002, 17.209, 2.002, 15);

     

       60
       60
       +
             path.lineTo(2.002, 7);

     

       61
       61
       +
             path.cubicTo(2.002, 4.791, 3.793, 3, 6.002, 3);

     

       62
       62
       +
             path.lineTo(18.002, 3);

     

       63
       63
       +
             path.cubicTo(20.211, 3, 22.002, 4.791, 22.002, 7);

     

       64
       64
       +
             path.lineTo(22.002, 15);

     

       65
       65
       +
             path.close();

     

       66
       66
       +
           } else {

     

       67
       67
       +
             // Outline reply icon path from Bluesky

     

       68
       68
       +
             // M20.002 7a2 2 0 0 0-2-2h-12a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2a1 1 0 0 1 1 1

     

       69
       69
       +
             // v1.918l3.375-2.7a1 1 0 0 1 .625-.218h5a2 2 0 0 0 2-2V7Zm2 8a4 4 0 0 1-4 4

     

       70
       70
       +
             // h-4.648l-4.727 3.781A1.001 1.001 0 0 1 7.002 22v-3h-1a4 4 0 0 1-4-4V7

     

       71
       71
       +
             // a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v8Z

     

       72
       72
       +
       

     

       73
       73
       +
             // Inner shape

     

       74
       74
       +
             path.moveTo(20.002, 7);

     

       75
       75
       +
             path.cubicTo(20.002, 5.895, 19.107, 5, 18.002, 5);

     

       76
       76
       +
             path.lineTo(6.002, 5);

     

       77
       77
       +
             path.cubicTo(4.897, 5, 4.002, 5.895, 4.002, 7);

     

       78
       78
       +
             path.lineTo(4.002, 15);

     

       79
       79
       +
             path.cubicTo(4.002, 16.105, 4.897, 17, 6.002, 17);

     

       80
       80
       +
             path.lineTo(8.002, 17);

     

       81
       81
       +
             path.cubicTo(8.554, 17, 9.002, 17.448, 9.002, 18);

     

       82
       82
       +
             path.lineTo(9.002, 19.918);

     

       83
       83
       +
             path.lineTo(12.377, 17.218);

     

       84
       84
       +
             path.cubicTo(12.574, 17.073, 12.813, 17, 13.002, 17);

     

       85
       85
       +
             path.lineTo(18.002, 17);

     

       86
       86
       +
             path.cubicTo(19.107, 17, 20.002, 16.105, 20.002, 15);

     

       87
       87
       +
             path.lineTo(20.002, 7);

     

       88
       88
       +
             path.close();

     

       89
       89
       +
       

     

       90
       90
       +
             // Outer shape

     

       91
       91
       +
             path.moveTo(22.002, 15);

     

       92
       92
       +
             path.cubicTo(22.002, 17.209, 20.211, 19, 18.002, 19);

     

       93
       93
       +
             path.lineTo(13.354, 19);

     

       94
       94
       +
             path.lineTo(8.627, 22.781);

     

       95
       95
       +
             path.cubicTo(8.243, 23.074, 7.683, 22.808, 7.627, 22.318);

     

       96
       96
       +
             path.lineTo(7.002, 22);

     

       97
       97
       +
             path.lineTo(7.002, 19);

     

       98
       98
       +
             path.lineTo(6.002, 19);

     

       99
       99
       +
             path.cubicTo(3.793, 19, 2.002, 17.209, 2.002, 15);

     

       100
       100
       +
             path.lineTo(2.002, 7);

     

       101
       101
       +
             path.cubicTo(2.002, 4.791, 3.793, 3, 6.002, 3);

     

       102
       102
       +
             path.lineTo(18.002, 3);

     

       103
       103
       +
             path.cubicTo(20.211, 3, 22.002, 4.791, 22.002, 7);

     

       104
       104
       +
             path.lineTo(22.002, 15);

     

       105
       105
       +
             path.close();

     

       106
       106
       +
           }

     

       107
       107
       +
       

     

       108
       108
       +
           canvas.drawPath(path, paint);

     

       109
       109
       +
         }

     

       110
       110
       +
       

     

       111
       111
       +
         @override

     

       112
       112
       +
         bool shouldRepaint(_ReplyIconPainter oldDelegate) {

     

       113
       113
       +
           return oldDelegate.color != color || oldDelegate.filled != filled;

     

       114
       114
       +
         }

     

       115
       115
       +
       }

+94

lib/widgets/icons/share_icon.dart

···

       1
       1
       +
       import 'package:flutter/material.dart';

     

       2
       2
       +
       

     

       3
       3
       +
       /// Share icon widget (arrow out of box)

     

       4
       4
       +
       ///

     

       5
       5
       +
       /// Arrow-out-of-box icon from Bluesky's design system.

     

       6
       6
       +
       /// Uses the modified version with rounded corners for a friendlier look.

     

       7
       7
       +
       class ShareIcon extends StatelessWidget {

     

       8
       8
       +
         const ShareIcon({this.size = 18, this.color, super.key});

     

       9
       9
       +
       

     

       10
       10
       +
         final double size;

     

       11
       11
       +
         final Color? color;

     

       12
       12
       +
       

     

       13
       13
       +
         @override

     

       14
       14
       +
         Widget build(BuildContext context) {

     

       15
       15
       +
           final effectiveColor =

     

       16
       16
       +
               color ?? Theme.of(context).iconTheme.color ?? Colors.grey;

     

       17
       17
       +
       

     

       18
       18
       +
           return CustomPaint(

     

       19
       19
       +
             size: Size(size, size),

     

       20
       20
       +
             painter: _ShareIconPainter(color: effectiveColor),

     

       21
       21
       +
           );

     

       22
       22
       +
         }

     

       23
       23
       +
       }

     

       24
       24
       +
       

     

       25
       25
       +
       /// Custom painter for share icon

     

       26
       26
       +
       ///

     

       27
       27
       +
       /// SVG path data from Bluesky's ArrowOutOfBoxModified icon component

     

       28
       28
       +
       class _ShareIconPainter extends CustomPainter {

     

       29
       29
       +
         _ShareIconPainter({required this.color});

     

       30
       30
       +
       

     

       31
       31
       +
         final Color color;

     

       32
       32
       +
       

     

       33
       33
       +
         @override

     

       34
       34
       +
         void paint(Canvas canvas, Size size) {

     

       35
       35
       +
           final paint = Paint()

     

       36
       36
       +
             ..color = color

     

       37
       37
       +
             ..style = PaintingStyle.fill; // Always fill - paths are pre-stroked

     

       38
       38
       +
       

     

       39
       39
       +
           // Scale factor to fit 24x24 viewBox into widget size

     

       40
       40
       +
           final scale = size.width / 24.0;

     

       41
       41
       +
           canvas.scale(scale);

     

       42
       42
       +
       

     

       43
       43
       +
           final path = Path();

     

       44
       44
       +
       

     

       45
       45
       +
           // ArrowOutOfBoxModified_Stroke2_Corner2_Rounded path from Bluesky

     

       46
       46
       +
           // M20 13.75a1 1 0 0 1 1 1V18a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3.25a1 1 0 1 1 2 0V18

     

       47
       47
       +
           // a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.25a1 1 0 0 1 1-1ZM12 3a1 1 0 0 1 .707.293

     

       48
       48
       +
           // l4.5 4.5a1 1 0 1 1-1.414 1.414L13 6.414v8.836a1 1 0 1 1-2 0V6.414

     

       49
       49
       +
           // L8.207 9.207a1 1 0 1 1-1.414-1.414l4.5-4.5A1 1 0 0 1 12 3Z

     

       50
       50
       +
       

     

       51
       51
       +
           // Box bottom part

     

       52
       52
       +
           path.moveTo(20, 13.75);

     

       53
       53
       +
           path.cubicTo(20.552, 13.75, 21, 14.198, 21, 14.75);

     

       54
       54
       +
           path.lineTo(21, 18);

     

       55
       55
       +
           path.cubicTo(21, 19.657, 19.657, 21, 18, 21);

     

       56
       56
       +
           path.lineTo(6, 21);

     

       57
       57
       +
           path.cubicTo(4.343, 21, 3, 19.657, 3, 18);

     

       58
       58
       +
           path.lineTo(3, 14.75);

     

       59
       59
       +
           path.cubicTo(3, 14.198, 3.448, 13.75, 4, 13.75);

     

       60
       60
       +
           path.cubicTo(4.552, 13.75, 5, 14.198, 5, 14.75);

     

       61
       61
       +
           path.lineTo(5, 18);

     

       62
       62
       +
           path.cubicTo(5, 18.552, 5.448, 19, 6, 19);

     

       63
       63
       +
           path.lineTo(18, 19);

     

       64
       64
       +
           path.cubicTo(18.552, 19, 19, 18.552, 19, 18);

     

       65
       65
       +
           path.lineTo(19, 14.75);

     

       66
       66
       +
           path.cubicTo(19, 14.198, 19.448, 13.75, 20, 13.75);

     

       67
       67
       +
           path.close();

     

       68
       68
       +
       

     

       69
       69
       +
           // Arrow

     

       70
       70
       +
           path.moveTo(12, 3);

     

       71
       71
       +
           path.cubicTo(12.265, 3, 12.52, 3.105, 12.707, 3.293);

     

       72
       72
       +
           path.lineTo(17.207, 7.793);

     

       73
       73
       +
           path.cubicTo(17.598, 8.184, 17.598, 8.817, 17.207, 9.207);

     

       74
       74
       +
           path.cubicTo(16.816, 9.598, 16.183, 9.598, 15.793, 9.207);

     

       75
       75
       +
           path.lineTo(13, 6.414);

     

       76
       76
       +
           path.lineTo(13, 15.25);

     

       77
       77
       +
           path.cubicTo(13, 15.802, 12.552, 16.25, 12, 16.25);

     

       78
       78
       +
           path.cubicTo(11.448, 16.25, 11, 15.802, 11, 15.25);

     

       79
       79
       +
           path.lineTo(11, 6.414);

     

       80
       80
       +
           path.lineTo(8.207, 9.207);

     

       81
       81
       +
           path.cubicTo(7.816, 9.598, 7.183, 9.598, 6.793, 9.207);

     

       82
       82
       +
           path.cubicTo(6.402, 8.816, 6.402, 8.183, 6.793, 7.793);

     

       83
       83
       +
           path.lineTo(11.293, 3.293);

     

       84
       84
       +
           path.cubicTo(11.48, 3.105, 11.735, 3, 12, 3);

     

       85
       85
       +
           path.close();

     

       86
       86
       +
       

     

       87
       87
       +
           canvas.drawPath(path, paint);

     

       88
       88
       +
         }

     

       89
       89
       +
       

     

       90
       90
       +
         @override

     

       91
       91
       +
         bool shouldRepaint(_ShareIconPainter oldDelegate) {

     

       92
       92
       +
           return oldDelegate.color != color;

     

       93
       93
       +
         }

     

       94
       94
       +
       }

+35 -23

lib/widgets/post_card.dart

···

       5
       5
        
       import '../constants/app_colors.dart';

     

       6
       6
        
       import '../models/post.dart';

     

       7
       7
        
       import '../utils/date_time_utils.dart';

     

       8
       8
       +
       import 'icons/animated_heart_icon.dart';

     

       9
       9
       +
       import 'icons/reply_icon.dart';

     

       10
       10
       +
       import 'icons/share_icon.dart';

     

       8
       11
        
       

     

       9
       12
        
       /// Post card widget for displaying feed posts

     

       10
       13
        
       ///

     
···

       18
       21
        
       /// time-ago calculations, enabling:

     

       19
       22
        
       /// - Periodic updates of time strings

     

       20
       23
        
       /// - Deterministic testing without DateTime.now()

     

       21
       21
       -
       class PostCard extends StatelessWidget {

     

       24
       24
       +
       class PostCard extends StatefulWidget {

     

       22
       25
        
         const PostCard({required this.post, this.currentTime, super.key});

     

       23
       26
        
       

     

       24
       27
        
         final FeedViewPost post;

     

       25
       28
        
         final DateTime? currentTime;

     

       26
       29
        
       

     

       27
       30
        
         @override

     

       31
       31
       +
         State<PostCard> createState() => _PostCardState();

     

       32
       32
       +
       }

     

       33
       33
       +
       

     

       34
       34
       +
       class _PostCardState extends State<PostCard> {

     

       35
       35
       +
         bool _isLiked = false;

     

       36
       36
       +
       

     

       37
       37
       +
         @override

     

       28
       38
        
         Widget build(BuildContext context) {

     

       29
       39
        
           return Container(

     

       30
       40
        
             margin: const EdgeInsets.only(bottom: 8),

     
···

       50
       60
        
                         ),

     

       51
       61
        
                         child: Center(

     

       52
       62
        
                           child: Text(

     

       53
       53
       -
                             post.post.community.name[0].toUpperCase(),

     

       63
       63
       +
                             widget.post.post.community.name[0].toUpperCase(),

     

       54
       64
        
                             style: const TextStyle(

     

       55
       65
        
                               color: AppColors.textPrimary,

     

       56
       66
        
                               fontSize: 12,

     
···

       65
       75
        
                           crossAxisAlignment: CrossAxisAlignment.start,

     

       66
       76
        
                           children: [

     

       67
       77
        
                             Text(

     

       68
       68
       -
                               'c/${post.post.community.name}',

     

       78
       78
       +
                               'c/${widget.post.post.community.name}',

     

       69
       79
        
                               style: const TextStyle(

     

       70
       80
        
                                 color: AppColors.textPrimary,

     

       71
       81
        
                                 fontSize: 14,

     
···

       73
       83
        
                               ),

     

       74
       84
        
                             ),

     

       75
       85
        
                             Text(

     

       76
       76
       -
                               '@${post.post.author.handle}',

     

       86
       86
       +
                               '@${widget.post.post.author.handle}',

     

       77
       87
        
                               style: const TextStyle(

     

       78
       88
        
                                 color: AppColors.textSecondary,

     

       79
       89
        
                                 fontSize: 12,

     
···

       85
       95
        
                       // Time ago

     

       86
       96
        
                       Text(

     

       87
       97
        
                         DateTimeUtils.formatTimeAgo(

     

       88
       88
       -
                           post.post.createdAt,

     

       89
       89
       -
                           currentTime: currentTime,

     

       98
       98
       +
                           widget.post.post.createdAt,

     

       99
       99
       +
                           currentTime: widget.currentTime,

     

       90
       100
        
                         ),

     

       91
       101
        
                         style: TextStyle(

     

       92
       102
        
                           color: AppColors.textPrimary.withValues(alpha: 0.5),

     
···

       98
       108
        
                   const SizedBox(height: 8),

     

       99
       109
        
       

     

       100
       110
        
                   // Post title

     

       101
       101
       -
                   if (post.post.title != null) ...[

     

       111
       111
       +
                   if (widget.post.post.title != null) ...[

     

       102
       112
        
                     Text(

     

       103
       103
       -
                       post.post.title!,

     

       113
       113
       +
                       widget.post.post.title!,

     

       104
       114
        
                       style: const TextStyle(

     

       105
       115
        
                         color: AppColors.textPrimary,

     

       106
       116
        
                         fontSize: 16,

     
···

       110
       120
        
                   ],

     

       111
       121
        
       

     

       112
       122
        
                   // Spacing after title (only if we have content below)

     

       113
       113
       -
                   if (post.post.title != null &&

     

       114
       114
       -
                       (post.post.embed?.external != null ||

     

       115
       115
       -
                           post.post.text.isNotEmpty))

     

       123
       123
       +
                   if (widget.post.post.title != null &&

     

       124
       124
       +
                       (widget.post.post.embed?.external != null ||

     

       125
       125
       +
                           widget.post.post.text.isNotEmpty))

     

       116
       126
        
                     const SizedBox(height: 8),

     

       117
       127
        
       

     

       118
       128
        
                   // Embed (link preview)

     

       119
       119
       -
                   if (post.post.embed?.external != null) ...[

     

       120
       120
       -
                     _EmbedCard(embed: post.post.embed!.external!),

     

       129
       129
       +
                   if (widget.post.post.embed?.external != null) ...[

     

       130
       130
       +
                     _EmbedCard(embed: widget.post.post.embed!.external!),

     

       121
       131
        
                     const SizedBox(height: 8),

     

       122
       132
        
                   ],

     

       123
       133
        
       

     

       124
       134
        
                   // Post text body preview

     

       125
       125
       -
                   if (post.post.text.isNotEmpty) ...[

     

       135
       135
       +
                   if (widget.post.post.text.isNotEmpty) ...[

     

       126
       136
        
                     Container(

     

       127
       137
        
                       padding: const EdgeInsets.all(10),

     

       128
       138
        
                       decoration: BoxDecoration(

     
···

       130
       140
        
                         borderRadius: BorderRadius.circular(8),

     

       131
       141
        
                       ),

     

       132
       142
        
                       child: Text(

     

       133
       133
       -
                         post.post.text,

     

       143
       143
       +
                         widget.post.post.text,

     

       134
       144
        
                         style: TextStyle(

     

       135
       145
        
                           color: AppColors.textPrimary.withValues(alpha: 0.7),

     

       136
       146
        
                           fontSize: 13,

     
···

       163
       173
        
                             horizontal: 12,

     

       164
       174
        
                             vertical: 10,

     

       165
       175
        
                           ),

     

       166
       166
       -
                           child: Icon(

     

       167
       167
       -
                             Icons.ios_share,

     

       176
       176
       +
                           child: ShareIcon(

     

       168
       177
        
                             size: 18,

     

       169
       178
        
                             color: AppColors.textPrimary.withValues(alpha: 0.6),

     

       170
       179
        
                           ),

     
···

       189
       198
        
                           child: Row(

     

       190
       199
        
                             mainAxisSize: MainAxisSize.min,

     

       191
       200
        
                             children: [

     

       192
       192
       -
                               Icon(

     

       193
       193
       -
                                 Icons.chat_bubble_outline,

     

       201
       201
       +
                               ReplyIcon(

     

       194
       202
        
                                 size: 18,

     

       195
       203
        
                                 color: AppColors.textPrimary.withValues(alpha: 0.6),

     

       196
       204
        
                               ),

     

       197
       205
        
                               const SizedBox(width: 5),

     

       198
       206
        
                               Text(

     

       199
       207
        
                                 DateTimeUtils.formatCount(

     

       200
       200
       -
                                   post.post.stats.commentCount,

     

       208
       208
       +
                                   widget.post.post.stats.commentCount,

     

       201
       209
        
                                 ),

     

       202
       210
        
                                 style: TextStyle(

     

       203
       211
        
                                   color: AppColors.textPrimary.withValues(alpha: 0.6),

     
···

       213
       221
        
                       // Heart button

     

       214
       222
        
                       InkWell(

     

       215
       223
        
                         onTap: () {

     

       224
       224
       +
                           setState(() {

     

       225
       225
       +
                             _isLiked = !_isLiked;

     

       226
       226
       +
                           });

     

       216
       227
        
                           // TODO: Handle upvote/like interaction with backend

     

       217
       228
        
                           if (kDebugMode) {

     

       218
       229
        
                             debugPrint('Heart button tapped for post');

     
···

       227
       238
        
                           child: Row(

     

       228
       239
        
                             mainAxisSize: MainAxisSize.min,

     

       229
       240
        
                             children: [

     

       230
       230
       -
                               Icon(

     

       231
       231
       -
                                 Icons.favorite_border,

     

       241
       241
       +
                               AnimatedHeartIcon(

     

       242
       242
       +
                                 isLiked: _isLiked,

     

       232
       243
        
                                 size: 18,

     

       233
       244
        
                                 color: AppColors.textPrimary.withValues(alpha: 0.6),

     

       245
       245
       +
                                 likedColor: const Color(0xFFFF0033), // Bright red

     

       234
       246
        
                               ),

     

       235
       247
        
                               const SizedBox(width: 5),

     

       236
       248
        
                               Text(

     

       237
       237
       -
                                 DateTimeUtils.formatCount(post.post.stats.score),

     

       249
       249
       +
                                 DateTimeUtils.formatCount(widget.post.post.stats.score),

     

       238
       250
        
                                 style: TextStyle(

     

       239
       251
        
                                   color: AppColors.textPrimary.withValues(alpha: 0.6),

     

       240
       252
        
                                   fontSize: 13,