add: notifications ui

crates/app/src/assets.rs

@@ -33,6 +33,7 @@ pub const COMPONENTS: &str = include_str!("./public/html/components.html");
 
 pub const MISC_INDEX: &str = include_str!("./public/html/misc/index.html");
 pub const MISC_ERROR: &str = include_str!("./public/html/misc/error.html");
+pub const MISC_NOTIFICATIONS: &str = include_str!("./public/html/misc/notifications.html");
 
 pub const AUTH_BASE: &str = include_str!("./public/html/auth/base.html");
 pub const AUTH_LOGIN: &str = include_str!("./public/html/auth/login.html");
@@ -144,6 +145,7 @@ pub(crate) async fn write_assets(config: &Config) -> PathBufD {
 
     write_template!(html_path->"misc/index.html"(crate::assets::MISC_INDEX) -d "misc" --config=config);
     write_template!(html_path->"misc/error.html"(crate::assets::MISC_ERROR) --config=config);
+    write_template!(html_path->"misc/notifications.html"(crate::assets::MISC_NOTIFICATIONS) --config=config);
 
     write_template!(html_path->"auth/base.html"(crate::assets::AUTH_BASE) -d "auth" --config=config);
     write_template!(html_path->"auth/login.html"(crate::assets::AUTH_LOGIN) --config=config);

crates/app/src/langs/en-US.toml

@@ -37,3 +37,7 @@ version = "1.0.0"
 "communities:label.create_reply" = "Create reply"
 "communities:label.replies" = "Replies"
 "communities:action.continue_thread" = "Continue thread"
+
+"notifs:action.mark_as_read" = "Mark as read"
+"notifs:action.mark_as_unread" = "Mark as unread"
+"notifs:action.clear" = "Clear"

crates/app/src/public/css/style.css

@@ -402,6 +402,17 @@ button.secondary:hover,
     background: var(--color-secondary-lowered);
 }
 
+button.tertiary,
+.button.tertiary {
+    background: var(--color-raised);
+    color: var(--color-text-raised);
+}
+
+button.tertiary:hover,
+.button.tertiary:hover {
+    background: var(--color-super-raised);
+}
+
 button.camo,
 .button.camo {
     background: transparent;

crates/app/src/public/html/communities/base.html

@@ -1,5 +1,4 @@
-{% import "macros.html" as macros %} {% import "components.html" as components
+{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
-%} {% extends "root.html" %} {% block head %}
 <title>{{ community.context.display_name }} - {{ config.name }}</title>
 {% endblock %} {% block body %} {{ macros::nav() }}
 <article>

crates/app/src/public/html/communities/list.html

@@ -1,5 +1,4 @@
-{% import "macros.html" as macros %} {% import "components.html" as components
+{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
-%} {% extends "root.html" %} {% block head %}
 <title>My communities - {{ config.name }}</title>
 {% endblock %} {% block body %} {{ macros::nav(selected="communities") }}
 <main class="flex flex-col gap-2">

crates/app/src/public/html/communities/post.html

@@ -1,5 +1,4 @@
-{% import "macros.html" as macros %} {% import "components.html" as components
+{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
-%} {% extends "root.html" %} {% block head %}
 <title>Post - {{ config.name }}</title>
 {% endblock %} {% block body %} {{ macros::nav() }}
 <main class="flex flex-col gap-2">

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

@@ -146,4 +146,52 @@ show_community=true) -%}
         </div>
     </div>
 </div>
+{%- endmacro %} {% macro notification(notification) -%}
+<div class="w-full card-nest">
+    <div class="card small notif_title flex items-center">
+        {% if not notification.read %}
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            style="fill: var(--color-link)"
+        >
+            <circle cx="12" cy="12" r="6"></circle>
+        </svg>
+        {% endif %}
+        <b>{{ notification.title|markdown|safe }}</b>
+    </div>
+
+    <div class="card notif_content flex flex-col gap-2">
+        <span>{{ notification.content|markdown|safe }}</span>
+
+        <div class="card secondary w-full flex flex-wrap gap-2">
+            {% if notification.read %}
+            <button
+                class="tertiary"
+                onclick="trigger('me::update_notification_read_statsu', ['{{ notification.id }}', false])"
+            >
+                {{ icon "undo" }}
+                <span>{{ text "notifs:action.mark_as_unread" }}</span>
+            </button>
+            {% else %}
+            <button
+                class="green tertiary"
+                onclick="trigger('me::update_notification_read_statsu', ['{{ notification.id }}', true])"
+            >
+                {{ icon "check" }}
+                <span>{{ text "notifs:action.mark_as_read" }}</span>
+            </button>
+            {% endif %}
+
+            <button
+                class="red tertiary"
+                onclick="trigger('me::remove_notification', ['{{ notification.id }}'])"
+            >
+                {{ icon "trash" }}
+                <span>{{ text "general:action.delete" }}</span>
+            </button>
+        </div>
+    </div>
+</div>
 {%- endmacro %}

crates/app/src/public/html/macros.html

@@ -32,11 +32,11 @@ show_lhs=true) -%}
         <div class="flex nav_side">
             {% if user %}
             <a href="/notifs" class="button" title="Notifications">
