refactor: clean up app password design

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

···
 import { HTTPException } from 'hono/http-exception';
 import { jsxRenderer } from 'hono/jsx-renderer';
 
-import { formatAppPasswordPrivilege } from '#app/accounts/app-passwords.ts';
+import { AppPasswordPrivilege } from '#app/accounts/db/schema.ts';
 import type { WebSession } from '#app/accounts/manager.ts';
 import { readWebSessionToken, verifyWebSessionToken } from '#app/auth/web.ts';
 import type { AppContext } from '#app/context.ts';
···
 import PhoneOutlined from '../icons/central/phone-outlined.tsx';
 import PlusLargeOutlined from '../icons/central/plus-large-outlined.tsx';
 import ShieldOutlined from '../icons/central/shield-outlined.tsx';
-import TrashCanOutlined from '../icons/central/trash-can-outlined.tsx';
 import UsbOutlined from '../icons/central/usb-outlined.tsx';
 import Button from '../primitives/button.tsx';
 import DialogActions from '../primitives/dialog-actions.tsx';
 import DialogBody from '../primitives/dialog-body.tsx';
+import DialogClose from '../primitives/dialog-close.tsx';
 import DialogContent from '../primitives/dialog-content.tsx';
 import DialogSurface from '../primitives/dialog-surface.tsx';
 import DialogTitle from '../primitives/dialog-title.tsx';
+import DialogTrigger from '../primitives/dialog-trigger.tsx';
 import Dialog from '../primitives/dialog.tsx';
 import Field from '../primitives/field.tsx';
 import Input from '../primitives/input.tsx';
···
 						</MessageBar>
 					)}
 
