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

{% 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"
    loading="lazy"
    style="--size: {{ size }}"
/>
{%- endmacro %} {% macro community_avatar(id, community=false, size="24px") -%}
{% if community %}
<img
    src="/api/v1/communities/{{ id }}/avatar"
    alt="{{ community.title }}'s avatar"
    class="avatar shadow"
    loading="lazy"
    style="--size: {{ size }}"
/>
{% else %}
<img
    src="/api/v1/communities/{{ id }}/avatar"
    alt="{{ id }}'s avatar"
    class="avatar shadow"
    loading="lazy"
    style="--size: {{ size }}"
/>
{% endif %} {%- endmacro %} {% macro banner(username,
border_radius="var(--radius)") -%}
<img
    title="{{ username }}'s banner"
    src="/api/v1/auth/profile/{{ username }}/banner"
    alt="@{{ username }}'s banner"
    class="banner shadow"
    loading="lazy"
    style="border-radius: {{ border_radius }};"
/>
{%- endmacro %} {% macro community_banner(id, community=false) -%} {% if
community %}
<img
    src="/api/v1/communities/{{ id }}/banner"
    alt="{{ community.title }}'s banner"
    class="banner shadow"
    loading="lazy"
/>
{% else %}
<img
    src="/api/v1/communities/{{ id }}/banner"
    alt="{{ id }}'s banner"
    class="banner shadow"
    loading="lazy"
/>
{% endif %} {%- endmacro %} {% macro community_listing_card(community) -%}
<a
    class="card secondary 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">
        <h3 class="name lg:long">{{ 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 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 full_username(user) -%}
<div class="flex">
    <a href="/@{{ user.username }}" class="flush" style="font-weight: 600">
        {{ components::username(user=user) }}
    </a>

    {{ components::online_indicator(user=user) }} {% if user.is_verified %}
    <span
        title="Verified"
        style="color: var(--color-primary)"
        class="flex items-center"
    >
        {{ icon "badge-check" }}
    </span>
    {% endif %}
</div>
{%- endmacro %} {% macro post(post, owner, secondary=false, community=false,
show_community=true, can_manage_post=false) -%} {% if community and
show_community and post.community != config.town_square %}
<div class="card-nest">
    <div class="card small">
        <a
            href="/api/v1/communities/find/{{ post.community }}"
            class="flush flex gap-1 items-center"
        >
            {{ components::community_avatar(id=post.community,
            community=community) }}
            <b>
                <!-- prettier-ignore -->
                {% if community.context.display_name %}
                    {{ community.context.display_name }}
                {% else %}
                    {{ community.title }}
                {% endif %}
            </b>

            {% if post.context.is_pinned %} {{ icon "pin" }} {% endif %}
        </a>
    </div>
    {% endif %}
    <div
        class="card flex flex-col gap-2 {% if secondary %}secondary{% endif %}"
    >
        <div class="w-full flex gap-2">
            <a href="/@{{ 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">
                    <span class="name"
                        >{{ components::full_username(user=owner) }}</span
                    >

                    <span class="fade date">{{ post.created }}</span>

                    {% if show_community %}
                    <a href="/api/v1/communities/find/{{ post.community }}">
                        <!-- prettier-ignore -->
                        {% if not community %}
                            {{ components::community_avatar(id=post.community) }}
                        {% endif %}
                    </a>
                    {% endif %}
                </div>

                <span id="post-content:{{ post.id }}"
                    >{{ post.content|markdown|safe }}</span
                >
            </div>
        </div>

        <div class="flex justify-between items-center gap-2 w-full">
            {% 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>
            {% else %}
            <div></div>
            {% endif %}

            <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 %}
                <div class="dropdown">
                    <button
                        class="camo small"
                        onclick="trigger('atto::hooks::dropdown', [event])"
                        exclude="dropdown"
                    >
                        {{ icon "ellipsis" }}
                    </button>

                    <div class="inner">
                        {% if user.id != post.owner %}
                        <button
                            class="red"
                            onclick="trigger('me::report', ['{{ post.id }}', 'post'])"
                        >
                            {{ icon "flag" }}
                            <span>{{ text "general:action.report" }}</span>
                        </button>
                        {% endif %} {% if (user.id == post.owner) or is_helper
                        or can_manage_post %}
                        <b class="title">{{ text "general:action.manage" }}</b>
                        <button
                            class="red"
                            onclick="trigger('me::remove_post', ['{{ post.id }}'])"
                        >
                            {{ icon "trash" }}
                            <span>{{ text "general:action.delete" }}</span>
                        </button>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% if community and show_community and post.community != config.town_square
    %}
</div>
{% endif %} {%- endmacro %} {% macro notification(notification) -%}
<div class="w-full card-nest">
    <div class="card small notif_title flex items-center">
        {% if not notification.read %}
        <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            style="fill: var(--color-link)"
        >
            <circle cx="12" cy="12" r="6"></circle>
        </svg>
        {% endif %}
        <b>{{ notification.title|markdown|safe }}</b>
    </div>

    <div class="card notif_content flex flex-col gap-2">
        <span>{{ notification.content|markdown|safe }}</span>

        <div class="card secondary w-full flex flex-wrap gap-2">
            {% if notification.read %}
            <button
                class="tertiary"
                onclick="trigger('me::update_notification_read_statsu', ['{{ notification.id }}', false])"
            >
                {{ icon "undo" }}
                <span>{{ text "notifs:action.mark_as_unread" }}</span>
            </button>
            {% else %}
            <button
                class="green tertiary"
                onclick="trigger('me::update_notification_read_statsu', ['{{ notification.id }}', true])"
            >
                {{ icon "check" }}
                <span>{{ text "notifs:action.mark_as_read" }}</span>
            </button>
            {% endif %}

            <button
                class="red tertiary"
                onclick="trigger('me::remove_notification', ['{{ notification.id }}'])"
            >
                {{ icon "trash" }}
                <span>{{ text "general:action.delete" }}</span>
            </button>
        </div>
    </div>
</div>
{%- endmacro %} {% macro user_card(user) -%}
<a class="card-nest w-full" href="/@{{ user.username }}">
    <div class="card small" style="padding: 0">
        {{ components::banner(username=user.username, border_radius="0px") }}
    </div>

    <div class="card secondary flex items-center gap-4">
        {{ components::avatar(username=user.username, size="48px") }}
        <div class="flex items-center">
            <b>{{ components::username(user=user) }}</b>
            {{ components::online_indicator(user=user) }}
        </div>
    </div>
</a>
{%- endmacro %} {% macro pagination(page=0, items=0) -%}
<div class="flex justify-between gap-2 w-full">
    {% if page > 0 %}
    <a class="button quaternary" href="?page={{ page - 1 }}">
        {{ icon "arrow-left" }}
        <span>{{ text "general:link.previous" }}</span>
    </a>
    {% else %}
    <div></div>
    {% endif %} {% if items != 0 %}
    <a class="button quaternary" href="?page={{ page + 1 }}">
        <span>{{ text "general:link.next" }}</span>
        {{ icon "arrow-right"}}
    </a>
    {% endif %}
</div>
{%- endmacro %} {% macro online_indicator(user) -%} {% if not
user.settings.private_last_online or is_helper %}
<div
    class="online_indicator"
    style="display: contents"
    hook="online_indicator"
    hook-arg:last_seen="{{ user.last_seen }}"
>
    <div style="display: none" hook_ui_ident="online" title="Online">
        <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            style="fill: var(--color-green)"
        >
            <circle cx="12" cy="12" r="6"></circle>
        </svg>
    </div>

    <div style="display: none" hook_ui_ident="idle" title="Idle">
        <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            style="fill: var(--color-yellow)"
        >
            <circle cx="12" cy="12" r="6"></circle>
        </svg>
    </div>

    <div style="display: none" hook_ui_ident="offline" title="Offline">
        <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            style="fill: hsl(0, 0%, 50%)"
        >
            <circle cx="12" cy="12" r="6"></circle>
        </svg>
    </div>
</div>
{% endif %} {%- endmacro %}