feat: thread collapsing adjustment

lib/src/features/feeds/presentation/screens/widgets/feed_post_card.dart

···
 /// Adapts [FeedPost] data to display a rich post card with
 /// author info, post text, embeds, and action counts.
 class FeedPostCard extends ConsumerWidget {
-  const FeedPostCard({required this.item, this.onTap, super.key});
+  const FeedPostCard({
+    required this.item,
+    this.onTap,
+    this.margin = const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+    super.key,
+  });
 
   final FeedPost item;
   final VoidCallback? onTap;
+  final EdgeInsetsGeometry margin;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
···
 
     return Card(
       clipBehavior: Clip.antiAlias,
-      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      margin: margin,
       elevation: 2,
       child: InkWell(
         onTap:

lib/src/features/feeds/presentation/widgets/post/post_actions_row.dart

···
     final isLiked = viewerLikeUri != null;
     final isReposted = viewerRepostUri != null;
 
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      children: [
-        _ActionItem(
-          icon: Icons.chat_bubble_outline,
-          count: replyCount,
-          onTap: onReply,
-          tooltip: 'Reply',
-        ),
-        _ActionItem(
-          icon: Icons.repeat,
-          count: repostCount,
-          isActive: isReposted,
-          activeColor: Colors.green,
-          onTap: onRepost,
-          tooltip: isReposted ? 'Unrepost' : 'Repost',
-        ),
-        _ActionItem(
-          icon: isLiked ? Icons.favorite : Icons.favorite_border,
-          count: likeCount,
-          isActive: isLiked,
-          activeColor: Colors.red,
-          onTap: onLike,
-          tooltip: isLiked ? 'Unlike' : 'Like',
-        ),
-        _ActionItem(
-          icon: viewerBookmarked ? Icons.bookmark : Icons.bookmark_border,
-          count: 0,
-          isActive: viewerBookmarked,
-          activeColor: Colors.amber,
-          onTap: onBookmark,
-          tooltip: viewerBookmarked ? 'Remove Bookmark' : 'Bookmark',
-        ),
-        IconButton(
-          onPressed: onMore,
-          icon: const Icon(Icons.more_horiz, size: 18),
-          color: AppColors.textSecondary,
-          tooltip: 'More',
-          padding: EdgeInsets.zero,
-          constraints: const BoxConstraints(),
-        ),
-      ],
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final showCounts = constraints.maxWidth > 240;
+        final itemPadding = constraints.maxWidth > 200
+            ? 8.0
+            : constraints.maxWidth > 160
+            ? 4.0
+            : 2.0;
+
+        return Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            _ActionItem(
+              icon: Icons.chat_bubble_outline,
+              count: showCounts ? replyCount : 0,
+              onTap: onReply,
+              tooltip: 'Reply',
+              padding: itemPadding,
+            ),
+            _ActionItem(
+              icon: Icons.repeat,
+              count: showCounts ? repostCount : 0,
+              isActive: isReposted,
+              activeColor: Colors.green,
+              onTap: onRepost,
+              tooltip: isReposted ? 'Unrepost' : 'Repost',
+              padding: itemPadding,
+            ),
+            _ActionItem(
+              icon: isLiked ? Icons.favorite : Icons.favorite_border,
+              count: showCounts ? likeCount : 0,
+              isActive: isLiked,
+              activeColor: Colors.red,
+              onTap: onLike,
+              tooltip: isLiked ? 'Unlike' : 'Like',
+              padding: itemPadding,
+            ),
+            _ActionItem(
+              icon: viewerBookmarked ? Icons.bookmark : Icons.bookmark_border,
+              count: 0,
+              isActive: viewerBookmarked,
+              activeColor: Colors.amber,
+              onTap: onBookmark,
+              tooltip: viewerBookmarked ? 'Remove Bookmark' : 'Bookmark',
+              padding: itemPadding,
+            ),
+            IconButton(
+              onPressed: onMore,
+              icon: const Icon(Icons.more_horiz, size: 18),
+              color: AppColors.textSecondary,
+              tooltip: 'More',
+              padding: EdgeInsets.zero,
+              constraints: const BoxConstraints(),
+            ),
+          ],
+        );
+      },
     );
   }
 }
···
     this.activeColor,
     this.onTap,
     this.tooltip,
+    this.padding = 8.0,
   });
 
   final IconData icon;
···
   final Color? activeColor;
   final VoidCallback? onTap;
   final String? tooltip;
+  final double padding;
 
   @override
   State<_ActionItem> createState() => _ActionItemState();
