refactor: improve on handle change dialog

packages/danaus/src/web/account/forms.ts

···
-import { signOperation, type UnsignedOperation } from '@atcute/did-plc';
+import { PlcClientError, signOperation, type UnsignedOperation } from '@atcute/did-plc';
 import type { Did, Handle } from '@atcute/lexicons';
 import { isHandle } from '@atcute/lexicons/syntax';
 import { XRPCError } from '@atcute/xrpc-server';
···
 
 			// update PLC document for did:plc accounts
 			if (did.startsWith('did:plc:')) {
-				await updatePlcHandle(ctx, did as Did<'plc'>, handle);
+				try {
+					await updatePlcHandle(ctx, did as Did<'plc'>, handle);
+				} catch (err) {
+					if (err instanceof PlcClientError) {
+						invalid(`Unable to update DID document, please try again later`);
+					}
+
+					throw err;
+				}
 			}
 
 			// update local database and emit identity event
···
 		services: state.services,
 	};
 
-	// sign with PDS rotation key
+	// sign with PDS rotation key and submit to PLC directory
 	const signedOp = await signOperation(unsignedOp, config.secrets.plcRotationKey);
-
-	// submit to PLC directory
 	await plcClient.submitOperation(did, signedOp);
 }

packages/danaus/src/web/account/index.tsx

···
 import AsideItem from '../admin/components/aside-item.tsx';
 import { IdProvider } from '../components/id.tsx';
 import { registerForms } from '../forms/index.ts';
+import AtOutlined from '../icons/central/at-outlined.tsx';
 import DotGrid1x3HorizontalOutlined from '../icons/central/dot-grid-1x3-horizontal-outlined.tsx';
 import Key2Outlined from '../icons/central/key-2-outlined.tsx';
 import PasskeysOutlined from '../icons/central/passkeys-outlined.tsx';
···
 import PlusLargeOutlined from '../icons/central/plus-large-outlined.tsx';
 import ShieldOutlined from '../icons/central/shield-outlined.tsx';
 import UsbOutlined from '../icons/central/usb-outlined.tsx';
+import AccordionHeader from '../primitives/accordion-header.tsx';
+import AccordionItem from '../primitives/accordion-item.tsx';
+import AccordionPanel from '../primitives/accordion-panel.tsx';
+import Accordion from '../primitives/accordion.tsx';
 import Button from '../primitives/button.tsx';
 import DialogActions from '../primitives/dialog-actions.tsx';
 import DialogBody from '../primitives/dialog-body.tsx';
···
 			: 'custom';
 		const currentLocalPart = isServiceHandle ? currentHandle.slice(0, -currentDomain.length) : currentHandle;
 
