fix: Follow up fix rectangle avatars

lib/widgets/avatar.dart

@@ -60,37 +60,38 @@ class Avatar extends StatelessWidget {
               side: border ?? BorderSide.none,
             ),
             clipBehavior: Clip.antiAlias,
-            child: noPic
+            child: MxcImage(
-                ? Container(
+              client: client,
-                    decoration: BoxDecoration(color: name?.lightColorAvatar),
+              borderRadius: borderRadius,
-                    alignment: Alignment.center,
+              key: ValueKey(mxContent.toString()),
-                    child: Text(
+              cacheKey: '${mxContent}_$size',
-                      fallbackLetters,
+              uri: mxContent,
-                      textAlign: TextAlign.center,
+              fit: BoxFit.cover,
-                      style: TextStyle(
+              width: size,
-                        fontFamily: 'RobotoMono',
+              height: size,
-                        color: Colors.white,
+              placeholder: (_) => noPic
-                        fontWeight: FontWeight.bold,
+                  ? Container(
-                        fontSize: (size / 2.5).roundToDouble(),
+                      decoration: BoxDecoration(color: name?.lightColorAvatar),
+                      alignment: Alignment.center,
+                      child: Text(
+                        fallbackLetters,
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontFamily: 'RobotoMono',
+                          color: Colors.white,
+                          fontWeight: FontWeight.bold,
+                          fontSize: (size / 2.5).roundToDouble(),
+                        ),
                       ),
-                    ),
+                    )
-                  )
+                  : Center(
-                : MxcImage(
-                    client: client,
-                    key: ValueKey(mxContent.toString()),
-                    cacheKey: '${mxContent}_$size',
-                    uri: mxContent,
-                    fit: BoxFit.cover,
-                    width: size,
-                    height: size,
-                    placeholder: (_) => Center(
                       child: Icon(
                         Icons.person_2,
                         color: theme.colorScheme.tertiary,
                         size: size / 1.5,
                       ),
                     ),
-                  ),
+            ),
           ),
         ),
         if (presenceUserId != null)

lib/widgets/mxc_image.dart

@@ -26,6 +26,7 @@ class MxcImage extends StatefulWidget {
   final Widget Function(BuildContext context)? placeholder;
   final String? cacheKey;
   final Client? client;
+  final BorderRadius borderRadius;
 
   const MxcImage({
     this.uri,
@@ -42,6 +43,7 @@ class MxcImage extends StatefulWidget {
     this.thumbnailMethod = ThumbnailMethod.scale,
     this.cacheKey,
     this.client,
+    this.borderRadius = BorderRadius.zero,
     super.key,
   });
 
@@ -141,30 +143,34 @@ class _MxcImageState extends State<MxcImage> {
     final hasData = data != null && data.isNotEmpty;
 
     return AnimatedSwitcher(
-      duration: const Duration(milliseconds: 128),
+      duration: FluffyThemes.animationDuration,
       child: hasData
-          ? Image.memory(
+          ? ClipRRect(
-              data,
+              borderRadius: widget.borderRadius,
-              width: widget.width,
+              child: Image.memory(
-              height: widget.height,
+                data,
-              fit: widget.fit,
+                width: widget.width,
-              filterQuality:
+                height: widget.height,
-                  widget.isThumbnail ? FilterQuality.low : FilterQuality.medium,
+                fit: widget.fit,
-              errorBuilder: (context, e, s) {
+                filterQuality: widget.isThumbnail
-                Logs().d('Unable to render mxc image', e, s);
+                    ? FilterQuality.low
-                return SizedBox(
+                    : FilterQuality.medium,
-                  width: widget.width,
+                errorBuilder: (context, e, s) {
-                  height: widget.height,
+                  Logs().d('Unable to render mxc image', e, s);
-                  child: Material(
+                  return SizedBox(
-                    color: Theme.of(context).colorScheme.surfaceContainer,
+                    width: widget.width,
-                    child: Icon(
+                    height: widget.height,
-                      Icons.broken_image_outlined,
+                    child: Material(
-                      size: min(widget.height ?? 64, 64),
+                      color: Theme.of(context).colorScheme.surfaceContainer,
-                      color: Theme.of(context).colorScheme.onSurface,
+                      child: Icon(
+                        Icons.broken_image_outlined,
+                        size: min(widget.height ?? 64, 64),
+                        color: Theme.of(context).colorScheme.onSurface,
+                      ),
                     ),
-                  ),
+                  );
-                );
+                },
-              },
+              ),
             )
           : placeholder(context),
     );