···
         onTap: _handleTap,
         borderRadius: BorderRadius.circular(20),
         child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+          padding: EdgeInsets.symmetric(horizontal: widget.padding, vertical: 4),
           child: Row(
             mainAxisSize: MainAxisSize.min,
             children: [
···
               ),
               if (widget.count > 0) ...[
                 const SizedBox(width: 4),
-                Text(
-                  _formatCount(widget.count),
-                  style: TextStyle(
-                    color: color,
-                    fontSize: 13,
-                    fontWeight: widget.isActive ? FontWeight.bold : FontWeight.normal,
+                ConstraintsTransformBox(
+                  constraintsTransform: ConstraintsTransformBox.unconstrained,
+                  child: Text(
+                    _formatCount(widget.count),
+                    style: TextStyle(
+                      color: color,
+                      fontSize: 13,
+                      fontWeight: widget.isActive ? FontWeight.bold : FontWeight.normal,
+                    ),
                   ),
                 ),
               ],

lib/src/features/thread/domain/thread_layout_calculator.dart

···
   static const double baseIndent = 0.0;
 
   /// Additional indentation per nesting level
-  static const double indentPerLevel = 32.0;
+  static const double indentPerLevel = 12.0;
 
   /// Maximum depth before flattening
   static const int maxDepth = 5;
-
-  /// Avatar radius in pixels
-  static const double avatarRadius = 20.0;
-
-  /// Offset from left edge to avatar center
-  static const double avatarCenterOffset = 20.0;
 
   /// Calculate left padding for a post at given depth.
   ///
···
   static double calculateIndent(int depth) {
     final effectiveDepth = depth.clamp(0, maxDepth);
     return baseIndent + (effectiveDepth * indentPerLevel);
-  }
-
-  /// Calculate connector line position for a given depth.
-  ///
-  /// Positions the connector at the avatar center, accounting for indentation.
-  static double calculateConnectorLeft(int depth) {
-    return calculateIndent(depth) + avatarCenterOffset;
   }
 
   /// Determine if depth should be flattened.

lib/src/features/thread/presentation/thread_screen.dart

···
 import 'package:lazurite/src/features/thread/application/thread_notifier.dart';
 import 'package:lazurite/src/features/thread/application/thread_providers.dart';
 import 'package:lazurite/src/features/thread/domain/thread.dart';
-import 'package:lazurite/src/features/thread/domain/thread_layout_calculator.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/blocked_post_card.dart';
-import 'package:lazurite/src/features/thread/presentation/widgets/collapsed_reply_preview.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/not_found_post_card.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/thread_line_connector.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/thread_reply_item.dart';
···
         SliverList(
           delegate: SliverChildBuilderDelegate((context, index) {
             final reply = sortedReplies[index];
-            return _buildReplyTree(
-              reply,
-              depth: 1,
-              isLastSibling: index == sortedReplies.length - 1,
-            );
+            return _buildReplyTree(reply, depth: 1);
           }, childCount: sortedReplies.length),
         ),
       ],
···
 
     return Container(
       decoration: BoxDecoration(
-        color: colorScheme.primaryContainer.withValues(alpha: 0.1),
-        border: Border(
-          left: BorderSide(color: colorScheme.primary, width: 3),
-          bottom: BorderSide(color: theme.dividerColor, width: 4),
-        ),
+        color: colorScheme.surfaceContainerLow,
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: colorScheme.primary.withValues(alpha: 0.45), width: 1.5),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
···
   }
 
   /// Recursively builds reply tree with nesting and collapse support
-  Widget _buildReplyTree(ThreadViewPost post, {required int depth, bool isLastSibling = false}) {
+  Widget _buildReplyTree(ThreadViewPost post, {required int depth}) {
     final isCollapsed = ref.watch(
       threadCollapseStateProvider.select((state) => state[post.post.uri] ?? false),
     );
···
           onToggleCollapse: () {
             ref.read(threadCollapseStateProvider.notifier).toggle(post.post.uri);
           },
-          isLastSibling: isLastSibling,
-          hasMoreSiblings: !isLastSibling,
         ),
-
-        if (!isCollapsed && post.replies.isNotEmpty)
-          ...post.replies.asMap().entries.map((entry) {
-            final index = entry.key;
-            final reply = entry.value;
-            return _buildReplyTree(
-              reply,
-              depth: depth + 1,
-              isLastSibling: index == post.replies.length - 1,
-            );
-          }),
-
-        if (isCollapsed && post.replies.isNotEmpty)
-          CollapsedReplyPreview(
-            firstReply: post.replies.first,
-            totalCount: ThreadLayoutCalculator.countAllReplies(post),
-            onExpand: () {
-              ref.read(threadCollapseStateProvider.notifier).toggle(post.post.uri);
-            },
-            indent: ThreadLayoutCalculator.calculateIndent(depth),
-          ),
+        AnimatedSize(
+          duration: const Duration(milliseconds: 250),
+          curve: Curves.easeInOut,
+          alignment: Alignment.topCenter,
+          child: (!isCollapsed && post.replies.isNotEmpty)
+              ? Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: post.replies
+                      .map((reply) => _buildReplyTree(reply, depth: depth + 1))
+                      .toList(),
+                )
+              : const SizedBox.shrink(),
+        ),
       ],
     );
   }

lib/src/features/thread/presentation/widgets/collapse_toggle.dart

···
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
-/// A collapsible toggle button with triangle icon and reply count badge.
+/// A collapsible toggle with Cupertino chevron-circle icons.
 ///