+		const updateHandleError = updateHandleForm.fields.allIssues().at(0);
+		const refreshHandleError = refreshHandleForm.fields.allIssues().at(0);
+
 		return c.render(
 			<AccountLayout>
 				<title>My account - Danaus</title>
···
 						<h3 class="text-base-400 font-medium">Account overview</h3>
 					</div>
 
+					{updateHandleError && (
+						<MessageBar intent="error" layout="singleline">
+							<MessageBarBody>{updateHandleError.message}</MessageBarBody>
+						</MessageBar>
+					)}
+
+					{refreshHandleError && (
+						<MessageBar intent="error" layout="singleline">
+							<MessageBarBody>{refreshHandleError.message}</MessageBarBody>
+						</MessageBar>
+					)}
+
 					<div class="flex flex-col gap-8">
 						<div class="flex flex-col gap-2">
 							<h4 class="text-base-300 font-medium text-neutral-foreground-2">Your identity</h4>
···
 
 										<MenuPopover>
 											<MenuList>
-												<Dialog>
-													<DialogTrigger>
-														<MenuItem>Change handle</MenuItem>
-													</DialogTrigger>
-
-													<DialogSurface>
-														<DialogBody>
-															<DialogTitle>Change handle</DialogTitle>
+												<MenuItem command="show-modal" commandfor="change-service-handle-dialog">
+													Change handle
+												</MenuItem>
 
-															<form {...updateHandleForm} class="contents">
-																<DialogContent class="flex flex-col gap-4">
-																	<p class="text-base-300 text-neutral-foreground-3">
-																		Your handle is your unique identity on the AT Protocol network.
-																	</p>
-
-																	<Field
-																		label="Domain"
-																		validationMessageText={
-																			updateHandleForm.fields.domain.issues()[0]?.message
-																		}
-																	>
-																		<Select
-																			{...updateHandleForm.fields.domain.as('select')}
-																			value={updateHandleForm.fields.domain.value() || currentDomain}
-																			options={[
-																				...ctx.config.identity.serviceHandleDomains.map((d) => ({
-																					value: d,
-																					label: d,
-																				})),
-																				{ value: 'custom', label: 'I have my own domain' },
-																			]}
-																		/>
-																	</Field>
-
-																	<Field
-																		label="Handle"
-																		required
-																		validationMessageText={
-																			updateHandleForm.fields.handle.issues()[0]?.message
-																		}
-																	>
-																		<Input
-																			{...updateHandleForm.fields.handle.as('text')}
-																			value={updateHandleForm.fields.handle.value() || currentLocalPart}
-																			placeholder="alice"
-																			required
-																		/>
-																	</Field>
-
-																	<p class="text-base-200 text-neutral-foreground-3">
-																		Custom domains must have a DNS TXT record or .well-known file pointing to
-																		your DID.
-																	</p>
-																</DialogContent>
-
-																<DialogActions>
-																	<DialogClose>
-																		<Button>Cancel</Button>
-																	</DialogClose>
-
-																	<Button type="submit" variant="primary">
-																		Save
-																	</Button>
-																</DialogActions>
-															</form>
-														</DialogBody>
-													</DialogSurface>
-												</Dialog>
-
-												<Dialog>
-													<DialogTrigger>
-														<MenuItem>Request refresh</MenuItem>
-													</DialogTrigger>
-
-													<DialogSurface>
-														<DialogBody>
-															<DialogTitle>Request handle refresh</DialogTitle>
-
-															<form {...refreshHandleForm} class="contents">
-																<DialogContent>
-																	<p class="text-base-300">
-																		This will notify the network to re-verify your handle. Use this if apps
-																		are marking your handle as invalid despite being set up correctly.
-																	</p>
-																</DialogContent>
-
-																<DialogActions>
-																	<DialogClose>
-																		<Button>Cancel</Button>
-																	</DialogClose>
-
-																	<Button type="submit" variant="primary">
-																		Refresh
-																	</Button>
-																</DialogActions>
-															</form>
-														</DialogBody>
-													</DialogSurface>
-												</Dialog>
+												<MenuItem command="show-modal" commandfor="refresh-handle-dialog">
+													Request refresh
+												</MenuItem>
 											</MenuList>
 										</MenuPopover>
 									</Menu>
···
 						</div>
 					</div>
 				</div>
+
+				<Dialog id="change-service-handle-dialog">
+					<DialogSurface>
+						<DialogBody>
+							<DialogTitle>Change handle</DialogTitle>
+
+							<form {...updateHandleForm} class="contents">
+								<DialogContent class="flex flex-col gap-4">
+									<p class="text-base-300 text-neutral-foreground-3">
+										Your handle is your unique identity on the AT Protocol network.
+									</p>
+
+									<Field label="Handle" required>
+										<div class="flex gap-2">
+											<Input
+												{...updateHandleForm.fields.handle.as('text')}
+												value={updateHandleForm.fields.handle.value() || currentLocalPart}
+												placeholder="alice"
+												contentBefore={<AtOutlined size={16} />}
+												class="grow"
+											/>
+
+											<Select
+												{...updateHandleForm.fields.domain.as('select')}
+												value={updateHandleForm.fields.domain.value() || currentDomain}
+												options={ctx.config.identity.serviceHandleDomains.map((d) => ({
+													value: d,
+													label: d,
+												}))}
+											/>
+										</div>
+									</Field>
+
+									<div></div>
+								</DialogContent>
+
+								<DialogActions>
+									<Button command="show-modal" commandfor="change-custom-handle-dialog">
+										Use my own domain
+									</Button>
+
+									<div class="grow"></div>
+
+									<DialogClose>
+										<Button>Cancel</Button>
+									</DialogClose>
+
+									<Button type="submit" variant="primary">
+										Change
+									</Button>
+								</DialogActions>
+							</form>
+						</DialogBody>
+					</DialogSurface>
+				</Dialog>
+
+				<Dialog id="refresh-handle-dialog">
+					<DialogSurface>
+						<DialogBody>
+							<DialogTitle>Request handle refresh</DialogTitle>
+
+							<form {...refreshHandleForm} class="contents">
+								<DialogContent>
+									<p class="text-base-300">
+										This will notify the network to re-verify your handle. Use this if apps are marking your
+										handle as invalid despite being set up correctly.
+									</p>
+								</DialogContent>
+
+								<DialogActions>
+									<DialogClose>
+										<Button>Cancel</Button>
+									</DialogClose>
+
+									<Button type="submit" variant="primary">
+										Refresh
+									</Button>
+								</DialogActions>
+							</form>
+						</DialogBody>
+					</DialogSurface>
+				</Dialog>
+
+				<Dialog id="change-custom-handle-dialog">
+					<DialogSurface>
+						<DialogBody>
+							<DialogTitle>Change handle</DialogTitle>
+
+							<form {...updateHandleForm} class="contents">
+								<DialogContent class="flex flex-col gap-4">
+									<p class="text-base-300 text-neutral-foreground-3">
+										Your handle is your unique identity on the AT Protocol network.
+									</p>
+
+									<Field label="Handle" required>
+										<Input
+											{...updateHandleForm.fields.handle.as('text')}
+											placeholder="alice.com"
+											contentBefore={<AtOutlined size={16} />}
+										/>
+									</Field>
+
+									<input {...updateHandleForm.fields.domain.as('hidden', 'custom')} />
+
+									<Accordion class="flex flex-col gap-2">
+										<AccordionItem name="handle-method" open>
+											<AccordionHeader>DNS record</AccordionHeader>
+											<AccordionPanel>
+												<div class="flex flex-col gap-3">
+													<p class="text-base-300 text-neutral-foreground-3">
+														Add the following DNS record to your domain:
+													</p>
+
+													<div class="flex flex-col gap-2 rounded-md bg-neutral-background-3 p-3">
+														<div class="flex flex-col gap-0.5">
+															<span class="text-base-200 text-neutral-foreground-3">Host</span>
+															<input
+																type="text"
+																readonly
+																value="_atproto.<your-domain>"
+																class="font-mono text-base-300 outline-none"
+															/>
+														</div>
+														<div class="flex flex-col gap-0.5">
+															<span class="text-base-200 text-neutral-foreground-3">Type</span>
+															<input
+																type="text"
+																readonly
+																value="TXT"
+																class="font-mono text-base-300 outline-none"
+															/>
+														</div>
+														<div class="flex flex-col gap-0.5">
+															<span class="text-base-200 text-neutral-foreground-3">Value</span>
+															<input
+																type="text"
+																readonly
+																value={`did=${session.did}`}
+																class="font-mono text-base-300 outline-none"
+															/>
+														</div>
+													</div>
+												</div>
+											</AccordionPanel>
+										</AccordionItem>
+
+										<AccordionItem name="handle-method">
+											<AccordionHeader>HTTP well-known entry</AccordionHeader>
+											<AccordionPanel>
+												<div class="flex flex-col gap-3">
+													<p class="text-base-300 text-neutral-foreground-3">
+														Upload a text file to the following URL:
+													</p>
+
+													<div class="flex flex-col gap-2 rounded-md bg-neutral-background-3 p-3">
+														<div class="flex flex-col gap-0.5">
+															<span class="text-base-200 text-neutral-foreground-3">URL</span>
+															<input
+																type="text"
+																readonly
+																value="https://<your-domain>/.well-known/atproto-did"
+																class="font-mono text-base-300 outline-none"
+															/>
+														</div>
+														<div class="flex flex-col gap-0.5">
+															<span class="text-base-200 text-neutral-foreground-3">Contents</span>
+															<input
+																type="text"
+																readonly
+																value={session.did}
+																class="font-mono text-base-300 outline-none"
+															/>
+														</div>
+													</div>
+												</div>
+											</AccordionPanel>
+										</AccordionItem>
+									</Accordion>
+								</DialogContent>
+
+								<DialogActions>
+									<DialogClose>
+										<Button>Cancel</Button>
+									</DialogClose>
+
+									<Button type="submit" variant="primary">
+										Change
+									</Button>
+								</DialogActions>
+							</form>
+						</DialogBody>
+					</DialogSurface>
+				</Dialog>
 			</AccountLayout>,
 		);
 	});

