add: mark all notifications as read/unread

fix: anonymous avatar/username

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

@@ -124,7 +124,7 @@ expect_repost=false) -%} {% if community and show_community and community.id !=
 config.town_square or question %}
 <div class="card-nest">
     {% if question -%} {{ self::question(question=question[0],
-    owner=question[1]) }} {% else %}
+    owner=question[1], profile=owner) }} {% else %}
     <div class="card small">
         <a
             href="/api/v1/communities/find/{{ post.community }}"
@@ -642,7 +642,7 @@ user %} {% if user.settings.theme_hue -%}
     }
 </style>
 {%- endif %} {%- endmacro %} {% macro question(question, owner,
-show_community=true, secondary=false) -%}
+show_community=true, secondary=false, profile=false) -%}
 <div class="card{% if secondary -%} secondary{%- endif %} flex gap-2">
     {% if owner.id == 0 -%}
     <span>

crates/app/src/public/html/misc/notifications.html

@@ -9,13 +9,43 @@
                 <span>{{ text "notifs:label.notifications" }}</span>
             </span>
 
-            <button
-                onclick="trigger('me::clear_notifs')"
-                class="small red quaternary"
-            >
-                {{ icon "bomb" }}
-                <span>{{ text "notifs:action.clear" }}</span>
-            </button>
+            <div class="flex gap-2">
+                <button
+                    onclick="trigger('me::clear_notifs')"
+                    class="small red quaternary"
+                >
+                    {{ icon "bomb" }}
+                    <span>{{ text "notifs:action.clear" }}</span>
+                </button>
+
+                <div class="dropdown">
+                    <button
+                        class="small quaternary"
+                        onclick="trigger('atto::hooks::dropdown', [event])"
+                        exclude="dropdown"
+                    >
+                        {{ icon "ellipsis" }}
+                    </button>
+
+                    <div class="inner">
+                        <button onclick="mark_all_as_read(true)">
+                            {{ icon "bookmark-check" }}
+                            <span
+                                >{{ text "notifs:label.mark_all_as_read"
+                                }}</span
+                            >
+                        </button>
+
+                        <button onclick="mark_all_as_read(false)">
+                            {{ icon "bookmark-x" }}
+                            <span
+                                >{{ text "notifs:label.mark_all_as_unread"
+                                }}</span
+                            >
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div class="card tertiary flex flex-col gap-4">
@@ -24,4 +54,33 @@
         </div>
     </div>
 </main>
+
+<script>
+    async function mark_all_as_read(read) {
+        if (
+            !(await trigger("atto::confirm", [
+                "Are you sure you want to do this?",
+            ]))
+        ) {
+            return;
+        }
+
+        fetch("/api/v1/notifications/all/read_status", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                read,
+            }),
+        })
+            .then((res) => res.json())
+            .then((res) => {
+                trigger("atto::toast", [
+                    res.ok ? "success" : "error",
+                    res.message,
+                ]);
+            });
+    }
+</script>
 {% endblock %}

crates/app/src/public/html/misc/requests.html

@@ -89,7 +89,7 @@
             {%- endif %} {% endfor %} {% for question in questions %}
             <!-- prettier-ignore -->
             <div class="card-nest">
-                {{ components::question(question=question[0], owner=question[1]) }}
+                {{ components::question(question=question[0], owner=question[1], profile=user) }}
 
                 <form
                     class="card flex flex-col gap-2"