Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158<script lang="ts"> import FollowButton from "./FollowButton.svelte"; import ProfileEditForm from "./ProfileEditForm.svelte"; import FollowerFollowing from "./FollowerFollowing.svelte"; import MapPin from "$icon/map-pin"; import Link from "$icon/link"; import Pencil from "$icon/pencil"; import Rss from "$icon/rss"; import UserRound from "$icon/user-round"; import Button from "$lib/components/ui/Button.svelte"; import { getAuth } from "$lib/auth.svelte"; import type { ProfileRecord } from "$lib/api/records";
interface Identity { did: string; handle: string; avatar?: string; }
interface Props { identity: Identity; profile: ProfileRecord | null; followers: number; following: number; viewerFollowRkey?: string | null; }
let { identity, profile, followers, following, viewerFollowRkey }: Props = $props();
const auth = getAuth(); const isSelf = $derived(auth.currentDid === identity.did);
let editing = $state(false); let saved = $state<ProfileRecord | null>(null); const shown = $derived(saved ?? profile);
const links = $derived((shown?.links ?? []).filter((l) => l.trim().length > 0)); const blueskyUrl = $derived(shown?.bluesky ? `https://bsky.app/profile/${identity.did}` : null);</script>
<div class="grid grid-cols-3 items-center gap-1 md:grid-cols-1"> <div class="col-span-1 flex items-center justify-center"> <div class="relative aspect-square w-3/4"> {#if identity.avatar} <img class="absolute inset-0 h-full w-full rounded-full object-cover p-2" src={identity.avatar} alt={identity.handle} /> {:else} <span class="absolute inset-0 h-full w-full p-2" aria-hidden="true"> <span class="flex h-full w-full items-center justify-center rounded-full bg-background-inset text-foreground-placeholder" > <UserRound class="size-1/2" /> </span> </span> {/if} </div> </div>
<div class="col-span-2"> <div class="flex flex-row flex-nowrap items-center gap-2"> <h1 title={identity.handle} class="overflow-hidden text-lg font-bold text-ellipsis whitespace-nowrap" > {identity.handle} </h1> {#if shown?.pronouns} <p class="text-foreground-subtle">{shown.pronouns}</p> {/if} </div> <div class="md:hidden"> <FollowerFollowing handle={identity.handle} {followers} {following} /> </div> </div>
<div class="col-span-3 md:col-span-full"> {#if editing} <ProfileEditForm profile={shown} onSaved={(record) => { saved = record; editing = false; }} onCancel={() => (editing = false)} /> {:else} <div class="space-y-2 text-sm"> {#if shown?.description} <p class="pb-4 text-base md:pb-2">{shown.description}</p> {/if}
<div class="hidden md:block"> <FollowerFollowing handle={identity.handle} {followers} {following} /> </div>
{#if shown?.location || links.length > 0 || blueskyUrl} <div class="mb-2 flex max-w-full flex-col gap-2 overflow-hidden text-ellipsis whitespace-nowrap" > {#if shown?.location} <div class="flex items-center gap-2"> <span class="flex-shrink-0"><MapPin class="size-4" aria-hidden="true" /></span> <span>{shown.location}</span> </div> {/if} {#if blueskyUrl} <div class="flex items-center gap-2"> <span class="flex-shrink-0"><Link class="size-4" aria-hidden="true" /></span> <a href={blueskyUrl} target="_blank" rel="external noopener noreferrer" class="truncate no-underline hover:underline">{identity.handle}</a > </div> {/if} {#each links as link, index (index)} <div class="flex items-center gap-2"> <span class="flex-shrink-0"><Link class="size-4" aria-hidden="true" /></span> <a href={link} target="_blank" rel="external nofollow me noopener noreferrer" class="truncate no-underline hover:underline">{link}</a > </div> {/each} </div> {/if}
<div class="my-2 flex items-center gap-2"> {#if isSelf} <Button variant="default" class="w-full gap-2" onclick={() => (editing = true)}> <Pencil class="size-3" aria-hidden="true" /> Edit </Button> {:else} <div class="w-full"> <FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} /> </div> {/if} <Button href={`/${identity.handle}/feed.atom`} variant="default" insetShadow={true} aria-label="RSS feed" > <Rss class="size-4" aria-hidden="true" /> </Button> </div> </div> {/if} </div></div>