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,93 +0,0 @@
{% extends "root.html" %} {% block head %}
<title>My stacks - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav() }}
<main class="flex flex-col gap-2">
{{ macros::timelines_nav(selected="stacks") }} {% if user -%}
<div class="card-nest">
<div class="card small">
<b>{{ text "stacks:label.create_new" }}</b>
</div>
<form
class="card flex flex-col gap-2"
onsubmit="create_stack_from_form(event)"
>
<div class="flex flex-col gap-1">
<label for="name">{{ text "communities:label.name" }}</label>
<input
type="text"
name="name"
id="name"
placeholder="name"
required
minlength="2"
maxlength="32"
/>
</div>
<button class="primary">
{{ text "communities:action.create" }}
</button>
</form>
</div>
{%- endif %}
<div class="card-nest w-full">
<div class="card small flex items-center justify-between gap-2">
<div class="flex items-center gap-2">
{{ icon "award" }}
<span>{{ text "stacks:label.my_stacks" }}</span>
</div>
</div>
<div class="card flex flex-col gap-2">
{% for item in list %}
<a
href="/stacks/{{ item.id }}"
class="card secondary flex flex-col gap-2"
>
<div class="flex items-center gap-2">
{{ icon "list" }}
<b>{{ item.name }}</b>
</div>
<span
>Created <span class="date">{{ item.created }}</span>; {{
item.privacy }}; {{ item.users|length }} users</span
>
</a>
{% endfor %}
</div>
</div>
</main>
<script>
async function create_stack_from_form(e) {
e.preventDefault();
await trigger("atto::debounce", ["stacks::create"]);
fetch("/api/v1/stacks", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: e.target.name.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (res.ok) {
setTimeout(() => {
window.location.href = `/stacks/${res.payload}`;
}, 100);
}
});
}
</script>
{% endblock %}

View file

