add: profiles ui, communities ui, posts ui

crates/app/src/public/html/components.html

@@ -0,0 +1,125 @@
+{% macro avatar(username, size="24px", selector_type="username") -%}
+<img
+    title="{{ username }}'s avatar"
+    src="/api/v1/auth/profile/{{ username }}/avatar?selector_type={{ selector_type }}"
+    alt="@{{ username }}"
+    class="avatar shadow"
+    style="--size: {{ size }}"
+/>
+{%- endmacro %} {% macro community_avatar(id, community=false, size="24px") -%}
+{% if community %}
+<img
+    src="/api/v1/communities/{{ id }}/avatar"
+    alt="{{ community.title }}"
+    class="avatar shadow"
+    style="--size: {{ size }}"
+/>
+{% else %}
+<img
+    src="/api/v1/communities/{{ id }}/avatar"
+    alt="{{ id }}"
+    class="avatar shadow"
+    style="--size: {{ size }}"
+/>
+{% endif %} {%- endmacro %} {% macro community_listing_card(community) -%}
+<a
+    class="card w-full flex items-center gap-4"
+    href="/community/{{ community.title }}"
+>
+    {{ components::community_avatar(id=community.id, community=community,
+    size="48px") }}
+    <div class="flex flex-col gap-1">
+        <h3>{{ community.context.display_name }}</h3>
+        <span class="fade"><b>{{ community.member_count }}</b> members</span>
+    </div>
+</a>
+{%- endmacro %} {% macro username(user) -%}
+<div style="display: contents">
+    {% if user.settings.display_name %} {{ user.settings.display_name }} {% else
+    %} {{ user.username }} {% endif %}
+</div>
+{%- endmacro %} {% macro post(post, owner, secondary=false, community=false,
+show_community=true) -%}
+<div class="card flex flex-col gap-2 {% if secondary %}secondary{% endif %}">
+    <div class="w-full flex gap-2">
+        <a href="/user/{{ owner.username }}">
+            {{ components::avatar(username=post.owner, size="52px",
+            selector_type="id") }}
+        </a>
+
+        <div class="flex flex-col w-full gap-1">
+            <div class="flex flex-wrap gap-2 items-center">
+                <a href="/user/{{ owner.username }}"
+                    >{{ components::username(user=owner) }}</a
+                >
+
+                <span class="fade date">{{ post.created }}</span>
+
+                {% if show_community %}
+                <a href="/api/v1/communities/find/{{ post.community }}">
+                    <!-- prettier-ignore -->
+                    {% if community %}
+                        {{ components::community_avatar(id=post.community,
+                        community=community) }}
+                    {% else %}
+                        {{ components::community_avatar(id=post.community) }}
+                    {% endif %}
+                </a>
+                {% endif %}
+            </div>
+
+            <span id="post-content:{{ post.id }}">{{ post.content }}</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 %}
+        </div>
+
+        <div class="flex gap-1 buttons_box">
+            <a href="/post/{{ post.id }}" class="button camo small">
+                {{ icon "message-circle" }}
+                <span>{{ post.comment_count }}</span>
+            </a>
+
+            <a
+                href="/post/{{ post.id }}"
+                class="button camo small"
+                target="_blank"
+            >
+                {{ icon "external-link" }}
+            </a>
+
+            {% if user %} {% if (user.id == post.owner) or is_helper %}
+            <div class="dropdown">
+                <button
+                    class="camo small"
+                    onclick="trigger('atto::hooks::dropdown', [event])"
+                    exclude="dropdown"
+                >
+                    {{ icon "ellipsis" }}
+                </button>
+
+                <div class="inner">
+                    <button
+                        class="red"
+                        onclick="trigger('me::remove_post', ['{{ post.id }}'])"
+                    >
+                        {{ icon "trash" }}
+                        <span>{{ text "general:action.delete" }}</span>
+                    </button>
+                </div>
+            </div>
+            {% endif %} {% endif %}
+        </div>
+    </div>
+</div>
+{%- endmacro %}