-/// Displays a triangle icon that rotates 90 degrees when collapsed (pointing right)
-/// vs expanded (pointing down). Shows a reply count badge when provided.
+/// Uses `chevron_right_circle` when collapsed and `chevron_down_circle`
+/// when expanded, matching the system thread expansion affordance.
 class CollapseToggle extends StatelessWidget {
-  const CollapseToggle({
-    required this.isCollapsed,
-    required this.onTap,
-    this.replyCount = 0,
-    this.showCount = false,
-    super.key,
-  });
+  const CollapseToggle({required this.isCollapsed, required this.onTap, super.key});
 
   /// Whether the associated thread is currently collapsed
   final bool isCollapsed;
···
   /// Callback when toggle is tapped
   final VoidCallback onTap;
 
-  /// Number of replies (for badge display)
-  final int replyCount;
-
-  /// Whether to show the reply count badge
-  final bool showCount;
-
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final colorScheme = theme.colorScheme;
 
+    final icon = isCollapsed
+        ? CupertinoIcons.chevron_right_circle
+        : CupertinoIcons.chevron_down_circle;
+
     return InkWell(
       onTap: onTap,
-      borderRadius: BorderRadius.circular(4),
-      child: Padding(
-        padding: const EdgeInsets.all(4),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            AnimatedRotation(
-              turns: isCollapsed ? -0.25 : 0, // -90° when collapsed, 0° when expanded
-              duration: const Duration(milliseconds: 200),
-              child: Icon(Icons.play_arrow, size: 16, color: colorScheme.onSurfaceVariant),
-            ),
-            if (showCount && replyCount > 0) ...[
-              const SizedBox(width: 4),
-              Container(
-                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
-                decoration: BoxDecoration(
-                  color: colorScheme.secondaryContainer,
-                  borderRadius: BorderRadius.circular(10),
-                ),
-                child: Text(
-                  replyCount.toString(),
-                  style: theme.textTheme.labelSmall?.copyWith(
-                    color: colorScheme.onSecondaryContainer,
-                    fontSize: 10,
-                    fontWeight: FontWeight.w600,
-                  ),
-                ),
-              ),
-            ],
-          ],
-        ),
+      borderRadius: BorderRadius.circular(18),
+      child: SizedBox(
+        width: 32,
+        height: 32,
+        child: Center(child: Icon(icon, size: 20, color: colorScheme.onSurfaceVariant)),
       ),
     );
   }

lib/src/features/thread/presentation/widgets/collapsed_reply_preview.dart

