diff --git a/e2e/specs/profile-settings.spec.ts b/e2e/specs/profile-settings.spec.ts index 26790b73a..2e6a06149 100644 --- a/e2e/specs/profile-settings.spec.ts +++ b/e2e/specs/profile-settings.spec.ts @@ -279,9 +279,9 @@ flow("the picker goes away once six repositories are pinned") const sideBySide = async (ctx: Ctx) => { const bio = await testid("formDescription").locate(ctx.page, ctx).boundingBox(); - const location = await testid("formLocation").locate(ctx.page, ctx).boundingBox(); - if (!bio || !location) throw new Error("the bio or the location field is not on the page"); - return { bio, location }; + const link = await linkRow(0).locate(ctx.page, ctx).boundingBox(); + if (!bio || !link) throw new Error("the bio or the first link is not on the page"); + return { bio, link }; }; const sizeOfWindow = (width: number, height: number) => async (ctx: Ctx) => { @@ -289,27 +289,27 @@ const sizeOfWindow = (width: number, height: number) => async (ctx: Ctx) => { }; flow( - "the profile settings put the bio beside the other fields on a wide window and stack them on a narrow one" + "the profile settings put the bio beside the links on a wide window and stack them on a narrow one" ) .actor("owner") .open(profileSettings) .sees(testid("formDescription")) .step("a wide window", sizeOfWindow(1200, 900)) - .step("the bio sits left of the location and the links", async (ctx) => { + .step("the bio sits left of the links", async (ctx) => { await expect .poll(async () => { - const { bio, location } = await sideBySide(ctx); - return bio.x + bio.width <= location.x; + const { bio, link } = await sideBySide(ctx); + return bio.x + bio.width <= link.x; }) .toBe(true); }) .step("a narrow window", sizeOfWindow(390, 900)) - .step("the location and the links are under the bio", async (ctx) => { + .step("the links are under the bio", async (ctx) => { await expect .poll(async () => { - const { bio, location } = await sideBySide(ctx); - return location.y >= bio.y + bio.height; + const { bio, link } = await sideBySide(ctx); + return link.y >= bio.y + bio.height; }) .toBe(true); }); diff --git a/web/src/lib/components/settings/ProfileSettingsForm.stories.svelte b/web/src/lib/components/settings/ProfileSettingsForm.stories.svelte index c536d66c5..0f231481a 100644 --- a/web/src/lib/components/settings/ProfileSettingsForm.stories.svelte +++ b/web/src/lib/components/settings/ProfileSettingsForm.stories.svelte @@ -3,6 +3,11 @@ import { expect, waitFor, within } from "storybook/test"; import type { ProfileRecord } from "#lib/api/records.ts"; import ProfileSettingsForm from "#lib/components/settings/ProfileSettingsForm.svelte"; + import SettingsPanel from "#lib/components/settings/SettingsPanel.svelte"; + import type { SettingsNavItem } from "#lib/components/settings/SettingsNav.svelte"; + import User from "$icon/user-round"; + import Key from "$icon/key"; + import Mail from "$icon/mail"; const identity = { did: "did:plc:alice", handle: "alice.test" }; const pds = "https://tranquil.example"; @@ -34,6 +39,12 @@ pinnedRepositories: ["did:plc:alpha", legacyUri as never, "did:plc:bravo"] }; + const navItems: SettingsNavItem[] = [ + { id: "profile", label: "Profile", href: "/settings", icon: User }, + { id: "keys", label: "Keys", href: "/settings/keys", icon: Key }, + { id: "emails", label: "Emails", href: "/settings/emails", icon: Mail } + ]; + const installFetchMock = () => { const original = window.fetch; window.fetch = async (input, init) => { @@ -113,3 +124,15 @@ await expect(canvas.getByText(/Nothing pinned/)).toBeVisible(); }} /> + + + {#snippet template(args)} +
+
+ + + +
+
+ {/snippet} + diff --git a/web/src/lib/components/settings/ProfileSettingsForm.svelte b/web/src/lib/components/settings/ProfileSettingsForm.svelte index e54541dbd..55a31bcad 100644 --- a/web/src/lib/components/settings/ProfileSettingsForm.svelte +++ b/web/src/lib/components/settings/ProfileSettingsForm.svelte @@ -27,6 +27,8 @@ import SettingsSaveBar from "#lib/components/settings/SettingsSaveBar.svelte"; import CodeChip from "#lib/components/settings/CodeChip.svelte"; import PinnedReposEditor from "#lib/components/profile/PinnedReposEditor.svelte"; + import Link from "$icon/link"; + import MapPin from "$icon/map-pin"; import Pencil from "$icon/pencil"; interface Props { @@ -81,100 +83,109 @@ {/snippet} -
-
- +
+ -
- -
- + +
+
+
+
- - {#snippet children({ id })} -