packages/danaus/src/web/icons/central/at-outlined.tsx

···
+import type { IconProps } from './_types.ts';
+
+const ArrowInboxOutlined = (props: IconProps) => {
+	const { size = 24, class: className } = props;
+
+	return (
+		<svg viewBox="0 0 24 24" width={size} height={size} fill="none" class={className}>
+			<path
+				d="M16.7368 19.6541C15.361 20.5073 13.738 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 13.9262 20.0428 15.9154 17.8101 15.7125C15.9733 15.5455 14.6512 13.8737 14.9121 12.0479L15.4274 8.5M14.8581 12.4675C14.559 14.596 12.8066 16.1093 10.9442 15.8476C9.08175 15.5858 7.81444 13.6481 8.11358 11.5196C8.41272 9.39109 10.165 7.87778 12.0275 8.13953C13.8899 8.40128 15.1573 10.339 14.8581 12.4675Z"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+			/>
+		</svg>
+	);
+};
+
+export default ArrowInboxOutlined;

packages/danaus/src/web/styles/main.out.css

···
   .-mx-1\.25 {
     margin-inline: calc(var(--spacing) * -1.25);
   }
+  .-mx-3 {
+    margin-inline: calc(var(--spacing) * -3);
+  }
   .-my-0\.5 {
     margin-block: calc(var(--spacing) * -0.5);
   }
