✨ Better sticker picker

lib/widgets/stickers/sticker_picker.dart

@@ -369,33 +369,64 @@ 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: ListView.separated(
+          child: SizedBox(
-            padding: const EdgeInsets.symmetric(horizontal: 12),
+            height: 36,
-            scrollDirection: Axis.horizontal,
+            child: ListView.separated(
-            itemCount: packs.length,
+              padding: const EdgeInsets.symmetric(horizontal: 12),
-            separatorBuilder: (_, _) => const Gap(4),
+              scrollDirection: Axis.horizontal,
-            itemBuilder: (context, i) {
+              itemCount: packs.length,
-              final selected = _index == i;
+              separatorBuilder: (_, _) => const Gap(4),
-              return Tooltip(
+              itemBuilder: (context, i) {
-                message: packs[i].name,
+                final selected = _index == i;
-                child: FilterChip(
+                return Tooltip(
-                  visualDensity: const VisualDensity(
+                  message: packs[i].name,
-                    horizontal: 0,
+                  child: AnimatedContainer(
-                    vertical: -4,
+                    duration: const Duration(milliseconds: 200),
+                    curve: Curves.easeInOut,
+                    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,
+                    ),
+                    margin: const EdgeInsets.only(right: 8),
+                    child: InkWell(
+                      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);
+                        },
+                      ),
+                    ),
                   ),
-                  label: Text(packs[i].name, overflow: TextOverflow.ellipsis),
+                );
-                  selected: selected,
+              },
-                  onSelected: (_) {
+            ),
-                    setState(() => _index = i);
+          ).padding(vertical: 4),
-                    HapticFeedback.selectionClick();
+        ).padding(horizontal: 12),
-                  },
-                ),
-              );
-            },
-          ),
-        ),
 
         // Content
         Expanded(