add: timelines, homepage

crates/app/src/public/css/style.css

@@ -136,6 +136,16 @@ article {
 }
 
 /* typo */
+pre {
+    font-family: monospace;
+    width: 100%;
+    max-width: 100%;
+    overflow: auto;
+    background: var(--color-lowered);
+    border-radius: var(--radius);
+    padding: 1rem;
+}
+
 svg.icon {
     stroke: currentColor;
     width: 18px;
@@ -242,7 +252,7 @@ img.contain {
     object-fit: contain;
 }
 
-/* avatar */
+/* avatar/banner */
 .avatar {
     --size: 50px;
     border-radius: calc(var(--radius) / 2);
@@ -255,6 +265,11 @@ img.contain {
     object-fit: cover;
 }
 
+.banner {
+    border-radius: var(--radius);
+    max-height: 350px;
+}
+
 /* table */
 table {
     border-collapse: collapse;
@@ -375,12 +390,13 @@ button,
     justify-content: center;
     align-items: center;
     gap: 0.25rem;
+    font-size: 0.9rem;
+    text-decoration: none !important;
+    user-select: none;
     /* personality */
     background: var(--color-primary);
     color: var(--color-text-primary);
     font-weight: 600;
-    font-size: 0.9rem;
-    text-decoration: none !important;
 }
 
 button.small,

crates/app/src/public/html/communities/base.html

@@ -2,7 +2,9 @@
 <title>{{ community.context.display_name }} - {{ config.name }}</title>
 {% endblock %} {% block body %} {{ macros::nav() }}
 <article>
-    <div class="content_container">
+    <div class="content_container flex flex-col gap-4">
+        {{ components::community_banner(id=community.id, community=community) }}
+
         <div class="w-full flex gap-4 flex-collapse">
             <div
                 class="lhs flex flex-col gap-2 sm:w-full"
@@ -10,9 +12,8 @@
             >
                 <div class="card-nest w-full">
                     <div class="card flex gap-2" id="community_avatar_and_name">
-                        {{
-                        components::community_avatar(id=community.id,size="72px")
-                        }}
+                        {{ components::community_avatar(id=community.id,
+                        community=community, size="72px") }}
                         <div class="flex flex-col">
                             <!-- prettier-ignore -->
                             <h3 id="title" class="title">

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

@@ -11,7 +11,7 @@
 {% if community %}
 <img
     src="/api/v1/communities/{{ id }}/avatar"
-    alt="{{ community.title }}"
+    alt="{{ community.title }}'s avatar"
     class="avatar shadow"
     loading="lazy"
     style="--size: {{ size }}"
@@ -19,11 +19,34 @@
 {% else %}
 <img
     src="/api/v1/communities/{{ id }}/avatar"
-    alt="{{ id }}"
+    alt="{{ id }}'s avatar"
     class="avatar shadow"
     loading="lazy"
     style="--size: {{ size }}"
 />
+{% endif %} {%- endmacro %} {% macro banner(username) -%}
+<img
+    title="{{ username }}'s banner"
+    src="/api/v1/auth/profile/{{ username }}/banner"
+    alt="@{{ username }}'s banner"
+    class="banner shadow"
+    loading="lazy"
+/>
+{%- 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 w-full flex items-center gap-4"
@@ -109,6 +132,8 @@ show_community=true) -%}
             {{ 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">

crates/app/src/public/html/macros.html

@@ -16,6 +16,14 @@ show_lhs=true) -%}
                 <span class="desktop">{{ text "general:link.home" }}</span>
             </a>
 
+            <a
+                href="/popular"
+                class="button {% if selected == 'popular' %}active{% endif %}"
+            >
+                {{ icon "trending-up" }}
+                <span class="desktop">{{ text "general:link.popular" }}</span>
+            </a>
+
             {% if user %}
             <a
                 href="/communities"
@@ -72,6 +80,12 @@ show_lhs=true) -%}
                         {{ icon "log-out" }}
                         <span>{{ text "auth:action.logout" }}</span>
                     </button>
+
+                    <div class="title"></div>
+                    <a href="https://github.com/trisuaso/tetratto">
+                        {{ icon "code" }}
+                        <span>View source</span>
+                    </a>
                 </div>
             </div>
             {% else %}
@@ -93,10 +107,28 @@ show_lhs=true) -%}
                         {{ icon "user-plus" }}
                         <span>{{ text "auth:action.register" }}</span>
                     </a>
+
+                    <div class="title"></div>
+                    <a href="https://github.com/trisuaso/tetratto">
+                        {{ icon "code" }}
+                        <span>View source</span>
+                    </a>
                 </div>
             </div>
             {% endif %}
         </div>
     </div>
 </nav>
+{%- endmacro %} {% macro timelines_nav(selected="") -%}
+<div class="pillmenu w-full">
+    <a href="/" class="{% if selected == 'home' %}active{% endif %}">
+        {{ icon "newspaper" }}
+        <span>{{ text "general:link.home" }}</span>
+    </a>
+
+    <a href="/popular" class="{% if selected == 'popular' %}active{% endif %}">
+        {{ icon "trending-up" }}
+        <span>{{ text "general:link.popular" }}</span>
+    </a>
+</div>
 {%- endmacro %}

crates/app/src/public/html/misc/index.html

