From b467ec1491db352c4f7b32761c9b30bd5b993f9a Mon Sep 17 00:00:00 2001 From: Shibo Lyu Date: Mon, 14 Apr 2025 00:49:59 +0800 Subject: [PATCH] refactor: account management system Replace store-based approach with manager-based implementation and update related components to use the new system. Change ProfilePicture props from `account` to `identity`. --- src/lib/accounts/manager.svelte.ts | 36 +++---- src/lib/chatServers.ts | 3 +- .../GroupedList/GroupedListContent.svelte | 7 +- src/routes/(app)/ChatListItem.svelte | 4 +- src/routes/(app)/CurrentAccountPicture.svelte | 4 +- src/routes/(app)/settings/+page.svelte | 14 +++ .../settings/SettingsAccountSections.svelte | 102 ++++++++---------- .../(app)/settings/account/new/+page.svelte | 9 +- 8 files changed, 91 insertions(+), 88 deletions(-) diff --git a/src/lib/accounts/manager.svelte.ts b/src/lib/accounts/manager.svelte.ts index 4b06b1d..bcfbc1d 100644 --- a/src/lib/accounts/manager.svelte.ts +++ b/src/lib/accounts/manager.svelte.ts @@ -6,7 +6,6 @@ import { } from '@blah-im/core/identity'; import { type IdentityDB, openIdentityDB } from './identityFileDB'; import { BlahKeyPair } from '@blah-im/core/crypto'; -import { persisted } from 'svelte-persisted-store'; import { browser } from '$app/environment'; export type Account = BlahIdentityDescription & { @@ -30,24 +29,25 @@ class AccountManager { constructor() { if (browser) { this.currentAccountId = localStorage.getItem(localStorageCurrentAccountIdKey); + console.log('currentAccountId', this.currentAccountId); + + $effect.root(() => { + $effect(() => + this.currentAccountId + ? localStorage.setItem(localStorageCurrentAccountIdKey, this.currentAccountId) + : localStorage.removeItem(localStorageCurrentAccountIdKey) + ); + }); + + (async () => { + this.inProgress = true; + const [keyDB, identityDB] = await Promise.all([openAccountKeyDB(), openIdentityDB()]); + this.keyDB = keyDB; + this.identityDB = identityDB; + await this.loadAccounts(); + this.inProgress = false; + })(); } - - $effect.root(() => { - $effect(() => - this.currentAccountId - ? localStorage.setItem(localStorageCurrentAccountIdKey, this.currentAccountId) - : localStorage.removeItem(localStorageCurrentAccountIdKey) - ); - }); - - (async () => { - this.inProgress = true; - const [keyDB, identityDB] = await Promise.all([openAccountKeyDB(), openIdentityDB()]); - this.keyDB = keyDB; - this.identityDB = identityDB; - await this.loadAccounts(); - this.inProgress = false; - })(); } async loadAccounts() { diff --git a/src/lib/chatServers.ts b/src/lib/chatServers.ts index 2ae48c5..a830ed4 100644 --- a/src/lib/chatServers.ts +++ b/src/lib/chatServers.ts @@ -2,7 +2,6 @@ import { persisted } from 'svelte-persisted-store'; import { get } from 'svelte/store'; import { BlahChatServerConnection } from './blah/connection/chatServer'; import { BlahKeyPair, type EncodedBlahKeyPair } from '@blah-im/core/crypto'; -import { currentKeyPair } from './keystore'; import { ChatListManager } from './chatList'; import { browser } from '$app/environment'; import { GlobalSearchManager } from './globalSearch'; @@ -18,7 +17,7 @@ class ChatServerConnectionPool { constructor() { if (browser) { chatServers.subscribe(this.onChatServersChange.bind(this)); - currentKeyPair.subscribe(this.onKeyPairChange.bind(this)); + // currentKeyPair.subscribe(this.onKeyPairChange.bind(this)); } } diff --git a/src/lib/components/GroupedList/GroupedListContent.svelte b/src/lib/components/GroupedList/GroupedListContent.svelte index d426eb4..3bd9aa7 100644 --- a/src/lib/components/GroupedList/GroupedListContent.svelte +++ b/src/lib/components/GroupedList/GroupedListContent.svelte @@ -1,14 +1,15 @@ -
+
{@render children?.()}
diff --git a/src/routes/(app)/ChatListItem.svelte b/src/routes/(app)/ChatListItem.svelte index 3118c0a..49d5b7a 100644 --- a/src/routes/(app)/ChatListItem.svelte +++ b/src/routes/(app)/ChatListItem.svelte @@ -3,7 +3,7 @@ import { formatMessageDate, formatFullMessageDate, formatUnreadCount } from '$lib/formatters'; import type { Chat } from '$lib/types'; - import { currentKeyPair } from '$lib/keystore'; + import accountManager from '$lib/accounts/manager.svelte'; import { toPlainText } from '@blah-im/core/richText'; import { page } from '$app/state'; import { tw } from '$lib/tw'; @@ -56,7 +56,7 @@ {#if chat.lastMessage} {#if chat.id !== chat.lastMessage.sender.id} - {chat.lastMessage.sender.id === $currentKeyPair.id + {chat.lastMessage.sender.id === accountManager.currentAccountId ? 'You' : chat.lastMessage.sender.name}: diff --git a/src/routes/(app)/CurrentAccountPicture.svelte b/src/routes/(app)/CurrentAccountPicture.svelte index c5d78aa..ec544d5 100644 --- a/src/routes/(app)/CurrentAccountPicture.svelte +++ b/src/routes/(app)/CurrentAccountPicture.svelte @@ -24,7 +24,7 @@ {#if accountStore && $accountStore} {@const currentAccount = $accountStore.find((account) => account.id_key === $currentAccountStore)} - + {:else} - + {/if} diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte index e69de29..0a3155b 100644 --- a/src/routes/(app)/settings/+page.svelte +++ b/src/routes/(app)/settings/+page.svelte @@ -0,0 +1,14 @@ + + +{#if currentAccount} + +

{currentAccount.profile.signee.payload.name}

+ +{/if} diff --git a/src/routes/(app)/settings/SettingsAccountSections.svelte b/src/routes/(app)/settings/SettingsAccountSections.svelte index 0e32624..27ba76f 100644 --- a/src/routes/(app)/settings/SettingsAccountSections.svelte +++ b/src/routes/(app)/settings/SettingsAccountSections.svelte @@ -2,76 +2,66 @@ import { GroupedListItem, GroupedListSection } from '$lib/components/GroupedList'; import { ArrowRightEndOnRectangle, Plus, UserPlus } from 'svelte-hero-icons'; import SettingsListItem from './SettingsListItem.svelte'; - import { - openAccountStore, - currentAccountStore, - type AccountStore, - type Account - } from '$lib/accounts/accountStore'; - import { onMount } from 'svelte'; + import manager, { type Account } from '$lib/accounts/manager.svelte'; import ProfilePicture from '$lib/components/ProfilePicture.svelte'; import { flip } from 'svelte/animate'; import { blur } from 'svelte/transition'; + import GroupedListContent from '$lib/components/GroupedList/GroupedListContent.svelte'; - let accountStore: AccountStore | undefined = $state(); - - onMount(() => { - openAccountStore().then((store) => { - accountStore = store; - }); - }); + const currentAccount = $derived(manager.currentAccount); + const remainingAccounts = $derived( + manager.accounts + .filter((acc) => acc.id_key !== manager.currentAccountId) + .toSorted((a, b) => + a.profile.signee.payload.name.localeCompare(b.profile.signee.payload.name) + ) + ); function switchToAccount(account: Account) { - $currentAccountStore = account.id_key; + manager.currentAccountId = account.id_key; } -{#if accountStore && $accountStore} - {@const currentAccount = $accountStore.find((acc) => acc.id_key === $currentAccountStore)} - {@const remainingAccounts = $accountStore - .filter((acc) => acc.id_key !== $currentAccountStore) - .toSorted((a, b) => a.profile.signee.payload.name.localeCompare(b.profile.signee.payload.name))} - {#if currentAccount} - {#key currentAccount.id_key} -
-
- -
-

- - {currentAccount.profile.signee.payload.name} - -

-

- - {currentAccount.id_key.slice(0, 4) + '..' + currentAccount.id_key.slice(-4)} - -

+{#if currentAccount} + {#key currentAccount.id_key} +
+
+
- {/key} - {/if} - - {#if remainingAccounts.length > 0} - - {#each remainingAccounts as account (account.id_key)} -
- switchToAccount(account)}> -
- {account.profile.signee.payload.name} - -
- {/each} - - {/if} +

+ + {currentAccount.profile.signee.payload.name} + +

+

+ + {currentAccount.id_key.slice(0, 4) + '..' + currentAccount.id_key.slice(-4)} + +

+
+ {/key} {/if} - - {#if ($accountStore?.length ?? 0) > 0} +{#if remainingAccounts.length > 0} + + {#each remainingAccounts as account (account.id_key)} + switchToAccount(account)} + > +
+ {account.profile.signee.payload.name} + + {/each} Add Account - {:else} + +{:else} + Sign in Create Account - {/if} - + +{/if} diff --git a/src/routes/(app)/settings/account/new/+page.svelte b/src/routes/(app)/settings/account/new/+page.svelte index e924920..924e160 100644 --- a/src/routes/(app)/settings/account/new/+page.svelte +++ b/src/routes/(app)/settings/account/new/+page.svelte @@ -1,7 +1,7 @@