feat: user cards

src/kaiteki/lib/ui/shared/users/user_card.dart

@@ -0,0 +1,88 @@
+import "package:flutter/material.dart";
+import "package:kaiteki/di.dart";
+import "package:kaiteki/fediverse/model/user/user.dart";
+import "package:kaiteki/utils/extensions.dart";
+
+class UserCard extends ConsumerWidget {
+  /// The user to display. If null, a placeholder will be displayed.
+  final User? user;
+
+  final List<Widget> actions;
+
+  const UserCard(this.user, {super.key, this.actions = const []});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final handleTextStyle = Theme.of(context).textTheme.bodyMedium?.copyWith(
+          color: Theme.of(context).colorScheme.onSurfaceVariant,
+        );
+    final displayNameTextStyle =
+        Theme.of(context).textTheme.bodyLarge?.copyWith(
+              color: Theme.of(context).colorScheme.onSurface,
+            );
+    return Card(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          ClipRRect(
+            borderRadius: BorderRadius.circular(12.0),
+            child: AspectRatio(
+              aspectRatio: 16 / 9,
+              child: user?.bannerUrl.nullTransform(
+                (url) => Image.network(
+                  url.toString(),
+                  fit: BoxFit.cover,
+                ),
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Row(
+                  children: [
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text.rich(
+                            user?.renderDisplayName(context, ref) ??
+                                const TextSpan(text: "..."),
+                            maxLines: 1,
+                            overflow: TextOverflow.fade,
+                            softWrap: false,
+                            style: displayNameTextStyle,
+                          ),
+                          Text(
+                            user?.handle.toString() ?? "...",
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                            softWrap: false,
+                            style: handleTextStyle,
+                          ),
+                        ],
+                      ),
+                    ),
+                    ...actions,
+                  ],
+                ),
+                const SizedBox(height: 8),
+                if (user?.description != null)
+                  Text.rich(
+                    user?.renderDescription(context, ref) ??
+                        const TextSpan(
+                          text: "...",
+                        ),
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 2,
+                  ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

src/kaiteki/lib/ui/user/user_sliver.dart

@@ -5,6 +5,7 @@ import "package:kaiteki/fediverse/adapter.dart";
 import "package:kaiteki/fediverse/model/model.dart";
 import "package:kaiteki/ui/shared/error_landing_widget.dart";
 import "package:kaiteki/ui/shared/posts/user_list_dialog.dart";
+import "package:kaiteki/ui/shared/users/user_card.dart";
 import "package:kaiteki/utils/extensions.dart";
 import "package:tuple/tuple.dart";
 
@@ -96,14 +97,41 @@ class UserSliverState extends ConsumerState<UserSliver> {
 
   @override
   Widget build(BuildContext context) {
+    if (widget.wide) {
+      return PagedSliverGrid(
+        pagingController: _controller,
+        builderDelegate: PagedChildBuilderDelegate<User>(
+          itemBuilder: (context, item, index) {
+            return UserCard(item);
+          },
+          firstPageErrorIndicatorBuilder: (context) {
+            final t = _controller.error as Tuple2<Object, StackTrace>;
+            return Center(
+              child: ErrorLandingWidget(
+                error: t.item1,
+                stackTrace: t.item2,
+              ),
+            );
+          },
+        ),
+        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 2,
+          crossAxisSpacing: 8.0,
+          mainAxisSpacing: 8.0,
+        ),
+      );
+    }
+
     return PagedSliverList<dynamic, User>.separated(
       pagingController: _controller,
       builderDelegate: PagedChildBuilderDelegate<User>(
         itemBuilder: (context, item, index) {
-          return UserListTile(
-            user: item,
-            onPressed: () => context.showUser(item, ref),
-          );
+          return widget.wide
+              ? UserCard(item)
+              : UserListTile(
+                  user: item,
+                  onPressed: () => context.showUser(item, ref),
+                );
         },
         animateTransitions: true,
         firstPageErrorIndicatorBuilder: (context) {