blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-04-30 16:21:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat[wip]: Profile edit page
Some checks failed
Build & Test / build (20.x) (push) Has been cancelled
Details
Build & Test / build (22.x) (push) Has been cancelled
Details

Browse source
This commit is contained in:
Shibo Lyu 2025-04-14 03:43:00 +08:00
parent 0be74f387a
commit aaedd69889
1 changed files with 67 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/routes/(app)/settings/account/profile/+page.svelte
View file

@ -1,14 +1,75 @@
<script lang="ts">
import LoadingIndicator from '$lib/components/LoadingIndicator.svelte';
import PageHeader from '$lib/components/PageHeader.svelte';
import { Button } from 'bits-ui';
import accountsManager from '$lib/accounts/manager.svelte';
import {
GroupedListContainer,
GroupedListSection,
GroupedListInputItem,
GroupedListContent,
GroupedListItem
} from '$lib/components/GroupedList';
import type { BlahProfile } from '@blah-im/core/identity';
import ProfilePicture from '$lib/components/ProfilePicture.svelte';
import Button from '$lib/components/Button.svelte';
import RichTextInput from '$lib/components/RichTextInput.svelte';
import { messageSchema } from '$lib/components/RichTextInput/schema';
const currentAccount = $derived(accountsManager.currentAccount);
let profile: BlahProfile | null = $state(null);
let isBusy: boolean = $state(false);
$effect(() => {
if (currentAccount) {
const snapshot = $state.snapshot(currentAccount.profile.signee.payload);
profile = snapshot;
console.log('Reloaded');
}
});
$inspect(profile);
async function saveProfile() {
if (!currentAccount || !profile) return;
console.log('Saving profile', $state.snapshot(profile));
isBusy = true;
const identity = await accountsManager.identityForAccount(currentAccount);
await identity.updateProfile(profile);
await accountsManager.saveIdentity(identity);
console.log('Profile saved', identity.generateIdentityDescription());
isBusy = false;
}
</script>
{#if currentAccount}
<PageHeader>
<h3 class="flex-1">{currentAccount.profile.signee.payload.name}</h3>
</PageHeader>
<PageHeader>
<h3 class="flex-1">My Profile</h3>
<Button variant="primary" onclick={saveProfile} disabled={isBusy}>Save</Button>
</PageHeader>
{#if profile}
<GroupedListContainer>
<div class="mt-6 flex flex-col items-center gap-3 p-4">
<ProfilePicture identity={currentAccount} size={80} />
<Button>Change</Button>
</div>
<GroupedListSection>
<GroupedListInputItem>
Name
<input type="text" bind:value={profile.name} placeholder="Name" />
</GroupedListInputItem>
</GroupedListSection>
<GroupedListSection header="Bio">
<RichTextInput
class="text-ss-primary p-4 shadow-none ring-0"
schema={messageSchema}
onDocChange={(doc) => profile && (profile.bio = doc.textContent)}
placeholder="a 25 yo. artist from Paris."
>
{profile.bio ?? ''}
</RichTextInput>
</GroupedListSection>
</GroupedListContainer>
{/if}