···
-import 'dart:convert';
-
-import 'package:flutter/material.dart';
-import 'package:lazurite/src/features/thread/domain/thread.dart';
-
-/// Shows a preview of collapsed replies.
-///
-/// Displays the first reply's text (truncated) and total reply count,
-/// similar to Reddit's collapsed thread preview.
-class CollapsedReplyPreview extends StatelessWidget {
-  const CollapsedReplyPreview({
-    required this.firstReply,
-    required this.totalCount,
-    required this.onExpand,
-    required this.indent,
-    super.key,
-  });
-
-  /// First reply to show preview from
-  final ThreadViewPost firstReply;
-
-  /// Total number of all nested replies
-  final int totalCount;
-
-  /// Callback when preview is tapped to expand
-  final VoidCallback onExpand;
-
-  /// Left indent for alignment with parent
-  final double indent;
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-
-    final previewText = _extractPreviewText(firstReply, maxLength: 100);
-    final authorHandle = firstReply.post.author.handle;
-
-    return InkWell(
-      onTap: onExpand,
-      child: Container(
-        margin: EdgeInsets.only(left: indent + 24, right: 8, top: 4, bottom: 8),
-        padding: const EdgeInsets.all(12),
-        decoration: BoxDecoration(
-          color: colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
-          borderRadius: BorderRadius.circular(8),
-          border: Border.all(color: colorScheme.outlineVariant, width: 1),
-        ),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Row(
-              children: [
-                Icon(Icons.unfold_more, size: 16, color: colorScheme.onSurfaceVariant),
-                const SizedBox(width: 8),
-                Expanded(
-                  child: Text(
-                    '@$authorHandle: $previewText',
-                    style: theme.textTheme.bodySmall?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-                    maxLines: 2,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ),
-              ],
-            ),
-
-            const SizedBox(height: 4),
-            Text(
-              _formatReplyCount(totalCount),
-              style: theme.textTheme.labelSmall?.copyWith(
-                color: colorScheme.primary,
-                fontWeight: FontWeight.w600,
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
-  String _extractPreviewText(ThreadViewPost post, {int maxLength = 100}) {
-    if (post.isBlocked) return 'Blocked post';
-    if (post.isNotFound) return 'Post not found';
-
-    try {
-      final record = jsonDecode(post.post.record['text'] as String? ?? '{}');
-      if (record is String) {
-        final text = record.trim();
-        if (text.length <= maxLength) return text;
-        return '${text.substring(0, maxLength)}...';
-      }
-    } catch (_) {
-      /* Failed to parse, try direct text access */
-    }
-
-    final text = (post.post.record['text'] as String? ?? '').trim();
-    if (text.isEmpty) return 'No preview available';
-
-    if (text.length <= maxLength) return text;
-    return '${text.substring(0, maxLength)}...';
-  }
-
-  String _formatReplyCount(int count) {
-    if (count == 1) return '1 reply hidden';
-    return '$count replies hidden';
-  }
-}

lib/src/features/thread/presentation/widgets/thread_curved_connector.dart

···
-import 'package:flutter/material.dart';
-
-/// Style of connector line to render.
-enum ConnectorStyle {
-  /// Parent to child connection with curve (for posts with children)
-  parentToChild,
-
-  /// Straight vertical line (for middle siblings in a chain)
-  continuation,
-
-  /// Terminal line ending at post (for last child or childless post)
-  terminal,
-}
-
-/// A curved connector widget for thread relationships with rust-analyzer style.
-///
-/// Renders smooth bezier curves connecting posts at different nesting levels,
-/// providing visual hierarchy similar to rust-analyzer error displays.
-class ThreadCurvedConnector extends StatelessWidget {
-  const ThreadCurvedConnector({
-    required this.style,
-    required this.depth,
-    this.width = 2,
-    this.color,
-    this.height,
-    super.key,
-  });
-
-  /// Style of connector to render
-  final ConnectorStyle style;
-
-  /// Current nesting depth (used for positioning calculations)
-  final int depth;
-
-  /// Width of the connector line
-  final double width;
-
-  /// Color of the connector line (defaults to theme divider color)
-  final Color? color;
-
-  /// Explicit height (if null, uses constraints)
-  final double? height;
-
-  @override
-  Widget build(BuildContext context) {
-    final lineColor = color ?? Theme.of(context).dividerColor;
-
-    return CustomPaint(
-      size: Size(width, height ?? double.infinity),
-      painter: _ThreadCurvedConnectorPainter(
-        color: lineColor,
-        strokeWidth: width,
-        style: style,
-        depth: depth,
-      ),
-    );
-  }
-}
-
-class _ThreadCurvedConnectorPainter extends CustomPainter {
-  _ThreadCurvedConnectorPainter({
-    required this.color,
-    required this.strokeWidth,
-    required this.style,
-    required this.depth,
-  });
-
-  final Color color;
-  final double strokeWidth;
-  final ConnectorStyle style;
-  final int depth;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()
-      ..color = color
-      ..strokeWidth = strokeWidth
-      ..style = PaintingStyle.stroke
-      ..strokeCap = StrokeCap.round;
-
-    final centerX = size.width / 2;
-    const curveOffset = 32.0;
-
-    switch (style) {
-      case ConnectorStyle.parentToChild:
-        final curveStartY = size.height * 0.3;
-        canvas.drawLine(Offset(centerX, 0), Offset(centerX, curveStartY), paint);
-
-        final path = Path()
-          ..moveTo(centerX, curveStartY)
-          ..quadraticBezierTo(centerX, size.height * 0.5, centerX + curveOffset, size.height * 0.7)
-          ..lineTo(centerX + curveOffset, size.height);
-
-        canvas.drawPath(path, paint);
-
-      case ConnectorStyle.continuation:
-        canvas.drawLine(Offset(centerX, 0), Offset(centerX, size.height), paint);
-
-      case ConnectorStyle.terminal:
-        final endY = size.height * 0.3;
-        canvas.drawLine(Offset(centerX, 0), Offset(centerX, endY), paint);
-        canvas.drawLine(Offset(centerX, endY), Offset(centerX + 20, endY), paint);
-    }
-  }
-
-  @override
-  bool shouldRepaint(covariant _ThreadCurvedConnectorPainter oldDelegate) {
-    return oldDelegate.color != color ||
-        oldDelegate.strokeWidth != strokeWidth ||
-        oldDelegate.style != style ||
-        oldDelegate.depth != depth;
-  }
-}

lib/src/features/thread/presentation/widgets/thread_reply_item.dart

···
 import 'package:lazurite/src/features/feeds/presentation/screens/widgets/feed_post_card.dart';
 import 'package:lazurite/src/features/thread/domain/thread.dart';
 import 'package:lazurite/src/features/thread/domain/thread_layout_calculator.dart';
+import 'package:lazurite/src/features/feeds/presentation/widgets/post/post_header.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/blocked_post_card.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/collapse_toggle.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/deep_thread_indicator.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/not_found_post_card.dart';
-import 'package:lazurite/src/features/thread/presentation/widgets/thread_curved_connector.dart';
 
 /// A recursive reply item widget that renders nested thread replies.
 ///
···
     required this.depth,
     required this.isCollapsed,
     required this.onToggleCollapse,
-    this.isLastSibling = false,
-    this.hasMoreSiblings = false,
     super.key,
   });
 
   /// The thread post to render
   final ThreadViewPost post;
 
-  /// Current nesting depth (0-based)
+  /// Current nesting depth (1-based for replies)
   final int depth;
 
   /// Whether this post's replies are collapsed
···
   /// Callback when collapse toggle is tapped
   final VoidCallback onToggleCollapse;
 
-  /// Whether this is the last sibling in its parent's reply list
-  final bool isLastSibling;
-
-  /// Whether there are more siblings after this one
-  final bool hasMoreSiblings;
+  static const _collapseAnimationDuration = Duration(milliseconds: 250);
+  static const _collapsedMaxChars = 140;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final indent = ThreadLayoutCalculator.calculateIndent(depth);
     final shouldFlatten = ThreadLayoutCalculator.shouldFlattenDepth(depth);
     final hasReplies = post.replies.isNotEmpty;
-    final connectorStyle = _determineConnectorStyle(hasReplies, isLastSibling);
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
···
             ),
           ),
 
