add: community settings ui

TODO: add community read/write access settings
TODO: add profile settings
TODO: profile following in ui
TODO: community joining and membership management in ui
This commit is contained in:
trisua 2025-03-29 22:27:57 -04:00
parent eecf357325
commit 6413ed09fb
20 changed files with 855 additions and 46 deletions

View file

@ -25,6 +25,18 @@
</h3>
<span class="fade">{{ community.title }}</span>
{% if user %}
<div
class="flex gap-1 reactions_box"
hook="check_reactions"
hook-arg:id="{{ community.id }}"
>
{{ components::likes(id=community.id,
asset_type="Community", likes=community.likes,
dislikes=community.dislikes) }}
</div>
{% endif %}
</div>
</div>
@ -41,15 +53,86 @@
<span>{{ text "communities:action.leave" }}</span>
</button>
{% endif %} {% else %}
<a
href="/community/{{ community.title }}/manage"
<button
href="/community/{{ community.title }}"
class="button primary"
onclick="document.getElementById('manage').showModal()"
>
{{ icon "settings" }}
<span
>{{ text "communities:action.configure" }}</span
>
</a>
</button>
<dialog id="manage">
<div class="inner">
<div
id="manage_fields"
class="flex flex-col gap-2"
></div>
<hr class="margin" />
<button
onclick="document.getElementById('manage').close(); save_context()"
>
{{ icon "check" }}
<span
>{{ text "dialog:action.save_and_close"
}}</span
>
</button>
</div>
</dialog>
<script>
setTimeout(() => {
const ui = ns("ui");
const settings = JSON.parse(
"{{ community_context_serde|safe }}",
);
ui.generate_settings_ui(
document.getElementById("manage_fields"),
[
[
["display_name", "Title"],
"{{ community.context.display_name }}",
"input",
],
[
["description", "Description"],
"{{ community.context.description }}",
"textarea",
],
],
settings,
);
window.save_context = () => {
fetch(
`/api/v1/communities/{{ community.id }}/context`,
{
method: "POST",
headers: {
"Content-Type":
"application/json",
},
body: JSON.stringify({
context: settings,
}),
},
)
.then((res) => res.json())
.then((res) => {
trigger("atto::toast", [
res.ok ? "success" : "error",
res.message,
]);
});
};
}, 250);
</script>
{% endif %}
</div>
{% endif %}
@ -57,7 +140,7 @@
<div class="card-nest flex flex-col">
<div id="bio" class="card small">
{{ community.context.description }}
{{ community.context.description|markdown|safe }}
</div>
<div class="card flex flex-col gap-2">

View file

@ -38,6 +38,28 @@
{% if user.settings.display_name %} {{ user.settings.display_name }} {% else
%} {{ user.username }} {% endif %}
</div>
{%- endmacro %} {% macro likes(id, asset_type, likes=0, dislikes=0) -%}
<button
title="Like"
class="camo small"
hook_element="reaction.like"
onclick="trigger('me::react', [event.target, '{{ id }}', '{{ asset_type }}', true])"
>
{{ icon "heart" }} {% if likes > 0 %}
<span>{{ likes }}</span>
{% endif %}
</button>
<button
title="Dislike"
class="camo small"
hook_element="reaction.dislike"
onclick="trigger('me::react', [event.target, '{{ id }}', '{{ asset_type }}', false])"
>
{{ icon "heart-crack" }} {% if dislikes > 0 %}
<span>{{ dislikes }}</span>
{% endif %}
</button>
{%- endmacro %} {% macro post(post, owner, secondary=false, community=false,
show_community=true) -%}
<div class="card flex flex-col gap-2 {% if secondary %}secondary{% endif %}">
@ -68,21 +90,23 @@ show_community=true) -%}
{% endif %}
</div>
<span id="post-content:{{ post.id }}">{{ post.content }}</span>
<span id="post-content:{{ post.id }}"
>{{ post.content|markdown|safe }}</span
>
</div>
</div>
<div class="flex justify-between items-center gap-2 w-full">
<div class="flex gap-1 reactions_box">
{% if user %}
<button title="Like" class="primary small">
{{ icon "heart" }}
</button>
<button title="Dislike" class="secondary small">
{{ icon "heart-crack" }}
</button>
{% endif %}
{% if user %}
<div
class="flex gap-1 reactions_box"
hook="check_reactions"
hook-arg:id="{{ post.id }}"
>
{{ components::likes(id=post.id, asset_type="Post",
likes=post.likes, dislikes=post.dislikes) }}
</div>
{% endif %}
<div class="flex gap-1 buttons_box">
<a href="/post/{{ post.id }}" class="button camo small">

View file

@ -53,7 +53,7 @@
<div class="card-nest flex flex-col">
<div id="bio" class="card small">
{{ profile.settings.biography }}
{{ profile.settings.biography|markdown|safe }}
</div>
<div class="card flex flex-col gap-2">