add: finish ui rewrite

This commit is contained in:
trisua 2025-06-01 12:25:33 -04:00
parent e9846016e6
commit 5dec98d698
119 changed files with 8776 additions and 9350 deletions

View file

@ -1,86 +0,0 @@
{% extends "root.html" %} {% block head %}
<title>Notifications - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav(selected="notifications") }}
<main class="flex flex-col gap-2">
<div class="card-nest">
<div class="card small flex items-center justify-between gap-2">
<span class="flex items-center gap-2">
{{ icon "bell" }}
<span>{{ text "notifs:label.notifications" }}</span>
</span>
<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">
{% for notification in notifications %} {{
components::notification(notification=notification) }} {% endfor %}
</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 %}

View file

@ -0,0 +1,76 @@
(text "{% extends \"root.html\" %} {% block head %}")
(title
(text "Notifications - {{ config.name }}"))
(text "{% endblock %} {% block body %} {{ macros::nav(selected=\"notifications\") }}")
(main
("class" "flex flex-col gap-2")
(div
("class" "card-nest")
(div
("class" "card small flex items-center justify-between gap-2")
(span
("class" "flex items-center gap-2")
(text "{{ icon \"bell\" }}")
(span
(text "{{ text \"notifs:label.notifications\" }}")))
(div
("class" "flex gap-2")
(button
("onclick" "trigger('me::clear_notifs')")
("class" "small red quaternary")
(text "{{ icon \"bomb\" }}")
(span
(text "{{ text \"notifs:action.clear\" }}")))
(div
("class" "dropdown")
(button
("class" "small quaternary")
("onclick" "trigger('atto::hooks::dropdown', [event])")
("exclude" "dropdown")
(text "{{ icon \"ellipsis\" }}"))
(div
("class" "inner")
(button
("onclick" "mark_all_as_read(true)")
(text "{{ icon \"bookmark-check\" }}")
(span
(text "{{ text \"notifs:label.mark_all_as_read\" }}")))
(button
("onclick" "mark_all_as_read(false)")
(text "{{ icon \"bookmark-x\" }}")
(span
(text "{{ text \"notifs:label.mark_all_as_unread\" }}")))))))
(div
("class" "card tertiary flex flex-col gap-4")
(text "{% for notification in notifications %} {{ components::notification(notification=notification) }} {% endfor %}"))))
(script
(text "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,
]);
});
}"))
(text "{% endblock %}")

View file