-        Stack(
-          children: [
-            if (depth > 0)
-              Positioned(
-                left: ThreadLayoutCalculator.calculateConnectorLeft(depth - 1),
-                top: 0,
-                bottom: hasMoreSiblings ? 0 : null,
-                height: hasMoreSiblings ? null : 60,
-                child: ThreadCurvedConnector(style: connectorStyle, depth: depth),
-              ),
-
-            Padding(
-              padding: EdgeInsets.only(left: indent),
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  if (hasReplies)
-                    CollapseToggle(
-                      isCollapsed: isCollapsed,
-                      onTap: onToggleCollapse,
-                      replyCount: ThreadLayoutCalculator.countAllReplies(post),
-                      showCount: isCollapsed,
-                    )
-                  else
-                    const SizedBox(width: 24),
-                  Expanded(child: _buildPostCard()),
-                ],
+        Padding(
+          padding: EdgeInsets.only(left: indent),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              if (hasReplies)
+                CollapseToggle(isCollapsed: isCollapsed, onTap: onToggleCollapse)
+              else
+                const SizedBox(width: 32),
+              Expanded(
+                child: AnimatedSwitcher(
+                  duration: _collapseAnimationDuration,
+                  switchInCurve: Curves.easeInOut,
+                  switchOutCurve: Curves.easeInOut,
+                  transitionBuilder: (child, animation) {
+                    return FadeTransition(
+                      opacity: animation,
+                      child: SizeTransition(
+                        sizeFactor: animation,
+                        axisAlignment: -1,
+                        child: child,
+                      ),
+                    );
+                  },
+                  child: isCollapsed
+                      ? _CollapsedPostSummary(
+                          key: const ValueKey('collapsed_summary'),
+                          post: post,
+                          maxCharacters: _collapsedMaxChars,
+                        )
+                      : KeyedSubtree(
+                          key: const ValueKey('expanded_post'),
+                          child: _buildPostCard(),
+                        ),
+                ),
               ),
-            ),
-          ],
+            ],
+          ),
         ),
       ],
     );
···
       return const NotFoundPostCard();
     }
 
-    return FeedPostCard(item: post.post.toFeedPost());
+    return FeedPostCard(
+      item: post.post.toFeedPost(),
+      margin: const EdgeInsets.symmetric(vertical: 8),
+    );
+  }
+}
+
+class _CollapsedPostSummary extends StatelessWidget {
+  const _CollapsedPostSummary({required this.post, required this.maxCharacters, super.key});
+
+  final ThreadViewPost post;
+  final int maxCharacters;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+    final textTheme = theme.textTheme;
+
+    final extractedText = _extractText();
+    final previewText = extractedText.isEmpty ? 'No preview available' : extractedText;
+    final repliesLabel = post.replies.isEmpty ? null : _formatReplies(post.replies.length);
+
+    return Container(
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHighest.withValues(alpha: 0.4),
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: colorScheme.outlineVariant),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          PostHeader(author: post.post.toProfileModel(), indexedAt: post.post.indexedAt),
+          const SizedBox(height: 8),
+          Text(
+            previewText,
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
+            style: textTheme.bodyMedium,
+          ),
+          if (repliesLabel != null) ...[
+            const SizedBox(height: 8),
+            Text(
+              repliesLabel,
+              style: textTheme.labelSmall?.copyWith(
+                color: colorScheme.primary,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ],
+        ],
+      ),
+    );
   }
 
-  ConnectorStyle _determineConnectorStyle(bool hasReplies, bool isLast) {
-    if (hasReplies && !isCollapsed) {
-      return ConnectorStyle.parentToChild;
-    }
-    if (isLast) {
-      return ConnectorStyle.terminal;
-    }
-    return ConnectorStyle.continuation;
+  String _extractText() {
+    final raw = post.post.record['text'];
+    if (raw is! String) return '';
+    final trimmed = raw.trim();
+    if (trimmed.length <= maxCharacters) return trimmed;
+    return '${trimmed.substring(0, maxCharacters)}…';
+  }
+
+  String _formatReplies(int count) {
+    final noun = count == 1 ? 'reply hidden' : 'replies hidden';
+    return '$count $noun';
   }
 }

test/src/features/feeds/presentation/widgets/post/post_actions_row_test.dart

···
         expect(find.byIcon(Icons.bookmark), findsNothing);
       });
     });
