Refactor modal system: BaseModal renders shell, unified open(args) API

src/client/AccountModal.ts

@@ -64,71 +64,43 @@ export class AccountModal extends BaseModal {
     );
   }
 
-  render() {
-    const content = this.isLoadingUser
-      ? this.renderLoadingSpinner(
-          translateText("account_modal.fetching_account"),
-        )
-      : this.renderInner();
-
-    if (this.inline) {
-      return this.isLoadingUser
-        ? html`<div class="${this.modalContainerClass}">
-            ${modalHeader({
-              title: translateText("account_modal.title"),
-              onBack: () => this.close(),
-              ariaLabel: translateText("common.back"),
-            })}
-            ${content}
-          </div>`
-        : content;
-    }
-
-    return html`
-      <o-modal
-        id="account-modal"
-        title=""
-        ?hideCloseButton=${true}
-        ?inline=${this.inline}
-        hideHeader
-      >
-        ${content}
-      </o-modal>
-    `;
-  }
-
-  private renderInner() {
+  protected renderHeaderSlot() {
     const isLoggedIn = !!this.userMeResponse?.user;
-    const title = translateText("account_modal.title");
     const publicId = this.userMeResponse?.player?.publicId ?? "";
     const displayId = publicId || translateText("account_modal.not_found");
+    return modalHeader({
+      title: translateText("account_modal.title"),
+      onBack: () => this.close(),
+      ariaLabel: translateText("common.back"),
+      rightContent:
+        isLoggedIn && !this.isLoadingUser
+          ? html`
+              <div class="flex items-center gap-2">
+                <span
+                  class="text-xs text-blue-400 font-bold uppercase tracking-wider"
+                  >${translateText("account_modal.public_player_id")}</span
+                >
+                <copy-button
+                  .lobbyId=${publicId}
+                  .copyText=${publicId}
+                  .displayText=${displayId}
+                ></copy-button>
+              </div>
+            `
+          : undefined,
+    });
+  }
 
+  protected renderBody() {
+    if (this.isLoadingUser) {
+      return this.renderLoadingSpinner(
+        translateText("account_modal.fetching_account"),
+      );
+    }
+    const isLoggedIn = !!this.userMeResponse?.user;
     return html`
-      <div class="${this.modalContainerClass}">
-        ${modalHeader({
-          title,
-          onBack: () => this.close(),
-          ariaLabel: translateText("common.back"),
-          rightContent: isLoggedIn
-            ? html`
-                <div class="flex items-center gap-2">
-                  <span
-                    class="text-xs text-blue-400 font-bold uppercase tracking-wider"
-                    >${translateText("account_modal.public_player_id")}</span
-                  >
-                  <copy-button
-                    .lobbyId=${publicId}
-                    .copyText=${publicId}
-                    .displayText=${displayId}
-                  ></copy-button>
-                </div>
-              `
-            : undefined,
-        })}
-
-        <div class="flex-1 overflow-y-auto custom-scrollbar mr-1">
-          ${isLoggedIn ? this.renderAccountInfo() : this.renderLoginOptions()}
-        </div>
+      <div class="custom-scrollbar mr-1">
+        ${isLoggedIn ? this.renderAccountInfo() : this.renderLoginOptions()}
       </div>
     `;
   }

src/client/ClanModal.ts

@@ -18,7 +18,6 @@ import "./components/CopyButton";
 import { modalHeader } from "./components/ui/ModalHeader";
 import { translateText } from "./Utils";
 
-type Tab = "my-clans" | "browse";
 type View =
   | "list"
   | "detail"
@@ -30,7 +29,6 @@ type View =
 
 @customElement("clan-modal")
 export class ClanModal extends BaseModal {
-  @state() private activeTab: Tab = "my-clans";
   @state() private view: View = "list";
   @state() private loading = false;
 
@@ -59,36 +57,42 @@ export class ClanModal extends BaseModal {
     stats: ClanStats | null;
   } | null = null;
 
-  render() {
-    const onListView = this.view === "list" && !this.selectedClanTag;
-    const tabs = onListView
-      ? [
-          { key: "my-clans", label: translateText("clan_modal.my_clans") },
-          { key: "browse", label: translateText("clan_modal.browse") },
-        ]
-      : [];
-    const header = onListView
+  private get onListView(): boolean {
+    return this.view === "list" && !this.selectedClanTag;
+  }
+
+  protected modalConfig() {
+    return {
+      tabs: this.onListView
+        ? [
+            { key: "my-clans", label: translateText("clan_modal.my_clans") },
+            { key: "browse", label: translateText("clan_modal.browse") },
+          ]
+        : [],
+    };
+  }
+
+  protected renderHeaderSlot() {
+    return this.onListView
       ? modalHeader({
           title: translateText("clan_modal.title"),
           onBack: () => this.close(),
           ariaLabel: translateText("common.back"),
         })
       : this.renderSubViewHeader();
-    return html`
-      <o-modal
-        id="clan-modal"
-        title=""
-        ?hideCloseButton=${true}
-        ?inline=${this.inline}
-        hideHeader
-        .tabs=${tabs}
-        .activeTab=${this.activeTab}
-        .onTabChange=${(key: string) => this.handleTabChange(key as Tab)}
-      >
-        ${header ? html`<div slot="header">${header}</div>` : ""}
-        <div class="p-4 lg:p-[1.4rem]">${this.renderInner()}</div>
-      </o-modal>
-    `;
+  }
+
+  protected renderBody() {
+    return html`<div class="p-4 lg:p-[1.4rem]">${this.renderInner()}</div>`;
+  }
+
+  protected onTabEnter(tab: string): void {
+    this.view = "list";
+    this.selectedClan = null;
+    this.selectedClanTag = "";
+    if (tab === "my-clans") {
+      this.loadMyClans();
+    }
   }
 
   private tagPill(tag: string) {
@@ -152,16 +156,6 @@ export class ClanModal extends BaseModal {
     });
   }
 
-  private handleTabChange(tab: Tab) {
-    this.activeTab = tab;
-    this.view = "list";
-    this.selectedClan = null;
-    this.selectedClanTag = "";
-    if (tab === "my-clans") {
-      this.loadMyClans();
-    }
-  }
-
   protected onOpen(): void {
     this.loadMyClans();
   }

src/client/FlagInputModal.ts

@@ -122,67 +122,49 @@ export class FlagInputModal extends BaseModal {
     `;
   }
 
-  render() {
-    const content = html`
-      <div class="${this.modalContainerClass}">
-        <div
-          class="relative flex flex-col border-b border-white/10 pb-4 shrink-0"
-        >
-          ${modalHeader({
-            title: translateText("flag_input.title"),
-            onBack: () => this.close(),
-            ariaLabel: translateText("common.back"),
-            rightContent: html`<not-logged-in-warning></not-logged-in-warning>`,
-          })}
-
-          <div class="md:flex items-center gap-2 justify-center mt-4">
-            <input
-              class="h-12 w-full max-w-md border border-white/10 bg-black/60
+  protected renderHeaderSlot() {
+    return html`
+      <div
+        class="relative flex flex-col border-b border-white/10 pb-4 shrink-0"
+      >
+        ${modalHeader({
+          title: translateText("flag_input.title"),
+          onBack: () => this.close(),
+          ariaLabel: translateText("common.back"),
+          rightContent: html`<not-logged-in-warning></not-logged-in-warning>`,
+        })}
+
+        <div class="md:flex items-center gap-2 justify-center mt-4">
+          <input
+            class="h-12 w-full max-w-md border border-white/10 bg-black/60
               rounded-xl shadow-inner text-xl text-center focus:outline-none
               focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 text-white placeholder-white/30 transition-all"
-              type="text"
-              placeholder=${translateText("flag_input.search_flag")}
-              .value=${this.search}
-              @change=${this.handleSearch}
-              @keyup=${this.handleSearch}
-            />
-          </div>
-        </div>
-        <div class="flex justify-center py-3 shrink-0">
-          <o-button
-            class="no-crazygames"
-            variant="primary"
-            size="sm"
-            translationKey="main.store"
-            @click=${() => {
-              this.close();
-              window.showPage?.("page-item-store");
-            }}
-          ></o-button>
-        </div>
-
-        <div
-          class="flex-1 overflow-y-auto px-3 pb-3 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent mr-1"
-        >
-          ${this.renderFlags()}
+            type="text"
+            placeholder=${translateText("flag_input.search_flag")}
+            .value=${this.search}
+            @change=${this.handleSearch}
+            @keyup=${this.handleSearch}
+          />
         </div>
       </div>
     `;
+  }
 
-    if (this.inline) {
-      return content;
-    }
-
+  protected renderBody() {
     return html`
-      <o-modal
-        id="flag-input-modal"
-        title=${translateText("flag_input.title")}
-        ?inline=${this.inline}
-        hideHeader
-        hideCloseButton
-      >
-        ${content}
-      </o-modal>
+      <div class="flex justify-center py-3 shrink-0">
+        <o-button
+          class="no-crazygames"
+          variant="primary"
+          size="sm"
+          translationKey="main.store"
+          @click=${() => {
+            this.close();
+            window.showPage?.("page-item-store");
+          }}
+        ></o-button>
+      </div>
+      <div class="px-3 pb-3">${this.renderFlags()}</div>
     `;
   }
 

src/client/HelpModal.ts

@@ -57,28 +57,28 @@ export class HelpModal extends BaseModal {
     >`;
   }
 
-  render() {
-    const keybinds = this.keybinds;
+  protected renderHeaderSlot() {
+    return modalHeader({
+      title: translateText("main.help"),
+      onBack: () => this.close(),
+      ariaLabel: translateText("common.back"),
+    });
+  }
 
-    const content = html`
-      <div class="${this.modalContainerClass}">
-        ${modalHeader({
-          title: translateText("main.help"),
-          onBack: () => this.close(),
-          ariaLabel: translateText("common.back"),
-        })}
+  protected renderBody() {
+    const keybinds = this.keybinds;
 
-        <div
-          class="prose prose-invert prose-sm max-w-none overflow-y-auto px-6 py-3 mr-1
-            [&_a]:text-blue-400 [&_a:hover]:text-blue-300 transition-colors
-            [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4 [&_h1]:text-white [&_h1]:border-b [&_h1]:border-white/10 [&_h1]:pb-2
-            [&_h2]:text-xl [&_h2]:font-bold [&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:text-blue-200
-            [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:mt-4 [&_h3]:mb-2 [&_h3]:text-blue-100
-            [&_ul]:pl-5 [&_ul]:list-disc [&_ul]:space-y-1
-            [&_li]:text-gray-300 [&_li]:leading-relaxed
-            [&_p]:text-gray-300 [&_p]:mb-3 [&_strong]:text-white [&_strong]:font-bold
-            scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent"
-        >
+    return html`
+      <div
+        class="prose prose-invert prose-sm max-w-none px-6 py-3
+          [&_a]:text-blue-400 [&_a:hover]:text-blue-300 transition-colors
+          [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4 [&_h1]:text-white [&_h1]:border-b [&_h1]:border-white/10 [&_h1]:pb-2
+          [&_h2]:text-xl [&_h2]:font-bold [&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:text-blue-200
+          [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:mt-4 [&_h3]:mb-2 [&_h3]:text-blue-100
+          [&_ul]:pl-5 [&_ul]:list-disc [&_ul]:space-y-1
+          [&_li]:text-gray-300 [&_li]:leading-relaxed
+          [&_p]:text-gray-300 [&_p]:mb-3 [&_strong]:text-white [&_strong]:font-bold"
+      >
           <!-- Video Tutorial Section -->
           <div class="flex items-center gap-3 mb-3">
             <div class="text-blue-400">
@@ -1228,22 +1228,6 @@ export class HelpModal extends BaseModal {
         </div>
       </div>
     `;
-
-    if (this.inline) {
-      return content;
-    }
-
-    return html`
-      <o-modal
-        id="helpModal"
-        title="Instructions"
-        ?inline=${this.inline}
-        ?hideHeader=${true}
-        ?hideCloseButton=${true}
-      >
-        ${content}
-      </o-modal>
-    `;
   }
 
   openTroubleshooting() {