✨ Better sticker picker

lib/widgets/stickers/sticker_picker.dart

@@ -369,8 +369,10 @@ class _EmbeddedPackSwitcherState extends State<_EmbeddedPackSwitcher> {
       children: [
         const Gap(12),
         // Vertical, scrollable packs rail like common emoji pickers
-        SizedBox(
+        Card(
-          height: 32,
+          margin: EdgeInsets.zero,
+          child: SizedBox(
+            height: 36,
             child: ListView.separated(
               padding: const EdgeInsets.symmetric(horizontal: 12),
               scrollDirection: Axis.horizontal,
@@ -380,22 +382,51 @@ class _EmbeddedPackSwitcherState extends State<_EmbeddedPackSwitcher> {
                 final selected = _index == i;
                 return Tooltip(
                   message: packs[i].name,
-                child: FilterChip(
+                  child: AnimatedContainer(
-                  visualDensity: const VisualDensity(
+                    duration: const Duration(milliseconds: 200),
-                    horizontal: 0,
+                    curve: Curves.easeInOut,
-                    vertical: -4,
+                    decoration: BoxDecoration(
+                      color:
+                          selected
+                              ? Theme.of(context).colorScheme.primaryContainer
+                              : Theme.of(context).colorScheme.surfaceContainer,
+                      borderRadius: const BorderRadius.all(Radius.circular(8)),
+                      border:
+                          selected
+                              ? Border.all(
+                                color: Theme.of(context).colorScheme.primary,
+                                width: 4,
+                              )
+                              : null,
                     ),
-                  label: Text(packs[i].name, overflow: TextOverflow.ellipsis),
+                    margin: const EdgeInsets.only(right: 8),
-                  selected: selected,
+                    child: InkWell(
-                  onSelected: (_) {
+                      borderRadius: const BorderRadius.all(Radius.circular(8)),
+                      onTap: () {
                         setState(() => _index = i);
                         HapticFeedback.selectionClick();
                       },
+                      child: TweenAnimationBuilder<double>(
+                        tween: Tween<double>(end: selected ? 4 : 8),
+                        duration: const Duration(milliseconds: 200),
+                        curve: Curves.easeInOut,
+                        builder: (context, value, _) {
+                          return packs[i].icon != null
+                              ? CloudImageWidget(
+                                file: packs[i].icon!,
+                              ).clipRRect(all: value)
+                              : CloudImageWidget(
+                                file: packs[i].stickers.firstOrNull?.image,
+                              ).clipRRect(all: value);
+                        },
+                      ),
+                    ),
                   ),
                 );
               },
             ),
-        ),
+          ).padding(vertical: 4),
+        ).padding(horizontal: 12),
 
         // Content
         Expanded(