+
+    testWidgets('hides counts in narrow layout', (tester) async {
+      await tester.pumpWidget(
+        const MaterialApp(
+          home: Scaffold(
+            body: Center(
+              child: SizedBox(
+                width: 150,
+                child: PostActionsRow(replyCount: 5, repostCount: 15, likeCount: 30),
+              ),
+            ),
+          ),
+        ),
+      );
+
+      expect(find.text('5'), findsNothing);
+      expect(find.text('15'), findsNothing);
+      expect(find.text('30'), findsNothing);
+      expect(find.byIcon(Icons.chat_bubble_outline), findsOneWidget);
+    });
   });
 }

test/src/features/thread/domain/thread_layout_calculator_test.dart

···
       });
 
       test('calculates indent for various depths', () {
-        expect(ThreadLayoutCalculator.calculateIndent(1), 32.0);
-        expect(ThreadLayoutCalculator.calculateIndent(2), 64.0);
-        expect(ThreadLayoutCalculator.calculateIndent(3), 96.0);
-        expect(ThreadLayoutCalculator.calculateIndent(4), 128.0);
-        expect(ThreadLayoutCalculator.calculateIndent(5), 160.0);
+        expect(ThreadLayoutCalculator.calculateIndent(1), 12.0);
+        expect(ThreadLayoutCalculator.calculateIndent(2), 24.0);
+        expect(ThreadLayoutCalculator.calculateIndent(3), 36.0);
+        expect(ThreadLayoutCalculator.calculateIndent(4), 48.0);
+        expect(ThreadLayoutCalculator.calculateIndent(5), 60.0);
       });
 
       test('clamps indent at maxDepth', () {
-        expect(ThreadLayoutCalculator.calculateIndent(6), 160.0);
-        expect(ThreadLayoutCalculator.calculateIndent(10), 160.0);
-        expect(ThreadLayoutCalculator.calculateIndent(100), 160.0);
+        expect(ThreadLayoutCalculator.calculateIndent(6), 60.0);
+        expect(ThreadLayoutCalculator.calculateIndent(10), 60.0);
+        expect(ThreadLayoutCalculator.calculateIndent(100), 60.0);
       });
 
       test('handles negative depth gracefully', () {
         expect(ThreadLayoutCalculator.calculateIndent(-1), 0.0);
         expect(ThreadLayoutCalculator.calculateIndent(-10), 0.0);
-      });
-    });
-
-    group('calculateConnectorLeft', () {
-      test('positions connector at avatar center for depth 0', () {
-        expect(
-          ThreadLayoutCalculator.calculateConnectorLeft(0),
-          20.0, // 0 + avatarCenterOffset
-        );
-      });
-
-      test('calculates connector position relative to indent', () {
-        expect(
-          ThreadLayoutCalculator.calculateConnectorLeft(1),
-          52.0, // 32 + 20
-        );
-        expect(
-          ThreadLayoutCalculator.calculateConnectorLeft(2),
-          84.0, // 64 + 20
-        );
-        expect(
-          ThreadLayoutCalculator.calculateConnectorLeft(3),
-          116.0, // 96 + 20
-        );
-      });
-
-      test('clamps connector position at maxDepth', () {
-        final maxConnectorLeft = ThreadLayoutCalculator.calculateConnectorLeft(
-          ThreadLayoutCalculator.maxDepth,
-        );
-        expect(ThreadLayoutCalculator.calculateConnectorLeft(10), maxConnectorLeft);
       });
     });
 

test/src/features/thread/presentation/widgets/collapse_toggle_test.dart

···
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/collapse_toggle.dart';
···
 
       expect(find.byType(CollapseToggle), findsOneWidget);
       expect(find.byType(Icon), findsOneWidget);
-      expect(find.byIcon(Icons.play_arrow), findsOneWidget);
+      expect(find.byIcon(CupertinoIcons.chevron_down_circle), findsOneWidget);
 
       await tester.tap(find.byType(CollapseToggle));
       await tester.pump();
···
       );
 
       expect(find.byType(CollapseToggle), findsOneWidget);
-      expect(find.byIcon(Icons.play_arrow), findsOneWidget);
-    });
-
-    testWidgets('shows reply count badge when showCount is true', (tester) async {
-      await tester.pumpWidget(
-        MaterialApp(
-          home: Scaffold(
-            body: CollapseToggle(isCollapsed: false, onTap: () {}, replyCount: 5, showCount: true),
-          ),
-        ),
-      );
-
-      expect(find.text('5'), findsOneWidget);
+      expect(find.byIcon(CupertinoIcons.chevron_right_circle), findsOneWidget);
     });
 
