Support for pinned messages (#49)

The first draft to support pinned messages. Fixes #39.

Co-authored-by: Henry-Hiles <henry@henryhiles.com>
Reviewed-on: #49

README.md

@@ -94,9 +94,9 @@ A simple and user-friendly Matrix client made with Flutter and a Gomuks backend.
     - [x] Editing
     - [x] Deleting
 - [x] Reactions
-- [ ] Pins
-    - [ ] Displaying
-    - [ ] Creating
+- [x] Pins
+    - [x] Displaying
+    - [x] Creating
 - [ ] Threads
 - [x] Profile popouts
     - [x] Working actions

lib/controllers/client_controller.dart

@@ -28,6 +28,7 @@ import "package:nexus/models/requests/report_request.dart";
 import "package:nexus/models/requests/send_event_request.dart";
 import "package:nexus/models/requests/send_message_request.dart";
 import "package:nexus/models/requests/set_membership_request.dart";
+import "package:nexus/models/requests/set_state_request.dart";
 import "package:nexus/models/room.dart";
 import "package:nexus/models/sync_data.dart";
 import "package:nexus/src/third_party/gomuks.g.dart";
@@ -159,7 +160,10 @@ class ClientController extends AsyncNotifier<int> {
     calloc.free(bufferPointer);
 
     final json = response.buf.toJson();
-    if (json is String) throw json;
+    if (response.command.cast<Utf8>().toDartString() == "error") {
+      throw json;
+    }
+
     return json;
   }
 
@@ -169,8 +173,27 @@ class ClientController extends AsyncNotifier<int> {
   Future<Event> sendMessage(SendMessageRequest request) async =>
       Event.fromJson(await _sendCommand("send_message", request.toJson()));
 
-  Future<Event> sendEvent(SendEventRequest request) async =>
-      Event.fromJson(await _sendCommand("send_event", request.toJson()));
+  Future<Event> sendEvent(SendEventRequest request) async {
+    final json = request.toJson();
+    final content = request.content.toJson();
+
+    return Event.fromJson(
+      await _sendCommand("send_event", {
+        ...json,
+        "content": {
+          ...content,
+          "m.relates_to": {
+            ...((content["m.relates_to"] as Map<String, dynamic>?) ?? {}),
+            "event_id": request.relatesTo,
+            "rel_type": request.relationType,
+          },
+        },
+      }),
+    );
+  }
+
+  Future<String?> setState(SetStateRequest request) async =>
+      await _sendCommand("set_state", request.toJson());
 
   Future<String?> verify(String recoveryKey) async {
     try {

lib/controllers/pinned_events_controller.dart

@@ -0,0 +1,30 @@
+import "package:fast_immutable_collections/fast_immutable_collections.dart";
+import "package:hooks_riverpod/hooks_riverpod.dart";
+import "package:nexus/controllers/event_controller.dart";
+import "package:nexus/controllers/pinned_ids_controller.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 pinIds = ref.watch(PinnedIdsController.provider(roomId));
+
+    return (await Future.wait(
+      pinIds.map(
+        (eventId) => ref.watch(
+          EventController.provider(
+            .new(eventId: eventId, roomId: roomId),
+          ).future,
+        ),
+      ),
+    )).nonNulls.toIList();
+  }
+
+  static final provider = AsyncNotifierProvider.family
+      .autoDispose<PinnedEventsController, IList<Event>, String>(
+        PinnedEventsController.new,
+      );
+}

lib/controllers/pinned_ids_controller.dart

@@ -0,0 +1,53 @@
+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/rooms_controller.dart";
+import "package:nexus/models/content/content.dart";
+import "package:nexus/models/content/pinned_events.dart";
+
+class PinnedIdsController extends Notifier<IList<String>> {
+  final String roomId;
+  PinnedIdsController(this.roomId);
+
+  @override
+  IList<String> build() {
+    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?.content case PinnedEventsContent content) {
+      return content.pinnedEvents;
+    }
+
+    return .new();
+  }
+
+  Future<void> addPin(String eventId) async =>
+      setPinned(.new(pinnedEvents: .new(state.add(eventId))));
+
+  Future<void> removePin(String eventId) async =>
+      setPinned(.new(pinnedEvents: .new(state.remove(eventId))));
+
+  Future<void> setPinned(PinnedEventsContent content) => ref
+      .read(ClientController.provider.notifier)
+      .setState(
+        .new(
+          roomId: roomId,
+          type: EventType.pinnedEvents.type,
+          stateKey: "",
+          content: content,
+        ),
+      );
+
+  static final provider = NotifierProvider.family
+      .autoDispose<PinnedIdsController, IList<String>, String>(
+        PinnedIdsController.new,
+      );
+}

lib/controllers/room_chat_controller.dart

@@ -205,15 +205,11 @@ class RoomChatController extends AsyncNotifier<IList<Event>?> {
       .new(
         roomId: roomId,
         type: EventType.reaction.type,
-        content: {
-          "m.relates_to": {
-            "event_id": event.eventId,
-            "rel_type": "m.annotation",
-            "key": reaction,
-          },
-        },
+        content: ReactionContent(key: reaction),
         synchronous: true,
         disableEncryption: true,
+        relatesTo: event.eventId,
+        relationType: "m.annotation",
       ),
     );
   }

