tangled.org
Monorepo for Tangled
tangled.org
web/components: add tabs for profile, emails, notifs and sites
most of these are placeholders
Signed-off-by: oppiliappan <me@oppi.li>
author
oppiliappan
committer
dawn
date
(Jul 27, 2026, 3:40 PM +0300)
commit
2bfff64c
2bfff64cb38cd199759abaf7d05fc52ab340ef96
parent
769abfe1
769abfe144c9a6f7d1e2c5e9ee045c29aeea9ea2
+78
+12
web/src/lib/components/settings/tabs/EmailsTab.svelte
+12
web/src/lib/components/settings/tabs/EmailsTab.svelte
···
1
+
<div>
2
+
<h2 class="text-lg font-medium text-foreground-default">Email addresses</h2>
3
+
<p class="text-sm text-foreground-subtle">
4
+
Commits authored using emails listed here will be associated with your Tangled profile.
5
+
</p>
6
+
<!-- TODO: list, add and verify email addresses -->
7
+
<div
8
+
class="mt-2 flex items-center justify-center rounded border border-border-default p-4 text-sm text-foreground-subtle"
9
+
>
10
+
Coming soon
11
+
</div>
12
+
</div>
+13
web/src/lib/components/settings/tabs/NotificationsTab.svelte
+13
web/src/lib/components/settings/tabs/NotificationsTab.svelte
···
1
+
<div>
2
+
<h2 class="text-lg font-medium text-foreground-default">Notification preferences</h2>
3
+
<p class="text-sm text-foreground-subtle">
4
+
Choose which notifications you want to receive when activity happens on your repositories and
5
+
profile.
6
+
</p>
7
+
<!-- TODO: notification preference toggles -->
8
+
<div
9
+
class="mt-2 flex items-center justify-center rounded border border-border-default p-4 text-sm text-foreground-subtle"
10
+
>
11
+
Coming soon
12
+
</div>
13
+
</div>
+49
web/src/lib/components/settings/tabs/ProfileTab.svelte
+49
web/src/lib/components/settings/tabs/ProfileTab.svelte
···
1
+
<script lang="ts">
2
+
import { getAuth } from "$lib/auth.svelte";
3
+
import { createBobbinClient } from "$lib/api/client";
4
+
import { resolveMiniDoc } from "$lib/api/identity";
5
+
6
+
const auth = getAuth();
7
+
const user = $derived(auth.currentUser);
8
+
9
+
let pds = $state<string | null>(null);
10
+
11
+
$effect(() => {
12
+
const did = user?.did;
13
+
if (!did) return;
14
+
const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
15
+
let cancelled = false;
16
+
resolveMiniDoc(ctx, did)
17
+
.then((doc) => {
18
+
if (!cancelled) pds = doc.pds ?? null;
19
+
})
20
+
.catch(() => {
21
+
if (!cancelled) pds = null;
22
+
});
23
+
return () => {
24
+
cancelled = true;
25
+
};
26
+
});
27
+
</script>
28
+
29
+
<div>
30
+
<h2 class="text-lg font-medium text-foreground-default">Profile</h2>
31
+
<p class="pb-2 text-sm text-foreground-subtle">
32
+
Your account information from your AT Protocol identity.
33
+
</p>
34
+
35
+
<div class="flex flex-col divide-y divide-border-default rounded border border-border-default">
36
+
<div class="flex flex-col gap-1 p-4">
37
+
<span class="text-sm text-foreground-subtle">Handle</span>
38
+
<span class="font-bold text-foreground-default">{user?.handle ?? "…"}</span>
39
+
</div>
40
+
<div class="flex flex-col gap-1 p-4">
41
+
<span class="text-sm text-foreground-subtle">Decentralized Identifier (DID)</span>
42
+
<span class="font-mono font-bold break-all text-foreground-default">{user?.did ?? "…"}</span>
43
+
</div>
44
+
<div class="flex flex-col gap-1 p-4">
45
+
<span class="text-sm text-foreground-subtle">Personal Data Server (PDS)</span>
46
+
<span class="font-bold break-all text-foreground-default">{pds ?? "…"}</span>
47
+
</div>
48
+
</div>
49
+
</div>