-    testWidgets('hides reply count badge when showCount is false', (tester) async {
-      await tester.pumpWidget(
-        MaterialApp(
-          home: Scaffold(
-            body: CollapseToggle(
-              isCollapsed: false,
-              onTap: () {},
-              replyCount: 5,
-              showCount: false,
-            ),
-          ),
-        ),
-      );
-
-      expect(find.text('5'), findsNothing);
-    });
-
-    testWidgets('hides badge when replyCount is 0', (tester) async {
-      await tester.pumpWidget(
-        MaterialApp(
-          home: Scaffold(
-            body: CollapseToggle(isCollapsed: false, onTap: () {}, replyCount: 0, showCount: true),
-          ),
-        ),
-      );
-
-      expect(find.byType(Container), findsNothing);
-    });
-
-    testWidgets('icon rotates when toggling collapse state', (tester) async {
+    testWidgets('switches chevron direction when toggling', (tester) async {
       var isCollapsed = false;
 
       await tester.pumpWidget(
···
         ),
       );
 
-      var rotation = tester.widget<AnimatedRotation>(find.byType(AnimatedRotation));
-      expect(rotation.turns, 0);
+      expect(find.byIcon(CupertinoIcons.chevron_down_circle), findsOneWidget);
 
       await tester.tap(find.byType(CollapseToggle));
       await tester.pump();
 
-      rotation = tester.widget<AnimatedRotation>(find.byType(AnimatedRotation));
-      expect(rotation.turns, -0.25);
+      expect(find.byIcon(CupertinoIcons.chevron_right_circle), findsOneWidget);
     });
 
-    testWidgets('displays different reply counts', (tester) async {
-      for (final count in [1, 10, 100, 999]) {
-        await tester.pumpWidget(
-          MaterialApp(
-            home: Scaffold(
-              body: CollapseToggle(
-                isCollapsed: false,
-                onTap: () {},
-                replyCount: count,
-                showCount: true,
-              ),
-            ),
+    testWidgets('reserves consistent tap target size', (tester) async {
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: Center(child: CollapseToggle(isCollapsed: false, onTap: () {})),
           ),
-        );
+        ),
+      );
 
-        expect(find.text(count.toString()), findsOneWidget);
-      }
+      expect(tester.getSize(find.byType(CollapseToggle)), const Size(32, 32));
     });
   });
 }

test/src/features/thread/presentation/widgets/thread_curved_connector_test.dart

···
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-import 'package:lazurite/src/features/thread/presentation/widgets/thread_curved_connector.dart';
-
-void main() {
-  group('ThreadCurvedConnector', () {
-    testWidgets('renders with parentToChild style', (tester) async {
-      await tester.pumpWidget(
-        const MaterialApp(
-          home: Scaffold(
-            body: SizedBox(
-              width: 100,
-              height: 200,
-              child: ThreadCurvedConnector(style: ConnectorStyle.parentToChild, depth: 1),
-            ),
-          ),
-        ),
-      );
-
-      expect(find.byType(ThreadCurvedConnector), findsOneWidget);
-    });
-
-    testWidgets('renders with continuation style', (tester) async {
-      await tester.pumpWidget(
-        const MaterialApp(
-          home: Scaffold(
-            body: SizedBox(
-              width: 100,
-              height: 200,
-              child: ThreadCurvedConnector(style: ConnectorStyle.continuation, depth: 2),
-            ),
-          ),
-        ),
-      );
-
-      expect(find.byType(ThreadCurvedConnector), findsOneWidget);
-    });
-
-    testWidgets('renders with terminal style', (tester) async {
-      await tester.pumpWidget(
-        const MaterialApp(
-          home: Scaffold(
-            body: SizedBox(
-              width: 100,
-              height: 200,
-              child: ThreadCurvedConnector(style: ConnectorStyle.terminal, depth: 3),
-            ),
-          ),
-        ),
-      );
-
-      expect(find.byType(ThreadCurvedConnector), findsOneWidget);
-    });
-
-    testWidgets('uses custom color when provided', (tester) async {
-      const customColor = Colors.red;
-
-      await tester.pumpWidget(
-        const MaterialApp(
-          home: Scaffold(
-            body: SizedBox(
-              width: 100,
-              height: 200,
-              child: ThreadCurvedConnector(
-                style: ConnectorStyle.parentToChild,
-                depth: 1,
-                color: customColor,
-              ),
-            ),
-          ),
-        ),
-      );
-
-      final connector = tester.widget<ThreadCurvedConnector>(find.byType(ThreadCurvedConnector));
-      expect(connector.color, customColor);
-    });
-
-    testWidgets('uses custom width when provided', (tester) async {
-      const customWidth = 4.0;
-
-      await tester.pumpWidget(
-        const MaterialApp(
-          home: Scaffold(
-            body: SizedBox(
-              width: 100,
-              height: 200,
-              child: ThreadCurvedConnector(
-                style: ConnectorStyle.parentToChild,
-                depth: 1,
-                width: customWidth,
-              ),
-            ),
-          ),
-        ),
-      );
-
-      final connector = tester.widget<ThreadCurvedConnector>(find.byType(ThreadCurvedConnector));
-      expect(connector.width, customWidth);
-    });
-
-    testWidgets('accepts different depth values', (tester) async {
-      for (var depth = 0; depth <= 5; depth++) {
-        await tester.pumpWidget(
-          MaterialApp(
-            home: Scaffold(
-              body: SizedBox(
-                width: 100,
-                height: 200,
-                child: ThreadCurvedConnector(style: ConnectorStyle.parentToChild, depth: depth),
-              ),
-            ),
-          ),
-        );
-
-        final connector = tester.widget<ThreadCurvedConnector>(find.byType(ThreadCurvedConnector));
-        expect(connector.depth, depth);
-      }
-    });
-  });
-}

