feat: switch account on panes

app/desktop/components/flyouts/SwitchAccountAction.tsx

@@ -0,0 +1,56 @@
+import type { JSX } from 'solid-js';
+
+import { flip, shift } from '@floating-ui/dom';
+
+import type { DID } from '~/api/atp-schema.ts';
+import { multiagent } from '~/api/globals/agent.ts';
+
+import { MenuItem, MenuRoot } from '~/com/primitives/menu.ts';
+
+import { Flyout } from '~/com/components/Flyout.tsx';
+
+import DefaultUserAvatar from '~/com/assets/default-user-avatar.svg?url';
+import CheckIcon from '~/com/icons/baseline-check.tsx';
+
+export interface SwitchAccountActionProps {
+	value?: DID | undefined;
+	onChange: (next: DID) => void;
+	children: JSX.Element;
+}
+
+const SwitchAccountAction = (props: SwitchAccountActionProps) => {
+	return (
+		<Flyout button={props.children} middleware={[shift({ padding: 16 }), flip()]} placement="bottom">
+			{({ close, menuProps }) => (
+				<div {...menuProps} class={/* @once */ MenuRoot()}>
+					{multiagent.accounts.map((account) => (
+						<button
+							onClick={() => {
+								close();
+								props.onChange(account.did);
+							}}
+							class={/* @once */ MenuItem()}
+						>
+							<img
+								src={account.profile?.avatar || DefaultUserAvatar}
+								class="h-10 w-10 shrink-0 rounded-full"
+							/>
+
+							<div class="grow text-sm">
+								<p class="font-bold">{account.profile?.displayName}</p>
+								<p class="text-muted-fg">{'@' + account.session.handle}</p>
+							</div>
+
+							<CheckIcon
+								class="text-xl text-accent"
+								classList={{ [`invisible`]: account.did !== props.value }}
+							/>
+						</button>
+					))}
+				</div>
+			)}
+		</Flyout>
+	);
+};
+
+export default SwitchAccountAction;

app/desktop/components/panes/settings/GenericPaneSettings.tsx

@@ -18,6 +18,7 @@ import DeleteIcon from '~/com/icons/baseline-delete.tsx';
 import SyncAltIcon from '~/com/icons/baseline-sync-alt.tsx';
 
 import { usePaneContext } from '../PaneContext.tsx';
+import SwitchAccountAction from '../../flyouts/SwitchAccountAction.tsx';
 
 const GenericPaneSettings = () => {
 	const { pane, deletePane } = usePaneContext();
@@ -103,17 +104,19 @@ const GenericPaneSettings = () => {
 			</div>
 
 			<Show when={multiagent.accounts.length > 1}>
-				<button
-					class={
-						/* @once */ Interactive({
-							variant: 'muted',
-							class: 'flex items-center gap-4 border-b border-divider p-4',
-						})
-					}
-				>
-					<SyncAltIcon class="text-lg" />
-					<span class="text-sm">Switch accounts</span>
-				</button>
+				<SwitchAccountAction value={pane.uid} onChange={(next) => (pane.uid = next)}>
+					<button
+						class={
+							/* @once */ Interactive({
+								variant: 'muted',
+								class: 'flex items-center gap-4 border-b border-divider p-4',
+							})
+						}
+					>
+						<SyncAltIcon class="text-lg" />
+						<span class="text-sm">Switch accounts</span>
+					</button>
+				</SwitchAccountAction>
 			</Show>
 
 			<button