Feat: Prepare frontend future model

Frontend/src/components/shell/TopBar/ProfileMenu.tsx

@@ -23,8 +23,10 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 			role="menu"
 			aria-label="Profile menu"
 			ref={props.menuRef}
+			data-ui="profile-menu"
+			data-variant={variant}
 		>
-			<div class={styles.summary}>
+			<div class={styles.summary} data-slot="profile-summary">
 				<div class={styles.avatar} aria-hidden="true">
 					<span class={styles.avatarRing} />
 					<span class={styles.avatarCore}>
@@ -40,10 +42,10 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 				</div>
 			</div>
 
-			<div class={styles.sections}>
+			<div class={styles.sections} data-slot="profile-sections">
 				<For each={profileMenuSections}>
 					{(section): JSX.Element => (
-						<div class={styles.section}>
+						<div class={styles.section} data-slot="profile-section" data-section-id={section.id}>
 							<For each={section.items}>
 								{(item): JSX.Element => {
 									const Icon = item.icon;
@@ -52,11 +54,14 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 										<button
 											type="button"
 											role="menuitem"
-											classList={{
-												[styles.item]: true,
-												[styles.itemDanger]: item.tone === "danger",
-											}}
-											onClick={props.onSelect}
+										classList={{
+											[styles.item]: true,
+											[styles.itemDanger]: item.tone === "danger",
+										}}
+										data-slot="profile-action"
+										data-action-id={item.id}
+										data-tone={item.tone ?? "default"}
+										onClick={props.onSelect}
 										>
 											<span class={styles.itemIcon} aria-hidden="true">
 												<Icon size={16} strokeWidth={2} />