add: timelines, homepage

crates/app/src/assets.rs

@@ -49,6 +49,9 @@ pub const COMMUNITIES_FEED: &str = include_str!("./public/html/communities/feed.
 pub const COMMUNITIES_POST: &str = include_str!("./public/html/communities/post.html");
 pub const COMMUNITIES_SETTINGS: &str = include_str!("./public/html/communities/settings.html");
 
+pub const TIMELINES_HOME: &str = include_str!("./public/html/timelines/home.html");
+pub const TIMELINES_POPULAR: &str = include_str!("./public/html/timelines/popular.html");
+
 // langs
 pub const LANG_EN_US: &str = include_str!("./langs/en-US.toml");
 
@@ -163,6 +166,9 @@ pub(crate) async fn write_assets(config: &Config) -> PathBufD {
     write_template!(html_path->"communities/post.html"(crate::assets::COMMUNITIES_POST) --config=config);
     write_template!(html_path->"communities/settings.html"(crate::assets::COMMUNITIES_SETTINGS) --config=config);
 
+    write_template!(html_path->"timelines/home.html"(crate::assets::TIMELINES_HOME) -d "timelines" --config=config);
+    write_template!(html_path->"timelines/popular.html"(crate::assets::TIMELINES_POPULAR) --config=config);
+
     html_path
 }
 

crates/app/src/langs/en-US.toml

@@ -3,6 +3,7 @@ version = "1.0.0"
 
 [data]
 "general:link.home" = "Home"
+"general:link.popular" = "Popular"
 "general:link.communities" = "Communities"
 "general:action.save" = "Save"
 "general:action.delete" = "Delete"
@@ -15,6 +16,7 @@ version = "1.0.0"
 "dialog:action.no" = "No"
 "dialog:action.save_and_close" = "Save and close"
 
+
 "auth:action.login" = "Login"
 "auth:action.register" = "Register"
 "auth:action.logout" = "Logout"

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>

crates/app/src/routes/pages/misc.rs

@@ -1,7 +1,8 @@
-use super::render_error;
+use super::{PaginatedQuery, render_error};
 use crate::{State, assets::initial_context, get_lang, get_user_from_token};
 use axum::{
     Extension,
+    extract::Query,
     response::{Html, IntoResponse},
 };
 use axum_extra::extract::CookieJar;
@@ -22,14 +23,64 @@ pub async fn not_found(jar: CookieJar, Extension(data): Extension<State>) -> imp
 }
 
 /// `/`
-pub async fn index_request(jar: CookieJar, Extension(data): Extension<State>) -> impl IntoResponse {
+pub async fn index_request(
+    jar: CookieJar,
+    Extension(data): Extension<State>,
+    Query(req): Query<PaginatedQuery>,
+) -> impl IntoResponse {
+    let data = data.read().await;
+    let user = match get_user_from_token!(jar, data.0) {
+        Some(ua) => ua,
+        None => {
+            return {
+                let lang = get_lang!(jar, data.0);
+                let context = initial_context(&data.0.0, lang, &None).await;
+                Html(data.1.render("misc/index.html", &context).unwrap())
+            };
+        }
+    };
+
+    let list = match data
+        .0
+        .get_posts_from_user_communities(user.id, 12, req.page)
+        .await
+    {
+        Ok(l) => match data.0.fill_posts_with_community(l).await {
+            Ok(l) => l,
+            Err(e) => return Html(render_error(e, &jar, &data, &Some(user)).await),
+        },
+        Err(e) => return Html(render_error(e, &jar, &data, &Some(user)).await),
+    };
+
+    let lang = get_lang!(jar, data.0);
+    let mut context = initial_context(&data.0.0, lang, &Some(user)).await;
+
+    context.insert("list", &list);
+    Html(data.1.render("timelines/home.html", &context).unwrap())
+}
+
+/// `/popular`
+pub async fn popular_request(
+    jar: CookieJar,
+    Extension(data): Extension<State>,
+    Query(req): Query<PaginatedQuery>,
+) -> impl IntoResponse {
     let data = data.read().await;
     let user = get_user_from_token!(jar, data.0);
 
-    let lang = get_lang!(jar, data.0);
-    let context = initial_context(&data.0.0, lang, &user).await;
+    let list = match data.0.get_popular_posts(12, req.page).await {
+        Ok(l) => match data.0.fill_posts_with_community(l).await {
+            Ok(l) => l,
+            Err(e) => return Html(render_error(e, &jar, &data, &user).await),
+        },
+        Err(e) => return Html(render_error(e, &jar, &data, &user).await),
+    };
 
-    Html(data.1.render("misc/index.html", &context).unwrap())
+    let lang = get_lang!(jar, data.0);
+    let mut context = initial_context(&data.0.0, lang, &user).await;
+
+    context.insert("list", &list);
+    Html(data.1.render("timelines/popular.html", &context).unwrap())
 }
 
 /// `/notifs`

crates/app/src/routes/pages/mod.rs

@@ -17,6 +17,7 @@ pub fn routes() -> Router {
     Router::new()
         // misc
         .route("/", get(misc::index_request))
+        .route("/popular", get(misc::popular_request))
         .route("/notifs", get(misc::notifications_request))
         .fallback_service(get(misc::not_found))
         // auth

crates/app/src/routes/pages/profile.rs

@@ -91,6 +91,26 @@ pub async fn posts_request(
         }
     }
 
+    // check for private profile
+    if other_user.settings.private_profile {
+        if let Some(ref ua) = user {
+            if data
+                .0
+                .get_userfollow_by_initiator_receiver(other_user.id, ua.id)
+                .await
+                .is_err()
+            {
+                return Err(Html(
+                    render_error(Error::NotAllowed, &jar, &data, &user).await,
+                ));
+            }
+        } else {
+            return Err(Html(
+                render_error(Error::NotAllowed, &jar, &data, &user).await,
+            ));
+        }
+    }
+
     // fetch data
     let posts = match data
         .0