add: live browser notifications

This commit is contained in:
trisua 2025-05-02 20:08:35 -04:00
parent 58d206eb81
commit 98d6f21e6e
18 changed files with 291 additions and 15 deletions

View file

@ -51,9 +51,12 @@
class="button {% if selected == 'requests' %}active{% endif %}"
title="Requests"
>
{{ icon "inbox" }} {% if user.request_count > 0 %}
<span class="notification tr">{{ user.request_count }}</span>
{% endif %}
{{ icon "inbox" }}
<span
class="notification tr {% if user.request_count <= 0 %}hidden{% endif %}"
id="requests_span"
>{{ user.request_count }}</span
>
</a>
<a
@ -61,11 +64,12 @@
class="button {% if selected == 'notifications' %}active{% endif %}"
title="Notifications"
>
{% if user.notification_count > 0 %} {{ icon "bell-dot" }}
<span class="notification tr"
{{ icon "bell" }}
<span
class="notification tr {% if user.notification_count <= 0 %}hidden{% endif %}"
id="notifications_span"
>{{ user.notification_count }}</span
>
{% else %} {{ icon "bell" }} {% endif %}
</a>
<div class="dropdown">

View file

@ -107,6 +107,23 @@
</div>
</div>
<div class="card-nest desktop" ui_ident="notifications">
<div class="card small">
<b>Notifications</b>
</div>
<div class="card flex flex-col gap-2">
<button id="notifications_button"></button>
<span class="fade">Notifications require you to keep {{ config.name }} open in your browser for real-time updates. This setting does not sync across browsers.</span>
</div>
</div>
<script>
setTimeout(() => {
trigger("me::notifications_button", [document.getElementById("notifications_button")]);
}, 150)
</script>
<div class="card-nest" ui_ident="change_password">
<div class="card small">
<b>{{ text "settings:label.change_password" }}</b>
@ -880,6 +897,7 @@
ui.refresh_container(account_settings, [
"home_timeline",
"notifications",
"change_password",
"change_username",
"two_factor_authentication",

View file

@ -118,6 +118,10 @@ macros -%}
document.getElementById("tokens"),
]);
}
setTimeout(() => {
trigger("me::notifications_stream");
}, 250);
});
</script>