@@ -1,12 +1,26 @@
-{% import "macros.html" as macros %} {% extends "root.html" %} {% block body %}
-{{ macros::nav(selected="home") }}
-<main class="flex flex-col gap-2">
-    <div class="card-nest">
-        <div class="card">
-            <b>✨ Welcome to <i>{{ config.name }}</i>!</b>
+{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
+<title>{{ config.name }}</title>
+{% endblock %} {% block body %}
+<main class="flex justify-center" style="padding-top: 2rem">
+    <div class="flex flex-col gap-2" style="width: 20rem; max-width: 100%">
+        <h1 class="w-full text-center">{{ config.name }}</h1>
+
+        <div class="card flex flex-col gap-2">
+            <a href="/auth/login" class="button w-full">
+                {{ icon "log-in" }}
+                <span>{{ text "auth:action.login" }}</span>
+            </a>
+
+            <a href="/auth/register" class="button w-full secondary">
+                {{ icon "heart" }}
+                <span>{{ text "auth:action.register" }}</span>
+            </a>
         </div>
 
-        <div class="card">We're still working on your feed...</div>
+        <a href="/popular" class="button w-full quaternary">
+            {{ icon "trending-up" }}
+            <span>Explore popular feed</span>
+        </a>
     </div>
 </main>
 {% endblock %}

crates/app/src/public/html/profile/base.html

@@ -2,7 +2,9 @@
 <title>{{ profile.username }} - {{ config.name }}</title>
 {% endblock %} {% block body %} {{ macros::nav() }}
 <article>
-    <div class="content_container">
+    <div class="content_container flex flex-col gap-4">
+        {{ components::banner(username=profile.username) }}
+
         <div class="w-full flex gap-4 flex-collapse">
             <div
                 class="lhs flex flex-col gap-2 sm:w-full"

crates/app/src/public/html/profile/settings.html

@@ -149,6 +149,11 @@
                 </form>
             </div>
         </div>
+
+        <button onclick="save_settings()" id="save_button">
+            {{ icon "check" }}
+            <span>{{ text "general:action.save" }}</span>
+        </button>
     </div>
 
     <div
@@ -368,6 +373,18 @@
                 ],
                 settings,
             );
+
+            ui.generate_settings_ui(
+                profile_settings,
+                [
+                    [
+                        ["private_profile", "Private profile"],
+                        "{{ user.settings.private_profile }}",
+                        "checkbox",
+                    ],
+                ],
+                settings,
+            );
         });
     </script>
 </main>

crates/app/src/public/html/root.html

@@ -87,10 +87,10 @@
                 <pre><code id="link_filter_url"></code></pre>
                 <p>Are sure you want to go there?</p>
 
-                <hr />
+                <hr class="margin" />
                 <div class="flex gap-2">
                     <a
-                        class="button primary bold"
+                        class="button primary"
                         id="link_filter_continue"
                         rel="noopener noreferrer"
                         target="_blank"
@@ -99,7 +99,7 @@
                         {{ text "dialog:action.continue" }}
                     </a>
                     <button
-                        class="bold"
+                        class="secondary"
                         type="button"
                         onclick="document.getElementById('link_filter').close()"
                     >

crates/app/src/public/html/timelines/home.html

@@ -0,0 +1,27 @@
+{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
+<title>{{ config.name }}</title>
+{% endblock %} {% block body %} {{ macros::nav(selected="home") }}
+<main class="flex flex-col gap-2">
+    <!-- prettier-ignore -->
+    {{ macros::timelines_nav(selected="home") }}
+
+    {% if list|length == 0 %}
+    <div class="card-nest">
+        <div class="card">
+            <b>✨ Welcome to <i>{{ config.name }}</i>!</b>
+        </div>
+
+        <div class="card">
+            Join some communities to populate your home timeline!
+        </div>
+    </div>
+    {% else %}
+    <!-- prettier-ignore -->
+    <div class="card w-full flex flex-col gap-2">
+        {% for post in list %}
+            {{ components::post(post=post[0], owner=post[1], secondary=true, community=post[2], show_community=true) }}
+        {% endfor %}
+    </div>
+    {% endif %}
+</main>
+{% endblock %}

crates/app/src/public/html/timelines/popular.html

@@ -0,0 +1,14 @@
+{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
+<title>Popular - {{ config.name }}</title>
+{% endblock %} {% block body %} {{ macros::nav(selected="popular") }}
+<main class="flex flex-col gap-2">
+    {{ macros::timelines_nav(selected="popular") }}
+
+    <!-- prettier-ignore -->
+    <div class="card w-full flex flex-col gap-2">
+        {% for post in list %}
+            {{ components::post(post=post[0], owner=post[1], secondary=true, community=post[2], show_community=true) }}
+        {% endfor %}
+    </div>
+</main>
+{% endblock %}

crates/app/src/public/js/atto.js

@@ -647,6 +647,24 @@ media_theme_pref();
     });
 
     self.define("render_settings_ui_field", (_, into_element, option) => {
+        if (option.input_element_type === "checkbox") {
+            into_element.innerHTML += `<div class="card flex gap-2">
+                <input
+                    type="checkbox"
+                    onchange="window.set_setting_field('${option.key}', event.target.checked)"
+                    placeholder="${option.key}"
+                    name="${option.key}"
+                    id="${option.key}"
+                    ${option.value === "true" ? "checked" : ""}
+                    class="w-content"
+                />
+
+                <label for="${option.key}"><b>${option.label.replaceAll("_", " ")}</b></label>
+            </div>`;
+
+            return;
+        }
+
         into_element.innerHTML += `<div class="card-nest">
             <div class="card small">
                 <label for="${option.key}"><b>${option.label.replaceAll("_", " ")}</b></label>