t/tetratto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: notifications ui

Browse source
This commit is contained in:
trisua 2025-03-30 22:26:20 -04:00
parent 9dc75d7095
commit f5b75382e5
14 changed files with 179 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/app/src/assets.rs
View file

@ -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);

4
crates/app/src/langs/en-US.toml
View file

@ -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"

11
crates/app/src/public/css/style.css
View file

@ -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;

3
crates/app/src/public/html/communities/base.html
View file

@ -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 %}
<title>{{ community.context.display_name }} - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav() }}
<article>

3
crates/app/src/public/html/communities/list.html
View file

@ -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 %}
<title>My communities - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav(selected="communities") }}
<main class="flex flex-col gap-2">

3
crates/app/src/public/html/communities/post.html
View file

@ -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 %}
<title>Post - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav() }}
<main class="flex flex-col gap-2">

48
crates/app/src/public/html/components.html
View file

@ -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 %}

4
crates/app/src/public/html/macros.html
View file

@ -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">

13
crates/app/src/public/html/misc/notifications.html Normal file
View file

@ -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 %}

53
crates/app/src/public/js/me.js
View file

@ -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,
]);
});
});
})();

4
crates/app/src/routes/api/v1/mod.rs
View file

@ -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),
)
}

34
crates/app/src/routes/pages/misc.rs
View file

@ -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(),
))
}

1
crates/app/src/routes/pages/mod.rs
View file

@ -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))

10
crates/core/src/database/notifications.rs
View file

@ -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(())