💄 Update styling of realm list

lib/screens/realm/realms.dart

@@ -22,6 +22,7 @@ import 'package:island/screens/tabs.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:styled_widget/styled_widget.dart';
+import 'package:island/widgets/realm/realm_list_tile.dart';
 
 part 'realms.g.dart';
 
@@ -95,32 +96,19 @@ class RealmListScreen extends HookConsumerWidget {
               (value) => Column(
                 children: [
                   Expanded(
-                    child: ListView.builder(
+                    child: ListView.separated(
-                      padding: getTabbedPadding(context),
+                      padding: EdgeInsets.only(
+                        top: 8,
+                        bottom: getTabbedPadding(context).bottom + 8,
+                      ),
                       itemCount: value.length,
                       itemBuilder: (context, item) {
-                        return ListTile(
+                        return ConstrainedBox(
-                          isThreeLine: true,
+                          constraints: const BoxConstraints(maxWidth: 540),
-                          leading: ProfilePictureWidget(
+                          child: RealmListTile(realm: value[item]),
-                            fileId: value[item].picture?.id,
+                        ).center();
-                            fallbackIcon: Symbols.group,
-                          ),
-                          title: Text(value[item].name),
-                          subtitle: Text(value[item].description),
-                          onTap: () {
-                            context.pushNamed(
-                              'realmDetail',
-                              pathParameters: {'slug': value[item].slug},
-                            );
-                          },
-                          contentPadding: const EdgeInsets.only(
-                            left: 16,
-                            right: 14,
-                            top: 8,
-                            bottom: 8,
-                          ),
-                        );
                       },
+                      separatorBuilder: (_, _) => const Gap(8),
                     ),
                   ),
                 ],

lib/widgets/realm/realm_list_tile.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:go_router/go_router.dart';
+import 'package:island/models/realm.dart';
+import 'package:island/widgets/content/cloud_files.dart';
+import 'package:material_symbols_icons/symbols.dart';
+import 'package:styled_widget/styled_widget.dart';
+
+class RealmListTile extends StatelessWidget {
+  const RealmListTile({super.key, required this.realm});
+
+  final SnRealm realm;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      margin: EdgeInsets.zero,
+      child: InkWell(
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            AspectRatio(
+              aspectRatio: 16 / 7,
+              child: Stack(
+                clipBehavior: Clip.none,
+                fit: StackFit.expand,
+                children: [
+                  ClipRRect(
+                    borderRadius: const BorderRadius.all(Radius.circular(8)),
+                    child: Container(
+                      color: Theme.of(context).colorScheme.surfaceContainer,
+                      child:
+                          realm.background == null
+                              ? const SizedBox.shrink()
+                              : CloudImageWidget(file: realm.background),
+                    ),
+                  ),
+                  Positioned(
+                    bottom: -30,
+                    left: 18,
+                    child: ProfilePictureWidget(
+                      fileId: realm.picture?.id,
+                      fallbackIcon: Symbols.group,
+                      radius: 24,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const Gap(20 + 12),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  realm.name,
+                ).textStyle(Theme.of(context).textTheme.titleMedium!),
+                Text(
+                  realm.description,
+                ).textStyle(Theme.of(context).textTheme.bodySmall!),
+              ],
+            ).padding(horizontal: 24, bottom: 14),
+          ],
+        ),
+        onTap: () {
+          context.pushNamed(
+            'realmDetail',
+            pathParameters: {'slug': realm.slug},
+          );
+        },
+      ),
+    );
+  }
+}