[feature] mentions

docs/styleguide.md

@@ -8,9 +8,9 @@ Note these are also, as most things in software, largely based on subjective opi
 The primary goal of this document is not to impose arbitrary restrictions, but to make writing and maintaining Syphon *simple, accessible, and fun*. We want everyone to be able to meaningfully contribute to the code base no matter your skill level. Let us know what else we can do to continue futher this goal! :)
 
 
-### Akways define UI elements outside the ViewModel
+### Always define UI elements outside the ViewModel
 
-- DO
+- `DO`
 
 ```dart
 
@@ -43,7 +43,7 @@ class IntroSettingsScreen extends StatelessWidget {
   }
 ```
 
-- DON'T
+- `DONT`
 
 ```dart
 

lib/views/home/chat/widgets/chat-input.dart

@@ -21,10 +21,14 @@ import 'package:syphon/store/index.dart';
 import 'package:syphon/store/rooms/room/model.dart';
 import 'package:syphon/store/rooms/selectors.dart';
 import 'package:syphon/store/settings/theme-settings/selectors.dart';
+import 'package:syphon/store/user/model.dart';
+import 'package:syphon/store/user/selectors.dart';
 import 'package:syphon/views/widgets/buttons/button-text.dart';
 import 'package:syphon/views/widgets/containers/media-card.dart';
 import 'package:syphon/views/widgets/lists/list-local-images.dart';
 
+import 'chat-mention.dart';
+
 const DEFAULT_BORDER_RADIUS = 24.0;
 
 _empty({
@@ -79,6 +83,9 @@ class ChatInput extends StatefulWidget {
 class ChatInputState extends State<ChatInput> {
   ChatInputState() : super();
 
+  bool mention = false;
+  List<User?> users = [];
+
   bool sendable = false;
   bool showAttachments = false;
 
@@ -141,6 +148,33 @@ class ChatInputState extends State<ChatInput> {
       sendable = text.trim().isNotEmpty;
     });
 
+
+    // mention-dialog
+    setState((){
+      mention = false;
+      users = props!.users;
+
+      if (text.startsWith('@')){
+        mention = true;
+        users = users.where((user) {
+          if (user != null){
+            final String searchText = text.toLowerCase();
+
+            if(user.userId != null){
+              return user.userId!.toLowerCase().contains(searchText);
+            }
+            else {
+              return user.displayName!.toLowerCase().contains(searchText);
+            }
+          }
+          else{
+            return false;
+          }
+        }).toList();
+      }
+    });
+
+
     // start an interval for updating typing status
     if (widget.focusNode.hasFocus && typingNotifier == null) {
       props!.onSendTyping(typing: true, roomId: props.room.id);
@@ -265,6 +299,9 @@ class ChatInputState extends State<ChatInput> {
               // account for if editing
               widget.editing && (widget.editorController?.text.isNotEmpty ?? false);
 
+          final bool showMention = mention;
+
+
           Color sendButtonColor = const Color(AppColors.blueBubbly);
 
           if (widget.mediumType == MediumType.plaintext) {
@@ -450,101 +487,114 @@ class ChatInputState extends State<ChatInput> {
                 ),
               ),
               //////// TEXT FIELD ////////
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                crossAxisAlignment: CrossAxisAlignment.end,
-                children: <Widget>[
-                  Container(
-                    constraints: BoxConstraints(
-                      maxHeight: maxInputHeight,
-                      maxWidth: messageInputWidth,
-                    ),
-                    child: Stack(
-                      children: [
-                        Visibility(
-                          visible: widget.editing,
-                          child: Row(
-                            mainAxisAlignment: MainAxisAlignment.end,
-                            crossAxisAlignment: CrossAxisAlignment.center,
-                            children: [
-                              ButtonText(
-                                text: Strings.buttonSaveMessageEdit,
-                                size: 18.0,
-                                disabled: widget.sending || !isSendable,
-                                onPressed: () => onSubmit(),
-                              ),
-                            ],
-                          ),
+              Column(
+                crossAxisAlignment:  CrossAxisAlignment.start,
+                children: [
+                  Container(padding: EdgeInsets.symmetric(horizontal: 10),
+                      child: Mention(
+                        visible: showMention,
+                        width: MediaQuery.of(context).size.width - Dimensions.buttonSendSize * 2,
+                        users: users,
+                        controller: widget.controller,
+                      )
+                  ),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    children: <Widget>[
+                      Container(
+                        constraints: BoxConstraints(
+                          maxHeight: maxInputHeight,
+                          maxWidth: messageInputWidth,
                         ),
-                        Visibility(
-                          visible: !widget.editing,
-                          child: TextField(
-                            maxLines: null,
-                            autocorrect: props.autocorrectEnabled,
-                            enableSuggestions: props.suggestionsEnabled,
-                            textCapitalization: props.textCapitalization,
-                            keyboardType: TextInputType.multiline,
-                            textInputAction:
-                                widget.enterSend ? TextInputAction.send : TextInputAction.newline,
-                            cursorColor: props.inputCursorColor,
-                            focusNode: widget.focusNode,
-                            controller: widget.controller,
-                            onChanged: (text) => onUpdate(text, props: props),
-                            onSubmitted: !isSendable ? null : (text) => onSubmit(),
-                            style: TextStyle(
-                              height: 1.5,
-                              color: props.inputTextColor,
-                            ),
-                            decoration: InputDecoration(
-                              filled: true,
-                              hintText: hintText,
-                              suffixIcon: Visibility(
-                                visible: isSendable,
-                                child: IconButton(
-                                  color: Theme.of(context).iconTheme.color,
-                                  onPressed: () => onToggleMediaOptions(),
-                                  icon: Icon(
-                                    Icons.add,
-                                    size: Dimensions.iconSizeLarge,
+                        child: Stack(
+                          children: [
+                            Visibility(
+                              visible: widget.editing,
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.end,
+                                crossAxisAlignment: CrossAxisAlignment.center,
+                                children: [
+                                  ButtonText(
+                                    text: Strings.buttonSaveMessageEdit,
+                                    size: 18.0,
+                                    disabled: widget.sending || !isSendable,
+                                    onPressed: () => onSubmit(),
                                   ),
-                                ),
+                                ],
                               ),
-                              fillColor: props.inputColorBackground,
-                              contentPadding: Dimensions.inputContentPadding,
-                              focusedBorder: OutlineInputBorder(
-                                  borderSide: BorderSide(
-                                    color: Theme.of(context).colorScheme.secondary,
-                                    width: 1,
+                            ),
+                            Visibility(
+                              visible: !widget.editing,
+                              child: TextField(
+                                maxLines: null,
+                                autocorrect: props.autocorrectEnabled,
+                                enableSuggestions: props.suggestionsEnabled,
+                                textCapitalization: props.textCapitalization,
+                                keyboardType: TextInputType.multiline,
+                                textInputAction:
+                                widget.enterSend ? TextInputAction.send : TextInputAction.newline,
+                                cursorColor: props.inputCursorColor,
+                                focusNode: widget.focusNode,
+                                controller: widget.controller,
+                                onChanged: (text) => onUpdate(text, props: props),
+                                onSubmitted: !isSendable ? null : (text) => onSubmit(),
+                                style: TextStyle(
+                                  height: 1.5,
+                                  color: props.inputTextColor,
+                                ),
+                                decoration: InputDecoration(
+                                  filled: true,
+                                  hintText: hintText,
+                                  suffixIcon: Visibility(
+                                    visible: isSendable,
+                                    child: IconButton(
+                                      color: Theme.of(context).iconTheme.color,
+                                      onPressed: () => onToggleMediaOptions(),
+                                      icon: Icon(
+                                        Icons.add,
+                                        size: Dimensions.iconSizeLarge,
+                                      ),
+                                    ),
                                   ),
-                                  borderRadius: BorderRadius.only(
-                                    topLeft: Radius.circular(!replying ? DEFAULT_BORDER_RADIUS : 0),
-                                    topRight:
+                                  fillColor: props.inputColorBackground,
+                                  contentPadding: Dimensions.inputContentPadding,
+                                  focusedBorder: OutlineInputBorder(
+                                      borderSide: BorderSide(
+                                        color: Theme.of(context).colorScheme.secondary,
+                                        width: 1,
+                                      ),
+                                      borderRadius: BorderRadius.only(
+                                        topLeft: Radius.circular(!replying ? DEFAULT_BORDER_RADIUS : 0),
+                                        topRight:
                                         Radius.circular(!replying ? DEFAULT_BORDER_RADIUS : 0),
-                                    bottomLeft: Radius.circular(DEFAULT_BORDER_RADIUS),
-                                    bottomRight: Radius.circular(DEFAULT_BORDER_RADIUS),
-                                  )),
-                              border: OutlineInputBorder(
-                                  borderSide: BorderSide(
-                                    color: Theme.of(context).colorScheme.secondary,
-                                    width: 1,
-                                  ),
-                                  borderRadius: BorderRadius.only(
-                                    topLeft: Radius.circular(!replying ? DEFAULT_BORDER_RADIUS : 0),
-                                    topRight:
+                                        bottomLeft: Radius.circular(DEFAULT_BORDER_RADIUS),
+                                        bottomRight: Radius.circular(DEFAULT_BORDER_RADIUS),
+                                      )),
+                                  border: OutlineInputBorder(
+                                      borderSide: BorderSide(
+                                        color: Theme.of(context).colorScheme.secondary,
+                                        width: 1,
+                                      ),
+                                      borderRadius: BorderRadius.only(
+                                        topLeft: Radius.circular(!replying ? DEFAULT_BORDER_RADIUS : 0),
+                                        topRight:
                                         Radius.circular(!replying ? DEFAULT_BORDER_RADIUS : 0),
-                                    bottomLeft: Radius.circular(DEFAULT_BORDER_RADIUS),
-                                    bottomRight: Radius.circular(DEFAULT_BORDER_RADIUS),
-                                  )),
+                                        bottomLeft: Radius.circular(DEFAULT_BORDER_RADIUS),
+                                        bottomRight: Radius.circular(DEFAULT_BORDER_RADIUS),
+                                      )),
+                                ),
+                              ),
                             ),
-                          ),
+                          ],
                         ),
-                      ],
-                    ),
-                  ),
-                  Container(
-                    width: Dimensions.buttonSendSize,
-                    padding: EdgeInsets.symmetric(vertical: 4),
-                    child: sendButton,
+                      ),
+                      Container(
+                        width: Dimensions.buttonSendSize,
+                        padding: EdgeInsets.symmetric(vertical: 4),
+                        child: sendButton,
+                      ),
+                    ],
                   ),
                 ],
               ),
@@ -633,6 +683,7 @@ class _Props extends Equatable {
   final bool autocorrectEnabled;
   final bool suggestionsEnabled;
   final TextCapitalization textCapitalization;
+  final List<User?> users;
 
   final Function onSendTyping;
 
@@ -646,6 +697,7 @@ class _Props extends Equatable {
     required this.suggestionsEnabled,
     required this.textCapitalization,
     required this.onSendTyping,
+    required this.users
   });
 
   @override
@@ -656,6 +708,7 @@ class _Props extends Equatable {
 
   static _Props mapStateToProps(Store<AppState> store, String roomId) => _Props(
         room: selectRoom(id: roomId, state: store.state),
+        users: roomUsers(store.state, roomId),
         inputTextColor: selectInputTextColor(store.state.settingsStore.themeSettings.themeType),
         inputCursorColor: selectCursorColor(store.state.settingsStore.themeSettings.themeType),
         inputColorBackground:

lib/views/home/chat/widgets/chat-mention.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:syphon/global/colors.dart';
+import 'package:syphon/global/dimensions.dart';
+import 'package:syphon/store/user/model.dart';
+import 'package:syphon/store/user/selectors.dart';
+import 'package:syphon/views/widgets/avatars/avatar.dart';
+
+
+class Mention extends StatefulWidget{
+
+  Mention({
+    Key? key,
+    required this.users,
+    required this.width,
+    required this.controller,
+    this.visible = false,
+    this.height = 200
+  }) : super(key: key);
+
+  final List<dynamic> users;
+  final double width;
+  final double height;
+  final TextEditingController controller;
+  bool visible;
+
+
+  @override
+  State<StatefulWidget> createState() => MentionState();
+}
+
+class MentionState extends State<Mention>{
+
+
+  @override
+  Widget build(BuildContext context) {
+    return ConstrainedBox(
+        constraints: BoxConstraints(
+          maxHeight: widget.height,
+          maxWidth: widget.width
+        ),
+        child: ListView.builder(itemBuilder: (buildContext, index){
+          final String userName = formatUsername(widget.users[index] as User);
+          return Visibility(
+              visible: widget.visible,
+              child:Card(
+                child: ListTile(
+                  onTap: () => onTab(widget.users[index]),
+                  leading: Avatar(
+                    uri: widget.users[index]?.avatarUri,
+                    alt:  userName,
+                    size: Dimensions.avatarSizeMin,
+                    background: AppColors.hashedColor(
+                      userName,
+                    ),),
+                  title: Text(userName),
+                  subtitle: Text(widget.users[index]?.userId),
+            ),
+          ));
+        },
+        itemCount: widget.users.length,
+        shrinkWrap: true,
+        scrollDirection: Axis.vertical,
+        physics: ClampingScrollPhysics(),
+        padding: EdgeInsets.symmetric(vertical: 5),
+    ));
+  }
+
+  onTab(User user){
+    setState((){
+      widget.controller.text = user.userId!;
+      widget.controller.selection = TextSelection.fromPosition(
+          TextPosition(offset: widget.controller.text.length));
+      widget.visible = false;
+    });
+  }
+}
+