add: better profile card ui

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

@@ -24,13 +24,15 @@
     loading="lazy"
     style="--size: {{ size }}"
 />
-{% endif %} {%- endmacro %} {% macro banner(username) -%}
+{% 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 %}
@@ -252,14 +254,17 @@ show_community=true) -%} {% if community and show_community %}
     </div>
 </div>
 {%- endmacro %} {% macro user_card(user) -%}
-<a
-    class="card secondary w-full flex items-center gap-4"
-    href="/@{{ user.username }}"
->
+<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 flex-col">
-        <h3>{{ components::username(user=user) }}</h3>
-        <span class="fade">{{ user.username }}</span>
+        <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) -%}

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

@@ -77,7 +77,13 @@
                         or is_helper %}
                         <div class="w-full flex justify-between items-center">
                             <span class="notification chip">Last seen</span>
-                            <span class="date">{{ profile.last_seen }}</span>
+
+                            <div class="flex">
+                                {{ components::online_indicator(user=profile) }}
+                                <span class="date">
+                                    {{ profile.last_seen }}
+                                </span>
+                            </div>
                         </div>
                         {% endif %}
                     </div>

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

@@ -16,7 +16,7 @@ content %}
 
             {{ components::user_card(user=item[1]) }}
         </div>
-        {% endfor %}
+        {% endfor %} {{ components::pagination(page=page, items=list|length) }}
     </div>
 </div>
 {% endblock %}

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

@@ -16,7 +16,7 @@ content %}
 
             {{ components::user_card(user=item[1]) }}
         </div>
-        {% endfor %}
+        {% endfor %} {{ components::pagination(page=page, items=list|length) }}
     </div>
 </div>
 {% endblock %}

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

@@ -324,6 +324,7 @@ pub async fn following_request(
     };
 
     context.insert("list", &list);
+    context.insert("page", &props.page);
     profile_context(
         &mut context,
         &other_user,
@@ -450,6 +451,7 @@ pub async fn followers_request(
     };
 
     context.insert("list", &list);
+    context.insert("page", &props.page);
     profile_context(
         &mut context,
         &other_user,