@ -1,259 +0,0 @@
{% extends "root.html" %} {% block head %}
<title>Requests - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav(selected="requests") }}
<main class="flex flex-col gap-2">
<div class="card-nest">
<div class="card small flex items-center justify-between gap-2">
<span class="flex items-center gap-2">
{{ icon "inbox" }}
<span>{{ text "requests:label.requests" }}</span>
</span>
<button onclick="clear_requests()" class="small red quaternary">
{{ icon "bomb" }}
<span>{{ text "notifs:action.clear" }}</span>
</button>
</div>
<div class="card tertiary flex flex-col gap-4">
{% for request in requests %} {% if request.action_type ==
"CommunityJoin" %}
<div class="card-nest">
<div class="card small flex items-center gap-2">
{{ icon "user-plus" }}
<span
>{{ text "requests:label.community_join_request"
}}</span
>
</div>
<div class="card flex flex-wrap gap-2">
<a
href="/community/{{ request.linked_asset }}/manage?uid={{ request.id }}#/members"
class="button"
>
{{ icon "external-link" }}
<span>{{ text "requests:label.review" }}</span>
</a>
<button
class="quaternary red"
onclick="remove_request('{{ request.id }}', '{{ request.linked_asset }}')"
>
{{ icon "trash" }}
<span>{{ text "general:action.delete" }}</span>
</button>
</div>
</div>
{% elif request.action_type == "Follow" %}
<div class="card-nest">
<div class="card small flex items-center gap-2">
{{ icon "user-plus" }}
<span>{{ text "requests:label.user_follow_request" }}</span>
</div>
<div class="card flex flex-col gap-2">
<span>
{{ text "requests:label.user_follow_request_message" }}
</span>
<div class="card flex w-full secondary gap-2">
<a
href="/api/v1/auth/user/find/{{ request.id }}"
class="button"
>
{{ icon "external-link" }}
<span
>{{ text "requests:action.view_profile" }}</span
>
</a>
<button
class="quaternary green"
onclick="accept_follow_request(event, '{{ request.id }}')"
>
{{ icon "check" }}
<span>{{ text "general:action.accept" }}</span>
</button>
<button
class="quaternary red"
onclick="remove_request('{{ request.id }}', '{{ request.linked_asset }}')"
>
{{ icon "trash" }}
<span>{{ text "general:action.delete" }}</span>
</button>
</div>
</div>
</div>
{%- endif %} {% endfor %} {% for question in questions %}
<!-- prettier-ignore -->
<div class="card-nest">
{{ components::question(question=question[0], owner=question[1], profile=user) }}
<form
class="card flex flex-col gap-2"
onsubmit="answer_question_from_form(event, '{{ question[0].id }}')"
>
<div class="flex flex-col gap-1">
<label for="content">{{ text "communities:label.content" }}</label>
<textarea
type="text"
name="content"
id="content"
placeholder="content"
required
minlength="2"
maxlength="4096"
></textarea>
</div>
<div id="files_list" class="flex gap-2 flex-wrap"></div>
<div class="flex flex-wrap w-full gap-2">
{{ components::create_post_options() }}
<button class="primary">{{ text "requests:label.answer" }}</button>
<button type="button" class="red quaternary" onclick="trigger('me::remove_question', ['{{ question[0].id }}'])">{{ text "general:action.delete" }}</button>
<button type="button" class="red quaternary" onclick="trigger('me::ip_block_question', ['{{ question[0].id }}'])">{{ text "auth:action.ip_block" }}</button>
</div>
</form>
</div>
{% endfor %}
</div>
</div>
</main>
<script>
async function remove_request(id, linked_asset) {
if (
!(await trigger("atto::confirm", [
"Are you sure you want to do this?",
]))
) {
return;
}
fetch(`/api/v1/requests/${id}/${linked_asset}`, {
method: "DELETE",
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
}
async function clear_requests() {
if (
!(await trigger("atto::confirm", [
"Are you sure you want to do this?",
]))
) {
return;
}
fetch("/api/v1/requests/my", {
method: "DELETE",
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
}
window.answer_question_from_form = async (e, answering) => {
e.preventDefault();
await trigger("atto::debounce", ["posts::create"]);
// create body
const body = new FormData();
if (e.target.file_picker) {
for (const file of e.target.file_picker.files) {
body.append(file.name, file);
}
}
body.append(
"body",
JSON.stringify({
content: e.target.content.value,
community: "{{ config.town_square }}",
answering,
}),
);
// ...
fetch("/api/v1/posts", {
method: "POST",
body,
})
.then((res) => res.json())
.then(async (res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (res.ok) {
// update settings
await update_settings_maybe(res.payload);
// ...
e.target.parentElement.remove();
}
});
};
globalThis.accept_follow_request = async (e, id) => {
await trigger("atto::debounce", ["users::follow"]);
if (
!(await trigger("atto::confirm", [
"Are you sure you would like to do this?",
]))
) {
return;
}
fetch(`/api/v1/auth/user/${id}/follow/accept`, {
method: "POST",
})
.then((res) => res.json())
.then(async (res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (res.ok) {
e.target.parentElement.parentElement.parentElement.parentElement.remove();
if (
await trigger("atto::confirm", [
"Would you like to follow this user back? This will allow them to view your profile.",
])
) {
fetch(`/api/v1/auth/user/${id}/follow`, {
method: "POST",
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
}
}
});
};
</script>
{% endblock %}

View file

@ -0,0 +1,252 @@
(text "{% extends \"root.html\" %} {% block head %}")
(title
(text "Requests - {{ config.name }}"))
(text "{% endblock %} {% block body %} {{ macros::nav(selected=\"requests\") }}")
(main
("class" "flex flex-col gap-2")
(div
("class" "card-nest")
(div
("class" "card small flex items-center justify-between gap-2")
(span
("class" "flex items-center gap-2")
(text "{{ icon \"inbox\" }}")
(span
(text "{{ text \"requests:label.requests\" }}")))
(button
("onclick" "clear_requests()")
("class" "small red quaternary")
(text "{{ icon \"bomb\" }}")
(span
(text "{{ text \"notifs:action.clear\" }}"))))
(div
("class" "card tertiary flex flex-col gap-4")
(text "{% for request in requests %} {% if request.action_type == \"CommunityJoin\" %}")
(div
("class" "card-nest")
(div
("class" "card small flex items-center gap-2")
(text "{{ icon \"user-plus\" }}")
(span
(text "{{ text \"requests:label.community_join_request\" }}")))
(div
("class" "card flex flex-wrap gap-2")
(a
("href" "/community/{{ request.linked_asset }}/manage?uid={{ request.id }}#/members")
("class" "button")
(text "{{ icon \"external-link\" }}")
(span
(text "{{ text \"requests:label.review\" }}")))
(button
("class" "quaternary red")
("onclick" "remove_request('{{ request.id }}', '{{ request.linked_asset }}')")
(text "{{ icon \"trash\" }}")
(span
(text "{{ text \"general:action.delete\" }}")))))
(text "{% elif request.action_type == \"Follow\" %}")
(div
("class" "card-nest")
(div
("class" "card small flex items-center gap-2")
(text "{{ icon \"user-plus\" }}")
(span
(text "{{ text \"requests:label.user_follow_request\" }}")))
(div
("class" "card flex flex-col gap-2")
(span
(text "{{ text \"requests:label.user_follow_request_message\" }}"))
(div
("class" "card flex w-full secondary gap-2")
(a
("href" "/api/v1/auth/user/find/{{ request.id }}")
("class" "button")
(text "{{ icon \"external-link\" }}")
(span
(text "{{ text \"requests:action.view_profile\" }}")))
(button
("class" "quaternary green")
("onclick" "accept_follow_request(event, '{{ request.id }}')")
(text "{{ icon \"check\" }}")
(span
(text "{{ text \"general:action.accept\" }}")))
(button
("class" "quaternary red")
("onclick" "remove_request('{{ request.id }}', '{{ request.linked_asset }}')")
(text "{{ icon \"trash\" }}")
(span
(text "{{ text \"general:action.delete\" }}"))))))
(text "{%- endif %} {% endfor %} {% for question in questions %}")
(div
("class" "card-nest")
(text "{{ components::question(question=question[0], owner=question[1], profile=user) }}")
(form
("class" "card flex flex-col gap-2")
("onsubmit" "answer_question_from_form(event, '{{ question[0].id }}')")
(div
("class" "flex flex-col gap-1")
(label
("for" "content")
(text "{{ text \"communities:label.content\" }}"))
(textarea
("type" "text")
("name" "content")
("id" "content")
("placeholder" "content")
("required" "")
("minlength" "2")
("maxlength" "4096")))
(div
("id" "files_list")
("class" "flex gap-2 flex-wrap"))
(div
("class" "flex flex-wrap w-full gap-2")
(text "{{ components::create_post_options() }}")
(button
("class" "primary")
(text "{{ text \"requests:label.answer\" }}"))
(button
("type" "button")
("class" "red quaternary")
("onclick" "trigger('me::remove_question', ['{{ question[0].id }}'])")
(text "{{ text \"general:action.delete\" }}"))
(button
("type" "button")
("class" "red quaternary")
("onclick" "trigger('me::ip_block_question', ['{{ question[0].id }}'])")
(text "{{ text \"auth:action.ip_block\" }}")))))
(text "{% endfor %}"))))
(script
(text "async function remove_request(id, linked_asset) {
if (
!(await trigger(\"atto::confirm\", [
\"Are you sure you want to do this?\",
]))
) {
return;
}
fetch(`/api/v1/requests/${id}/${linked_asset}`, {
method: \"DELETE\",
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
}
async function clear_requests() {
if (
!(await trigger(\"atto::confirm\", [
\"Are you sure you want to do this?\",
]))
) {
return;
}
fetch(\"/api/v1/requests/my\", {
method: \"DELETE\",
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
}
window.answer_question_from_form = async (e, answering) => {
e.preventDefault();
await trigger(\"atto::debounce\", [\"posts::create\"]);
// create body
const body = new FormData();
if (e.target.file_picker) {
for (const file of e.target.file_picker.files) {
body.append(file.name, file);
}
}
body.append(
\"body\",
JSON.stringify({
content: e.target.content.value,
community: \"{{ config.town_square }}\",
answering,
}),
);
// ...
fetch(\"/api/v1/posts\", {
method: \"POST\",
body,
})
.then((res) => res.json())
.then(async (res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
if (res.ok) {
// update settings
await update_settings_maybe(res.payload);
// ...
e.target.parentElement.remove();
}
});
};
globalThis.accept_follow_request = async (e, id) => {
await trigger(\"atto::debounce\", [\"users::follow\"]);
if (
!(await trigger(\"atto::confirm\", [
\"Are you sure you would like to do this?\",
]))
) {
return;
}
fetch(`/api/v1/auth/user/${id}/follow/accept`, {
method: \"POST\",
})
.then((res) => res.json())
.then(async (res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
if (res.ok) {
e.target.parentElement.parentElement.parentElement.parentElement.remove();
if (
await trigger(\"atto::confirm\", [
\"Would you like to follow this user back? This will allow them to view your profile.\",
])
) {
fetch(`/api/v1/auth/user/${id}/follow`, {
method: \"POST\",
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
}
}
});
};"))
(text "{% endblock %}")