@ -0,0 +1,93 @@
(text "{% extends \"root.html\" %} {% block head %}")
(title
(text "My stacks - {{ config.name }}"))
(text "{% endblock %} {% block body %} {{ macros::nav() }}")
(main
("class" "flex flex-col gap-2")
(text "{{ macros::timelines_nav(selected=\"stacks\") }} {% if user -%}")
(div
("class" "card-nest")
(div
("class" "card small")
(b
(text "{{ text \"stacks:label.create_new\" }}")))
(form
("class" "card flex flex-col gap-2")
("onsubmit" "create_stack_from_form(event)")
(div
("class" "flex flex-col gap-1")
(label
("for" "name")
(text "{{ text \"communities:label.name\" }}"))
(input
("type" "text")
("name" "name")
("id" "name")
("placeholder" "name")
("required" "")
("minlength" "2")
("maxlength" "32")))
(button
("class" "primary")
(text "{{ text \"communities:action.create\" }}"))))
(text "{%- endif %}")
(div
("class" "card-nest w-full")
(div
("class" "card small flex items-center justify-between gap-2")
(div
("class" "flex items-center gap-2")
(text "{{ icon \"award\" }}")
(span
(text "{{ text \"stacks:label.my_stacks\" }}"))))
(div
("class" "card flex flex-col gap-2")
(text "{% for item in list %}")
(a
("href" "/stacks/{{ item.id }}")
("class" "card secondary flex flex-col gap-2")
(div
("class" "flex items-center gap-2")
(text "{{ icon \"list\" }}")
(b
(text "{{ item.name }}")))
(span
(text "Created")
(span
("class" "date")
(text "{{ item.created }}"))
(text "; {{
item.privacy }}; {{ item.users|length }} users")))
(text "{% endfor %}"))))
(script
(text "async function create_stack_from_form(e) {
e.preventDefault();
await trigger(\"atto::debounce\", [\"stacks::create\"]);
fetch(\"/api/v1/stacks\", {
method: \"POST\",
headers: {
\"Content-Type\": \"application/json\",
},
body: JSON.stringify({
name: e.target.name.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
if (res.ok) {
setTimeout(() => {
window.location.href = `/stacks/${res.payload}`;
}, 100);
}
});
}"))
(text "{% endblock %}")

View file

@ -1,325 +0,0 @@
{% extends "root.html" %} {% block head %}
<title>Stack settings - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav() }}
<main class="flex flex-col gap-2">
<div class="pillmenu">
<a href="#/general" data-tab-button="general" class="active">
{{ icon "settings" }}
<span>{{ text "stacks:tab.general" }}</span>
</a>
<a href="#/users" data-tab-button="users">
{{ icon "users" }}
<span>{{ text "stacks:tab.users" }}</span>
</a>
</div>
<div class="w-full flex flex-col gap-2" data-tab="general">
<div id="manage_fields" class="card tertiary flex flex-col gap-2">
<div class="card-nest" ui_ident="privacy">
<div class="card small">
<b>Privacy</b>
</div>
<div class="card">
<select onchange="save_privacy(event)">
<option
value="Private"
selected="{% if stack.privacy == 'Private' -%}true{% else %}false{%- endif %}"
>
Private
</option>
<option
value="Public"
selected="{% if stack.privacy == 'Public' -%}true{% else %}false{%- endif %}"
>
Public
</option>
</select>
</div>
</div>
<div class="card-nest" ui_ident="mode">
<div class="card small">
<b>Mode</b>
</div>
<div class="card">
<select onchange="save_mode(event)">
<option
value="Include"
selected="{% if stack.mode == 'Include' -%}true{% else %}false{%- endif %}"
>
Include
</option>
<option
value="Exclude"
selected="{% if stack.mode == 'Exclude' -%}true{% else %}false{%- endif %}"
>
Exclude
</option>
</select>
</div>
</div>
<div class="card-nest" ui_ident="sort">
<div class="card small">
<b>Sort</b>
</div>
<div class="card">
<select onchange="save_sort(event)">
<option
value="Created"
selected="{% if stack.sort == 'Created' -%}true{% else %}false{%- endif %}"
>
Created
</option>
<option
value="Likes"
selected="{% if stack.sort == 'Likes' -%}true{% else %}false{%- endif %}"
>
Likes
</option>
</select>
</div>
</div>
<div class="card-nest" ui_ident="change_name">
<div class="card small">
<b>{{ text "stacks:label.change_name" }}</b>
</div>
<form
class="card flex flex-col gap-2"
onsubmit="change_name(event)"
>
<div class="flex flex-col gap-1">
<label for="new_title"
>{{ text "communities:label.name" }}</label
>
<input
type="text"
name="name"
id="name"
placeholder="name"
required
minlength="2"
/>
</div>
<button class="primary">
{{ icon "check" }}
<span>{{ text "general:action.save" }}</span>
</button>
</form>
</div>
</div>
<div class="card-nest" ui_ident="danger_zone">
<div class="card small flex gap-1 items-center red">
{{ icon "skull" }}
<b> {{ text "communities:label.danger_zone" }} </b>
</div>
<div class="card flex flex-wrap gap-2">
<button class="red quaternary" onclick="delete_stack()">
{{ icon "trash" }}
<span>{{ text "general:action.delete" }}</span>
</button>
</div>
</div>
</div>
<div class="card w-full flex flex-col gap-2 hidden" data-tab="users">
<button onclick="add_user()">
{{ icon "plus" }}
<span>{{ text "stacks:label.add_user" }}</span>
</button>
{% for user in users %}
<div
class="card secondary flex flex-wrap gap-2 items-center justify-between"
>
<div class="flex gap-2">
{{ components::avatar(username=user.username) }} {{
components::full_username(user=user) }}
</div>
<button
class="quaternary small red"
onclick="remove_user('{{ user.username }}')"
>
{{ icon "x" }}
<span>{{ text "stacks:label.remove" }}</span>
</button>
</div>
{% endfor %}
</div>
<div class="flex gap-2 flex-wrap">
<a href="/stacks/{{ stack.id }}" class="button secondary">
{{ icon "arrow-left" }}
<span>{{ text "general:action.back" }}</span>
</a>
</div>
</main>
<script>
globalThis.add_user = async () => {
await trigger("atto::debounce", ["stacks::add_user"]);
const username = await trigger("atto::prompt", ["Username:"]);
if (!username) {
return;
}
fetch(`/api/v1/stacks/{{ stack.id }}/users`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
globalThis.remove_user = async (username) => {
await trigger("atto::debounce", ["stacks::remove_user"]);
fetch(`/api/v1/stacks/{{ stack.id }}/users`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
globalThis.save_privacy = (event, mode) => {
const selected = event.target.selectedOptions[0];
fetch(`/api/v1/stacks/{{ stack.id }}/privacy`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
privacy: selected.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
globalThis.save_mode = (event, mode) => {
const selected = event.target.selectedOptions[0];
fetch(`/api/v1/stacks/{{ stack.id }}/mode`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
mode: selected.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
globalThis.save_sort = (event, mode) => {
const selected = event.target.selectedOptions[0];
fetch(`/api/v1/stacks/{{ stack.id }}/sort`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
sort: selected.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
globalThis.change_name = async (e) => {
e.preventDefault();
if (
!(await trigger("atto::confirm", [
"Are you sure you would like to do this?",
]))
) {
return;
}
fetch("/api/v1/stacks/{{ stack.id }}/name", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: e.target.name.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
globalThis.delete_stack = async () => {
if (
!(await trigger("atto::confirm", [
"Are you sure you would like to do this? This action is permanent.",
]))
) {
return;
}
fetch("/api/v1/stacks/{{ stack.id }}", {
method: "DELETE",
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
</script>
{% endblock %}

View file

@ -0,0 +1,316 @@
(text "{% extends \"root.html\" %} {% block head %}")
(title
(text "Stack settings - {{ config.name }}"))
(text "{% endblock %} {% block body %} {{ macros::nav() }}")
(main
("class" "flex flex-col gap-2")
(div
("class" "pillmenu")
(a
("href" "#/general")
("data-tab-button" "general")
("class" "active")
(text "{{ icon \"settings\" }}")
(span
(text "{{ text \"stacks:tab.general\" }}")))
(a
("href" "#/users")
("data-tab-button" "users")
(text "{{ icon \"users\" }}")
(span
(text "{{ text \"stacks:tab.users\" }}"))))
(div
("class" "w-full flex flex-col gap-2")
("data-tab" "general")
(div
("id" "manage_fields")
("class" "card tertiary flex flex-col gap-2")
(div
("class" "card-nest")
("ui_ident" "privacy")
(div
("class" "card small")
(b
(text "Privacy")))
(div
("class" "card")
(select
("onchange" "save_privacy(event)")
(option
("value" "Private")
("selected" "{% if stack.privacy == 'Private' -%}true{% else %}false{%- endif %}")
(text "Private"))
(option
("value" "Public")
("selected" "{% if stack.privacy == 'Public' -%}true{% else %}false{%- endif %}")
(text "Public")))))
(div
("class" "card-nest")
("ui_ident" "mode")
(div
("class" "card small")
(b
(text "Mode")))
(div
("class" "card")
(select
("onchange" "save_mode(event)")
(option
("value" "Include")
("selected" "{% if stack.mode == 'Include' -%}true{% else %}false{%- endif %}")
(text "Include"))
(option
("value" "Exclude")
("selected" "{% if stack.mode == 'Exclude' -%}true{% else %}false{%- endif %}")
(text "Exclude")))))
(div
("class" "card-nest")
("ui_ident" "sort")
(div
("class" "card small")
(b
(text "Sort")))
(div
("class" "card")
(select
("onchange" "save_sort(event)")
(option
("value" "Created")
("selected" "{% if stack.sort == 'Created' -%}true{% else %}false{%- endif %}")
(text "Created"))
(option
("value" "Likes")
("selected" "{% if stack.sort == 'Likes' -%}true{% else %}false{%- endif %}")
(text "Likes")))))
(div
("class" "card-nest")
("ui_ident" "change_name")
(div
("class" "card small")
(b
(text "{{ text \"stacks:label.change_name\" }}")))
(form
("class" "card flex flex-col gap-2")
("onsubmit" "change_name(event)")
(div
("class" "flex flex-col gap-1")
(label
("for" "new_title")
(text "{{ text \"communities:label.name\" }}"))
(input
("type" "text")
("name" "name")
("id" "name")
("placeholder" "name")
("required" "")
("minlength" "2")))
(button
("class" "primary")
(text "{{ icon \"check\" }}")
(span
(text "{{ text \"general:action.save\" }}"))))))
(div
("class" "card-nest")
("ui_ident" "danger_zone")
(div
("class" "card small flex gap-1 items-center red")
(text "{{ icon \"skull\" }}")
(b
(text "{{ text \"communities:label.danger_zone\" }}")))
(div
("class" "card flex flex-wrap gap-2")
(button
("class" "red quaternary")
("onclick" "delete_stack()")
(text "{{ icon \"trash\" }}")
(span
(text "{{ text \"general:action.delete\" }}"))))))
(div
("class" "card w-full flex flex-col gap-2 hidden")
("data-tab" "users")
(button
("onclick" "add_user()")
(text "{{ icon \"plus\" }}")
(span
(text "{{ text \"stacks:label.add_user\" }}")))
(text "{% for user in users %}")
(div
("class" "card secondary flex flex-wrap gap-2 items-center justify-between")
(div
("class" "flex gap-2")
(text "{{ components::avatar(username=user.username) }} {{ components::full_username(user=user) }}"))
(button
("class" "quaternary small red")
("onclick" "remove_user('{{ user.username }}')")
(text "{{ icon \"x\" }}")
(span
(text "{{ text \"stacks:label.remove\" }}"))))
(text "{% endfor %}"))
(div
("class" "flex gap-2 flex-wrap")
(a
("href" "/stacks/{{ stack.id }}")
("class" "button secondary")
(text "{{ icon \"arrow-left\" }}")
(span
(text "{{ text \"general:action.back\" }}")))))
(script
(text "globalThis.add_user = async () => {
await trigger(\"atto::debounce\", [\"stacks::add_user\"]);
const username = await trigger(\"atto::prompt\", [\"Username:\"]);
if (!username) {
return;
}
fetch(`/api/v1/stacks/{{ stack.id }}/users`, {
method: \"POST\",
headers: {
\"Content-Type\": \"application/json\",
},
body: JSON.stringify({
username,
}),
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
};
globalThis.remove_user = async (username) => {
await trigger(\"atto::debounce\", [\"stacks::remove_user\"]);
fetch(`/api/v1/stacks/{{ stack.id }}/users`, {
method: \"DELETE\",
headers: {
\"Content-Type\": \"application/json\",
},
body: JSON.stringify({
username,
}),
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
};
globalThis.save_privacy = (event, mode) => {
const selected = event.target.selectedOptions[0];
fetch(`/api/v1/stacks/{{ stack.id }}/privacy`, {
method: \"POST\",
headers: {
\"Content-Type\": \"application/json\",
},
body: JSON.stringify({
privacy: selected.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
};
globalThis.save_mode = (event, mode) => {
const selected = event.target.selectedOptions[0];
fetch(`/api/v1/stacks/{{ stack.id }}/mode`, {
method: \"POST\",
headers: {
\"Content-Type\": \"application/json\",
},
body: JSON.stringify({
mode: selected.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
};
globalThis.save_sort = (event, mode) => {
const selected = event.target.selectedOptions[0];
fetch(`/api/v1/stacks/{{ stack.id }}/sort`, {
method: \"POST\",
headers: {
\"Content-Type\": \"application/json\",
},
body: JSON.stringify({
sort: selected.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
};
globalThis.change_name = async (e) => {
e.preventDefault();
if (
!(await trigger(\"atto::confirm\", [
\"Are you sure you would like to do this?\",
]))
) {
return;
}
fetch(\"/api/v1/stacks/{{ stack.id }}/name\", {
method: \"POST\",
headers: {
\"Content-Type\": \"application/json\",
},
body: JSON.stringify({
name: e.target.name.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
};
globalThis.delete_stack = async () => {
if (
!(await trigger(\"atto::confirm\", [
\"Are you sure you would like to do this? This action is permanent.\",
]))
) {
return;
}
fetch(\"/api/v1/stacks/{{ stack.id }}\", {
method: \"DELETE\",
})
.then((res) => res.json())
.then((res) => {
trigger(\"atto::toast\", [
res.ok ? \"success\" : \"error\",
res.message,
]);
});
};"))
(text "{% endblock %}")

View file

@ -1,74 +0,0 @@
{% extends "root.html" %} {% block head %}
<title>{{ stack.name }} - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav() }}
<main class="flex flex-col gap-2">
{{ macros::timelines_nav(selected="stacks") }}
<div class="card-nest w-full">
<div class="card small flex items-center justify-between gap-2">
<div class="flex items-center gap-2">
{{ icon "list" }}
<span>{{ stack.name }}</span>
</div>
{% if user and user.id == stack.owner -%}
<a
href="/stacks/{{ stack.id }}/manage"
class="button quaternary small"
>
{{ icon "pencil" }}
<span>{{ text "general:action.manage" }}</span>
</a>
{%- endif %}
</div>
<!-- prettier-ignore -->
<div class="card w-full flex flex-col gap-2">
{% if list|length == 0 -%}
<p>No posts yet! Maybe <a href="/stacks/{{ stack.id }}/manage#/users">add a user to this stack</a>!</p>
{%- endif %}
{% for post in list %}
{% if post[2].read_access == "Everybody" -%}
{% if post[0].context.repost and post[0].context.repost.reposting -%}
{{ components::repost(repost=post[3], post=post[0], owner=post[1], secondary=true, community=post[2], show_community=true) }}
{% else %}
{{ components::post(post=post[0], owner=post[1], question=post[4], secondary=true, community=post[2]) }}
{%- endif %}
{%- endif %}
{% endfor %}
{{ components::pagination(page=page, items=list|length) }}
</div>
</div>
</main>
<script>
async function create_stack_from_form(e) {
e.preventDefault();
await trigger("atto::debounce", ["stacks::create"]);
fetch("/api/v1/stacks", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: e.target.name.value,
}),
})
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
if (res.ok) {
setTimeout(() => {
window.location.href = `/stacks/${res.payload}`;
}, 100);
}
});
}
</script>
{% endblock %}

View file

@ -0,0 +1,37 @@
(text "{% extends \"root.html\" %} {% block head %}")
(title
(text "{{ stack.name }} - {{ config.name }}"))
(text "{% endblock %} {% block body %} {{ macros::nav() }}")
(main
("class" "flex flex-col gap-2")
(text "{{ macros::timelines_nav(selected=\"stacks\") }}")
(div
("class" "card-nest w-full")
(div
("class" "card small flex items-center justify-between gap-2")
(div
("class" "flex items-center gap-2")
(text "{{ icon \"list\" }}")
(span
(text "{{ stack.name }}")))
(text "{% if user and user.id == stack.owner -%}")
(a
("href" "/stacks/{{ stack.id }}/manage")
("class" "button quaternary small")
(text "{{ icon \"pencil\" }}")
(span
(text "{{ text \"general:action.manage\" }}")))
(text "{%- endif %}"))
(div
("class" "card w-full flex flex-col gap-2")
(text "{% if list|length == 0 -%}")
(p
(text "No posts yet! Maybe ")
(a
("href" "/stacks/{{ stack.id }}/manage#/users")
(text "add a user to this stack"))
(text "!"))
(text "{%- endif %} {% for post in list %} {% if post[2].read_access == \"Everybody\" -%} {% if post[0].context.repost and post[0].context.repost.reposting -%} {{ components::repost(repost=post[3], post=post[0], owner=post[1], secondary=true, community=post[2], show_community=true) }} {% else %} {{ components::post(post=post[0], owner=post[1], question=post[4], secondary=true, community=post[2]) }} {%- endif %} {%- endif %} {% endfor %} {{ components::pagination(page=page, items=list|length) }}"))))
(text "{% endblock %}")