lib/controllers/pinned_events_controller.dart

@@ -0,0 +1,69 @@
+import "package:fast_immutable_collections/fast_immutable_collections.dart";
+import "package:hooks_riverpod/hooks_riverpod.dart";
+import "package:nexus/controllers/client_controller.dart";
+import "package:nexus/controllers/event_controller.dart";
+import "package:nexus/controllers/rooms_controller.dart";
+import "package:nexus/models/content/content.dart";
+import "package:nexus/models/content/pinned_events.dart";
+import "package:nexus/models/event.dart";
+
+class PinnedEventsController extends AsyncNotifier<IList<Event>> {
+  final String roomId;
+  PinnedEventsController(this.roomId);
+
+  @override
+  Future<IList<Event>> build() async {
+    final room = ref.watch(
+      RoomsController.provider.select((rooms) => rooms[roomId]),
+    );
+
+    if (room == null) return .new();
+
+    final pinnedRowId = room.state[EventType.pinnedEvents.type]?[""];
+    final pinnedStateEvent = pinnedRowId == null
+        ? null
+        : room.events[pinnedRowId];
+
+    if (pinnedStateEvent == null) return .new();
+
+    if (pinnedStateEvent.content case PinnedEventsContent content) {
+      return (await Future.wait(
+        content.pinnedEvents.map(
+          (eventId) => ref.watch(
+            EventController.provider(
+              .new(eventId: eventId, roomId: roomId),
+            ).future,
+          ),
+        ),
+      )).nonNulls.toIList();
+    }
+
+    return .new();
+  }
+
+  Future<void> togglePin(Event event) async {
+    final client = ref.read(ClientController.provider.notifier);
+    final current = await future;
+
+    final updatedPinnedIds = current.any((e) => e.eventId == event.eventId)
+        ? current
+              .where((e) => e.eventId != event.eventId)
+              .map((e) => e.eventId)
+              .toList()
+        : [...current.map((e) => e.eventId), event.eventId];
+
+    await client.sendEvent(
+      .new(
+        roomId: roomId,
+        type: EventType.pinnedEvents.type,
+        stateKey: "",
+        content: {"pinned": updatedPinnedIds},
+      ),
+    );
+  }
+
+  static final provider = AsyncNotifierProvider.family
+      .autoDispose<PinnedEventsController, IList<Event>, String>(
+        PinnedEventsController.new,
+      );
+}

lib/models/content/pinned_events.dart

@@ -7,8 +7,9 @@ part "pinned_events.g.dart";
 @freezed
 abstract class PinnedEventsContent extends Content with _$PinnedEventsContent {
   PinnedEventsContent._();
-  factory PinnedEventsContent({@Default(IList.empty()) IList<String> pinned}) =
-      _PinnedEventsContent;
+  factory PinnedEventsContent({
+    @Default(IList.empty()) @JsonKey(name: "pinned") IList<String> pinnedEvents,
+  }) = _PinnedEventsContent;
 
   factory PinnedEventsContent.fromJson(Map<String, Object?> json) =>
       _$PinnedEventsContentFromJson(json);

lib/models/requests/send_event_request.dart

@@ -8,6 +8,7 @@ abstract class SendEventRequest with _$SendEventRequest {
     required String roomId,
     required String type,
     required Map<String, dynamic> content,
+    @Default(null) String? stateKey,
     @Default(false) bool synchronous,
     @Default(false) bool disableEncryption,
   }) = _SendEventRequest;

lib/widgets/member_list.dart