-					{passwords.length === 0 ? (
+					{/* {passwords.length === 0 ? (
 						<p class="py-8 text-center text-base-300 text-neutral-foreground-3">no app passwords yet.</p>
 					) : (
 						<ul class="divide-y divide-neutral-stroke-2">
···
 								</li>
 							))}
 						</ul>
-					)}
+					)} */}
+
+					<div class="flex flex-col divide-y divide-neutral-stroke-2 rounded-md bg-neutral-background-1 shadow-4">
+						{passwords.length === 0 && (
+							<div class="flex flex-col gap-1 p-8 text-center">
+								<p class="text-base-300 font-medium">No app passwords created</p>
+								<p class="text-base-300 text-neutral-foreground-3">
+									App passwords lets you sign into legacy AT Protocol apps.
+								</p>
+							</div>
+						)}
+
+						{passwords.map((password) => {
+							let privilege = `Unknown`;
+							switch (password.privilege) {
+								case AppPasswordPrivilege.Full: {
+									privilege = `Full access`;
+									break;
+								}
+								case AppPasswordPrivilege.Privileged: {
+									privilege = `Privileged access`;
+									break;
+								}
+								case AppPasswordPrivilege.Limited: {
+									privilege = `Limited access`;
+									break;
+								}
+							}
+
+							return (
+								<div class="flex items-center gap-4 px-4 py-3">
+									<Key2Outlined size={24} class="shrink-0" />
+
+									<div class="min-w-0 grow">
+										<p class="text-base-300">{password.name}</p>
+										<p class="text-base-300 text-neutral-foreground-3">{privilege}</p>
+									</div>
+
+									<Menu>
+										<MenuTrigger>
+											<button class="grid h-6 w-6 shrink-0 place-items-center rounded-md bg-subtle-background text-neutral-foreground-3 outline-2 -outline-offset-2 outline-transparent transition hover:bg-subtle-background-hover hover:text-neutral-foreground-3-hover focus-visible:outline-stroke-focus-2 active:bg-subtle-background-active active:text-neutral-foreground-3-active">
+												<DotGrid1x3HorizontalOutlined size={16} />
+											</button>
+										</MenuTrigger>
+
+										<MenuPopover>
+											<MenuList>
+												<Dialog>
+													<DialogTrigger>
+														<MenuItem>Delete</MenuItem>
+													</DialogTrigger>
+
+													<DialogSurface>
+														<DialogBody>
+															<DialogTitle>Delete this app password?</DialogTitle>
+
+															<form {...deleteAppPasswordForm} class="contents">
+																<DialogContent>
+																	<p class="text-base-300">
+																		You'll no longer be able to sign in to legacy apps using the{' '}
+																		<strong>{password.name}</strong> app password.
+																	</p>
+
+																	<input {...deleteAppPasswordForm.fields.name.as('hidden', password.name)} />
+																</DialogContent>
+
+																<DialogActions>
+																	<DialogClose>
+																		<Button>Cancel</Button>
+																	</DialogClose>
+
+																	<Button type="submit" variant="primary">
+																		Delete
+																	</Button>
+																</DialogActions>
+															</form>
+														</DialogBody>
+													</DialogSurface>
+												</Dialog>
+											</MenuList>
+										</MenuPopover>
+									</Menu>
+								</div>
+							);
+						})}
+					</div>
 				</div>
 
 				<Dialog id="create-app-password-dialog">
···
 								</DialogContent>
 
 								<DialogActions>
-									<Button type="submit" variant="primary">
-										Create
-									</Button>
 									<Button commandfor="create-app-password-dialog" command="close" variant="outlined">
 										Cancel
+									</Button>
+									<Button type="submit" variant="primary">
+										Create
 									</Button>
 								</DialogActions>
 							</form>

packages/danaus/src/web/primitives/dialog-actions.tsx

···
 
 const root = cva({
 	base: [
-		'box-border',
+		'box-border pt-2',
 		'h-fit',
 		// grid position: row 3
 		'row-start-3 row-end-3',

packages/danaus/src/web/primitives/dialog-close.tsx

···
+import { cloneElement } from 'hono/jsx';
+import type { JSX } from 'hono/jsx/jsx-runtime';
+
+import { useDialogContext } from './utils/dialog-context.tsx';
+
+export interface DialogCloseProps {
+	children: JSX.Element;
+}
+
+const DialogClose = (props: DialogCloseProps) => {
+	const { children } = props;
+	const { dialogId } = useDialogContext();
+
+	return cloneElement(children, {
+		commandfor: dialogId,
+		command: 'close',
+	});
+};
+
+export default DialogClose;

packages/danaus/src/web/primitives/dialog-surface.tsx

···
 import { cva } from 'cva';
 import type { Child } from 'hono/jsx';
 
+import { useDialogContext } from './utils/dialog-context';
+
 const root = cva({
 	base: [
+		'fixed inset-0 m-0 h-dvh max-h-dvh w-dvw max-w-dvw',
+		'border-none p-0',
+		'bg-transparent',
+		'overflow-visible',
+		// reset dialog defaults
+		'open:flex open:items-center open:justify-center',
+		// backdrop
+		'backdrop:bg-background-overlay',
+	],
+});
+
+const backdrop = cva({
+	base: ['absolute inset-0 z-0'],
+});
+
+const surface = cva({
+	base: [
 		'relative z-10',
 		'box-border',
 		'max-h-[calc(100dvh-48px)]',
···
 });
 
 export interface DialogSurfaceProps {
-	class?: string;
 	children?: Child;
 }
 
···
  * @param props.class additional CSS classes
  */
 const DialogSurface = (props: DialogSurfaceProps) => {
-	const { class: className, children } = props;
+	const { children } = props;
+
+	const { dialogId, titleId } = useDialogContext();
 
-	return <div class={root({ className })}>{children}</div>;
+	return (
+		<dialog id={dialogId} aria-labelledby={titleId} class={root()}>
+			<div class={surface()}>{children}</div>
+
+			<button
+				type="button"
+				tabindex={-1}
+				aria-hidden="true"
+				commandfor={dialogId}
+				command="close"
+				class={backdrop()}
+			/>
+		</dialog>
+	);
 };
 
 export default DialogSurface;

packages/danaus/src/web/primitives/dialog-title.tsx

···
 
 const root = cva({
 	base: [
-		'm-0',
+		'm-0 pb-2',
 		'text-base-500 font-semibold',
 		// grid position: row 1, col 1-2 (leaves col 3 for action)
 		'col-start-1 col-end-3 row-start-1 row-end-1',

packages/danaus/src/web/primitives/dialog-trigger.tsx

···
+import { cloneElement } from 'hono/jsx';
+import type { JSX } from 'hono/jsx/jsx-runtime';
+
+import { useDialogContext } from './utils/dialog-context.tsx';
+
+export interface DialogTriggerProps {
+	children: JSX.Element;
+}
+
+const DialogTrigger = (props: DialogTriggerProps) => {
+	const { children } = props;
+	const { dialogId } = useDialogContext();
+
+	return cloneElement(children, {
+		commandfor: dialogId,
+		command: 'show-modal',
+	});
+};
+
+export default DialogTrigger;

packages/danaus/src/web/primitives/dialog.tsx

···
-import { cva } from 'cva';
 import type { Child } from 'hono/jsx';
 
 import { useId } from '../components/id.tsx';
 
 import { DialogContext, type DialogContextValue } from './utils/dialog-context.tsx';
 
-const root = cva({
-	base: [
-		'fixed inset-0 m-0 h-dvh max-h-dvh w-dvw max-w-dvw',
-		'border-none p-0',
-		'bg-transparent',
-		'overflow-visible',
-		// reset dialog defaults
-		'open:flex open:items-center open:justify-center',
-		// backdrop
-		'backdrop:bg-background-overlay',
-	],
-});
-
-const backdrop = cva({
-	base: ['absolute inset-0 z-0'],
-});
-
 export interface DialogProps {
-	id: string;
-	class?: string;
+	id?: string;
 	children?: Child;
 }
 
···
  * @param props.class additional CSS classes
  */
 const Dialog = (props: DialogProps) => {
-	const { id, class: className, children } = props;
-
-	const titleId = useId();
+	const { id = useId(), children } = props;
 
 	const contextValue: DialogContextValue = {
 		dialogId: id,
-		titleId,
+		titleId: useId(),
 	};
 
-	return (
-		<DialogContext.Provider value={contextValue}>
-			<dialog id={id} aria-labelledby={titleId} class={root({ className })}>
-				{children}
-
-				<button
-					type="button"
-					tabindex={-1}
-					aria-hidden="true"
-					commandfor={id}
-					command="close"
-					class={backdrop()}
-				/>
-			</dialog>
-		</DialogContext.Provider>
-	);
+	return <DialogContext.Provider value={contextValue}>{children}</DialogContext.Provider>;
 };
 
 export default Dialog;

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

···
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }