your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { goto } from '$app/navigation';
3 import { user, logout } from '$lib/atproto';
4 import { getHandleOrDid } from '$lib/atproto/methods';
5 import type { WebsiteData } from '$lib/types';
6 import { Avatar, Button, Popover } from '@foxui/core';
7 import CustomDomainModal, { customDomainModalState } from '$lib/website/CustomDomainModal.svelte';
8 import SettingsModal, { settingsModalState } from '$lib/website/SettingsModal.svelte';
9
10 let {
11 data = $bindable()
12 }: {
13 data: WebsiteData;
14 } = $props();
15
16 let settingsPopoverOpen = $state(false);
17</script>
18
19{#if user.isLoggedIn && user.profile}
20 <div class="fixed top-4 right-4 z-20">
21 <Popover sideOffset={8} bind:open={settingsPopoverOpen} class="bg-base-100 dark:bg-base-900">
22 {#snippet child({ props })}
23 <button {...props}>
24 <Avatar src={user.profile?.avatar} alt="" class="size-15 cursor-pointer rounded-full" />
25 </button>
26 {/snippet}
27
28 <div class="flex flex-col">
29 {#if user.profile}
30 <Button
31 variant="ghost"
32 onclick={() => {
33 if (user.profile) goto('/' + getHandleOrDid(user.profile), {});
34 }}>Leave edit mode</Button
35 >
36 {/if}
37
38 <Button
39 variant="ghost"
40 onclick={() => {
41 settingsPopoverOpen = false;
42 settingsModalState.show();
43 }}>Settings</Button
44 >
45
46 <Button
47 variant="ghost"
48 onclick={() => {
49 settingsPopoverOpen = false;
50 customDomainModalState.show();
51 }}>Custom Domain</Button
52 >
53
54 <Button variant="ghost" onclick={logout}>Logout</Button>
55 </div>
56 </Popover>
57 </div>
58
59 <CustomDomainModal publicationUrl={data.publication?.url} />
60 <SettingsModal bind:data />
61{/if}