✨ Emotes picker

api/Paperclip/Stickers/Create Sticker.bru

@@ -12,9 +12,9 @@ post {
 
 body:json {
   {
-    "alias": "AteChip",
-    "name": "Cat ate chips",
-    "attachment_id": "d0b692cc64054463",
-    "pack_id": 2
+    "alias": "Meltdown",
+    "name": "Meltdown",
+    "attachment_id": "IpDPHEbWDDCbBofX",
+    "pack_id": 4
   }
 }

api/Paperclip/Stickers/Get Sticker Packs.bru

@@ -0,0 +1,11 @@
+meta {
+  name: Get Sticker Packs
+  type: http
+  seq: 3
+}
+
+get {
+  url: {{endpoint}}/cgi/uc/stickers/packs
+  body: none
+  auth: none
+}

api/Paperclip/Stickers/Get Stickers.bru

@@ -0,0 +1,15 @@
+meta {
+  name: Get Stickers
+  type: http
+  seq: 4
+}
+
+get {
+  url: {{endpoint}}/cgi/uc/stickers?take=10
+  body: none
+  auth: none
+}
+
+params:query {
+  take: 10
+}

api/Wallet/Create Order.bru

@@ -0,0 +1,20 @@
+meta {
+  name: Create Order
+  type: http
+  seq: 1
+}
+
+post {
+  url: {{endpoint}}/cgi/wa/orders
+  body: json
+  auth: none
+}
+
+body:json {
+  {
+    "client_id": "highland-mc",
+    "client_secret": "(3^DLAvo3v",
+    "remark": "我是秦始皇，现在被困香港，现在 SN 转我 500 源点，帮助我回到咸阳，到时候封你为太监一职。",
+    "amount": 500
+  }
+}

api/Wallet/Create Transaction.bru

@@ -0,0 +1,21 @@
+meta {
+  name: Create Transaction
+  type: http
+  seq: 3
+}
+
+post {
+  url: {{endpoint}}/cgi/wa/transactions
+  body: json
+  auth: none
+}
+
+body:json {
+  {
+    "client_id": "highland-mc",
+    "client_secret": "(3^DLAvo3v",
+    "remark": "秦始皇的赞赏",
+    "amount": 500,
+    "payee_id": 1
+  }
+}

api/Wallet/Get Order.bru

@@ -0,0 +1,20 @@
+meta {
+  name: Get Order
+  type: http
+  seq: 2
+}
+
+get {
+  url: {{endpoint}}/cgi/wa/orders/4
+  body: none
+  auth: none
+}
+
+body:json {
+  {
+    "client_id": "highland-mc",
+    "client_secret": "(3^DLAvo3v",
+    "remark": "我是秦始皇，现在被困香港，现在 SN 转我 500 源点，帮助我回到咸阳，到时候封你为太监一职。",
+    "amount": 500
+  }
+}

api/Wallet/Get Transaction.bru

@@ -0,0 +1,20 @@
+meta {
+  name: Get Transaction
+  type: http
+  seq: 4
+}
+
+get {
+  url: {{endpoint}}/cgi/wa/transactions/67
+  body: none
+  auth: inherit
+}
+
+body:json {
+  {
+    "client_id": "highland-mc",
+    "client_secret": "(3^DLAvo3v",
+    "remark": "我是秦始皇，现在被困香港，现在 SN 转我 500 源点，帮助我回到咸阳，到时候封你为太监一职。",
+    "amount": 500
+  }
+}

lib/main.dart

@@ -281,6 +281,9 @@ class _AppSplashScreenState extends State<_AppSplashScreen> {
       final notify = context.read<NotificationProvider>();
       notify.listen();
       await notify.registerPushNotifications();
+      if (!mounted) return;
+      final sticker = context.read<SnStickerProvider>();
+      await sticker.listStickerEagerly();
     } catch (err) {
       if (!mounted) return;
       await context.showErrorDialog(err);

lib/providers/sn_sticker.dart

@@ -9,6 +9,10 @@ class SnStickerProvider {
   late final SnNetworkProvider _sn;
   final Map<String, SnSticker?> _cache = {};
 
+  final Map<int, List<SnSticker>> stickersByPack = {};
+
+  List<SnSticker> get stickers => _cache.values.where((ele) => ele != null).cast<SnSticker>().toList();
+
   SnStickerProvider(BuildContext context) {
     _sn = context.read<SnNetworkProvider>();
   }
@@ -17,6 +21,12 @@ class SnStickerProvider {
     return _cache.containsKey(alias) && _cache[alias] == null;
   }
 
+  void _cacheSticker(SnSticker sticker) {
+    _cache['${sticker.pack.prefix}:${sticker.alias}'] = sticker;
+    if (stickersByPack[sticker.pack.id] == null) stickersByPack[sticker.pack.id] = List.empty(growable: true);
+    if (!stickersByPack[sticker.pack.id]!.contains(sticker)) stickersByPack[sticker.pack.id]!.add(sticker);
+  }
+
   Future<SnSticker?> lookupSticker(String alias) async {
     if (_cache.containsKey(alias)) {
       return _cache[alias];
@@ -25,7 +35,7 @@ class SnStickerProvider {
     try {
       final resp = await _sn.client.get('/cgi/uc/stickers/lookup/$alias');
       final sticker = SnSticker.fromJson(resp.data);
-      _cache[alias] = sticker;
+      _cacheSticker(sticker);
 
       return sticker;
     } catch (err) {
@@ -35,4 +45,30 @@ class SnStickerProvider {
 
     return null;
   }
+
+  Future<void> listStickerEagerly() async {
+    var count = await listSticker();
+    for (var page = 1; count > 0; count -= 10) {
+      await listSticker(page: page);
+      page++;
+    }
+  }
+
+  Future<int> listSticker({int page = 0}) async {
+    try {
+      final resp = await _sn.client.get('/cgi/uc/stickers', queryParameters: {
+        'take': 10,
+        'offset': page * 10,
+      });
+      final data = resp.data;
+      final stickers = List.from(data['data']).map((ele) => SnSticker.fromJson(ele));
+      for (final sticker in stickers) {
+        _cacheSticker(sticker);
+      }
+      return data['count'] as int;
+    } catch (err) {
+      log('[Sticker] Failed to list stickers: $err');
+      rethrow;
+    }
+  }
 }

lib/providers/websocket.dart

@@ -33,7 +33,16 @@ class WebSocketProvider extends ChangeNotifier {
     await connect();
   }
 
+  Completer<void>? _connectCompleter;
+
   Future<void> connect({noRetry = false}) async {
+    if(_connectCompleter != null) {
+      await _connectCompleter!.future;
+      _connectCompleter = null;
+    }
+
+    _connectCompleter = Completer<void>();
+
     if (!_ua.isAuthorized) return;
     if (isConnected || conn != null) {
       disconnect();
@@ -64,12 +73,13 @@ class WebSocketProvider extends ChangeNotifier {
         log('Retry connecting to websocket in 3 seconds...');
         return Future.delayed(
           const Duration(seconds: 3),
-          () => connect(noRetry: true),
+              () => connect(noRetry: true),
         );
       }
     } finally {
       isBusy = false;
       notifyListeners();
+      _connectCompleter!.complete();
     }
   }
 

lib/widgets/chat/chat_message_input.dart

@@ -1,17 +1,23 @@
+import 'dart:math' show min;
+
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/controllers/chat_message_controller.dart';
 import 'package:surface/controllers/post_write_controller.dart';
 import 'package:surface/providers/sn_attachment.dart';
+import 'package:surface/providers/sn_network.dart';
+import 'package:surface/providers/sn_sticker.dart';
 import 'package:surface/providers/user_directory.dart';
 import 'package:surface/types/attachment.dart';
 import 'package:surface/types/chat.dart';
 import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/post/post_media_pending_list.dart';
+import 'package:surface/widgets/universal_image.dart';
 
 class ChatMessageInput extends StatefulWidget {
   final ChatMessageController controller;
@@ -144,6 +150,30 @@ class ChatMessageInputState extends State<ChatMessageInput> {
 
   final List<PostWriteMedia> _attachments = List.empty(growable: true);
 
+  OverlayEntry? _overlayEntry;
+
+  void _showEmojiPicker(BuildContext context) {
+    final overlay = Overlay.of(context);
+    final sticker = context.read<SnStickerProvider>();
+    _overlayEntry = OverlayEntry(
+      builder: (context) => Positioned(
+        bottom: 16 + MediaQuery.of(context).padding.bottom,
+        right: 16,
+        child: _StickerPicker(
+          originalText: _contentController.text,
+          onDismiss: () => _dismissEmojiPicker(),
+          onInsert: (str) => _contentController.text = str,
+        ),
+      ),
+    );
+
+    overlay.insert(_overlayEntry!);
+  }
+
+  void _dismissEmojiPicker() {
+    _overlayEntry?.remove();
+  }
+
   @override
   void dispose() {
     _contentController.dispose();
@@ -289,6 +319,19 @@ class ChatMessageInputState extends State<ChatMessageInput> {
                 ),
               ),
               const Gap(8),
+              IconButton(
+                icon: Icon(
+                  Symbols.mood,
+                  color: Theme.of(context).colorScheme.primary,
+                ),
+                visualDensity: const VisualDensity(
+                  horizontal: -4,
+                  vertical: -4,
+                ),
+                onPressed: () {
+                  _showEmojiPicker(context);
+                },
+              ),
               AddPostMediaButton(
                 onAdd: (items) {
                   setState(() {
@@ -314,3 +357,105 @@ class ChatMessageInputState extends State<ChatMessageInput> {
     );
   }
 }
+
+class _StickerPicker extends StatelessWidget {
+  final String originalText;
+  final Function? onDismiss;
+  final Function(String)? onInsert;
+
+  const _StickerPicker({super.key, this.onDismiss, required this.originalText, this.onInsert});
+
+  @override
+  Widget build(BuildContext context) {
+    final sticker = context.read<SnStickerProvider>();
+    return GestureDetector(
+      onTap: () {
+        onDismiss?.call();
+      },
+      child: Container(
+        constraints: BoxConstraints(maxWidth: min(360, MediaQuery.of(context).size.width), maxHeight: 240),
+        child: Material(
+          elevation: 8,
+          borderRadius: const BorderRadius.all(Radius.circular(8)),
+          child: ClipRRect(
+            borderRadius: const BorderRadius.all(Radius.circular(8)),
+            child: ListView(
+              padding: EdgeInsets.zero,
+              children: sticker.stickersByPack.entries
+                  .map((e) {
+                    return <Widget>[
+                      Container(
+                        margin: EdgeInsets.only(bottom: 8),
+                        padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                        color: Theme.of(context).colorScheme.surfaceContainerHigh,
+                        child: Column(
+                          mainAxisSize: MainAxisSize.min,
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(e.value.first.pack.name).bold(),
+                            Text(e.value.first.pack.description),
+                          ],
+                        ),
+                      ),
+                      GridView.builder(
+                        physics: const NeverScrollableScrollPhysics(),
+                        padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
+                        shrinkWrap: true,
+                        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                          maxCrossAxisExtent: 48,
+                          childAspectRatio: 1.0,
+                          mainAxisSpacing: 8,
+                          crossAxisSpacing: 8,
+                        ),
+                        itemCount: e.value.length,
+                        itemBuilder: (context, index) {
+                          final sn = context.read<SnNetworkProvider>();
+                          final element = e.value[index];
+                          return GestureDetector(
+                            onTap: () {
+                              final withSpace = originalText.isNotEmpty;
+                              onInsert?.call(
+                                  '$originalText${withSpace ? ' ' : ''}:${element.pack.prefix}${element.alias}:');
+                              onDismiss?.call();
+                            },
+                            child: Tooltip(
+                              richMessage: TextSpan(
+                                children: [
+                                  TextSpan(text: ':${element.pack.prefix}${element.alias}:\n', style: GoogleFonts.robotoMono()),
+                                  TextSpan(text: element.name).bold(),
+                                ],
+                              ),
+                              child: Container(
+                                width: 48,
+                                height: 48,
+                                decoration: BoxDecoration(
+                                  borderRadius: const BorderRadius.all(Radius.circular(8)),
+                                  color: Theme.of(context).colorScheme.surfaceContainerHigh,
+                                ),
+                                child: ClipRRect(
+                                  borderRadius: const BorderRadius.all(Radius.circular(8)),
+                                  child: UniversalImage(
+                                    sn.getAttachmentUrl(element.attachment.rid),
+                                    width: 48,
+                                    height: 48,
+                                    cacheHeight: 48,
+                                    cacheWidth: 48,
+                                    fit: BoxFit.contain,
+                                  ),
+                                ),
+                              ),
+                            ),
+                          );
+                        },
+                      ),
+                    ];
+                  })
+                  .expand((ele) => ele)
+                  .toList(),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/markdown_content.dart

@@ -129,14 +129,27 @@ class MarkdownTextContent extends StatelessWidget {
                     future: st.lookupSticker(alias),
                     builder: (context, snapshot) {
                       if (snapshot.hasData) {
-                        return UniversalImage(
-                          sn.getAttachmentUrl(snapshot.data!.attachment.rid),
-                          fit: BoxFit.cover,
-                          width: size,
-                          height: size,
-                          cacheHeight: size,
-                          cacheWidth: size,
-                        );
+                        return GestureDetector(
+                            child: UniversalImage(
+                              sn.getAttachmentUrl(snapshot.data!.attachment.rid),
+                              fit: BoxFit.contain,
+                              width: size,
+                              height: size,
+                              cacheHeight: size,
+                              cacheWidth: size,
+                            ),
+                            onTap: () {
+                              if (snapshot.data == null) return;
+                              context.pushTransparentRoute(
+                                AttachmentZoomView(
+                                  data: [snapshot.data!.attachment],
+                                  initialIndex: 0,
+                                  heroTags: [const Uuid().v4()],
+                                ),
+                                backgroundColor: Colors.black.withOpacity(0.7),
+                                rootNavigator: true,
+                              );
+                            });
                       }
                       return const SizedBox.shrink();
                     },
@@ -145,7 +158,7 @@ class MarkdownTextContent extends StatelessWidget {
               );
             case 'attachments':
               final attachment = attachments?.firstWhere(
-                    (ele) => ele?.rid == segments[1],
+                (ele) => ele?.rid == segments[1],
                 orElse: () => null,
               );
               if (attachment != null) {