···
   .min-h-9 {
     min-height: calc(var(--spacing) * 9);
   }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
   .min-h-dvh {
     min-height: 100dvh;
   }
···
   .flex-1 {
     flex: 1;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
   .grow {
     flex-grow: 1;
+  }
+  .basis-0 {
+    flex-basis: calc(var(--spacing) * 0);
   }
   .cursor-pointer {
     cursor: pointer;
+  }
+  .list-none {
+    list-style-type: none;
   }
   .appearance-none {
     appearance: none;
···
   .flex-col {
     flex-direction: column;
   }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
   .flex-nowrap {
     flex-wrap: nowrap;
   }
···
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
   }
   .border-b {
     border-bottom-style: var(--tw-border-style);
···
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
   .pl-1 {
     padding-left: calc(var(--spacing) * 1);
   }
···
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
+  }
+  .wrap-anywhere {
+    overflow-wrap: anywhere;
   }
   .wrap-break-word {
     overflow-wrap: break-word;
···
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .duration-100 {
     --tw-duration: 100ms;
     transition-duration: 100ms;
···
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
+  }
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
   }
   .select-none {
     -webkit-user-select: none;
···
   }
   .try-flip-y {
     position-try-fallbacks: flip-block;
+  }
+  .group-open\/accordion-item\:rotate-180 {
+    &:is(:where(.group\/accordion-item):is([open], :popover-open, :open) *) {
+      rotate: 180deg;
+    }
   }
   .group-hover\/checkbox\:border-compound-brand-background-hover {
     &:is(:where(.group\/checkbox):hover *) {
···
       display: flex;
     }
   }
-  .open\:items-end {
-    &:is([open], :popover-open, :open) {
-      align-items: flex-end;
-    }
-  }
-  .open\:justify-center {
-    &:is([open], :popover-open, :open) {
-      justify-content: center;
-    }
-  }
   .hover\:border-neutral-stroke-1-hover {
     &:hover {
       @media (hover: hover) {
···
       padding-top: calc(var(--spacing) * 24);
     }
   }
-  .open\:sm\:items-center {
-    &:is([open], :popover-open, :open) {
-      @media (width >= 40rem) {
-        align-items: center;
-      }
-    }
-  }
   .lg\:grid {
     @media (width >= 64rem) {
       display: grid;
···
   .\@sm\/dialog-body\:justify-start {
     @container dialog-body (width >= 24rem) {
       justify-content: flex-start;
+    }
+  }
+  .\[\&\:\:-webkit-details-marker\]\:hidden {
+    &::-webkit-details-marker {
+      display: none;
     }
   }
 }