feat(account): Refactor account UI: migrate modals to promise-based show() API and improve navigation URL tracking

ts_web/elements/account/content.ts

@@ -12,7 +12,7 @@ import {
 } from '@design.estate/dees-element';
 
 import { LeleAccountNavigation } from './navigation.js';
-import { OrgSelectModal } from './org-select-modal.js';
+import { OrgSelectModal, type IOrgSelectResult } from './org-select-modal.js';
 import { CreateOrgModal } from './create-org-modal.js';
 import { accountDesignTokens } from './sharedstyles.js';
 
@@ -93,8 +93,6 @@ export class IdpAccountContent extends DeesElement {
           <!--<lele-accountview-subscription></lele-accountview-subscription>-->
         </div>
       </div>
-      <idp-org-select-modal></idp-org-select-modal>
-      <idp-create-org-modal></idp-create-org-modal>
     `;
   }
 
@@ -104,34 +102,25 @@ export class IdpAccountContent extends DeesElement {
     this.subrouter = this.domtools.router.createSubRouter('/account');
     const viewcontainer: HTMLDivElement = this.shadowRoot.querySelector('.viewcontainer');
 
-    // Get modal references
-    const orgSelectModal = this.shadowRoot.querySelector('idp-org-select-modal') as OrgSelectModal;
-    const createOrgModal = this.shadowRoot.querySelector('idp-create-org-modal') as CreateOrgModal;
-
     // Setup event listeners for modals
-    this.addEventListener('open-org-select-modal', ((e: CustomEvent) => {
-      orgSelectModal.show({
+    this.addEventListener('open-org-select-modal', (async (e: CustomEvent) => {
+      const result = await OrgSelectModal.show({
         targetPath: e.detail.targetPath,
         title: e.detail.title,
         description: e.detail.description,
       });
+      if (result) {
+        this.subrouter.pushUrl(result.path);
+      }
     }) as EventListener);
 
-    this.addEventListener('open-create-org-modal', () => {
-      createOrgModal.show();
+    this.addEventListener('open-create-org-modal', async () => {
+      const org = await CreateOrgModal.show();
+      if (org) {
+        this.subrouter.pushUrl(`/org/${org.data.slug}/billing`);
+      }
     });
 
-    // Handle org selection from modal
-    orgSelectModal.addEventListener('org-selected', ((e: CustomEvent) => {
-      this.subrouter.pushUrl(e.detail.path);
-    }) as EventListener);
-
-    // Handle org creation - navigate to billing
-    createOrgModal.addEventListener('org-created', ((e: CustomEvent) => {
-      const org = e.detail.org;
-      this.subrouter.pushUrl(`/org/${org.data.slug}/billing`);
-    }) as EventListener);
-
     const cleanupViews = async () => {
       for (const child of Array.from(viewcontainer.children)) {
         viewcontainer.removeChild(child);