test/src/features/thread/presentation/widgets/thread_reply_item_test.dart

···
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/app/providers.dart';
+import 'package:lazurite/src/core/domain/content_label.dart';
+import 'package:lazurite/src/features/settings/application/label_filter_provider.dart';
+import 'package:lazurite/src/features/settings/domain/label_filter_service.dart';
 import 'package:lazurite/src/features/thread/domain/thread.dart';
 import 'package:lazurite/src/features/thread/presentation/widgets/thread_reply_item.dart';
+import 'package:mocktail/mocktail.dart';
+
+import '../../../../../helpers/mocks.dart';
+
+class MockLabelFilterService extends Mock implements LabelFilterService {}
 
 void main() {
+  late MockAppDatabase mockDatabase;
+  late MockLabelFilterService mockLabelFilter;
+
+  setUpAll(() {
+    registerFallbackValue(<ContentLabel>[]);
+  });
+
+  setUp(() {
+    mockDatabase = MockAppDatabase();
+    mockLabelFilter = MockLabelFilterService();
+
+    when(() => mockLabelFilter.anyLabelWarns(any())).thenReturn(false);
+    when(() => mockLabelFilter.anyLabelHides(any())).thenReturn(false);
+  });
+
   group('ThreadReplyItem', () {
     testWidgets('renders post at depth 0', (tester) async {
       final post = _createThreadViewPost(handle: 'user1');
 
       await tester.pumpWidget(
         ProviderScope(
+          overrides: [
+            appDatabaseProvider.overrideWithValue(mockDatabase),
+            labelFilterServiceProvider.overrideWithValue(mockLabelFilter),
+          ],
           child: MaterialApp(
             home: Scaffold(
               body: ThreadReplyItem(
···
 
       await tester.pumpWidget(
         ProviderScope(
+          overrides: [
+            appDatabaseProvider.overrideWithValue(mockDatabase),
+            labelFilterServiceProvider.overrideWithValue(mockLabelFilter),
+          ],
           child: MaterialApp(
             home: Scaffold(
               body: ThreadReplyItem(
···
 
       await tester.pumpWidget(
         ProviderScope(
+          overrides: [
+            appDatabaseProvider.overrideWithValue(mockDatabase),
+            labelFilterServiceProvider.overrideWithValue(mockLabelFilter),
+          ],
           child: MaterialApp(
             home: Scaffold(
               body: ThreadReplyItem(
···
 
         await tester.pumpWidget(
           ProviderScope(
+            overrides: [
+              appDatabaseProvider.overrideWithValue(mockDatabase),
+              labelFilterServiceProvider.overrideWithValue(mockLabelFilter),
+            ],
             child: MaterialApp(
               home: Scaffold(
                 body: ThreadReplyItem(
···
 
       await tester.pumpWidget(
         ProviderScope(
+          overrides: [
+            appDatabaseProvider.overrideWithValue(mockDatabase),
+            labelFilterServiceProvider.overrideWithValue(mockLabelFilter),
+          ],
           child: MaterialApp(
             home: Scaffold(
               body: ThreadReplyItem(
···
 
       await tester.pumpWidget(
         ProviderScope(
+          overrides: [
+            appDatabaseProvider.overrideWithValue(mockDatabase),
+            labelFilterServiceProvider.overrideWithValue(mockLabelFilter),
+          ],
           child: MaterialApp(
             home: Scaffold(
               body: ThreadReplyItem(
···
 
       await tester.pumpWidget(
         ProviderScope(
+          overrides: [
+            appDatabaseProvider.overrideWithValue(mockDatabase),
+            labelFilterServiceProvider.overrideWithValue(mockLabelFilter),
+          ],
           child: MaterialApp(
             home: Scaffold(
               body: ThreadReplyItem(
···
       );
 
       expect(find.byType(ThreadReplyItem), findsOneWidget);
+    });
+
+    testWidgets('shows truncated summary and hidden count when collapsed', (tester) async {
+      final post = _createThreadViewPost(
+        handle: 'user1',
+        replies: [_createThreadViewPost(handle: 'child')],
+      );
+
+      await tester.pumpWidget(
+        ProviderScope(
+          overrides: [
+            appDatabaseProvider.overrideWithValue(mockDatabase),
+            labelFilterServiceProvider.overrideWithValue(mockLabelFilter),
+          ],
+          child: MaterialApp(
+            home: Scaffold(
+              body: ThreadReplyItem(
+                post: post,
+                depth: 0,
+                isCollapsed: true,
+                onToggleCollapse: () {},
+              ),
+            ),
+          ),
+        ),
+      );
+
+      expect(find.text('@user1'), findsOneWidget);
+      expect(find.textContaining('Test post from user1'), findsOneWidget);
+      expect(find.text('1 reply hidden'), findsOneWidget);
     });
   });
 }