feat: enhance comments header with sort icons and improved styling

Improve the comments sort UI with intuitive icons and better visual
feedback. Each sort option now has a matching icon for easier recognition.

Changes:
- Added icons for each sort type (🔥 hot, ✨ top, 🆕 new)
- Show checkmark next to currently selected sort option
- Improved popup menu styling with rounded corners
- Better spacing and alignment in sort dropdown

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Changed files
+47 -10
lib
+47 -10
lib/widgets/comments_header.dart
···
static const _sortOptions = ['hot', 'top', 'new'];
static const _sortLabels = ['Hot', 'Top', 'New'];
+
/// Get icon for a sort type
+
IconData _getSortIcon(String sortType) {
+
switch (sortType) {
+
case 'hot':
+
return Icons.local_fire_department;
+
case 'top':
+
return Icons.auto_awesome_rounded;
+
case 'new':
+
return Icons.fiber_new;
+
default:
+
return Icons.sort;
+
}
+
}
+
@override
Widget build(BuildContext context) {
// Show empty state if no comments
···
onSelected: onSortChanged,
offset: const Offset(0, 40),
color: AppColors.backgroundSecondary,
+
shape: RoundedRectangleBorder(
+
borderRadius: BorderRadius.circular(12),
+
),
child: Row(
children: [
+
Icon(
+
_getSortIcon(currentSort),
+
color: AppColors.textSecondary,
+
size: 16,
+
),
+
const SizedBox(width: 6),
Text(
'$commentCount ${commentCount == 1 ? 'Comment' : 'Comments'}',
style: const TextStyle(
···
for (var i = 0; i < _sortOptions.length; i++)
PopupMenuItem<String>(
value: _sortOptions[i],
-
child: Text(
-
_sortLabels[i],
-
style: TextStyle(
-
color: currentSort == _sortOptions[i]
-
? AppColors.primary
-
: AppColors.textPrimary,
-
fontWeight: currentSort == _sortOptions[i]
-
? FontWeight.w600
-
: FontWeight.normal,
-
),
+
child: Row(
+
children: [
+
Icon(
+
_getSortIcon(_sortOptions[i]),
+
color: AppColors.textPrimary,
+
size: 18,
+
),
+
const SizedBox(width: 12),
+
Expanded(
+
child: Text(
+
_sortLabels[i],
+
style: const TextStyle(
+
color: AppColors.textPrimary,
+
fontWeight: FontWeight.normal,
+
),
+
),
+
),
+
if (currentSort == _sortOptions[i])
+
const Icon(
+
Icons.check,
+
color: AppColors.primary,
+
size: 20,
+
),
+
],
),
),
],