@@ -33,22 +33,10 @@ class MemberList extends HookConsumerWidget {
 
     return Drawer(
       shape: Border(),
-      child: Column(
+      child: Scaffold(
+        backgroundColor: Colors.transparent,
+        body: Column(
           children: [
-          if (Scaffold.of(context).hasEndDrawer)
-            AppBar(
-              scrolledUnderElevation: 0,
-              leading: Icon(Icons.people),
-              title: Text("Members"),
-              actionsPadding: .only(right: 4),
-              actions: [
-                IconButton(
-                  onPressed: Scaffold.of(context).closeEndDrawer,
-                  icon: Icon(Icons.close),
-                  tooltip: "Close member list",
-                ),
-              ],
-            ),
             Padding(
               padding: .symmetric(vertical: 8),
               child: M3EToggleButtonGroup(
@@ -180,6 +168,22 @@ class MemberList extends HookConsumerWidget {
             },
           ],
         ),
+        appBar: Scaffold.of(context).hasEndDrawer
+            ? AppBar(
+                scrolledUnderElevation: 0,
+                leading: Icon(Icons.people),
+                title: Text("Members"),
+                actionsPadding: .only(right: 4),
+                actions: [
+                  IconButton(
+                    onPressed: Scaffold.of(context).closeEndDrawer,
+                    icon: Icon(Icons.close),
+                    tooltip: "Close member list",
+                  ),
+                ],
+              )
+            : null,
+      ),
     );
   }
 }

lib/widgets/pinned_events_drawer.dart

@@ -0,0 +1,85 @@
+import "package:fast_immutable_collections/fast_immutable_collections.dart";
+import "package:flutter/material.dart";
+import "package:hooks_riverpod/hooks_riverpod.dart";
+import "package:nexus/controllers/pinned_events_controller.dart";
+import "package:nexus/models/event.dart";
+import "package:nexus/widgets/error_dialog.dart";
+import "package:nexus/widgets/loading.dart";
+import "package:nexus/widgets/renderers/event.dart";
+
+class PinnedEventsDrawer extends HookConsumerWidget {
+  final String roomId;
+  final IList<PopupMenuEntry> Function(Event event)? getEventOptions;
+  const PinnedEventsDrawer(this.roomId, {this.getEventOptions, super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final pinsProvider = ref.watch(PinnedEventsController.provider(roomId));
+    final theme = Theme.of(context);
+
+    return Drawer(
+      width: 600,
+      child: Scaffold(
+        backgroundColor: Colors.transparent,
+        appBar: AppBar(
+          scrolledUnderElevation: 0,
+          leading: Icon(Icons.push_pin),
+          title: Text("Pinned Messages"),
+          actionsPadding: .only(right: 4),
+          actions: [
+            IconButton(
+              onPressed: Scaffold.of(context).closeEndDrawer,
+              icon: Icon(Icons.close),
+              tooltip: "Close pinned messages",
+            ),
+          ],
+        ),
+        body: switch (pinsProvider) {
+          AsyncData(:final value) when value.isEmpty => Center(
+            child: Column(
+              children: [
+                Icon(
+                  Icons.push_pin_outlined,
+                  size: 48,
+                  color: theme.colorScheme.surfaceContainerHigh,
+                ),
+                SizedBox(height: 12),
+                Text(
+                  "No pinned messages.",
+                  style: theme.textTheme.headlineSmall,
+                ),
+              ],
+            ),
+          ),
+          AsyncData(:final value) ||
+          AsyncLoading(:final value?) => ListView.builder(
+            padding: .symmetric(horizontal: 8),
+            itemCount: value.length,
+            itemBuilder: (context, index) {
+              final event = value[index];
+
+              return InkWell(
+                borderRadius: .circular(12),
+                onTap: () {
+                  Navigator.pop(context);
+                  // TODO: // Close drawer, then scroll to the message
+                },
+                child: EventRenderer(
+                  event,
+                  maxLines: 2,
+                  isGrouped: false,
+                  getEventOptions: getEventOptions,
+                ),
+              );
+            },
+          ),
+          AsyncLoading() => Loading(),
+          AsyncError(:final error, :final stackTrace) => ErrorDialog(
+            error,
+            stackTrace,
+          ),
+        },
+      ),
+    );
+  }
+}

lib/widgets/room_appbar.dart

@@ -12,13 +12,15 @@ import "package:nexus/widgets/room_menu.dart";
 class RoomAppbar extends ConsumerWidget implements PreferredSizeWidget {
   final bool isDesktop;
   final void Function(BuildContext context)? onOpenMemberList;
-  final void Function(BuildContext context) onOpenDrawer;
+  final void Function()? onOpenPinnedMessagesList;
+  final void Function() onOpenDrawer;
   final String? roomId;
   const RoomAppbar({
     required this.roomId,
     required this.isDesktop,
     required this.onOpenDrawer,
     this.onOpenMemberList,
+    this.onOpenPinnedMessagesList,
     super.key,
   });
 
@@ -101,7 +103,7 @@ class RoomAppbar extends ConsumerWidget implements PreferredSizeWidget {
                     height: 24,
                     fallback: Icon(Icons.numbers),
                   )
-          : DrawerButton(onPressed: () => onOpenDrawer(context)),
+          : DrawerButton(onPressed: onOpenDrawer),
       scrolledUnderElevation: 0,
       title: room == null
           ? null
@@ -128,7 +130,7 @@ class RoomAppbar extends ConsumerWidget implements PreferredSizeWidget {
           ? .new()
           : .new([
               IconButton(
-                onPressed: null,
+                onPressed: onOpenPinnedMessagesList?.call,
                 icon: Icon(Icons.push_pin),
                 tooltip: "Open pinned messages",
               ),

lib/widgets/room_chat.dart

@@ -17,6 +17,7 @@ import "package:nexus/models/event.dart";
 import "package:nexus/models/relation_type.dart";
 import "package:nexus/widgets/composer/composer.dart";
 import "package:nexus/widgets/emoji_picker_button.dart";
+import "package:nexus/widgets/pinned_events_drawer.dart";
 import "package:nexus/widgets/renderers/event.dart";
 import "package:nexus/widgets/member_list.dart";
 import "package:nexus/widgets/room_appbar.dart";
@@ -61,8 +62,7 @@ class RoomChat extends HookConsumerWidget {
         appBar: RoomAppbar(
           roomId: this.roomId,
           isDesktop: isDesktop,
-          onOpenDrawer: (_) => Scaffold.of(context).openDrawer(),
-          onOpenMemberList: null,
+          onOpenDrawer: () => Scaffold.of(context).openDrawer(),
         ),
         body: nothing,
       );
@@ -384,14 +384,21 @@ class RoomChat extends HookConsumerWidget {
     }
 
     return Scaffold(
+      endDrawer: PinnedEventsDrawer(roomId, getEventOptions: getEventOptions),
+      body: Builder(
+        builder: (middleContext) => Scaffold(
+          endDrawer: showMembersByDefault ? null : MemberList(roomId),
           appBar: RoomAppbar(
             roomId: roomId,
             isDesktop: isDesktop,
-        onOpenDrawer: (_) => Scaffold.of(context).openDrawer(),
+            onOpenDrawer: Scaffold.of(context).openDrawer,
             onOpenMemberList: (thisContext) {
               memberListOpened.value = !memberListOpened.value;
               Scaffold.of(thisContext).openEndDrawer();
             },
+            onOpenPinnedMessagesList: () {
+              Scaffold.of(middleContext).openEndDrawer();
+            },
           ),
           body: Row(
             children: [
@@ -425,7 +432,9 @@ class RoomChat extends HookConsumerWidget {
                                 itemCount: value.length,
                                 itemBuilder: (_, index) {
                                   final event = value[index];
-                              final previousEvent = value.getOrNull(index - 1);
+                                  final previousEvent = value.getOrNull(
+                                    index - 1,
+                                  );
                                   return HighlightWrapper(
                                     EventRenderer(
                                       event,
@@ -433,19 +442,25 @@ class RoomChat extends HookConsumerWidget {
                                         final replyId = event.replyTo;
                                         listController.value.animateToItem(
                                           index: value.indexWhere(
-                                        (element) => element.eventId == replyId,
+                                            (element) =>
+                                                element.eventId == replyId,
                                           ),
                                           scrollController: scrollController,
                                           alignment: 0.5,
-                                      duration: (_) => .new(milliseconds: 700),
+                                          duration: (_) =>
+                                              .new(milliseconds: 700),
                                           curve: (_) => Curves.easeInOut,
                                         );
                                         highlightedEvent.value = replyId;
-                                    await Future.delayed(.new(seconds: 1), () {
-                                      if (highlightedEvent.value == replyId) {
+                                        await Future.delayed(
+                                          .new(seconds: 1),
+                                          () {
+                                            if (highlightedEvent.value ==
+                                                replyId) {
                                               highlightedEvent.value = null;
                                             }
-                                    });
+                                          },
+                                        );
                                       },
                                       getEventOptions: getEventOptions,
                                       isGrouped:
@@ -484,7 +499,8 @@ class RoomChat extends HookConsumerWidget {
                         child: Composer(
                           roomId,
                           node: composerNode,
-                      onSend: (text, {required shouldMention, required tags}) =>
+                          onSend:
+                              (text, {required shouldMention, required tags}) =>
                                   notifier
                                       .send(
                                         text,
@@ -508,7 +524,8 @@ class RoomChat extends HookConsumerWidget {
                 MemberList(roomId),
             ],
           ),
-      endDrawer: showMembersByDefault ? null : MemberList(roomId),
+        ),
+      ),
     );
   }
 }