Skip to content

Commit

Permalink
add(ui): all profile social pages
Browse files Browse the repository at this point in the history 
TODO: profile search
  • Loading branch information
@trisuaso
trisuaso committed Jan 17, 2025
1 parent 498436b commit efead49
Show file tree
Hide file tree
Showing 27 changed files with 747 additions and 171 deletions.
24 changes: 14 additions & 10 deletions crates/api/src/routing/pages/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1543,22 +1543,30 @@ pub async fn routes(database: Database) -> Router {
.route("/@{username}/c/{id}", get(comment_request))
// profiles
.route("/@{username}/_app/warning", get(profile::warning_request))
.route("/@{username}/comments", get(profile::comments_request))
.route("/@{username}/mod", get(profile::mod_request)) // staff
.route("/@{username}/questions", get(profile::questions_request))
.route("/@{username}/questions/inbox", get(profile::inbox_request)) // staff
.route(
"/@{username}/questions/outbox",
get(profile::outbox_request),
) // staff
.route("/@{username}/following", get(profile::following_request))
.route("/@{username}/followers", get(profile::followers_request))
.route("/@{username}/friends", get(profile::friends_request))
.route(
"/@{username}/friends/requests",
"/@{username}/social/following",
get(profile::following_request),
)
.route(
"/@{username}/social/followers",
get(profile::followers_request),
)
.route("/@{username}/social/friends", get(profile::friends_request))
.route(
"/@{username}/social/friends/requests",
get(profile::friend_requests_request),
)
.route("/@{username}/friends/blocks", get(profile::blocks_request))
.route(
"/@{username}/social/friends/blocks",
get(profile::blocks_request),
)
.route("/@{username}/embed", get(profile::profile_embed_request))
.route(
"/@{username}/relationship/friend_accept",
Expand All @@ -1568,10 +1576,6 @@ pub async fn routes(database: Database) -> Router {
"/@{username}/_app/feed.html",
get(profile::partial_profile_request),
)
.route(
"/@{username}/_app/comments.html",
get(profile::partial_comments_request),
)
.route("/@{username}", get(profile::profile_request))
.route("/{id}", get(api::profiles::expand_request))
// circles
Expand Down
11 changes: 5 additions & 6 deletions crates/api/src/routing/pages/profile.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ use serde::{Deserialize, Serialize};
use axum::Json;

use authbeam::model::{Permission, Profile, UserFollow, Warning};
use rainbeam::model::ResponseComment;

use databeam::DefaultReturn;
use crate::database::Database;
Expand Down Expand Up @@ -619,7 +618,7 @@ struct FollowersTemplate {
is_helper: bool,
}

/// GET /@{username}/followers
/// GET /@{username}/social/followers
pub async fn followers_request(
jar: CookieJar,
Path(username): Path<String>,
Expand Down Expand Up @@ -741,7 +740,7 @@ struct FollowingTemplate {
is_helper: bool,
}

/// GET /@{username}/following
/// GET /@{username}/social/following
pub async fn following_request(
jar: CookieJar,
Path(username): Path<String>,
Expand Down Expand Up @@ -863,7 +862,7 @@ struct FriendsTemplate {
is_helper: bool,
}

/// GET /@{username}/friends
/// GET /@{username}/social/friends
pub async fn friends_request(
jar: CookieJar,
Path(username): Path<String>,
Expand Down Expand Up @@ -989,7 +988,7 @@ struct FriendRequestsTemplate {
is_helper: bool,
}

/// GET /@{username}/friends/requests
/// GET /@{username}/social/friends/requests
pub async fn friend_requests_request(
jar: CookieJar,
Path(username): Path<String>,
Expand Down Expand Up @@ -1079,7 +1078,7 @@ struct BlocksTemplate {
is_helper: bool,
}

/// GET /@{username}/friends/blocks
/// GET /@{username}/social/friends/blocks
pub async fn blocks_request(
jar: CookieJar,
Path(username): Path<String>,
Expand Down
57 changes: 57 additions & 0 deletions crates/web/src/lib/components/ProfileCard.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<script lang="ts">
import type { LangFile } from "$lib/bindings/LangFile";
import type { Profile } from "$lib/bindings/Profile";
import type { Option } from "$lib/classes/Option";
import UserNote from "./UserNote.svelte";
const { user, current_profile, lang }: { user: Profile; current_profile: Option<Profile>; lang: LangFile["data"] } =
$props();
</script>

<div class="card-nest w-full" id="card:{user.id}">
<div class="card" style="padding: 0">
<a href="/@{user.username}" data-sveltekit-reload>
<img
title="{user.username}'s banner"
src="/api/v0/auth/profile/{user.id}/banner"
alt=""
class="shadow round"
style="
width: 100%;
min-height: 80px;
max-height: 80px;
object-fit: cover;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
"
/>
</a>
</div>

<div class="card flex gap-2">
<a href="/@{user.username}" data-sveltekit-reload>
<img
title="{user.username}'s avatar"
src="/api/v0/auth/profile/{user.id}/avatar"
alt=""
class="avatar shadow-md"
style="--size: 80px; margin: -50px 0.5rem 0"
/>
</a>

<div class="flex items-center gap-2">
<h3 class="no-margin">
<a href="/@{user.username}" data-sveltekit-reload>
<!-- prettier-ignore -->
{#if user.metadata.kv["sparkler:display_name"]}
{user.metadata.kv["sparkler:display_name"]}
{:else}
{user.username }
{/if}
</a>
</h3>

<UserNote {user} use_static={true} {current_profile} {lang} />
</div>
</div>
</div>
4 changes: 4 additions & 0 deletions crates/web/src/routes/+layout.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ export const load: LayoutServerLoad = async ({ cookies, url, request }): Promise
query[param[0]] = param[1];
}

if (!query.page) {
query.page = 0;
}

// fetch unread data
const unread = await db.get_unread(request.headers);

Expand Down
8 changes: 4 additions & 4 deletions crates/web/src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,12 +245,12 @@

<b class="title">{lang["general:title.social"]}</b>

<a href="/@{profile.username}/friends">
<a href="/@{profile.username}/social/friends">
<BookUser class="icon" />
{lang["general:link.friends"]}
</a>

<a href="/@{profile.username}/friends/requests">
<a href="/@{profile.username}/social/friends/requests">
<UserRoundPlus class="icon" />
{lang["general:link.requests"]}
</a>
Expand Down Expand Up @@ -284,12 +284,12 @@
<div class="inner">
<b class="title">{lang["general:title.account"]}</b>

<a href="/login">
<a href="/login" data-sveltekit-reload>
<LogIn class="icon" />
{lang["general:link.login"]}
</a>

<a href="/sign_up">
<a href="/sign_up" data-sveltekit-reload>
<UserRoundPlus class="icon" />
{lang["general:link.sign_up"]}
</a>
Expand Down
65 changes: 20 additions & 45 deletions crates/web/src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@
const query = data.query;
async function load_responses() {
return await (
await fetch(`/_partial/timeline?page=${query.page || "0"}`)
).json();
return await (await fetch(`/_partial/timeline?page=${query.page || "0"}`)).json();
}
let responses = $state([] as any[]);
Expand All @@ -46,49 +44,27 @@
<article>
<main class="flex flex-col gap-2">
<div class="pillmenu convertible">
<a href="/" class="active"
><span>{lang["timelines:link.timeline"]}</span></a
>
<a href="/inbox/posts"
><span>{lang["timelines:link.posts"]}</span></a
>
<a href="/inbox/global"
><span>{lang["timelines:link.global"]}</span></a
>
<a href="/" class="active"><span>{lang["timelines:link.timeline"]}</span></a>
<a href="/inbox/posts"><span>{lang["timelines:link.posts"]}</span></a>
<a href="/inbox/global"><span>{lang["timelines:link.global"]}</span></a>
</div>

<div class="pillmenu convertible">
<a href="/public"
><span>{lang["timelines:link.public"]}</span></a
>
<a href="/" class="active"
><span>{lang["timelines:link.following"]}</span></a
>
<a href="/public"><span>{lang["timelines:link.public"]}</span></a>
<a href="/" class="active"><span>{lang["timelines:link.following"]}</span></a>
</div>

{#if user.is_some()}
{@const profile = user.unwrap() as Profile}
<div class="card w-full flex flex-col gap-2">
<h5 id="friends">My Friends</h5>
<div class="flex gap-2 flex-wrap">
<BigFriend
user={profile}
profile={Some(profile)}
{lang}
/>
<BigFriend user={profile} profile={Some(profile)} {lang} />
{#each page.friends as user}
{#if profile.id !== user[0].id}
<BigFriend
user={user[0]}
profile={Some(profile)}
{lang}
/>
<BigFriend user={user[0]} profile={Some(profile)} {lang} />
{:else}
<BigFriend
user={user[1]}
profile={Some(profile)}
{lang}
/>
<BigFriend user={user[1]} profile={Some(profile)} {lang} />
{/if}
{/each}
</div>
Expand All @@ -98,12 +74,8 @@
{#each responses as res}
<Response
{res}
anonymous_avatar={profile.metadata.kv[
"sparkler:anonymous_avatar"
] || ""}
anonymous_username={profile.metadata.kv[
"sparkler:anonymous_username"
] || ""}
anonymous_avatar={profile.metadata.kv["sparkler:anonymous_avatar"] || ""}
anonymous_username={profile.metadata.kv["sparkler:anonymous_username"] || ""}
is_powerful={page.is_powerful}
is_helper={page.is_helper}
is_pinned={false}
Expand All @@ -126,8 +98,7 @@
query.page = 1;
}

for (const res of (await load_responses()).payload
.responses) {
for (const res of (await load_responses()).payload.responses) {
responses.push(res);
}
}}
Expand All @@ -147,10 +118,7 @@
</h3>
</div>

<div
class="flex flex-col gap-4 items-center justify-center"
style="width: 20rem; max-width: 100%"
>
<div class="flex flex-col gap-4 items-center justify-center" style="width: 20rem; max-width: 100%">
<hr class="w-full" />

<div class="flex flex-col gap-2 w-full">
Expand All @@ -159,6 +127,7 @@
href="/sign_up"
data-turbo="false"
style="gap: 1rem !important"
data-sveltekit-reload
>
<UserRoundPlus class="icon" />
{lang["homepage.html:link.create_account"]}
Expand All @@ -169,6 +138,7 @@
href="/login"
data-turbo="false"
style="gap: 1rem !important"
data-sveltekit-reload
>
<Smile class="icon" />{lang["general:link.login"]}
</a>
Expand All @@ -177,4 +147,9 @@
</div>
</div>
</div>

<script>
// logout of account (if it exists), we can only possibly see this page with an account if it was deleted
fetch("/api/v0/auth/logout", { method: "POST" });
</script>
{/if}
25 changes: 18 additions & 7 deletions crates/web/src/routes/@[username]/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,8 @@
import { active_page } from "$lib/stores.js";
active_page.set("profile");
import Question from "$lib/components/Question.svelte";
import Dropdown from "$lib/components/Dropdown.svelte";
import MoreResponseOptions from "$lib/components/MoreResponseOptions.svelte";
import { Option } from "$lib/classes/Option";
import Notification from "$lib/components/Notification.svelte";
import type { RelationshipStatus } from "$lib/bindings/RelationshipStatus";
import { render_markdown } from "$lib/helpers.js";
import UserNote from "$lib/components/UserNote.svelte";
Expand Down Expand Up @@ -316,19 +313,33 @@
<!-- social -->
{#if !hide_social}
<div class="footernav flex-wrap justify-center profile_social" style="font-size: 13px;">
<a href="/@{other.username}/followers" class="item" style="color: var(--color-text)">
<a
href="/@{other.username}/social/followers"
class="item"
style="color: var(--color-text)"
>
<b>{followers_count}</b>
<span class="fade"
>{lang["profile:base.html:link.follower"]}{#if followers_count > 1}s{/if}</span
>{lang[
"profile:base.html:link.follower"
]}{#if followers_count > 1 || followers_count === 0}s{/if}</span
>
</a>

<a href="/@{other.username}/following" class="item" style="color: var(--color-text)">
<a
href="/@{other.username}/social/following"
class="item"
style="color: var(--color-text)"
>
<b>{following_count}</b>
<span class="fade">{lang["profile:base.html:link.following"]}</span>
</a>

<a href="/@{other.username}/friends" class="item" style="color: var(--color-text)">
<a
href="/@{other.username}/social/friends"
class="item"
style="color: var(--color-text)"
>
<b>{friends_count}</b>
<span class="fade"
>{lang[
Expand Down
Loading

0 comments on commit efead49

Please sign in to comment.