update ui update and fix layout issue

src/shared/layouts/workspace/account-menu.ts

@@ -0,0 +1,168 @@
+import {SETTINGS_NAV} from '@/features/settings/config/settingsNav';
+import {ICONS} from '@/shared/utils/icons';
+import type {IconType} from '@astryxdesign/core/Icon';
+
+/**
+ * The account menu, as a two-level cascade rather than a flat list.
+ *
+ * Panel one is identity plus four branches and a way out. Every branch opens a
+ * SECOND panel beside the first — it never navigates. Only a leaf navigates,
+ * and leaves only exist in panel two (and on the sign-out row, which ends the
+ * session instead).
+ *
+ * That distinction is the whole shape of the file: `AccountBranch` carries a
+ * `panel`, `AccountLeaf` carries a destination or an `action`, and nothing
+ * carries both. A row cannot accidentally do both things because there is no
+ * type that permits it.
+ */
+
+export type AccountPanelId = 'settings' | 'profile' | 'language' | 'help';
+
+/**
+ * Rows that resolve to something. `href` routes, `externalHref` opens a tab,
+ * `action` is handled by the menu itself.
+ */
+export interface AccountLeaf {
+  label: string;
+  icon?: IconType;
+  /** Shown under the label. Use it for a live value, not for decoration. */
+  description?: string;
+  /** Internal destination. */
+  href?: string;
+  /** Opens in a new tab instead of routing. Mutually exclusive with href. */
+  externalHref?: string;
+  /** Non-navigational rows: the session, and the two help surfaces. */
+  action?: 'signOut' | 'shortcuts' | 'about';
+  /** Only sign-out may carry semantic colour — see the monochrome rule. */
+  tone?: 'danger';
+}
+
+/** Rows that open panel two. The one thing they must never do is navigate. */
+export interface AccountBranch {
+  label: string;
+  icon: IconType;
+  panel: AccountPanelId;
+  description?: string;
+}
+
+export type AccountRowSpec = AccountLeaf | AccountBranch;
+
+export function isBranch(row: AccountRowSpec): row is AccountBranch {
+  return 'panel' in row;
+}
+
+/**
+ * Panel one, as two groups separated by a divider.
+ *
+ * Four branches and sign-out — deliberately short. Everything that used to sit
+ * here as a flat list of twelve destinations now lives one level down, where
+ * it is grouped by what it is rather than stacked by what fit.
+ */
+export const ACCOUNT_ROOT_GROUPS: AccountRowSpec[][] = [
+  [
+    {label: 'Settings', icon: ICONS.settings, panel: 'settings'},
+    {label: 'Profile', icon: ICONS.profile, panel: 'profile'},
+    {label: 'Language', icon: ICONS.language, panel: 'language'},
+    {label: 'Help', icon: ICONS.help, panel: 'help'},
+  ],
+  [
+    {
+      label: 'Log out',
+      icon: ICONS.signOut,
+      action: 'signOut',
+      tone: 'danger',
+    },
+  ],
+];
+
+export interface AccountPanel {
+  title: string;
+  rows: AccountLeaf[];
+}
+
+/**
+ * The locales the workspace offers, in the order PreferencesForm lists them.
+ *
+ * Display only: there is no locale provider yet, so selecting one marks the
+ * row and nothing else. The row that actually persists a choice is the
+ * "Language settings" leaf at the bottom of that panel, which routes to
+ * Preferences where the Selector writes it.
+ */
+export interface LocaleOption {
+  code: 'en' | 'hi' | 'kn' | 'ta';
+  label: string;
+}
+
+export const LOCALE_OPTIONS: LocaleOption[] = [
+  {code: 'en', label: 'English (US & India)'},
+  {code: 'hi', label: 'Hindi (हिंदी)'},
+  {code: 'kn', label: 'Kannada (ಕನ್ನಡ)'},
+  {code: 'ta', label: 'Tamil (தமிழ்)'},
+];
+
+/** The shipped default in PreferencesForm. */
+export const DEFAULT_LOCALE: LocaleOption['code'] = 'en';
+
+/**
+ * Panel two, keyed by the branch that opens it.
+ *
+ * `settings` is DERIVED from SETTINGS_NAV rather than restated: the settings
+ * sub-nav and this panel are the same eleven destinations, and a copy here is
+ * a copy that goes stale the first time a section is added.
+ *
+ * `language` holds only its trailing leaf — the locale rows are stateful and
+ * come from LOCALE_OPTIONS at render time.
+ */
+export const ACCOUNT_PANELS: Record<AccountPanelId, AccountPanel> = {
+  settings: {
+    title: 'Settings',
+    rows: SETTINGS_NAV.map(({label, href, icon}) => ({label, href, icon})),
+  },
+  profile: {
+    title: 'Profile',
+    rows: [
+      {label: 'Business Details', icon: ICONS.business, href: '/settings'},
+      {label: 'Subscription', icon: ICONS.billing, href: '/settings/billing'},
+      {label: 'Activity', icon: ICONS.analytics, href: '/activity'},
+      // Devices and Sessions are two views of the same Security screen today.
+      // They stay two rows because they are two questions a merchant asks;
+      // when Security splits into tabs, only the href moves.
+      {label: 'Devices', icon: ICONS.security, href: '/settings/security'},
+      {label: 'Sessions', icon: ICONS.sessions, href: '/settings/security'},
+    ],
+  },
+  language: {
+    title: 'Language',
+    rows: [
+      {
+        label: 'Language settings',
+        icon: ICONS.preferences,
+        href: '/settings/preferences',
+      },
+    ],
+  },
+  help: {
+    title: 'Help',
+    rows: [
+      // Placeholder URLs on the brand's own domain — point them at the real
+      // docs and support hosts when there are any.
+      {
+        label: 'Documentation',
+        icon: ICONS.docs,
+        externalHref: 'https://loyaly.ai/docs',
+      },
+      {label: 'Keyboard Shortcuts', icon: ICONS.keyboard, action: 'shortcuts'},
+      {
+        label: 'Report Bug',
+        icon: ICONS.alert,
+        externalHref: 'https://loyaly.ai/support/bug',
+      },
+      {
+        label: 'Contact Support',
+        icon: ICONS.chat,
+        externalHref: 'https://loyaly.ai/support',
+      },
+      {label: 'About Loyaly', icon: ICONS.info, action: 'about'},
+    ],
+  },
+};