Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149<script lang="ts"> import type { Snippet } from "svelte"; import Pencil from "$icon/pencil"; import type { ProfileRecord } from "$lib/api/records"; import { getAuth } from "$lib/auth.svelte"; import FollowButton from "$lib/components/profile/FollowButton.svelte"; import NetworkVouches from "$lib/components/profile/NetworkVouches.svelte"; import ProfileEditForm from "$lib/components/profile/ProfileEditForm.svelte"; import ProfileBio from "$lib/components/profile/ProfileBio.svelte"; import ProfileMoreMenu from "$lib/components/profile/ProfileMoreMenu.svelte"; import ProfileSocialLinks from "$lib/components/profile/ProfileSocialLinks.svelte"; import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte"; import VouchButton from "$lib/components/profile/VouchButton.svelte"; import type { DirectVouch, NetworkVouch, ProfileCounts } from "$lib/components/profile/types"; import Avatar from "$lib/components/ui/Avatar.svelte"; import Button from "$lib/components/ui/Button.svelte"; import Card from "$lib/components/ui/Card.svelte";
interface Props { identity: { did: string; handle: string }; profile: ProfileRecord | null; counts: ProfileCounts; viewerFollowRkey?: string | null; viewerVouch: DirectVouch | null; networkVouches: NetworkVouch[]; activeTab: string; content: Snippet; }
let { identity, profile, counts, viewerFollowRkey, viewerVouch, networkVouches, activeTab, content }: 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);</script>
<ProfileTabs handle={identity.handle} active={activeTab} {counts} /><Card padding="none" class="overflow-hidden"> {#if activeTab === "overview"} <section class="relative text-foreground-default"> <div class="h-22.25 border-b border-border-default bg-linear-to-b from-background-default to-background-subtle dark:bg-background-default dark:bg-none" ></div> <Avatar did={identity.did} handle={identity.handle} size="full" class="absolute top-6 left-1/2 size-32 -translate-x-1/2 bg-background-default sm:left-6 sm:translate-x-0" />
<div class="absolute inset-x-4 top-40 flex items-center justify-between gap-xs sm:top-9.25 sm:left-auto sm:justify-end" > <div class="flex items-center gap-xs"> {#if isSelf} <Button variant="default" icon={Pencil} onclick={() => (editing = true)} >Edit</Button > {:else} <div class="min-w-23"> <FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} /> </div> <div class="sm:min-w-22.5"> <VouchButton profileDid={identity.did} profileLabel={identity.handle} initialVouch={viewerVouch} {networkVouches} hideLabelOnMobile /> </div> {/if} </div> <ProfileMoreMenu {identity} /> </div>
<h1 title={identity.handle} class="max-w-full truncate px-xl pt-30.75 typography-heading-4 sm:absolute sm:top-10 sm:right-4 sm:left-43 sm:w-fit sm:px-none sm:pt-none" > {identity.handle} {#if shown?.pronouns} <span class="ml-xs typography-paragraph-regular font-normal text-foreground-muted" > {shown.pronouns} </span> {/if} </h1>
<div class="flex min-h-16 flex-col gap-md px-xl pt-xs sm:ml-39 sm:flex-row sm:items-center sm:justify-between sm:gap-xl sm:px-md sm:py-sm" > {#if editing} <div class="w-full"> <ProfileEditForm profile={shown} onSaved={(record) => { saved = record; editing = false; }} onCancel={() => (editing = false)} /> </div> {:else} {#if shown?.description} <ProfileBio text={shown.description} class="min-w-0 typography-paragraph-regular sm:-mt-px" /> {/if} {#if shown} <ProfileSocialLinks {identity} profile={shown} followers={counts.followers} following={counts.following} class="max-sm:-ml-2.5 max-sm:flex-col max-sm:items-start max-sm:gap-xs" /> {/if} {/if} </div>
{#if networkVouches.length > 0} <div class="px-xl py-md sm:ml-39 sm:px-md sm:pt-none"> <NetworkVouches subjectHandle={identity.handle} vouches={networkVouches} /> </div> {/if} </section> <div class="p-md">{@render content()}</div> {:else} <div class="p-md">{@render content()}</div> {/if}</Card>