✨ Realm discovery and more detailed realm

lib/screens/account.dart

@@ -200,7 +200,7 @@ class AccountScreen extends HookConsumerWidget {
                 ],
               ),
               onTap: () {
-                context.push('/notification');
+                context.push('/account/notifications');
               },
             ),
             ListTile(

lib/screens/chat/room.dart

@@ -295,6 +295,20 @@ class ChatRoomScreen extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final chatRoom = ref.watch(chatroomProvider(id));
     final chatIdentity = ref.watch(chatroomIdentityProvider(id));
+
+    if (chatIdentity.isLoading || chatRoom.isLoading) {
+      return AppScaffold(
+        appBar: AppBar(leading: const PageBackButton()),
+        body: CircularProgressIndicator().center(),
+      );
+    } else if (chatIdentity.value == null) {
+      // Identity was not found, user was not joined
+      return AppScaffold(
+        appBar: AppBar(leading: const PageBackButton()),
+        body: Center(child: Text('You are not a member of this chat room')),
+      );
+    }
+
     final messages = ref.watch(messagesNotifierProvider(id));
     final messagesNotifier = ref.read(messagesNotifierProvider(id).notifier);
     final ws = ref.watch(websocketProvider);

lib/screens/discovery/realms.dart

@@ -0,0 +1,24 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:island/widgets/app_scaffold.dart';
+import 'package:island/widgets/realm/realm_list.dart';
+
+class DiscoveryRealmsScreen extends HookConsumerWidget {
+  const DiscoveryRealmsScreen({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return AppScaffold(
+      appBar: AppBar(title: Text('discoverRealms'.tr())),
+      body: CustomScrollView(
+        slivers: [
+          SliverGap(16),
+          SliverRealmList(),
+          SliverGap(MediaQuery.of(context).padding.bottom + 16),
+        ],
+      ),
+    );
+  }
+}

lib/screens/explore.dart

@@ -5,6 +5,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/models/activity.dart';
+import 'package:island/models/realm.dart';
 import 'package:island/pods/userinfo.dart';
 import 'package:island/services/responsive.dart';
 import 'package:island/widgets/app_scaffold.dart';
@@ -17,8 +18,8 @@ import 'package:material_symbols_icons/symbols.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:riverpod_paging_utils/riverpod_paging_utils.dart';
 import 'package:island/pods/network.dart';
+import 'package:island/widgets/realm/realm_card.dart';
 import 'package:styled_widget/styled_widget.dart';
-import 'package:island/models/realm.dart';
 
 part 'explore.g.dart';
 
@@ -206,7 +207,7 @@ class _DiscoveryActivityItem extends StatelessWidget {
             padding: const EdgeInsets.only(right: 8),
             itemBuilder: (context, index) {
               final realm = items[index];
-              return _RealmCard(realm: realm);
+              return RealmCard(realm: realm);
             },
           ),
         ),
@@ -215,86 +216,6 @@ class _DiscoveryActivityItem extends StatelessWidget {
   }
 }
 
