From 09b7d24b95e64356d378ec8a5fd9871607e81bc2 Mon Sep 17 00:00:00 2001 From: Shibo Lyu Date: Tue, 3 Sep 2024 01:58:04 +0800 Subject: [PATCH] feat: identity menu --- package-lock.json | 13 +++++++ package.json | 1 + src/lib/components/DropdownMenu.ts | 4 +- .../components/DropdownMenu/Content.svelte | 12 +++++- src/lib/components/DropdownMenu/Item.svelte | 2 +- .../components/DropdownMenu/RadioItem.svelte | 19 ++++++++++ .../components/DropdownMenu/Separator.svelte | 5 +++ src/lib/keystore.ts | 6 +-- src/lib/localstore.ts | 28 -------------- src/routes/(app)/IdentityMenu.svelte | 38 +++++++++++++------ 10 files changed, 83 insertions(+), 45 deletions(-) create mode 100644 src/lib/components/DropdownMenu/RadioItem.svelte create mode 100644 src/lib/components/DropdownMenu/Separator.svelte delete mode 100644 src/lib/localstore.ts diff --git a/package-lock.json b/package-lock.json index 9ed84a3..7dc1db0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "canonicalize": "^2.0.0", "svelte-boring-avatars": "^1.2.6", "svelte-hero-icons": "^5.2.0", + "svelte-persisted-store": "^0.11.0", "tailwind-merge": "^2.5.2", "typewriter-editor": "^0.12.6", "unique-names-generator": "^4.7.1", @@ -5421,6 +5422,18 @@ "svelte": "^3.19.0 || ^4.0.0" } }, + "node_modules/svelte-persisted-store": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/svelte-persisted-store/-/svelte-persisted-store-0.11.0.tgz", + "integrity": "sha512-9RgJ5DrawGyyfK22A80cfu8Jose3CV8YjEZKz9Tn94rQ0tWyEmYr+XI+wrVF6wjRbW99JMDSVcFRiM3XzVJj/w==", + "license": "MIT", + "engines": { + "node": ">=0.14" + }, + "peerDependencies": { + "svelte": "^3.48.0 || ^4.0.0 || ^5.0.0-next.0" + } + }, "node_modules/svelte-preprocess": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz", diff --git a/package.json b/package.json index 7323eb3..f5908a5 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "canonicalize": "^2.0.0", "svelte-boring-avatars": "^1.2.6", "svelte-hero-icons": "^5.2.0", + "svelte-persisted-store": "^0.11.0", "tailwind-merge": "^2.5.2", "typewriter-editor": "^0.12.6", "unique-names-generator": "^4.7.1", diff --git a/src/lib/components/DropdownMenu.ts b/src/lib/components/DropdownMenu.ts index 458805f..dd2997e 100644 --- a/src/lib/components/DropdownMenu.ts +++ b/src/lib/components/DropdownMenu.ts @@ -3,7 +3,9 @@ import { DropdownMenu } from 'bits-ui'; import Content from './DropdownMenu/Content.svelte'; import Trigger from './DropdownMenu/Trigger.svelte'; import Item from './DropdownMenu/Item.svelte'; +import RadioItem from './DropdownMenu/RadioItem.svelte'; +import Separator from './DropdownMenu/Separator.svelte'; -const { Root, RadioGroup, RadioItem, Separator } = DropdownMenu; +const { Root, RadioGroup } = DropdownMenu; export { Root, Trigger, Content, Item, RadioGroup, RadioItem, Separator }; diff --git a/src/lib/components/DropdownMenu/Content.svelte b/src/lib/components/DropdownMenu/Content.svelte index fdcaf5e..d10b4c6 100644 --- a/src/lib/components/DropdownMenu/Content.svelte +++ b/src/lib/components/DropdownMenu/Content.svelte @@ -1,12 +1,22 @@ diff --git a/src/lib/components/DropdownMenu/Item.svelte b/src/lib/components/DropdownMenu/Item.svelte index 24377f7..735e595 100644 --- a/src/lib/components/DropdownMenu/Item.svelte +++ b/src/lib/components/DropdownMenu/Item.svelte @@ -5,7 +5,7 @@ diff --git a/src/lib/components/DropdownMenu/RadioItem.svelte b/src/lib/components/DropdownMenu/RadioItem.svelte new file mode 100644 index 0000000..7e4d3fc --- /dev/null +++ b/src/lib/components/DropdownMenu/RadioItem.svelte @@ -0,0 +1,19 @@ + + + + + + + + diff --git a/src/lib/components/DropdownMenu/Separator.svelte b/src/lib/components/DropdownMenu/Separator.svelte new file mode 100644 index 0000000..7ea681c --- /dev/null +++ b/src/lib/components/DropdownMenu/Separator.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/lib/keystore.ts b/src/lib/keystore.ts index 334313a..821cc5d 100644 --- a/src/lib/keystore.ts +++ b/src/lib/keystore.ts @@ -1,5 +1,5 @@ +import { persisted } from 'svelte-persisted-store'; import type { EncodedBlahKeyPair } from './blah/crypto'; -import { localStore } from './localstore'; -export const keyStore = localStore('weblah-keypairs', []); -export const currentKeyIndex = localStore('weblah-current-key-index', 0); +export const keyStore = persisted('weblah-keypairs', []); +export const currentKeyIndex = persisted('weblah-current-key-index', 0); diff --git a/src/lib/localstore.ts b/src/lib/localstore.ts deleted file mode 100644 index 815e459..0000000 --- a/src/lib/localstore.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { browser } from '$app/environment'; -import { get, writable, type Writable } from 'svelte/store'; - -export function localStore(key: string, initialData: V): Writable { - const store = writable(initialData); - const { subscribe, set } = store; - - if (browser) { - const storedValue = localStorage.getItem(key); - if (storedValue) set(JSON.parse(storedValue)); - } - - return { - subscribe, - set: (v) => { - if (browser) { - localStorage.setItem(key, JSON.stringify(v)); - } - set(v); - }, - update: (cb) => { - const updatedStore = cb(get(store)); - - if (browser) localStorage.setItem(key, JSON.stringify(updatedStore)); - set(updatedStore); - } - }; -} diff --git a/src/routes/(app)/IdentityMenu.svelte b/src/routes/(app)/IdentityMenu.svelte index f6fc0ab..b374016 100644 --- a/src/routes/(app)/IdentityMenu.svelte +++ b/src/routes/(app)/IdentityMenu.svelte @@ -5,8 +5,11 @@ import { BlahKeyPair, generateName } from '$lib/blah/crypto'; let currentKeyId: string | undefined; - $: currentKeyId = $keyStore[$currentKeyIndex]?.id; - $: currentKeyName = currentKeyId ? generateName(currentKeyId) : null; + let currentKeyName: string | null; + $: { + currentKeyId = $keyStore[$currentKeyIndex]?.id; + currentKeyName = currentKeyId ? generateName(currentKeyId) : null; + } async function createKeyPair() { const newKeyPair = await BlahKeyPair.generate(); @@ -14,12 +17,18 @@ $keyStore = [...$keyStore, encoded]; $currentKeyIndex = $keyStore.length - 1; } + + function setCurrentKeyIndex(idx: string | undefined | null) { + $currentKeyIndex = parseInt(idx ?? '0', 10); + } - + {#if currentKeyId} - + {#key currentKeyId} + + {/key} Using identity {currentKeyName} {:else}
Using no identity {/if} - + {#if $keyStore.length > 0} - - {#each $keyStore as { id }} + + {#each $keyStore as { id }, idx} {@const name = generateName(id)} - - - {name} + +
+ + {name} +
{/each} + Manage identities + {:else} + Create new identity {/if} - Create new identity