mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-20 15:32:47 +00:00
Clan System Part 2 - UI (#3625)
## Description: Continuation from #3276 Adds the complete client-side clan UI as a Lit web component (`<clan-modal>`), a typed API client with Zod-validated responses, shared response schemas, and a reusable `<confirm-dialog>` component. ### New: `ClanModal.ts` | View | What it does | |------|-------------| | **My Clans** | Lists joined clans + pending join requests (built from `/users/@me`, no extra fetches) | | **Browse** | Search by tag (min 3 chars), paginated results, configurable per-page (10/25/50) | | **Clan Detail** | Stats, paginated + searchable member list, role badges, join/leave/request actions | | **Manage** | Edit name (max 35 chars) + description, toggle open/invite-only, disband | | **Transfer** | Leadership transfer with member selector + confirmation | | **Requests** | Approve/deny join requests (leader/officer) | | **Bans** | View and unban (leader/officer) | | **My Requests** | View and withdraw outgoing requests | ### New: `ConfirmDialog.ts` Reusable `<confirm-dialog>` Lit component — replaces native `confirm()`/`prompt()` which are blocked or broken on mobile and CrazyGames iframes. Supports danger/warning variants and an optional textarea (used for ban reasons). Fires `confirm`/`cancel` events. ### New: `ClanApi.ts` Typed API client covering all clan endpoints. Every response is Zod-validated. Auth header is always last in the spread (can't be overridden by callers). Unknown server error messages always fall back to a generic client-side string — never displayed verbatim. ### New: `ClanApiSchemas.ts` (in `src/core/`) Shared Zod schemas for clan API responses with max-length constraints on `name` (35) and `description` (200). Lives in `core/` so it can be consumed by both client code and the leaderboard table. ### Modified: `ApiSchemas.ts` - Added `clans` and `clanRequests` arrays to `UserMeResponseSchema` - Moved clan leaderboard schemas out to `ClanApiSchemas.ts` - Renamed `LeaderboardClanTagSchema` → `RequiredClanTagSchema` ### Modified: `Api.ts` - Added `invalidateUserMe()` to bust the cached `/users/me` response after mutations - Removed `fetchClanLeaderboard` (moved to `ClanApi.ts`) ### Tests - `ClanModal.test.ts` — rendering, view navigation, user actions - `ClanApiQueries.test.ts` — fetch functions, error handling, pagination - `ClanApiMutations.test.ts` — join, leave, kick, ban, promote, transfer, etc. - `ClanApiBans.test.ts` — ban/unban calls and error paths - `ClanApiSchemas.test.ts` — Zod schema validation edge cases - `LeaderboardModal.test.ts` — updated imports ## Notable design decisions - **Not-logged-in state** — shows "Sign in to join clans" instead of false "no clans" empty state - **Rate limit feedback** — reads `Retry-After` header and surfaces wait time to the user ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: w.o.n --------- Co-authored-by: evanpelle <evanpelle@gmail.com>
This commit is contained in:
Ryan
@@ -0,0 +1,460 @@
|
||||
import { html } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { getUserMe, invalidateUserMe } from "./Api";
|
||||
import { type ClanInfo, type ClanMember, type ClanStats } from "./ClanApi";
|
||||
import { BaseModal } from "./components/BaseModal";
|
||||
import "./components/clan/ClanBansView";
|
||||
import "./components/clan/ClanBrowseView";
|
||||
import type { BrowseState } from "./components/clan/ClanBrowseView";
|
||||
import "./components/clan/ClanCard";
|
||||
import "./components/clan/ClanDetailView";
|
||||
import "./components/clan/ClanManageView";
|
||||
import "./components/clan/ClanMyRequestsView";
|
||||
import "./components/clan/ClanRequestsView";
|
||||
import type { ClanRole } from "./components/clan/ClanShared";
|
||||
import "./components/clan/ClanTransferView";
|
||||
import "./components/ConfirmDialog";
|
||||
import "./components/CopyButton";
|
||||
import { modalHeader } from "./components/ui/ModalHeader";
|
||||
import { translateText } from "./Utils";
|
||||
|
||||
type Tab = "my-clans" | "browse";
|
||||
type View =
|
||||
| "list"
|
||||
| "detail"
|
||||
| "manage"
|
||||
| "transfer"
|
||||
| "requests"
|
||||
| "bans"
|
||||
| "my-requests";
|
||||
|
||||
@customElement("clan-modal")
|
||||
export class ClanModal extends BaseModal {
|
||||
@state() private activeTab: Tab = "my-clans";
|
||||
@state() private view: View = "list";
|
||||
@state() private loading = false;
|
||||
|
||||
@state() private myClans: ClanInfo[] = [];
|
||||
@state() private myPendingRequests: {
|
||||
tag: string;
|
||||
name: string;
|
||||
createdAt: string;
|
||||
}[] = [];
|
||||
|
||||
@state() private selectedClanTag = "";
|
||||
@state() private selectedClan: ClanInfo | null = null;
|
||||
@state() private myRole: ClanRole | null = null;
|
||||
private myPublicId: string | null = null;
|
||||
@state() private myClanRoles = new Map<string, ClanRole>();
|
||||
|
||||
// Lifted browse state — survives tab switches
|
||||
private browseCache: BrowseState | null = null;
|
||||
|
||||
// Lifted detail cache — survives sub-view navigation
|
||||
private detailCache: {
|
||||
tag: string;
|
||||
members: ClanMember[];
|
||||
membersTotal: number;
|
||||
pendingRequestCount: number;
|
||||
stats: ClanStats | null;
|
||||
} | null = null;
|
||||
|
||||
render() {
|
||||
const content = this.renderInner();
|
||||
if (this.inline) return content;
|
||||
return html`
|
||||
<o-modal
|
||||
id="clan-modal"
|
||||
title=""
|
||||
?hideCloseButton=${true}
|
||||
?inline=${this.inline}
|
||||
hideHeader
|
||||
>
|
||||
${content}
|
||||
</o-modal>
|
||||
`;
|
||||
}
|
||||
|
||||
protected onOpen(): void {
|
||||
this.loadMyClans();
|
||||
}
|
||||
|
||||
protected onClose(): void {
|
||||
this.activeTab = "my-clans";
|
||||
this.view = "list";
|
||||
this.selectedClan = null;
|
||||
this.selectedClanTag = "";
|
||||
this.myRole = null;
|
||||
this.browseCache = null;
|
||||
this.detailCache = null;
|
||||
}
|
||||
|
||||
private async loadMyClans() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const me = await getUserMe();
|
||||
if (!this.isModalOpen) return;
|
||||
if (!me || Object.keys(me.user).length === 0) {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("show-message", {
|
||||
detail: {
|
||||
message: translateText("clan_modal.sign_in_for_clans"),
|
||||
color: "red",
|
||||
duration: 3000,
|
||||
},
|
||||
}),
|
||||
);
|
||||
this.close();
|
||||
window.showPage?.("page-account");
|
||||
return;
|
||||
}
|
||||
this.myPublicId = me.player.publicId;
|
||||
this.myPendingRequests = me.player.clanRequests ?? [];
|
||||
const roles = new Map<string, ClanRole>();
|
||||
const clans: ClanInfo[] = [];
|
||||
for (const c of me.player.clans ?? []) {
|
||||
roles.set(c.tag, c.role);
|
||||
clans.push({
|
||||
tag: c.tag,
|
||||
name: c.name,
|
||||
description: "",
|
||||
isOpen: false,
|
||||
memberCount: c.memberCount,
|
||||
});
|
||||
}
|
||||
this.myClanRoles = roles;
|
||||
this.myClans = clans;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private renderInner() {
|
||||
if (this.loading) {
|
||||
return html`
|
||||
<div class="${this.modalContainerClass}">
|
||||
${modalHeader({
|
||||
title: translateText("clan_modal.title"),
|
||||
onBack: () => this.close(),
|
||||
ariaLabel: translateText("common.back"),
|
||||
})}
|
||||
${this.renderLoadingSpinner()}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.view === "my-requests") {
|
||||
return html`<clan-my-requests-view
|
||||
.myPendingRequests=${this.myPendingRequests}
|
||||
@navigate-back=${() => (this.view = "list")}
|
||||
@request-withdrawn=${(e: CustomEvent<{ tag: string }>) => {
|
||||
this.myPendingRequests = this.myPendingRequests.filter(
|
||||
(r) => r.tag !== e.detail.tag,
|
||||
);
|
||||
if (this.myPendingRequests.length === 0) this.view = "list";
|
||||
}}
|
||||
></clan-my-requests-view>`;
|
||||
}
|
||||
|
||||
if (this.selectedClanTag) {
|
||||
if (this.view === "manage") {
|
||||
return html`<clan-manage-view
|
||||
.clanTag=${this.selectedClanTag}
|
||||
.selectedClan=${this.selectedClan}
|
||||
.myPublicId=${this.myPublicId}
|
||||
.myRole=${this.myRole}
|
||||
@navigate-detail=${() => (this.view = "detail")}
|
||||
@navigate-bans=${() => (this.view = "bans")}
|
||||
@navigate-transfer=${() => (this.view = "transfer")}
|
||||
@clan-updated=${(e: CustomEvent<Partial<ClanInfo>>) => {
|
||||
if (this.selectedClan) {
|
||||
this.selectedClan = { ...this.selectedClan, ...e.detail };
|
||||
}
|
||||
this.detailCache = null;
|
||||
invalidateUserMe();
|
||||
}}
|
||||
@clan-disbanded=${(e: CustomEvent<{ tag: string }>) => {
|
||||
const roles = new Map(this.myClanRoles);
|
||||
roles.delete(e.detail.tag);
|
||||
this.myClanRoles = roles;
|
||||
this.myClans = this.myClans.filter((c) => c.tag !== e.detail.tag);
|
||||
this.selectedClan = null;
|
||||
this.selectedClanTag = "";
|
||||
this.myRole = null;
|
||||
this.view = "list";
|
||||
this.loadMyClans();
|
||||
}}
|
||||
></clan-manage-view>`;
|
||||
}
|
||||
if (this.view === "transfer") {
|
||||
return html`<clan-transfer-view
|
||||
.clanTag=${this.selectedClanTag}
|
||||
.selectedClan=${this.selectedClan}
|
||||
@navigate-back=${() => (this.view = "manage")}
|
||||
@leadership-transferred=${() => {
|
||||
this.loadMyClans().then(() =>
|
||||
this.openDetail(this.selectedClanTag),
|
||||
);
|
||||
}}
|
||||
></clan-transfer-view>`;
|
||||
}
|
||||
if (this.view === "requests") {
|
||||
return html`<clan-requests-view
|
||||
.clanTag=${this.selectedClanTag}
|
||||
.selectedClan=${this.selectedClan}
|
||||
@navigate-back=${() => (this.view = "detail")}
|
||||
@request-approved=${() => {
|
||||
if (this.selectedClan) {
|
||||
this.selectedClan = {
|
||||
...this.selectedClan,
|
||||
memberCount: (this.selectedClan.memberCount ?? 0) + 1,
|
||||
};
|
||||
}
|
||||
this.detailCache = null;
|
||||
}}
|
||||
></clan-requests-view>`;
|
||||
}
|
||||
if (this.view === "bans") {
|
||||
return html`<clan-bans-view
|
||||
.clanTag=${this.selectedClanTag}
|
||||
@navigate-back=${() => (this.view = "manage")}
|
||||
></clan-bans-view>`;
|
||||
}
|
||||
// Default: detail view
|
||||
return html`<clan-detail-view
|
||||
.clanTag=${this.selectedClanTag}
|
||||
.cachedClan=${this.selectedClan}
|
||||
.myPublicId=${this.myPublicId}
|
||||
.myClanRoles=${this.myClanRoles}
|
||||
.myPendingRequests=${this.myPendingRequests}
|
||||
.cachedDetail=${this.detailCache?.tag === this.selectedClanTag
|
||||
? this.detailCache
|
||||
: null}
|
||||
@navigate-back=${() => {
|
||||
this.view = "list";
|
||||
this.selectedClan = null;
|
||||
this.selectedClanTag = "";
|
||||
this.myRole = null;
|
||||
this.detailCache = null;
|
||||
}}
|
||||
@detail-loaded=${(
|
||||
e: CustomEvent<{
|
||||
clan: ClanInfo;
|
||||
myRole: ClanRole | null;
|
||||
members: ClanMember[];
|
||||
membersTotal: number;
|
||||
pendingRequestCount: number;
|
||||
stats: ClanStats | null;
|
||||
}>,
|
||||
) => {
|
||||
this.selectedClan = e.detail.clan;
|
||||
this.myRole = e.detail.myRole;
|
||||
this.detailCache = {
|
||||
tag: e.detail.clan.tag,
|
||||
members: e.detail.members,
|
||||
membersTotal: e.detail.membersTotal,
|
||||
pendingRequestCount: e.detail.pendingRequestCount,
|
||||
stats: e.detail.stats,
|
||||
};
|
||||
}}
|
||||
@navigate-manage=${() => (this.view = "manage")}
|
||||
@navigate-requests=${() => (this.view = "requests")}
|
||||
@clan-joined=${(e: CustomEvent<{ tag: string }>) => {
|
||||
this.myClanRoles = new Map([
|
||||
...this.myClanRoles,
|
||||
[e.detail.tag, "member" as ClanRole],
|
||||
]);
|
||||
this.openDetail(e.detail.tag);
|
||||
}}
|
||||
@clan-left=${(e: CustomEvent<{ tag: string }>) => {
|
||||
const roles = new Map(this.myClanRoles);
|
||||
roles.delete(e.detail.tag);
|
||||
this.myClanRoles = roles;
|
||||
this.selectedClan = null;
|
||||
this.selectedClanTag = "";
|
||||
this.myRole = null;
|
||||
this.view = "list";
|
||||
this.loadMyClans();
|
||||
}}
|
||||
@request-sent=${(e: CustomEvent<{ tag: string; name: string }>) => {
|
||||
this.myPendingRequests = [
|
||||
...this.myPendingRequests,
|
||||
{
|
||||
tag: e.detail.tag,
|
||||
name: e.detail.name,
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
];
|
||||
}}
|
||||
></clan-detail-view>`;
|
||||
}
|
||||
|
||||
// List view (tabs + my clans / browse)
|
||||
return html`
|
||||
<div class="${this.modalContainerClass}">
|
||||
${modalHeader({
|
||||
title: translateText("clan_modal.title"),
|
||||
onBack: () => this.close(),
|
||||
ariaLabel: translateText("common.back"),
|
||||
})}
|
||||
${this.renderTabs()}
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar mr-1">
|
||||
${this.activeTab === "my-clans"
|
||||
? this.renderMyClans()
|
||||
: html`<clan-browse-view
|
||||
.myClanRoles=${this.myClanRoles}
|
||||
.myPendingRequests=${this.myPendingRequests}
|
||||
.cachedState=${this.browseCache}
|
||||
@browse-updated=${(e: CustomEvent<BrowseState>) => {
|
||||
this.browseCache = e.detail;
|
||||
}}
|
||||
@clan-select=${(e: CustomEvent<{ tag: string }>) =>
|
||||
this.openDetail(e.detail.tag)}
|
||||
></clan-browse-view>`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private openDetail(tag: string) {
|
||||
this.selectedClanTag = tag;
|
||||
this.view = "detail";
|
||||
}
|
||||
|
||||
private renderTabs() {
|
||||
const tabs: { key: Tab; label: string }[] = [
|
||||
{ key: "my-clans", label: translateText("clan_modal.my_clans") },
|
||||
{ key: "browse", label: translateText("clan_modal.browse") },
|
||||
];
|
||||
|
||||
return html`
|
||||
<div class="flex border-b border-white/10 px-4 lg:px-6 gap-1">
|
||||
${tabs.map(
|
||||
(tab) => html`
|
||||
<button
|
||||
@click=${() => {
|
||||
this.activeTab = tab.key;
|
||||
this.view = "list";
|
||||
this.selectedClan = null;
|
||||
this.selectedClanTag = "";
|
||||
if (tab.key === "my-clans") {
|
||||
this.loadMyClans();
|
||||
}
|
||||
}}
|
||||
class="px-4 py-3 text-sm font-bold uppercase tracking-wider transition-all relative
|
||||
${this.activeTab === tab.key
|
||||
? "text-aquarius"
|
||||
: "text-white/40 hover:text-white/70"}"
|
||||
>
|
||||
${tab.label}
|
||||
${this.activeTab === tab.key
|
||||
? html`<div
|
||||
class="absolute bottom-0 left-0 right-0 h-0.5 bg-malibu-blue"
|
||||
></div>`
|
||||
: ""}
|
||||
</button>
|
||||
`,
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderMyClans() {
|
||||
const hasClans = this.myClans.length > 0;
|
||||
const hasRequests = this.myPendingRequests.length > 0;
|
||||
|
||||
if (!hasClans && !hasRequests) {
|
||||
return html`
|
||||
<div class="flex flex-col items-center justify-center p-12 text-center">
|
||||
<p class="text-white/40 text-sm mb-4">
|
||||
${translateText("clan_modal.no_clans")}
|
||||
</p>
|
||||
<button
|
||||
@click=${() => (this.activeTab = "browse")}
|
||||
class="px-6 py-2 text-sm font-bold text-white uppercase tracking-wider bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80 rounded-lg transition-all"
|
||||
>
|
||||
${translateText("clan_modal.browse")}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="p-4 lg:p-6 space-y-3">
|
||||
${hasRequests ? this.renderPendingRequestsButton() : ""}
|
||||
${this.myClans.map(
|
||||
(clan) => html`
|
||||
<clan-card
|
||||
.clan=${clan}
|
||||
.clanRole=${this.myClanRoles.get(clan.tag)}
|
||||
@clan-select=${(e: CustomEvent<{ tag: string }>) =>
|
||||
this.openDetail(e.detail.tag)}
|
||||
></clan-card>
|
||||
`,
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderPendingRequestsButton() {
|
||||
const count = this.myPendingRequests.length;
|
||||
return html`
|
||||
<button
|
||||
@click=${() => (this.view = "my-requests")}
|
||||
class="w-full flex items-center justify-between bg-amber-500/10 hover:bg-amber-500/15 rounded-xl border border-amber-500/20 p-4 transition-all cursor-pointer group"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5 text-amber-400"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<span class="text-amber-400 text-sm font-bold">
|
||||
${translateText("clan_modal.pending_applications")}
|
||||
</span>
|
||||
<span class="text-amber-400/60 text-xs block">
|
||||
${translateText("clan_modal.pending_requests_count", {
|
||||
count,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="px-2.5 py-1 text-xs font-bold rounded-full bg-amber-500/20 text-amber-400 border border-amber-500/30"
|
||||
>
|
||||
${count}
|
||||
</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5 text-amber-400/40 group-hover:text-amber-400/70 transition-colors"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user