lib/models/content/message.dart

@@ -10,7 +10,7 @@ part "message.g.dart";
 @Freezed(unionKey: "msgtype", fallbackUnion: "default")
 abstract class MessageContent extends Content with _$MessageContent {
   MessageContent._();
-  factory MessageContent({required String body}) = UnknownMessageContent;
+  factory MessageContent({String? body}) = UnknownMessageContent;
 
   @FreezedUnionValue("m.text")
   factory MessageContent.text({

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/content/reaction.dart

@@ -3,7 +3,7 @@ import "package:nexus/models/content/content.dart";
 part "reaction.freezed.dart";
 part "reaction.g.dart";
 
-@freezed
+@Freezed(toJson: false)
 abstract class ReactionContent extends Content with _$ReactionContent {
   ReactionContent._();
   static String? keyJsonFromJson(Map<dynamic, dynamic> json, String key) =>
@@ -13,6 +13,11 @@ abstract class ReactionContent extends Content with _$ReactionContent {
     @JsonKey(readValue: ReactionContent.keyJsonFromJson) String? key,
   }) = _ReactionContent;
 
+  @override
+  Map<String, dynamic> toJson() => {
+    "m.relates_to": {"key": key},
+  };
+
   factory ReactionContent.fromJson(Map<String, Object?> json) =>
       _$ReactionContentFromJson(json);
 }

lib/models/requests/send_event_request.dart

@@ -1,4 +1,5 @@
 import "package:freezed_annotation/freezed_annotation.dart";
+import "package:nexus/models/content/content.dart";
 part "send_event_request.freezed.dart";
 part "send_event_request.g.dart";
 
@@ -7,7 +8,9 @@ abstract class SendEventRequest with _$SendEventRequest {
   const factory SendEventRequest({
     required String roomId,
     required String type,
-    required Map<String, dynamic> content,
+    required Content content,
+    String? relatesTo,
+    String? relationType,
     @Default(false) bool synchronous,
     @Default(false) bool disableEncryption,
   }) = _SendEventRequest;

lib/models/requests/set_state_request.dart

@@ -0,0 +1,23 @@
+import "package:freezed_annotation/freezed_annotation.dart";
+import "package:nexus/models/content/content.dart";
+import "package:nexus/models/ms_duration.dart";
+part "set_state_request.freezed.dart";
+part "set_state_request.g.dart";
+
+@freezed
+abstract class SetStateRequest with _$SetStateRequest {
+  const factory SetStateRequest({
+    required String roomId,
+    required String type,
+    required String stateKey,
+    required Content content,
+
+    @JsonKey(name: "delay_ms", includeIfNull: false)
+    @MSDuration()
+    @Default(null)
+    Duration? delay,
+  }) = _SetStateRequest;
+
+  factory SetStateRequest.fromJson(Map<String, Object?> json) =>
+      _$SetStateRequestFromJson(json);
+}

lib/widgets/member_list.dart

@@ -33,152 +33,156 @@ class MemberList extends HookConsumerWidget {
 
     return Drawer(
       shape: Border(),
-      child: 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(
-              selectedIndex: statusIndex.value,
-              onSelectedIndexChanged: (index) =>
-                  statusIndex.value = index ?? statusIndex.value,
-              actions: options
-                  .mapTo(
-                    (name, value) => M3EToggleButtonGroupAction(
-                      checkedLabel: Text(
-                        "$name${switch (ref.watch(MembersByStatusController.provider(.new(roomId: roomId, status: value)))) {
-                          AsyncData(:final value) || AsyncLoading(:final value?) => " (${value.length})",
-                          _ => "",
-                        }}",
-                      ),
-                      label: Text(name),
-                    ),
-                  )
-                  .toList(),
-            ),
-          ),
-
-          switch (ref.watch(
-            MembersGroupedController.provider(
-              .new(roomId: roomId, status: status),
-            ),
-          )) {
-            AsyncError(:final error, :final stackTrace) => ErrorDialog(
-              error,
-              stackTrace,
-            ),
-            AsyncData(:final value) || AsyncLoading(:final value?) =>
-              value.isEmpty
-                  ? Center(
-                      child: Padding(
-                        padding: .symmetric(vertical: 18),
-                        child: Text(
-                          "No ${options.keys.toIList()[statusIndex.value]} Members",
-                          style: Theme.of(context).textTheme.headlineSmall,
+      child: Scaffold(
+        backgroundColor: Colors.transparent,
+        body: Column(
+          children: [
+            Padding(
+              padding: .symmetric(vertical: 8),
+              child: M3EToggleButtonGroup(
+                selectedIndex: statusIndex.value,
+                onSelectedIndexChanged: (index) =>
+                    statusIndex.value = index ?? statusIndex.value,
+                actions: options
+                    .mapTo(
+                      (name, value) => M3EToggleButtonGroupAction(
+                        checkedLabel: Text(
+                          "$name${switch (ref.watch(MembersByStatusController.provider(.new(roomId: roomId, status: value)))) {
+                            AsyncData(:final value) || AsyncLoading(:final value?) => " (${value.length})",
+                            _ => "",
+                          }}",
                         ),
+                        label: Text(name),
                       ),
                     )
-                  : Expanded(
-                      child: CustomScrollView(
-                        slivers: [
-                          for (final MapEntry(key: powerLevel, value: members)
-                              in value) ...[
-                            SliverToBoxAdapter(
-                              child: Padding(
-                                padding: .symmetric(horizontal: 16),
-                                child: DividerText(
-                                  powerLevel == null
-                                      ? "Creators"
-                                      : "Power Level $powerLevel",
+                    .toList(),
+              ),
+            ),
+
+            switch (ref.watch(
+              MembersGroupedController.provider(
+                .new(roomId: roomId, status: status),
+              ),
+            )) {
+              AsyncError(:final error, :final stackTrace) => ErrorDialog(
+                error,
+                stackTrace,
+              ),
+              AsyncData(:final value) || AsyncLoading(:final value?) =>
+                value.isEmpty
+                    ? Center(
+                        child: Padding(
+                          padding: .symmetric(vertical: 18),
+                          child: Text(
+                            "No ${options.keys.toIList()[statusIndex.value]} Members",
+                            style: Theme.of(context).textTheme.headlineSmall,
+                          ),
+                        ),
+                      )
+                    : Expanded(
+                        child: CustomScrollView(
+                          slivers: [
+                            for (final MapEntry(key: powerLevel, value: members)
+                                in value) ...[
+                              SliverToBoxAdapter(
+                                child: Padding(
+                                  padding: .symmetric(horizontal: 16),
+                                  child: DividerText(
+                                    powerLevel == null
+                                        ? "Creators"
+                                        : "Power Level $powerLevel",
+                                  ),
                                 ),
                               ),
-                            ),
-                            SliverM3ECardList(
-                              padding: .all(4),
-                              color: Theme.of(
-                                context,
-                              ).colorScheme.surfaceContainerHigh,
-                              margin: .symmetric(horizontal: 12, vertical: 4),
-                              itemCount: members.length,
-                              itemBuilder: (context, index) =>
-                                  switch (members[index].content) {
-                                    MembershipContent(
-                                      :final avatarUrl,
-                                      :final displayName,
-                                    ) =>
-                                      ListTile(
-                                        title: Text(
-                                          displayName ??
-                                              members[index]
+                              SliverM3ECardList(
+                                padding: .all(4),
+                                color: Theme.of(
+                                  context,
+                                ).colorScheme.surfaceContainerHigh,
+                                margin: .symmetric(horizontal: 12, vertical: 4),
+                                itemCount: members.length,
+                                itemBuilder: (context, index) =>
+                                    switch (members[index].content) {
+                                      MembershipContent(
+                                        :final avatarUrl,
+                                        :final displayName,
+                                      ) =>
+                                        ListTile(
+                                          title: Text(
+                                            displayName ??
+                                                members[index]
+                                                    .stateKey!
+                                                    .localpart,
+                                            overflow: .ellipsis,
+                                            style: .new(
+                                              color: members[index]
                                                   .stateKey!
-                                                  .localpart,
-                                          overflow: .ellipsis,
-                                          style: .new(
-                                            color: members[index]
-                                                .stateKey!
-                                                .colorHash,
-                                            fontWeight: .bold,
+                                                  .colorHash,
+                                              fontWeight: .bold,
+                                            ),
+                                          ),
+                                          subtitle: Text(
+                                            members[index].stateKey!,
+                                            overflow: .ellipsis,
+                                          ),
+                                          leading: AvatarOrHash(
+                                            avatarUrl,
+                                            height: 36,
+                                            displayName ??
+                                                members[index]
+                                                    .stateKey!
+                                                    .localpart,
                                           ),
                                         ),
-                                        subtitle: Text(
-                                          members[index].stateKey!,
-                                          overflow: .ellipsis,
-                                        ),
-                                        leading: AvatarOrHash(
-                                          avatarUrl,
-                                          height: 36,
-                                          displayName ??
-                                              members[index]
-                                                  .stateKey!
-                                                  .localpart,
+                                      _ => throw Exception(
+                                        "Member content was not MembershipContent",
+                                      ),
+                                    },
+                                onTap: (index) {
+                                  final member = members[index];
+                                  if (member.content
+                                      case MembershipContent content) {
+                                    showModalBottomSheet(
+                                      constraints: .loose(
+                                        .new(
+                                          500,
+                                          (context.size?.height ?? 1000) - 80,
                                         ),
                                       ),
-                                    _ => throw Exception(
-                                      "Member content was not MembershipContent",
-                                    ),
-                                  },
-                              onTap: (index) {
-                                final member = members[index];
-                                if (member.content
-                                    case MembershipContent content) {
-                                  showModalBottomSheet(
-                                    constraints: BoxConstraints.loose(
-                                      Size(
-                                        500,
-                                        (context.size?.height ?? 1000) - 80,
+                                      isScrollControlled: true,
+                                      context: context,
+                                      builder: (context) => UserBottomSheet(
+                                        content,
+                                        member.stateKey!,
+                                        roomId: roomId,
                                       ),
-                                    ),
-                                    isScrollControlled: true,
-                                    context: context,
-                                    builder: (context) => UserBottomSheet(
-                                      content,
-                                      member.stateKey!,
-                                      roomId: roomId,
-                                    ),
-                                  );
-                                }
-                              },
-                            ),
+                                    );
+                                  }
+                                },
+                              ),
+                            ],
                           ],
-                        ],
+                        ),
                       ),
-                    ),
-            AsyncLoading _ => Loading(),
-          },
-        ],
+              AsyncLoading _ => Loading(),
+            },
+          ],
+        ),
+        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,92 @@
+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;
+  final Future<void> Function(String eventId) jumpToId;
+  const PinnedEventsDrawer(
+    this.roomId, {
+    required this.getEventOptions,
+    required this.jumpToId,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final pinsProvider = ref.watch(PinnedEventsController.provider(roomId));
+    final theme = Theme.of(context);
+
+    return Drawer(
+      width: 400,
+      child: Scaffold(
+        backgroundColor: Colors.transparent,
+        appBar: AppBar(
+          scrolledUnderElevation: 0,
+          leading: Icon(Icons.push_pin),
+          title: Text("Pinned Events"),
+          actionsPadding: .only(right: 4),
+          actions: [
+            IconButton(
+              onPressed: Scaffold.of(context).closeEndDrawer,
+              icon: Icon(Icons.close),
+              tooltip: "Close pinned events",
+            ),
+          ],
+        ),
+        body: switch (pinsProvider) {
+          AsyncData(:final value) when value.isEmpty => Center(
+            child: Column(
+              mainAxisSize: .min,
+              children: [
+                Icon(
+                  Icons.push_pin_outlined,
+                  size: 48,
+                  color: theme.colorScheme.onSurface,
+                ),
+                SizedBox(height: 12),
+                Text("No pinned events", 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);
+                  jumpToId(event.eventId);
+                },
+                child: Padding(
+                  padding: .symmetric(vertical: 4),
+                  child: EventRenderer(
+                    event,
+                    maxLines: 2,
+                    isGrouped: false,
+                    getEventOptions: getEventOptions,
+                  ),
+                ),
+              );
+            },
+          ),
+          AsyncLoading() => Loading(),
+          AsyncError(:final error, :final stackTrace) => ErrorDialog(
+            error,
+            stackTrace,
+          ),
+        },
+      ),
+    );
+  }
+}

lib/widgets/renderers/message.dart

@@ -276,14 +276,23 @@ class MessageRenderer extends ConsumerWidget {
                             ],
                           ],
                         ),
-                        MessageContent(:final body) => Row(
-                          spacing: 8,
-                          mainAxisSize: .min,
-                          children: [
-                            Text("Unknown message type:", style: errorStyle),
-                            Text(body),
-                          ],
-                        ),
+                        MessageContent(:final body) =>
+                          body == null
+                              ? Text(
+                                  "This message is redacted",
+                                  style: errorStyle,
+                                )
+                              : Row(
+                                  spacing: 8,
+                                  mainAxisSize: .min,
+                                  children: [
+                                    Text(
+                                      "Unknown message type:",
+                                      style: errorStyle,
+                                    ),
+                                    Text(body),
+                                  ],
+                                ),
                         _ => throw Exception("This is impossible"),
                       },
                     ],

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

@@ -7,16 +7,17 @@ import "package:measure_size/measure_size.dart";
 import "package:nexus/controllers/account_data_controller.dart";
 import "package:nexus/controllers/client_controller.dart";
 import "package:nexus/controllers/client_state_controller.dart";
+import "package:nexus/controllers/pinned_ids_controller.dart";
 import "package:nexus/controllers/power_level_controller.dart";
 import "package:nexus/controllers/rooms_controller.dart";
 import "package:nexus/controllers/room_chat_controller.dart";
 import "package:nexus/controllers/via_controller.dart";
-import "package:nexus/models/configs/power_level_config.dart";
 import "package:nexus/models/content/message.dart";
 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,
       );
@@ -81,6 +81,27 @@ class RoomChat extends HookConsumerWidget {
 
     final topEventBeforeLoad = useState<String?>(null);
 
+    Future<void> jumpToId(String eventId) async {
+      final index = controllerData.value?.indexWhere(
+        (element) => element.eventId == eventId,
+      );
+      if (index == null) return;
+
+      listController.value.animateToItem(
+        index: index,
+        scrollController: scrollController,
+        alignment: 0.5,
+        duration: (_) => .new(milliseconds: 700),
+        curve: (_) => Curves.easeInOut,
+      );
+      highlightedEvent.value = eventId;
+      await Future.delayed(.new(seconds: 1), () {
+        if (highlightedEvent.value == eventId) {
+          highlightedEvent.value = null;
+        }
+      });
+    }
+
     Future<void> loadOlder() async {
       if (controllerData case AsyncData(:final value?)) {
         topEventBeforeLoad.value = value.firstOrNull?.eventId;
@@ -177,6 +198,7 @@ class RoomChat extends HookConsumerWidget {
     IList<PopupMenuEntry> getEventOptions(Event event) {
       final danger = theme.colorScheme.error;
       final isSentByMe = event.sender == userId;
+
       return [
         if (ref.watch(
           PowerLevelController.provider(
@@ -229,7 +251,7 @@ class RoomChat extends HookConsumerWidget {
           ),
         if (ref.watch(
           PowerLevelController.provider(
-            PowerLevelConfig(eventType: .message, roomId: roomId),
+            .new(eventType: .message, roomId: roomId),
           ),
         ))
           PopupMenuItem(
@@ -249,6 +271,35 @@ class RoomChat extends HookConsumerWidget {
             },
             child: ListTile(leading: Icon(Icons.edit), title: Text("Edit")),
           ),
+        if (ref.watch(
+          PowerLevelController.provider(
+            .state(eventType: .pinnedEvents, roomId: roomId),
+          ),
+        ))
+          switch (ref
+              .watch(PinnedIdsController.provider(roomId))
+              .contains(event.eventId)) {
+            bool isPinned => PopupMenuItem(
+              onTap: () async {
+                try {
+                  final notifier = ref.read(
+                    PinnedIdsController.provider(roomId).notifier,
+                  );
+                  if (isPinned) {
+                    await notifier.removePin(event.eventId);
+                  } else {
+                    await notifier.addPin(event.eventId);
+                  }
+                } catch (error, stackTrace) {
+                  showError(error, stackTrace);
+                }
+              },
+              child: ListTile(
+                leading: Icon(Icons.push_pin),
+                title: Text(isPinned == true ? "Unpin Event" : "Pin Event"),
+              ),
+            ),
+          },
         PopupMenuItem(
           onTap: () async {
             final room = ref.watch(
@@ -384,131 +435,130 @@ class RoomChat extends HookConsumerWidget {
     }
 
     return Scaffold(
-      appBar: RoomAppbar(
-        roomId: roomId,
-        isDesktop: isDesktop,
-        onOpenDrawer: (_) => Scaffold.of(context).openDrawer(),
-        onOpenMemberList: (thisContext) {
-          memberListOpened.value = !memberListOpened.value;
-          Scaffold.of(thisContext).openEndDrawer();
-        },
+      endDrawer: PinnedEventsDrawer(
+        roomId,
+        getEventOptions: getEventOptions,
+        jumpToId: jumpToId,
       ),
-      body: Row(
-        children: [
-          Expanded(
-            child: Stack(
-              children: [
-                Positioned.fill(
-                  child: Padding(
-                    padding: .symmetric(horizontal: 4),
-                    child: switch (controllerData) {
-                      AsyncData(:final value?) ||
-                      AsyncLoading(:final value?) => CustomScrollView(
-                        controller: scrollController,
-                        slivers: [
-                          SliverToBoxAdapter(
-                            child: Padding(
-                              padding: .symmetric(vertical: 36),
-                              child: Center(
-                                child: ElevatedButton(
-                                  onPressed: controllerData is AsyncData
-                                      ? loadOlder
-                                      : null,
-                                  child: Text("Load More"),
+      body: Builder(
+        builder: (middleContext) => Scaffold(
+          endDrawer: showMembersByDefault ? null : MemberList(roomId),
+          appBar: RoomAppbar(
+            roomId: roomId,
+            isDesktop: isDesktop,
+            onOpenDrawer: Scaffold.of(context).openDrawer,
+            onOpenMemberList: (thisContext) {
+              memberListOpened.value = !memberListOpened.value;
+              Scaffold.of(thisContext).openEndDrawer();
+            },
+            onOpenPinnedMessagesList: () {
+              Scaffold.of(middleContext).openEndDrawer();
+            },
+          ),
+          body: Row(
+            children: [
+              Expanded(
+                child: Stack(
+                  children: [
+                    Positioned.fill(
+                      child: Padding(
+                        padding: .symmetric(horizontal: 4),
+                        child: switch (controllerData) {
+                          AsyncData(:final value?) ||
+                          AsyncLoading(:final value?) => CustomScrollView(
+                            controller: scrollController,
+                            slivers: [
+                              SliverToBoxAdapter(
+                                child: Padding(
+                                  padding: .symmetric(vertical: 36),
+                                  child: Center(
+                                    child: ElevatedButton(
+                                      onPressed: controllerData is AsyncData
+                                          ? loadOlder
+                                          : null,
+                                      child: Text("Load More"),
+                                    ),
+                                  ),
                                 ),
                               ),
-                            ),
-                          ),
 
-                          SuperSliverList.builder(
-                            listController: listController.value,
-                            itemCount: value.length,
-                            itemBuilder: (_, index) {
-                              final event = value[index];
-                              final previousEvent = value.getOrNull(index - 1);
-                              return HighlightWrapper(
-                                EventRenderer(
-                                  event,
-                                  onTapReply: () async {
-                                    final replyId = event.replyTo;
-                                    listController.value.animateToItem(
-                                      index: value.indexWhere(
-                                        (element) => element.eventId == replyId,
-                                      ),
-                                      scrollController: scrollController,
-                                      alignment: 0.5,
-                                      duration: (_) => .new(milliseconds: 700),
-                                      curve: (_) => Curves.easeInOut,
-                                    );
-                                    highlightedEvent.value = replyId;
-                                    await Future.delayed(.new(seconds: 1), () {
-                                      if (highlightedEvent.value == replyId) {
-                                        highlightedEvent.value = null;
-                                      }
-                                    });
-                                  },
-                                  getEventOptions: getEventOptions,
-                                  isGrouped:
-                                      previousEvent?.content
-                                          is MessageContent &&
-                                      previousEvent?.redactedBy == null &&
-                                      previousEvent?.relationType !=
-                                          "m.replace" &&
-                                      "${event.sender}${event.pmp?.id}" ==
-                                          "${previousEvent?.sender}${previousEvent?.pmp?.id}",
-                                ),
-                                isHighlighted:
-                                    highlightedEvent.value == event.eventId,
-                              );
-                            },
-                          ),
+                              SuperSliverList.builder(
+                                listController: listController.value,
+                                itemCount: value.length,
+                                itemBuilder: (_, index) {
+                                  final event = value[index];
+                                  final previousEvent = value.getOrNull(
+                                    index - 1,
+                                  );
+                                  return HighlightWrapper(
+                                    EventRenderer(
+                                      event,
+                                      onTapReply: () =>
+                                          jumpToId(event.replyTo!),
+                                      getEventOptions: getEventOptions,
+                                      isGrouped:
+                                          previousEvent?.content
+                                              is MessageContent &&
+                                          previousEvent?.redactedBy == null &&
+                                          previousEvent?.relationType !=
+                                              "m.replace" &&
+                                          "${event.sender}${event.pmp?.id}" ==
+                                              "${previousEvent?.sender}${previousEvent?.pmp?.id}",
+                                    ),
+                                    isHighlighted:
+                                        highlightedEvent.value == event.eventId,
+                                  );
+                                },
+                              ),
 
-                          SliverPadding(
-                            padding: .only(bottom: composerSize.value),
+                              SliverPadding(
+                                padding: .only(bottom: composerSize.value),
+                              ),
+                            ],
                           ),
-                        ],
+                          AsyncData() => nothing,
+                          AsyncLoading() => Loading(),
+                          AsyncError(:final error, :final stackTrace) =>
+                            ErrorDialog(error, stackTrace),
+                        },
                       ),
-                      AsyncData() => nothing,
-                      AsyncLoading() => Loading(),
-                      AsyncError(:final error, :final stackTrace) =>
-                        ErrorDialog(error, stackTrace),
-                    },
-                  ),
-                ),
-                Positioned(
-                  bottom: 0,
-                  left: 0,
-                  right: 0,
-                  child: MeasureSize(
-                    onChange: (size) => composerSize.value = size.height,
-                    child: Composer(
-                      roomId,
-                      node: composerNode,
-                      onSend: (text, {required shouldMention, required tags}) =>
-                          notifier
-                              .send(
-                                text,
-                                tags: tags,
-                                relationType: relationType.value,
-                                shouldMention: shouldMention,
-                                relation: relatedEvent.value,
-                              )
-                              .onError(showError),
-                      relationType: relationType.value,
-                      relatedEvent: relatedEvent.value,
-                      onDismiss: () => relatedEvent.value = null,
                     ),
-                  ),
+                    Positioned(
+                      bottom: 0,
+                      left: 0,
+                      right: 0,
+                      child: MeasureSize(
+                        onChange: (size) => composerSize.value = size.height,
+                        child: Composer(
+                          roomId,
+                          node: composerNode,
+                          onSend:
+                              (text, {required shouldMention, required tags}) =>
+                                  notifier
+                                      .send(
+                                        text,
+                                        tags: tags,
+                                        relationType: relationType.value,
+                                        shouldMention: shouldMention,
+                                        relation: relatedEvent.value,
+                                      )
+                                      .onError(showError),
+                          relationType: relationType.value,
+                          relatedEvent: relatedEvent.value,
+                          onDismiss: () => relatedEvent.value = null,
+                        ),
+                      ),
+                    ),
+                  ],
                 ),
-              ],
-            ),
-          ),
+              ),
 
-          if (memberListOpened.value == true && showMembersByDefault)
-            MemberList(roomId),
-        ],
+              if (memberListOpened.value == true && showMembersByDefault)
+                MemberList(roomId),
+            ],
+          ),
+        ),
       ),
-      endDrawer: showMembersByDefault ? null : MemberList(roomId),
     );
   }
 }