chore: Add fancy hero animations

lib/pages/chat/chat_app_bar_title.dart

@@ -39,11 +39,14 @@ class ChatAppBarTitle extends StatelessWidget {
           : () => VRouter.of(context).toSegments(['rooms', room.id, 'details']),
       child: Row(
         children: [
-          Avatar(
+          Hero(
+            tag: 'content_banner',
+            child: Avatar(
               mxContent: room.avatar,
               name: room.displayname,
               size: 32,
             ),
+          ),
           const SizedBox(width: 12),
           Expanded(
             child: Text(

lib/pages/chat_list/stories_header.dart

@@ -119,7 +119,7 @@ class StoriesHeader extends StatelessWidget {
               ...client.storiesRooms..remove(ownStoryRoom),
             ];
             return SizedBox(
-              height: 106,
+              height: 98,
               child: ListView.builder(
                 padding: const EdgeInsets.symmetric(horizontal: 2),
                 scrollDirection: Axis.horizontal,
@@ -145,6 +145,7 @@ class StoriesHeader extends StatelessWidget {
                             avatarUrl: avatarUrl,
                             userId: userId ?? 'Unknown',
                           ),
+                          heroTag: 'stories_${room.id}',
                           hasPosts: room.hasPosts || room == ownStoryRoom,
                           showEditFab: userId == client.userID,
                           unread: room.membership == Membership.invite ||
@@ -186,10 +187,12 @@ class _StoryButton extends StatelessWidget {
   final bool hasPosts;
   final void Function() onPressed;
   final void Function()? onLongPressed;
+  final String heroTag;
 
   const _StoryButton({
     required this.profile,
     required this.onPressed,
+    required this.heroTag,
     this.showEditFab = false,
     this.hasPosts = true,
     this.unread = false,
@@ -246,6 +249,8 @@ class _StoryButton extends StatelessWidget {
                                   Theme.of(context).colorScheme.surface,
                               foregroundColor:
                                   Theme.of(context).textTheme.bodyText1?.color,
+                              child: Hero(
+                                tag: heroTag,
                                 child: Avatar(
                                   mxContent: profile.avatarUrl,
                                   name: profile.displayName,
@@ -255,6 +260,7 @@ class _StoryButton extends StatelessWidget {
                               ),
                             ),
                           ),
+                        ),
                         if (showEditFab)
                           Positioned(
                             right: 0,

lib/pages/story/story_view.dart

@@ -83,11 +83,14 @@ class StoryView extends StatelessWidget {
                   ),
                 )
               : null,
-          leading: Avatar(
+          leading: Hero(
+            tag: 'stories_${controller.roomId}',
+            child: Avatar(
               mxContent: controller.avatar,
               name: controller.title,
             ),
           ),
+        ),
         actions: currentEvent == null
             ? null
             : [

lib/widgets/avatar.dart

@@ -54,10 +54,7 @@ class Avatar extends StatelessWidget {
       ),
     );
     final borderRadius = BorderRadius.circular(size / 2);
-    return InkWell(
+    final container = Container(
-      onTap: onTap,
-      borderRadius: borderRadius,
-      child: Container(
       decoration: BoxDecoration(
         border: Border.all(color: Theme.of(context).dividerColor),
         borderRadius: borderRadius,
@@ -67,9 +64,8 @@ class Avatar extends StatelessWidget {
         child: Container(
           width: size,
           height: size,
-            color: noPic
+          color:
-                ? name?.lightColor
+              noPic ? name?.lightColor : Theme.of(context).secondaryHeaderColor,
-                : Theme.of(context).secondaryHeaderColor,
           child: noPic
               ? textWidget
               : CachedNetworkImage(
@@ -86,7 +82,12 @@ class Avatar extends StatelessWidget {
                 ),
         ),
       ),
-      ),
+    );
+    if (onTap == null) return container;
+    return InkWell(
+      onTap: onTap,
+      borderRadius: borderRadius,
+      child: container,
     );
   }
 }

lib/widgets/content_banner.dart

@@ -15,6 +15,7 @@ class ContentBanner extends StatelessWidget {
   final void Function()? onEdit;
   final Client? client;
   final double opacity;
+  final String heroTag;
 
   const ContentBanner(
       {this.mxContent,
@@ -24,6 +25,7 @@ class ContentBanner extends StatelessWidget {
       this.onEdit,
       this.client,
       this.opacity = 0.75,
+      this.heroTag = 'content_banner',
       Key? key})
       : super(key: key);
 
@@ -62,7 +64,9 @@ class ContentBanner extends StatelessWidget {
                         method: ThumbnailMethod.scale,
                         animated: true,
                       );
-                      return CachedNetworkImage(
+                      return Hero(
+                        tag: heroTag,
+                        child: CachedNetworkImage(
                           imageUrl: src.toString(),
                           height: 300,
                           fit: BoxFit.cover,
@@ -73,6 +77,7 @@ class ContentBanner extends StatelessWidget {
                                 .colorScheme
                                 .onSecondaryContainer,
                           ),
+                        ),
                       );
                     })
                   : Icon(