From f5b75382e58faa1f88d094260c6ba0dcac63cada Mon Sep 17 00:00:00 2001 From: trisua Date: Sun, 30 Mar 2025 22:26:20 -0400 Subject: [PATCH] add: notifications ui --- crates/app/src/assets.rs | 2 + crates/app/src/langs/en-US.toml | 4 ++ crates/app/src/public/css/style.css | 11 ++++ .../app/src/public/html/communities/base.html | 3 +- .../app/src/public/html/communities/list.html | 3 +- .../app/src/public/html/communities/post.html | 3 +- crates/app/src/public/html/components.html | 48 +++++++++++++++++ crates/app/src/public/html/macros.html | 4 +- .../src/public/html/misc/notifications.html | 13 +++++ crates/app/src/public/js/me.js | 53 +++++++++++++++++++ crates/app/src/routes/api/v1/mod.rs | 4 +- crates/app/src/routes/pages/misc.rs | 34 ++++++++++++ crates/app/src/routes/pages/mod.rs | 1 + crates/core/src/database/notifications.rs | 10 ++-- 14 files changed, 179 insertions(+), 14 deletions(-) create mode 100644 crates/app/src/public/html/misc/notifications.html diff --git a/crates/app/src/assets.rs b/crates/app/src/assets.rs index a2f6b77..5196916 100644 --- a/crates/app/src/assets.rs +++ b/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); diff --git a/crates/app/src/langs/en-US.toml b/crates/app/src/langs/en-US.toml index bff8a76..17080de 100644 --- a/crates/app/src/langs/en-US.toml +++ b/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" diff --git a/crates/app/src/public/css/style.css b/crates/app/src/public/css/style.css index c36bcb9..17c9836 100644 --- a/crates/app/src/public/css/style.css +++ b/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; diff --git a/crates/app/src/public/html/communities/base.html b/crates/app/src/public/html/communities/base.html index 3779ff3..5a4ffc7 100644 --- a/crates/app/src/public/html/communities/base.html +++ b/crates/app/src/public/html/communities/base.html @@ -1,5 +1,4 @@ -{% import "macros.html" as macros %} {% import "components.html" as components -%} {% extends "root.html" %} {% block head %} +{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %} {{ community.context.display_name }} - {{ config.name }} {% endblock %} {% block body %} {{ macros::nav() }}
diff --git a/crates/app/src/public/html/communities/list.html b/crates/app/src/public/html/communities/list.html index 5c7c8e3..20477af 100644 --- a/crates/app/src/public/html/communities/list.html +++ b/crates/app/src/public/html/communities/list.html @@ -1,5 +1,4 @@ -{% import "macros.html" as macros %} {% import "components.html" as components -%} {% extends "root.html" %} {% block head %} +{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %} My communities - {{ config.name }} {% endblock %} {% block body %} {{ macros::nav(selected="communities") }}
diff --git a/crates/app/src/public/html/communities/post.html b/crates/app/src/public/html/communities/post.html index 6d782a4..050c707 100644 --- a/crates/app/src/public/html/communities/post.html +++ b/crates/app/src/public/html/communities/post.html @@ -1,5 +1,4 @@ -{% import "macros.html" as macros %} {% import "components.html" as components -%} {% extends "root.html" %} {% block head %} +{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %} Post - {{ config.name }} {% endblock %} {% block body %} {{ macros::nav() }}
diff --git a/crates/app/src/public/html/components.html b/crates/app/src/public/html/components.html index c9bd5bd..b94db3b 100644 --- a/crates/app/src/public/html/components.html +++ b/crates/app/src/public/html/components.html @@ -146,4 +146,52 @@ show_community=true) -%} +{%- endmacro %} {% macro notification(notification) -%} +
+
+ {% if not notification.read %} + + + + {% endif %} + {{ notification.title|markdown|safe }} +
+ +
+ {{ notification.content|markdown|safe }} + +
+ {% if notification.read %} + + {% else %} + + {% endif %} + + +
+
+
{%- endmacro %} diff --git a/crates/app/src/public/html/macros.html b/crates/app/src/public/html/macros.html index 25b51ca..081496d 100644 --- a/crates/app/src/public/html/macros.html +++ b/crates/app/src/public/html/macros.html @@ -32,11 +32,11 @@ show_lhs=true) -%}
{% if user %} - {{ icon "bell" }} {% if user.notification_count > 0 %} + {% if user.notification_count > 0 %} {{ icon "bell-dot" }} {{ user.notification_count }} - {% endif %} + {% else %} {{ icon "bell" }} {% endif %}
diff --git a/crates/app/src/public/html/misc/notifications.html b/crates/app/src/public/html/misc/notifications.html new file mode 100644 index 0000000..54f9e94 --- /dev/null +++ b/crates/app/src/public/html/misc/notifications.html @@ -0,0 +1,13 @@ +{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %} +Notifications - {{ config.name }} +{% endblock %} {% block body %} {{ macros::nav(selected="communities") }} +
+ + + {% for notification in notifications %} {{ + components::notification(notification=notification) }} {% endfor %} +
+{% endblock %} diff --git a/crates/app/src/public/js/me.js b/crates/app/src/public/js/me.js index 8a8fcec..69c70c5 100644 --- a/crates/app/src/public/js/me.js +++ b/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, + ]); + }); + }); })(); diff --git a/crates/app/src/routes/api/v1/mod.rs b/crates/app/src/routes/api/v1/mod.rs index 4a435f6..437cafb 100644 --- a/crates/app/src/routes/api/v1/mod.rs +++ b/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", - delete(notifications::update_read_status_request), + "/notifications/{id}/read_status", + post(notifications::update_read_status_request), ) } diff --git a/crates/app/src/routes/pages/misc.rs b/crates/app/src/routes/pages/misc.rs index 65ed6d0..751512e 100644 --- a/crates/app/src/routes/pages/misc.rs +++ b/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) -> impl IntoResponse { @@ -15,3 +17,35 @@ pub async fn index_request(jar: CookieJar, Extension(data): Extension) -> Html(data.1.render("misc/index.html", &mut context).unwrap()) } + +/// `/notifs` +pub async fn notifications_request( + jar: CookieJar, + Extension(data): Extension, +) -> 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", ¬ifications); + + // return + Ok(Html( + data.1 + .render("misc/notifications.html", &mut context) + .unwrap(), + )) +} diff --git a/crates/app/src/routes/pages/mod.rs b/crates/app/src/routes/pages/mod.rs index c63e62b..3c7d58d 100644 --- a/crates/app/src/routes/pages/mod.rs +++ b/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)) diff --git a/crates/core/src/database/notifications.rs b/crates/core/src/database/notifications.rs index b6820ac..93bae5c 100644 --- a/crates/core/src/database/notifications.rs +++ b/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) - .await - .unwrap(); + if !notification.read { + self.decr_user_notifications(notification.owner) + .await + .unwrap(); + } // return Ok(())