add: chat notifications

use sql_chanes/notifications_tag.sql; ignore first statement if you never used a preview commit

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

@@ -109,7 +109,7 @@ hide_user_menu=true) }}
     <div class="w-full flex flex-col gap-2" id="stream" style="padding: 1rem">
         <turbo-frame
             id="stream_body_frame"
-            src="/chats/{{ selected_community }}/{{ selected_channel }}/_stream?page={{ page }}"
+            src="/chats/{{ selected_community }}/{{ selected_channel }}/_stream?page={{ page }}&message={{ message }}"
         ></turbo-frame>
 
         <form
@@ -336,6 +336,7 @@ hide_user_menu=true) }}
 
     <script>
         window.CURRENT_PAGE = Number.parseInt("{{ page }}");
+        window.VIEWING_SINGLE = "{{ message }}".length > 0;
         window.CHAT_PROPS = {
             selected_community: "{{ selected_community }}",
             selected_channel: "{{ selected_channel }}",
@@ -457,6 +458,26 @@ hide_user_menu=true) }}
                 window.socket_id = window.CHAT_PROPS.selected_channel;
             }
 
+            if (window.CHANNEL_NOTIFS_INTERVAL) {
+                window.clearInterval(window.CHANNEL_NOTIFS_INTERVAL);
+            }
+
+            window.CHANNEL_NOTIFS_INTERVAL = setInterval(() => {
+                if (!window.CHAT_PROPS.selected_channel) {
+                    return;
+                }
+
+                if (!window.location.href.includes("{{ selected_channel }}")) {
+                    window.clearInterval(window.CHANNEL_NOTIFS_INTERVAL);
+                    return;
+                }
+
+                fetch(
+                    `/api/v1/notifications/tag/chats/${window.CHAT_PROPS.selected_channel}`,
+                    { method: "DELETE" },
+                );
+            }, 10000);
+
             window.socket.addEventListener("open", () => {
                 // auth
                 window.socket.send(
@@ -480,7 +501,11 @@ hide_user_menu=true) }}
                     const msg = JSON.parse(event.data);
                     const [channel_id, data] = JSON.parse(msg.data);
 
-                    if (msg.method === "Message" && window.CURRENT_PAGE === 0) {
+                    if (
+                        msg.method === "Message" &&
+                        window.CURRENT_PAGE === 0 &&
+                        window.VIEWING_SINGLE
+                    ) {
                         if (channel_id !== window.CHAT_PROPS.selected_channel) {
                             // message not for us... maybe send notification later
                             // something like /api/v1/messages/{id}/mark_unread

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

@@ -11,9 +11,20 @@
         </div>
         {% endif %}
 
-        {% for message in messages %}
-            {{ components::message(user=message[1], message=message[0], grouped=message[2]) }}
-        {% endfor %}
+        {% if message %}
+            <div class="card flex gap-2 small tertiary flex-wrap">
+                <b>{{ text "chats:label.viewing_single_message" }}</b>
+                <a href="/chats/{{ community }}/{{ channel }}/_stream?page={{ page }}" class="button small" onclick="window.VIEWING_SINGLE = false">
+                    {{ text "chats:label.go_back" }}
+                </a>
+            </div>
+
+            {{ components::message(user=message_owner, message=message, grouped=false) }}
+        {% else %}
+            {% for message in messages %}
+                {{ components::message(user=message[1], message=message[0], grouped=message[2]) }}
+            {% endfor %}
+        {% endif %}
 
         {% if messages|length > 0 %}
         <div class="flex gap-2 w-full justify-center">

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

@@ -910,8 +910,7 @@ if state and state.data %}
 {%- 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_actions(can_manage_message, user, message) -%} {% if can_manage_message
-or (user and user.id == message.owner) %}
+message_actions(can_manage_message, user, message) -%}
 <div class="dropdown">
     <button
         class="camo small"
@@ -922,14 +921,30 @@ or (user and user.id == message.owner) %}
     </button>
 
     <div class="inner">
+        {% if can_manage_message or (user and user.id == message.owner) %}
         <button class="red" onclick="delete_message('{{ message.id }}')">
             {{ icon "trash" }}
             <span>{{ text "general:action.delete" }}</span>
         </button>
+        {% endif %}
+
+        <button
+            onclick="window.location.href = `${window.location.origin}/chats/{{ community }}/{{ channel }}?message={{ message.id }}`"
+        >
+            {{ icon "external-link" }}
+            <span>{{ text "general:action.open" }}</span>
+        </button>
+
+        <button
+            onclick="trigger('atto::copy_text', [`${window.location.origin}/chats/{{ community }}/{{ channel }}?message={{ message.id }}`])"
+        >
+            {{ icon "copy" }}
+            <span>{{ text "general:action.copy_link" }}</span>
+        </button>
     </div>
 </div>
-{% endif %} {%- endmacro %} {% macro message(user, message,
-can_manage_message=false, grouped=false) -%}
+{%- 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 }}"