Fix icon alignments, clipping in sidebar (#53)

On macOS Tahoe, room icons don't quite behave as expected compared
to older macOS releases. When no room icon can be loaded, the
system icon is terribly misaligned as it is too small to fit the
space it's given. When a room icon is found, it takes the full
space, getting clipped in the process. I'm not entirely sure what
the cause of the issue is, given that I haven't seen this behavior
in other apps, but I suspect there's an issue with image sizing
parameters internally.

To work around this, I've made some minor modifications to the
sidebar entry. First, system icons are now centered inside an
invisible rounded rectangle to make sure it lines up correctly in
the space given. Likewise, the image inside the label is given a
frame, constraining its size to 22 points. To allow this to respect
Dynamic Type features, this value is recorded as a ScaledMetric
value, meaning it should adjust when the Dynamic Type rules are
adjusted.

Signed-off-by: Marquis Kurt <software@marquiskurt.net>

Author: alicerunsonfedora

MactrixLibrary/Sources/UI/Sidebar/RoomRow.swift

@@ -43,6 +43,7 @@ public struct RoomRow: View {
     @State private var joining: Bool = false
     @State private var error: Error? = nil
     @State private var isErrorVisible: Bool = false
+    @ScaledMetric(relativeTo: .body) private var roomAvatarSize: CGFloat = 22.0
 
     public init(title: String, avatarUrl: String?, roomInfo: RoomInfo?, imageLoader: ImageLoader?, joinRoom: (() async throws -> Void)?) {
         self.title = title
@@ -71,8 +72,13 @@ public struct RoomRow: View {
             },
             icon: {
                 UI.AvatarImage(avatarUrl: avatarUrl, imageLoader: imageLoader) {
-                    Image(systemName: placeholderImageName)
+                    RoundedRectangle(cornerRadius: 4)
+                        .fill(.clear)
+                        .overlay {
+                            Image(systemName: placeholderImageName)
+                        }
                 }
+                .frame(width: roomAvatarSize, height: roomAvatarSize)
                 .clipShape(RoundedRectangle(cornerRadius: 4))
             }
         )