-class _RealmCard extends ConsumerWidget {
-  final SnRealm realm;
-
-  const _RealmCard({required this.realm});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final client = ref.watch(apiClientProvider);
-
-    Widget imageWidget;
-    if (realm.picture != null) {
-      final imageUrl = '${client.options.baseUrl}/files/${realm.picture!.id}';
-      imageWidget = Image.network(
-        imageUrl,
-        fit: BoxFit.cover,
-        width: double.infinity,
-        height: double.infinity,
-      );
-    } else {
-      imageWidget = Container(
-        color: Theme.of(context).colorScheme.secondaryContainer,
-        child: Center(
-          child: Icon(
-            Symbols.photo_camera,
-            color: Theme.of(context).colorScheme.onSecondaryContainer,
-          ),
-        ),
-      );
-    }
-
-    return Card(
-      clipBehavior: Clip.antiAlias,
-      margin: const EdgeInsets.only(left: 16, bottom: 8, top: 8),
-      child: InkWell(
-        onTap: () {
-          context.push('/realms/${realm.slug}');
-        },
-        child: ConstrainedBox(
-          constraints: const BoxConstraints(maxWidth: 280),
-          child: AspectRatio(
-            aspectRatio: 16 / 7,
-            child: Stack(
-              children: [
-                imageWidget,
-                Positioned(
-                  bottom: 0,
-                  left: 0,
-                  right: 0,
-                  child: Container(
-                    decoration: BoxDecoration(
-                      gradient: LinearGradient(
-                        begin: Alignment.bottomCenter,
-                        end: Alignment.topCenter,
-                        colors: [
-                          Colors.black.withOpacity(0.7),
-                          Colors.transparent,
-                        ],
-                      ),
-                    ),
-                    padding: const EdgeInsets.all(8),
-                    child: Text(
-                      realm.name,
-                      style: Theme.of(context).textTheme.titleSmall?.copyWith(
-                        color: Colors.white,
-                        fontWeight: FontWeight.bold,
-                      ),
-                      maxLines: 2,
-                      overflow: TextOverflow.ellipsis,
-                    ),
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
 class _ActivityListView extends HookConsumerWidget {
   final CursorPagingData<SnActivity> data;
   final int widgetCount;

lib/screens/realm/detail.dart

@@ -41,9 +41,16 @@ Future<Color?> realmAppbarForegroundColor(Ref ref, String realmSlug) async {
 
 @riverpod
 Future<SnRealmMember?> realmIdentity(Ref ref, String realmSlug) async {
-  final apiClient = ref.watch(apiClientProvider);
-  final response = await apiClient.get('/realms/$realmSlug/members/me');
-  return SnRealmMember.fromJson(response.data);
+  try {
+    final apiClient = ref.watch(apiClientProvider);
+    final response = await apiClient.get('/realms/$realmSlug/members/me');
+    return SnRealmMember.fromJson(response.data);
+  } catch (err) {
+    if (err is DioException && err.response?.statusCode == 404) {
+      return null; // No identity found, user is not a member
+    }
+    rethrow;
+  }
 }
 
 @riverpod
@@ -135,12 +142,14 @@ class RealmDetailScreen extends HookConsumerWidget {
                                   tilePadding: EdgeInsets.symmetric(
                                     horizontal: 20,
                                   ),
+                                  expandedCrossAxisAlignment:
+                                      CrossAxisAlignment.stretch,
                                   children: [
                                     Text(
                                       realm.description,
                                       style: const TextStyle(fontSize: 16),
                                     ).padding(
-                                      horizontal: 16,
+                                      horizontal: 20,
                                       bottom: 16,
                                       top: 8,
                                     ),
@@ -160,13 +169,14 @@ class RealmDetailScreen extends HookConsumerWidget {
                                           realmIdentityProvider(slug),
                                         );
                                         ref.invalidate(realmsJoinedProvider);
+                                        showSnackBar('joinRealmSuccess'.tr());
                                       } catch (err) {
                                         showErrorAlert(err);
                                       }
                                     },
                                     icon: const Icon(Symbols.add),
                                     label: const Text('joinRealm').tr(),
-                                  ).padding(horizontal: 16, vertical: 4)
+                                  ).padding(horizontal: 16, vertical: 8)
                                 else
                                   const SizedBox.shrink(),
                               ],

lib/screens/realm/detail.g.dart

@@ -155,7 +155,7 @@ class _RealmAppbarForegroundColorProviderElement
       (origin as RealmAppbarForegroundColorProvider).realmSlug;
 }
 
-String _$realmIdentityHash() => r'eac6e829b5b46bcfadbf201ab6f918d78c894b9f';
+String _$realmIdentityHash() => r'308d43eef8a6145c762d27bdf7e12e27149524db';
 
 /// See also [realmIdentity].
 @ProviderFor(realmIdentity)

lib/screens/realm/realms.dart

@@ -46,6 +46,10 @@ class RealmListScreen extends HookConsumerWidget {
       appBar: AppBar(
         title: const Text('realms').tr(),
         actions: [
+          IconButton(
+            icon: const Icon(Symbols.travel_explore),
+            onPressed: () => context.push('/discovery/realms'),
+          ),
           IconButton(
             icon: Badge(
               label: Text(