-                {{ icon "bell" }} {% if user.notification_count > 0 %}
+                {% if user.notification_count > 0 %} {{ icon "bell-dot" }}
                 <span class="notification tr"
                     >{{ user.notification_count }}</span
                 >
-                {% endif %}
+                {% else %} {{ icon "bell" }} {% endif %}
             </a>
 
             <div class="dropdown">

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

@@ -0,0 +1,13 @@
+{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
+<title>Notifications - {{ config.name }}</title>
+{% endblock %} {% block body %} {{ macros::nav(selected="communities") }}
+<main class="flex flex-col gap-2">
+    <button onclick="trigger('me::clear_notifs')">
+        {{ icon "bomb" }}
+        <span>{{ text "notifs:action.clear" }}</span>
+    </button>
+
+    {% for notification in notifications %} {{
+    components::notification(notification=notification) }} {% endfor %}
+</main>
+{% endblock %}

crates/app/src/public/js/me.js

@@ -91,4 +91,57 @@
                 }
             });
     });
+
+    self.define("remove_notification", (_, id) => {
+        fetch(`/api/v1/notifications/${id}`, {
+            method: "DELETE",
+        })
+            .then((res) => res.json())
+            .then((res) => {
+                trigger("atto::toast", [
+                    res.ok ? "success" : "error",
+                    res.message,
+                ]);
+            });
+    });
+
+    self.define("update_notification_read_statsu", (_, id, read) => {
+        fetch(`/api/v1/notifications/${id}/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,
+                ]);
+            });
+    });
+
+    self.define("clear_notifs", async () => {
+        if (
+            !(await trigger("atto::confirm", [
+                "Are you sure you want to do this?",
+            ]))
+        ) {
+            return;
+        }
+
+        fetch("/api/v1/notifications/my", {
+            method: "DELETE",
+        })
+            .then((res) => res.json())
+            .then((res) => {
+                trigger("atto::toast", [
+                    res.ok ? "success" : "error",
+                    res.message,
+                ]);
+            });
+    });
 })();

crates/app/src/routes/api/v1/mod.rs

@@ -128,8 +128,8 @@ pub fn routes() -> Router {
         )
         .route("/notifications/{id}", delete(notifications::delete_request))
         .route(
-            "/notifications/{id}/read",
+            "/notifications/{id}/read_status",
-            delete(notifications::update_read_status_request),
+            post(notifications::update_read_status_request),
         )
 }
 

crates/app/src/routes/pages/misc.rs

@@ -1,9 +1,11 @@
+use super::render_error;
 use crate::{State, assets::initial_context, get_lang, get_user_from_token};
 use axum::{
     Extension,
     response::{Html, IntoResponse},
 };
 use axum_extra::extract::CookieJar;
+use tetratto_core::model::Error;
 
 /// `/`
 pub async fn index_request(jar: CookieJar, Extension(data): Extension<State>) -> impl IntoResponse {
@@ -15,3 +17,35 @@ pub async fn index_request(jar: CookieJar, Extension(data): Extension<State>) ->
 
     Html(data.1.render("misc/index.html", &mut context).unwrap())
 }
+
+/// `/notifs`
+pub async fn notifications_request(
+    jar: CookieJar,
+    Extension(data): Extension<State>,
+) -> impl IntoResponse {
+    let data = data.read().await;
+    let user = match get_user_from_token!(jar, data.0) {
+        Some(ua) => ua,
+        None => {
+            return Err(Html(
+                render_error(Error::NotAllowed, &jar, &data, &None).await,
+            ));
+        }
+    };
+
+    let notifications = match data.0.get_notifications_by_owner(user.id).await {
+        Ok(p) => p,
+        Err(e) => return Err(Html(render_error(e, &jar, &data, &Some(user)).await)),
+    };
+
+    let lang = get_lang!(jar, data.0);
+    let mut context = initial_context(&data.0.0, lang, &Some(user)).await;
+    context.insert("notifications", &notifications);
+
+    // return
+    Ok(Html(
+        data.1
+            .render("misc/notifications.html", &mut context)
+            .unwrap(),
+    ))
+}

crates/app/src/routes/pages/mod.rs

@@ -17,6 +17,7 @@ pub fn routes() -> Router {
     Router::new()
         // misc
         .route("/", get(misc::index_request))
+        .route("/notifs", get(misc::notifications_request))
         // auth
         .route("/auth/register", get(auth::register_request))
         .route("/auth/login", get(auth::login_request))

crates/core/src/database/notifications.rs

@@ -98,7 +98,7 @@ impl DataManager {
 
         let res = execute!(
             &conn,
-            "DELETE FROM notification WHERE id = $1",
+            "DELETE FROM notifications WHERE id = $1",
             &[&id.to_string()]
         );
 
@@ -109,9 +109,11 @@ impl DataManager {
         self.2.remove(format!("atto.notification:{}", id)).await;
 
         // decr notification count
-        self.decr_user_notifications(notification.owner)
+        if !notification.read {
-            .await
+            self.decr_user_notifications(notification.owner)
-            .unwrap();
+                .await
+                .unwrap();
+        }
 
         // return
         Ok(())