A downstream fork of Tranquil PDS for use in margin.cafe margin.cafe
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475<script lang="ts"> import ProfileAvatar from '../ProfileAvatar.svelte' import { loadActorProfile, type ActorProfile } from '../../../public/actor-profile.js' import { _ } from '../../lib/i18n' import { getServerConfigState } from '../../lib/serverConfig.svelte' import type { Session } from '../../lib/types/api' import Icon, { type IconName } from '../ui/Icon.svelte' let { session }: { session: Session } = $props() let profile = $state<ActorProfile>({}) $effect(() => { let active = true profile = {} loadActorProfile(session.did).then(value => { if (active) profile = value }) return () => { active = false } }) const config = $derived(getServerConfigState()) const needsVerification = $derived(session.contactKind === 'email' ? !session.emailConfirmed : session.contactKind === 'channel' ? !session.preferredChannelVerified : false) const tasks = $derived<{ href: string; icon: IconName; title: string; description: string; show: boolean }[]>([ { href: '/app/settings', icon: 'user', title: $_('dashboard.navSettings'), description: $_('design.identityDescription'), show: session.accountKind !== 'migrated' }, { href: '/app/security', icon: 'shield', title: $_('dashboard.navSecurity'), description: $_('design.securityDescription'), show: true }, { href: '/app/connected-apps', icon: 'share', title: $_('work.connectedApps'), description: $_('design.sessionsDescription'), show: true }, { href: '/app/repo', icon: 'data', title: $_('dashboard.navRepo'), description: $_('design.dataDescription'), show: session.accountKind !== 'migrated' }, ])</script>
<div class="account-overview"> <div class="identity-summary"> <div class="identity-heading"> <ProfileAvatar did={session.did} handle={session.handle} size={56} /> <div> <h2>{profile.displayName || '@' + session.handle}</h2> {#if profile.displayName}<p class="profile-handle">@{session.handle}</p>{/if} <p>{$_('design.accountHome')}</p> </div> </div> <dl class="identity-facts"> <div><dt>{$_('design.hostedBy')}</dt><dd>{session.accountKind === 'migrated' ? session.migratedToPds : config.serverName || globalThis.location.hostname}</dd></div> <div><dt>{$_('dashboard.did')}</dt><dd><code>{session.did}</code></dd></div> </dl> </div>
{#if needsVerification && session.accountKind !== 'migrated'} <div class="overview-notice"> <Icon name="mail" /> <div><strong>{$_('design.verifyContact')}</strong><p>{$_('design.verifyDescription')}</p></div> <a href="/app/comms">{$_('design.review')}<Icon name="arrow" size={16} /></a> </div> {/if}
<div class="overview-columns"> <div class="overview-tasks"> <h3>{$_('design.manageAccount')}</h3> <div class="task-list"> {#each tasks.filter(task => task.show) as task} <a class="task-row" href={task.href}> <Icon name={task.icon} /> <span><strong>{task.title}</strong><span>{task.description}</span></span> <Icon name="arrow" size={18} /> </a> {/each} </div> </div> <aside class="hosting-note"> <Icon name="server" size={26} /> <h3>{$_(session.accountKind === 'migrated' ? 'design.yourIdentity' : 'design.yourData')}</h3> <p>{$_(session.accountKind === 'migrated' ? 'design.migratedHostingDescription' : 'design.hostingDescription')}</p> {#if session.accountKind !== 'migrated'} <a href="/app/data">{$_('design.exportData')}<Icon name="arrow" size={16} /></a> {:else} <a href="/app/did-document">{$_('dashboard.navDidDocument')}<Icon name="arrow" size={16} /></a> {/if} </aside> </div></div>