From 9d0aa878ca625d5916178ba54ec35a647cdcd3d4 Mon Sep 17 00:00:00 2001 From: James Xylight Date: Tue, 08 Jul 2025 02:49:41 +0000 Subject: [PATCH] design: redesign accounts page --- src/lib/auth.svelte.ts | 63 +++++++++++++++++++++++++++++++++++---------------------------- src/lib/client/README | 1 + src/lib/lemmy/ProfileAvatar.svelte | 6 +++++- src/routes/+layout.svelte | 2 +- src/routes/accounts/+page.svelte | 271 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------- src/style/app.css | 32 +------------------------------- static/font/EBGaramond-Regular.woff2 | 0 static/font/Nunito.woff2 | 0 static/font/Satoshi.woff2 | 0 9 file(s) changed, 185 insertion(s)(+), 190 deletion(s)(-) diff --git a/src/lib/auth.svelte.ts b/src/lib/auth.svelte.ts --- a/src/lib/auth.svelte.ts +++ b/src/lib/auth.svelte.ts @@ -105,40 +105,47 @@ if (!value) return const index = profileData.profiles.findIndex(i => i.id == value?.id) profileData.profiles[index] = value } -} -export const profile = new CurrentProfile() + async fetchUserData() { + const startId = this.#data.id + if (this.#data.jwt) { + site.data = undefined + notifications.set({ applications: 0, inbox: 0, reports: 0 }) -async function fetchUserData(profile: CurrentProfile) { - if (profile.data.jwt) { - site.data = undefined - notifications.set({ applications: 0, inbox: 0, reports: 0 }) + const res = await userFromJwt(this.#data.jwt, this.#data.instance) + if (!res?.user) + toast({ + content: + "Your account's instance did not return your user data. Your login may have expired.", + type: 'error', + }) - const res = await userFromJwt(profile.data.jwt, profile.data.instance) - if (!res?.user) - toast({ - content: - "Your account's instance did not return your user data. Your login may have expired.", - type: 'error', - }) + // TODO update authentication handling to not be this dynamic + if (this.#data.id != startId) { + console.error('profile was switched too fast, ID mismatch') + return + } - site.data = res?.site - profile.data.user = res?.user - if (profile.data.user) { - profile.data.avatar = res?.user?.local_user_view.person.avatar - profile.data.username = res?.user?.local_user_view.person.name + site.data = res?.site + this.#data.user = res?.user + if (profile.data.user) { + this.#data.avatar = res?.user?.local_user_view.person.avatar + this.#data.username = res?.user?.local_user_view.person.name + } + } else { + if (browser) { + site.data = undefined + client({ instanceURL: this.#data.instance }) + .getSite() + .then(res => (site.data = res)) + } } - } else { - if (browser) { - site.data = undefined - client({ instanceURL: profile.data.instance }) - .getSite() - .then(res => (site.data = res)) - } + + return this } +} - return profile -} +export const profile = new CurrentProfile() export const notifications = writable({ applications: 0, @@ -168,7 +175,7 @@ }) $effect(() => { if (profile.data.id || profileData) - fetchUserData(profile).then(() => { + profile.fetchUserData().then(() => { checkInbox() }) }) diff --git a/src/lib/client/README b/src/lib/client/README new file mode 100644 --- /dev/null +++ b/src/lib/client/README @@ -0,0 +1,1 @@ +A lot of the code in here was either inspired or modified from https://github.com/aeharding/threadiverse, which is licensed under the AGPL 3.0. \ No newline at end of file diff --git a/src/lib/lemmy/ProfileAvatar.svelte b/src/lib/lemmy/ProfileAvatar.svelte --- a/src/lib/lemmy/ProfileAvatar.svelte +++ b/src/lib/lemmy/ProfileAvatar.svelte @@ -30,7 +30,11 @@ {:else} diff --git a/src/routes/accounts/+page.svelte b/src/routes/accounts/+page.svelte --- a/src/routes/accounts/+page.svelte +++ b/src/routes/accounts/+page.svelte @@ -14,21 +14,17 @@ import { t } from '$lib/i18n/translations' import { LINKED_INSTANCE_URL } from '$lib/instance.svelte.js' import ProfileAvatar from '$lib/lemmy/ProfileAvatar.svelte' import { settings } from '$lib/settings.svelte.js' - import { Button, Menu, MenuButton, Modal } from 'mono-svelte' + import { Badge, Button, Material, Menu, MenuButton, Modal } from 'mono-svelte' import { ArrowLeftOnRectangle, ArrowRightOnRectangle, - ArrowsRightLeft, BugAnt, - Check, ChevronDown, ChevronUp, EllipsisHorizontal, Icon, Plus, } from 'svelte-hero-icons' - import { expoOut } from 'svelte/easing' - import { fly } from 'svelte/transition' let debugging = $state(false) let debugProfile: Profile | undefined = $state(undefined) @@ -38,7 +34,17 @@ shown: false, account: undefined as Profile | undefined, }) - let switching = $state(-2) + let switching = $state(-1) + + let radioSelected = $state(profile.data.id) + $effect(() => { + switching = radioSelected + setUserID(radioSelected) + }) + + $effect(() => { + if (profile.data.user) switching = -1 + }) @@ -96,138 +102,145 @@ {/if} -
-
- {$t('routes.accounts')} - {#snippet extended()} -
-
- - {#if !LINKED_INSTANCE_URL} - - {/if} -
-
- {/snippet} -
-
- {#each profileData.profiles as profile, index (profile.id)} -
+
+ {$t('routes.accounts')} + {#snippet extended()} +
+
-
- + {#if !LINKED_INSTANCE_URL} + + {/if} +
+
+ {/snippet} +
+
+ {#each profileData.profiles as profile, index (profile.id)} +
- {/each} -
-
+ + + {/each} + + + diff --git a/src/style/app.css b/src/style/app.css --- a/src/style/app.css +++ b/src/style/app.css @@ -14,6 +14,7 @@ --font-mono: monospace; --animate-pop-in: pop-in 0.25s ease-out forwards; + --ease-cubic: cubic-bezier(0.075, 0.82, 0.165, 1); --spacing-22: 88px; --color-slate-25: rgb(var(--c-s-25, 252 253 254)); @@ -57,42 +58,11 @@ } } } -.cc { - inset: -1px; - position: absolute; - border-radius: inherit; - z-index: -1; - background: linear-gradient( - 125deg, - color-mix(in oklab, var(--color-zinc-50) 20%, transparent), - color-mix(in oklab, var(--color-zinc-50) 0%, transparent), - color-mix(in oklab, var(--color-zinc-50) 20%, transparent) - ); -} - @custom-variant hover (&:hover); @font-face { font-family: 'Inter'; src: url('/font/Inter.woff2') format('woff2'); - font-display: swap; -} - -@font-face { - font-family: 'Satoshi'; - src: url('/font/Satoshi.woff2') format('woff2'); - font-display: swap; -} - -@font-face { - font-family: 'Nunito'; - src: url('/font/Nunito.woff2') format('woff2'); - font-display: swap; -} - -@font-face { - font-family: 'EBGaramond'; - src: url('/font/EBGaramond-Regular.woff2') format('woff2'); font-display: swap; } diff --git a/static/font/EBGaramond-Regular.woff2 b/static/font/EBGaramond-Regular.woff2 deleted file mode 100644 --- a/static/font/EBGaramond-Regular.woff2 +++ /dev/null diff --git a/static/font/Nunito.woff2 b/static/font/Nunito.woff2 deleted file mode 100644 --- a/static/font/Nunito.woff2 +++ /dev/null diff --git a/static/font/Satoshi.woff2 b/static/font/Satoshi.woff2 deleted file mode 100644 --- a/static/font/Satoshi.woff2 +++ /dev/null -- tangled.sh