add: user stacks

crates/app/src/public/html/stacks/list.html

@@ -0,0 +1,93 @@
+{% 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 %}