diff --git a/resources/lang/en.json b/resources/lang/en.json index cd881bee7..eba44de3c 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -310,6 +310,7 @@ "ban": "Ban", "unban": "Unban", "banned_players": "Banned Players", + "banned_players_count": "{count, plural, one {# banned player} other {# banned players}}", "no_bans": "No banned players.", "ban_reason_prompt": "Ban reason (optional, max 200 characters):", "confirm_ban": "Are you sure you want to ban this player? They will be removed from the clan and unable to rejoin.", diff --git a/src/client/ClanModal.ts b/src/client/ClanModal.ts index e611fc424..1aebed5dd 100644 --- a/src/client/ClanModal.ts +++ b/src/client/ClanModal.ts @@ -73,7 +73,7 @@ export class ClanModal extends BaseModal { onBack: () => this.close(), ariaLabel: translateText("common.back"), }) - : null; + : this.renderSubViewHeader(); return html` this.handleTabChange(key as Tab)} > ${header ? html`
${header}
` : ""} - ${this.renderInner()} +
${this.renderInner()}
 `; } + private tagPill(tag: string) { + return html`[${tag}]`; + } + + private renderSubViewHeader() { + const clan = this.selectedClan; + const ariaLabel = translateText("common.back"); + if (this.view === "my-requests") { + return modalHeader({ + title: translateText("clan_modal.pending_applications"), + onBack: () => (this.view = "list"), + ariaLabel, + }); + } + if (this.view === "manage") { + return modalHeader({ + title: translateText("clan_modal.manage_clan"), + onBack: () => (this.view = "detail"), + ariaLabel, + rightContent: clan ? this.tagPill(clan.tag) : undefined, + }); + } + if (this.view === "transfer") { + return modalHeader({ + title: translateText("clan_modal.transfer_leadership"), + onBack: () => (this.view = "manage"), + ariaLabel, + }); + } + if (this.view === "requests") { + return modalHeader({ + title: translateText("clan_modal.join_requests"), + onBack: () => (this.view = "detail"), + ariaLabel, + }); + } + if (this.view === "bans") { + return modalHeader({ + title: translateText("clan_modal.banned_players"), + onBack: () => (this.view = "manage"), + ariaLabel, + }); + } + // Default: detail + return modalHeader({ + title: clan?.name ?? translateText("clan_modal.title"), + onBack: () => { + this.view = "list"; + this.selectedClan = null; + this.selectedClanTag = ""; + this.myRole = null; + this.detailCache = null; + }, + ariaLabel, + rightContent: clan ? this.tagPill(clan.tag) : undefined, + }); + } + private handleTabChange(tab: Tab) { this.activeTab = tab; this.view = "list"; @@ -351,7 +412,7 @@ export class ClanModal extends BaseModal { } return html` -
+
${hasRequests ? this.renderPendingRequestsButton() : ""} ${this.myClans.map( (clan) => html` diff --git a/src/client/UserSettingModal.ts b/src/client/UserSettingModal.ts index 8f51ff425..5bc6f0432 100644 --- a/src/client/UserSettingModal.ts +++ b/src/client/UserSettingModal.ts @@ -343,7 +343,9 @@ export class UserSettingModal extends BaseModal { showDivider: true, })}
-
${activeContent}
+
+ ${activeContent} +
`; } diff --git a/src/client/components/baseComponents/Modal.ts b/src/client/components/baseComponents/Modal.ts index fc4801064..68ebd4462 100644 --- a/src/client/components/baseComponents/Modal.ts +++ b/src/client/components/baseComponents/Modal.ts @@ -126,9 +126,8 @@ export class OModal extends LitElement { !this.inline && this.maxWidth ? `max-width: ${this.maxWidth};` : ""; const hasTabs = this.tabs.length > 0; - const sectionClass = hasTabs - ? "relative flex-1 min-h-0 flex flex-col text-white bg-black/70 backdrop-blur-xl lg:rounded-2xl lg:border border-white/10 overflow-hidden" - : "relative flex-1 min-h-0 flex flex-col text-white bg-[#23232382] backdrop-blur-md lg:rounded-lg overflow-hidden"; + const sectionClass = + "relative flex-1 min-h-0 flex flex-col text-white bg-black/70 backdrop-blur-xl lg:rounded-2xl lg:border border-white/10 overflow-hidden"; return html`