add: user socket streams

add: group messages by author in ui
TODO: group messages by author in ui as they come in from socket
TODO: notifications stream connection

crates/app/src/public/html/chats/app.html

@@ -65,14 +65,14 @@
                 </button>
 
                 <div class="inner">
+                    {% if selected_community != 0 %}
                     <a href="/community/{{ selected_community }}">
                         {{ icon "book-heart" }}
                         <span
                             >{{ text "communities:label.show_community" }}</span
                         >
                     </a>
-
-                    {% if can_manage_channels %}
+                    {% endif %} {% if can_manage_channels %}
                     <a href="/community/{{ selected_community }}/manage">
                         {{ icon "settings" }}
                         <span>{{ text "general:action.manage" }}</span>
@@ -104,7 +104,6 @@
         <turbo-frame
             id="stream_body_frame"
             src="/chats/{{ selected_community }}/{{ selected_channel }}/_stream?page={{ page }}"
-            target="_top"
         ></turbo-frame>
 
         <form
@@ -274,6 +273,7 @@
         .message {
             transition: background 0.15s;
             box-shadow: none;
+            position: relative;
         }
 
         .message:hover {
@@ -286,11 +286,24 @@
             display: flex !important;
         }
 
+        .floating_message_actions {
+            position: absolute;
+            top: 0.25rem;
+            right: 1rem;
+        }
+
+        .message.grouped {
+            padding: 0.25rem 0 0.25rem calc(1rem + 0.5rem + 52px);
+        }
         turbo-frame {
             display: contents;
         }
 
         @media screen and (max-width: 900px) {
+            .message.grouped {
+                padding: 0.25rem 0 0.25rem calc(1rem + 0.5rem + 39px);
+            }
+
             body:not(.sidebars_shown) .sidebar {
                 position: absolute;
                 left: -200%;

crates/app/src/public/html/chats/stream.html

@@ -12,7 +12,7 @@
         {% endif %}
 
         {% for message in messages %}
-            {{ components::message(user=message[1], message=message[0]) }}
+            {{ components::message(user=message[1], message=message[0], grouped=message[2]) }}
         {% endfor %}
 
         {% if messages|length > 0 %}

crates/app/src/public/html/components.html

@@ -909,15 +909,40 @@ if state and state.data %}
 </div>
 {%- endmacro %} {% macro connection_url(key, value) -%} {% if value[0].data.url
 %} {{ value[0].data.url }} {% elif key == "LastFm" %} https://last.fm/user/{{
-value[0].data.name }} {% endif %} {%- endmacro %} {% macro message(user,
-message, can_manage_message=false) -%}
-<div class="card secondary message flex gap-2" id="message-{{ message.id }}">
+value[0].data.name }} {% endif %} {%- endmacro %} {% macro
+message_actions(can_manage_message, user, message) -%} {% if can_manage_message
+or (user and user.id == message.owner) %}
+<div class="dropdown">
+    <button
+        class="camo small"
+        onclick="trigger('atto::hooks::dropdown', [event])"
+        exclude="dropdown"
+    >
+        {{ icon "ellipsis" }}
+    </button>
+
+    <div class="inner">
+        <button class="red" onclick="delete_message('{{ message.id }}')">
+            {{ icon "trash" }}
+            <span>{{ text "general:action.delete" }}</span>
+        </button>
+    </div>
+</div>
+{% endif %} {%- endmacro %} {% macro message(user, message,
+can_manage_message=false, grouped=false) -%}
+<div
+    class="card secondary message flex gap-2 {% if grouped %}grouped{% endif %}"
+    id="message-{{ message.id }}"
+>
+    {% if not grouped %}
     <a href="/@{{ user.username }}" target="_top">
         {{ self::avatar(username=user.username, size="52px") }}
     </a>
+    {% endif %}
 
     <div class="flex flex-col gap-1 w-full">
-        <div class="flex gap-2 w-full justify-between">
+        {% if not grouped %}
+        <div class="flex gap-2 w-full justify-between flex-wrap">
             <div class="flex gap-2">
                 {{ self::full_username(user=user) }} {% if message.edited !=
                 message.created %}
@@ -930,30 +955,16 @@ message, can_manage_message=false) -%}
             </div>
 
             <div class="flex gap-2 hidden">
-                {% if can_manage_message or (user and user.id == message.owner)
-                %}
-                <div class="dropdown">
-                    <button
-                        class="camo small"
-                        onclick="trigger('atto::hooks::dropdown', [event])"
-                        exclude="dropdown"
-                    >
-                        {{ icon "ellipsis" }}
-                    </button>
-
-                    <div class="inner">
-                        <button
-                            class="red"
-                            onclick="delete_message('{{ message.id }}')"
-                        >
-                            {{ icon "trash" }}
-                            <span>{{ text "general:action.delete" }}</span>
-                        </button>
-                    </div>
-                </div>
-                {% endif %}
+                {{ self::message_actions(user=user, message=message,
+                can_manage_message=can_manage_message) }}
             </div>
         </div>
+        {% else %}
+        <div class="floating_message_actions hidden">
+            {{ self::message_actions(user=user, message=message,
+            can_manage_message=can_manage_message) }}
+        </div>
+        {% endif %}
 
         <span class="no_p_margin">{{ message.content|markdown|safe }}</span>
     </div>