add: client streams api

fix: mobile chats ui

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

@@ -250,6 +250,7 @@
             height: calc(100dvh - 42px);
             overflow: auto;
             transition: left 0.15s;
+            z-index: 1;
         }
 
         .sidebar .title {
@@ -286,14 +287,8 @@
             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);
+            padding: 0.25rem 1rem 0.25rem calc(1rem + 0.5rem + 52px);
         }
         turbo-frame {
             display: contents;
@@ -301,7 +296,7 @@
 
         @media screen and (max-width: 900px) {
             .message.grouped {
-                padding: 0.25rem 0 0.25rem calc(1rem + 0.5rem + 39px);
+                padding: 0.25rem 1rem 0.25rem calc(1rem + 0.5rem + 39px);
             }
 
             body:not(.sidebars_shown) .sidebar {

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

@@ -959,14 +959,18 @@ can_manage_message=false, grouped=false) -%}
                 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 class="flex w-full gap-2 justify-between">
+            <span class="no_p_margin">{{ message.content|markdown|safe }}</span>
+
+            {% if grouped %}
+            <div class="hidden">
+                {{ self::message_actions(user=user, message=message,
+                can_manage_message=can_manage_message) }}
+            </div>
+            {% endif %}
+        </div>
     </div>
 </div>
 {%- endmacro %}

crates/app/src/public/html/root.html

@@ -125,6 +125,7 @@ macros -%}
         <script data-turbo-permanent="true" id="update-seen-script">
             document.documentElement.addEventListener("turbo:load", () => {
                 trigger("me::seen");
+                trigger("streams::user", ["{{ user.id }}"]);
 
                 if (!window.location.pathname.startsWith("/chats/")) {
                     if (window.socket) {

crates/app/src/public/js/atto.js

@@ -38,6 +38,7 @@ media_theme_pref();
 
     // init
     use("me", () => {});
+    use("streams", () => {});
 
     // env
     self.DEBOUNCE = [];

crates/app/src/public/js/streams.js

@@ -0,0 +1,85 @@
+(() => {
+    const self = reg_ns("streams");
+
+    self.STREAMS = {};
+    self.USER = null;
+
+    self.define("user", ({ $ }, user_id) => {
+        $.USER = user_id;
+    });
+
+    self.define("sock", ({ $ }, stream) => {
+        return $.STREAMS[stream];
+    });
+
+    self.define("subscribe", ({ $ }, stream) => {
+        if (!$.USER) {
+            console.warn("cannot subscribe without user id");
+            return;
+        }
+
+        if ($.STREAMS[stream]) {
+            console.warn("stream already exists");
+            return $.STREAMS[stream];
+        }
+
+        const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/auth/user/${$.USER}/_connect/${stream}`;
+        const socket = new WebSocket(endpoint);
+
+        $.STREAMS[stream] = {
+            socket,
+            events: {
+                message: () => {},
+            },
+        };
+
+        socket.addEventListener("message", (event) => {
+            if (event.data === "Ping") {
+                return socket.send("Pong");
+            }
+
+            return $.sock(stream).events.message(event.data);
+        });
+
+        return socket;
+    });
+
+    self.define("close", ({ $ }, stream) => {
+        const socket = $.sock(stream);
+
+        if (!socket) {
+            console.warn("no such stream to close");
+            return;
+        }
+
+        socket.socket.send("Close");
+        socket.socket.close();
+    });
+
+    self.define("event", ({ $ }, stream, event, handler) => {
+        const socket = $.sock(stream);
+
+        if (!socket) {
+            console.warn("no such stream to add event to");
+            return;
+        }
+
+        socket.events[event] = handler;
+        socket.socket.addEventListener(event, handler);
+    });
+
+    self.define("send_packet", async ({ $ }, stream, method, data) => {
+        await (
+            await fetch(`/api/v1/auth/user/${$.USER}/_connect/${stream}/send`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    method,
+                    data: JSON.stringify(data),
+                }),
+            })
+        ).json();
+    });
+})();