+ ${this.renderActionButtons(
+ isMember,
+ isLeader,
+ isOfficer,
+ hasPendingRequest,
+ clan,
+ )}
+
+ `;
+
+ if (clan.discordUrl) {
+ // Two-column on desktop: description + stats on the left, the Discord
+ // card as a sidebar on the right, with the actions as a full-width
+ // footer below both. Footer (rather than inside the left column) so the
+ // phone stack reads description → stats → Discord → actions.
+ return html`
+
+
+ `;
+ }
+
return html`
+
+ ${actions}
+
+ ${this.renderDescriptionCard(clan)}
+
+
+ ${this.renderStatTiles(clan)}
+
+
+ ${this.renderDiscordCard(clan.discordUrl)}
+
+
-
`;
}
@@ -530,6 +564,152 @@ export class ClanDetailView extends LitElement {
`;
}
+ private renderDescriptionCard(clan: ClanInfo) {
+ return html`
+
-
-
- - ${clan.description || translateText("clan_modal.no_description")} -
-
- ${renderStat(
- translateText("clan_modal.members"),
- `${clan.memberCount ?? 0}`,
- )}
- ${renderStat(
- translateText("clan_modal.status"),
- clan.isOpen
- ? translateText("clan_modal.open")
- : translateText("clan_modal.invite_only"),
- )}
-
-
-
- ${this.renderActionButtons(
- isMember,
- isLeader,
- isOfficer,
- hasPendingRequest,
- clan,
- )}
-
+ ${this.renderDescriptionCard(clan)}
+ ${this.renderStatTiles(clan)}
+ ${actions}
+
+ `;
+ }
+
+ private renderStatTiles(clan: ClanInfo) {
+ return html`
+ ${renderStat(
+ translateText("clan_modal.members"),
+ `${clan.memberCount ?? 0}`,
+ )}
+ ${renderStat(
+ translateText("clan_modal.status"),
+ clan.isOpen
+ ? translateText("clan_modal.open")
+ : translateText("clan_modal.invite_only"),
+ )}
+ `;
+ }
+
+ // Renders immediately from the stored URL (placeholder name + working join
+ // button) and fills in name/icon/counts when the Discord lookup resolves.
+ private renderDiscordCard(url: string) {
+ const meta = this.discordMeta;
+ const valid = meta?.valid === true;
+ const serverName =
+ meta?.serverName ?? translateText("clan_modal.discord_default_name");
+ const invalid = meta?.valid === false;
+ const bannerUrl = valid ? (meta?.bannerUrl ?? null) : null;
+ const description = valid ? (meta?.description ?? null) : null;
+ const showCounts =
+ valid &&
+ (typeof meta?.onlineCount === "number" ||
+ typeof meta?.memberCount === "number");
+
+ return html`
+ + ${clan.description || translateText("clan_modal.no_description")} +
+
+ ${bannerUrl
+ ? html`
+ `;
+ }
+
private renderActionButtons(
isMember: boolean,
isLeader: boolean,
diff --git a/src/client/components/clan/ClanManageView.ts b/src/client/components/clan/ClanManageView.ts
index a803b4113..e55e97d3c 100644
--- a/src/client/components/clan/ClanManageView.ts
+++ b/src/client/components/clan/ClanManageView.ts
@@ -43,6 +43,7 @@ export class ClanManageView extends LitElement {
@state() private manageName = "";
@state() private manageDescription = "";
+ @state() private manageDiscordUrl = "";
@state() private manageIsOpen = true;
@state() private saving = false;
@state() private members: ClanMember[] = [];
@@ -65,6 +66,7 @@ export class ClanManageView extends LitElement {
if (this.selectedClan) {
this.manageName = this.selectedClan.name;
this.manageDescription = this.selectedClan.description ?? "";
+ this.manageDiscordUrl = this.selectedClan.discordUrl ?? "";
this.manageIsOpen = this.selectedClan.isOpen ?? true;
}
this.loadMembers(1);
@@ -111,10 +113,20 @@ export class ClanManageView extends LitElement {
private async handleSaveSettings() {
const clan = this.selectedClan;
if (!clan) return;
- const patch: { name?: string; description?: string; isOpen?: boolean } = {};
+ const patch: {
+ name?: string;
+ description?: string;
+ discordUrl?: string;
+ isOpen?: boolean;
+ } = {};
if (this.manageName !== clan.name) patch.name = this.manageName;
if ((this.manageDescription ?? "") !== (clan.description ?? ""))
patch.description = this.manageDescription;
+ // Discord URL is leader-only; the input only renders for leaders, so this
+ // diff is a no-op for officers (server also enforces it). "" clears the
+ // link — the server trims and coerces it to null.
+ if ((this.manageDiscordUrl ?? "") !== (clan.discordUrl ?? ""))
+ patch.discordUrl = this.manageDiscordUrl;
if (this.manageIsOpen !== (clan.isOpen ?? true))
patch.isOpen = this.manageIsOpen;
if (Object.keys(patch).length === 0) return;
@@ -131,6 +143,7 @@ export class ClanManageView extends LitElement {
detail: {
name: result.name,
description: result.description,
+ discordUrl: result.discordUrl,
isOpen: result.isOpen,
},
bubbles: true,
@@ -358,6 +371,32 @@ export class ClanManageView extends LitElement {
class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/20 focus:outline-none focus:ring-2 focus:ring-malibu-blue/50 focus:border-malibu-blue/50 transition-all font-medium hover:bg-white/10 text-sm resize-none"
>
+ ${this.myRole === "leader"
+ ? html`
+
+ 
+
+
`
+ : ""}
+
+ ${bannerUrl
+ ? ""
+ : html`
+
+
+
`}
+ + ${translateText("clan_modal.discord_section_title")} +
+
+ ${meta?.iconUrl
+ ? html`
`
+ : html`
+ ${description
+ ? html`
+ ${serverName.charAt(0).toUpperCase()}
+
`}
+
+
+
+ ${serverName}
+
+ ${showCounts
+ ? html`
+
+ ${translateText("clan_modal.discord_online_members", {
+ online: meta?.onlineCount ?? 0,
+ members: meta?.memberCount ?? 0,
+ })}
+
`
+ : ""}
+ + ${description} +
` + : ""} + + + ${invalid + ? html`+ ${translateText("clan_modal.discord_invite_unavailable")} +
` + : html` + ${translateText("clan_modal.open_discord")} + + `} +
+
+
+ (this.manageDiscordUrl = (
+ e.target as HTMLInputElement
+ ).value)}
+ placeholder=${translateText(
+ "clan_modal.discord_url_placeholder",
+ )}
+ maxlength="255"
+ class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/20 focus:outline-none focus:ring-2 focus:ring-malibu-blue/50 focus:border-malibu-blue/50 transition-all font-medium hover:bg-white/10 text-sm"
+ />
+
+ `
+ : ""}
+ ${translateText("clan_modal.discord_url_hint")} +
+
diff --git a/src/core/ClanApiSchemas.ts b/src/core/ClanApiSchemas.ts
index b151114fc..0246e94d0 100644
--- a/src/core/ClanApiSchemas.ts
+++ b/src/core/ClanApiSchemas.ts
@@ -36,12 +36,45 @@ export const ClanInfoSchema = z.object({
name: z.string().max(35),
tag: RequiredClanTagSchema,
description: z.string().max(200),
+ // Discord invite URL set by the clan leader; null when unset. Optional
+ // because not every ClanInfo source includes it (e.g. browse results).
+ discordUrl: z.string().max(255).nullable().optional(),
isOpen: z.boolean(),
createdAt: z.iso.datetime().optional(),
memberCount: z.number().optional(),
});
export type ClanInfo = z.infer;
+// Client-assembled view model for the clan Discord card. `valid` is false only
+// on a definitive Discord 404 (invite revoked); other failures degrade to the
+// plain link with valid: true.
+export type ClanDiscord = {
+ url: string;
+ valid: boolean;
+ serverName?: string;
+ iconUrl?: string | null;
+ bannerUrl?: string | null;
+ description?: string | null;
+ onlineCount?: number | null;
+ memberCount?: number | null;
+};
+
+// Subset of Discord's public GET /invites/{code}?with_counts=true response,
+// parsed client-side into ClanDiscord. snake_case mirrors Discord's wire format.
+export const DiscordInviteResponseSchema = z.object({
+ guild: z
+ .object({
+ id: z.string(),
+ name: z.string(),
+ icon: z.string().nullable().optional(),
+ banner: z.string().nullable().optional(),
+ description: z.string().nullable().optional(),
+ })
+ .optional(),
+ approximate_member_count: z.number().optional(),
+ approximate_presence_count: z.number().optional(),
+});
+
export const ClanBrowseResponseSchema = z.object({
results: ClanInfoSchema.array(),
total: z.number(),
diff --git a/tests/client/clan/ClanApiMutations.test.ts b/tests/client/clan/ClanApiMutations.test.ts
index 267420acf..d92a1630f 100644
--- a/tests/client/clan/ClanApiMutations.test.ts
+++ b/tests/client/clan/ClanApiMutations.test.ts
@@ -13,6 +13,7 @@ import {
demoteMember,
denyClanRequest,
disbandClan,
+ fetchDiscordInvite,
joinClan,
kickMember,
leaveClan,
@@ -420,4 +421,133 @@ describe("updateClan", () => {
const result = await updateClan("TEST", { name: "x" });
expect(result).toEqual({ error: "clan_modal.error_network" });
});
+
+ it("maps 400 DISCORD_INVALID to the discord invalid error", async () => {
+ mockFetch(() => failRes(400, { code: "DISCORD_INVALID" }));
+ const result = await updateClan("TEST", { discordUrl: "not-a-link" });
+ expect(result).toEqual({ error: "clan_modal.discord_invalid" });
+ });
+
+ it("maps 400 DISCORD_EXPIRES to the discord expires error", async () => {
+ mockFetch(() => failRes(400, { code: "DISCORD_EXPIRES" }));
+ const result = await updateClan("TEST", {
+ discordUrl: "https://discord.gg/temp",
+ });
+ expect(result).toEqual({ error: "clan_modal.discord_expires" });
+ });
+
+ it("returns generic error on 400 with an unrecognised code", async () => {
+ mockFetch(() => failRes(400, { code: "SOMETHING_ELSE" }));
+ const result = await updateClan("TEST", { name: "x" });
+ expect(result).toEqual({ error: "clan_modal.error_failed" });
+ });
+
+ it("maps 429 to the discord rate limited error", async () => {
+ mockFetch(() => failRes(429));
+ const result = await updateClan("TEST", {
+ discordUrl: "https://discord.gg/abc",
+ });
+ expect(result).toEqual({ error: "clan_modal.discord_rate_limited" });
+ });
+});
+
+describe("fetchDiscordInvite", () => {
+ const inviteBody = {
+ guild: {
+ id: "123",
+ name: "Test Server",
+ icon: "abc",
+ banner: "a_def",
+ description: "A server",
+ },
+ approximate_member_count: 100,
+ approximate_presence_count: 42,
+ };
+
+ it("returns metadata with CDN asset URLs on success", async () => {
+ mockFetch(() => okJson(inviteBody));
+ const result = await fetchDiscordInvite("https://discord.gg/abc123");
+ expect(result).toMatchObject({
+ url: "https://discord.gg/abc123",
+ valid: true,
+ serverName: "Test Server",
+ description: "A server",
+ onlineCount: 42,
+ memberCount: 100,
+ });
+ expect(result.iconUrl).toBe("https://cdn.discordapp.com/icons/123/abc.png");
+ // Animated banner (a_ prefix) is served as .gif.
+ expect(result.bannerUrl).toBe(
+ "https://cdn.discordapp.com/banners/123/a_def.gif?size=1024",
+ );
+ });
+
+ it("parses the code from the stored discord.gg/{code} URL", async () => {
+ const fetchMock = vi.fn(() => okJson(inviteBody));
+ vi.stubGlobal("fetch", fetchMock);
+ await fetchDiscordInvite("https://discord.gg/xyz789");
+ const [requestUrl] = fetchMock.mock.calls[0] as unknown as [string];
+ expect(requestUrl).toContain("/invites/xyz789");
+ });
+
+ it("marks the invite invalid on a Discord 404", async () => {
+ mockFetch(() => failRes(404));
+ const result = await fetchDiscordInvite("https://discord.gg/gone");
+ expect(result).toEqual({ url: "https://discord.gg/gone", valid: false });
+ });
+
+ it("degrades to the plain link when Discord is unreachable", async () => {
+ vi.stubGlobal(
+ "fetch",
+ vi.fn(() => Promise.reject(new Error("network"))),
+ );
+ const result = await fetchDiscordInvite("https://discord.gg/x");
+ expect(result).toEqual({ url: "https://discord.gg/x", valid: true });
+ });
+
+ it("degrades to the plain link on a non-404 error status", async () => {
+ mockFetch(() => failRes(500));
+ const result = await fetchDiscordInvite("https://discord.gg/x");
+ expect(result).toEqual({ url: "https://discord.gg/x", valid: true });
+ });
+
+ it("returns valid with no metadata when the response lacks a guild", async () => {
+ mockFetch(() => okJson({ approximate_member_count: 5 }));
+ const result = await fetchDiscordInvite("https://discord.gg/x");
+ expect(result).toEqual({ url: "https://discord.gg/x", valid: true });
+ });
+
+ it("returns the plain link for an unparseable URL without fetching", async () => {
+ const fetchMock = vi.fn(() => okJson(inviteBody));
+ vi.stubGlobal("fetch", fetchMock);
+ const result = await fetchDiscordInvite("not a url");
+ expect(result).toEqual({ url: "not a url", valid: true });
+ expect(fetchMock).not.toHaveBeenCalled();
+ });
+
+ it("passes an AbortSignal to fetch so the request can time out", async () => {
+ const fetchMock = vi.fn(() => okJson(inviteBody));
+ vi.stubGlobal("fetch", fetchMock);
+ await fetchDiscordInvite("https://discord.gg/abc123");
+ const [, init] = fetchMock.mock.calls[0] as unknown as [
+ string,
+ { signal: AbortSignal },
+ ];
+ // Pins the AbortSignal.timeout(5000) guard; without it the card could hang
+ // indefinitely on a stalled connection.
+ expect(init.signal).toBeInstanceOf(AbortSignal);
+ });
+
+ it("degrades to the plain link when the request times out", async () => {
+ vi.stubGlobal(
+ "fetch",
+ vi.fn(() =>
+ Promise.reject(
+ new DOMException("The operation timed out", "TimeoutError"),
+ ),
+ ),
+ );
+ const result = await fetchDiscordInvite("https://discord.gg/slow");
+ expect(result).toEqual({ url: "https://discord.gg/slow", valid: true });
+ });
});
diff --git a/tests/client/clan/ClanApiSchemas.test.ts b/tests/client/clan/ClanApiSchemas.test.ts
index c94edc39f..d66e13ea1 100644
--- a/tests/client/clan/ClanApiSchemas.test.ts
+++ b/tests/client/clan/ClanApiSchemas.test.ts
@@ -57,6 +57,34 @@ describe("ClanInfoSchema", () => {
expect(result.data.memberCount).toBeUndefined();
}
});
+
+ it("accepts a string discordUrl", () => {
+ const result = ClanInfoSchema.safeParse({
+ ...base,
+ discordUrl: "https://discord.gg/abc123",
+ });
+ expect(result.success).toBe(true);
+ });
+
+ it("accepts a null discordUrl (link unset)", () => {
+ const result = ClanInfoSchema.safeParse({ ...base, discordUrl: null });
+ expect(result.success).toBe(true);
+ if (result.success) expect(result.data.discordUrl).toBeNull();
+ });
+
+ it("accepts data without discordUrl (omitted by browse results)", () => {
+ const result = ClanInfoSchema.safeParse(base);
+ expect(result.success).toBe(true);
+ if (result.success) expect(result.data.discordUrl).toBeUndefined();
+ });
+
+ it("rejects a discordUrl longer than 255 characters", () => {
+ const result = ClanInfoSchema.safeParse({
+ ...base,
+ discordUrl: "https://discord.gg/" + "a".repeat(255),
+ });
+ expect(result.success).toBe(false);
+ });
});
describe("ClanMemberSchema", () => {
diff --git a/tests/client/clan/ClanModalTestUtils.ts b/tests/client/clan/ClanModalTestUtils.ts
index 05c9f040e..95a5dbef9 100644
--- a/tests/client/clan/ClanModalTestUtils.ts
+++ b/tests/client/clan/ClanModalTestUtils.ts
@@ -67,6 +67,9 @@ export function clanApiMockFactory() {
results: [],
nextCursor: null,
})),
+ // ClanDetailView calls this when a clan has a discordUrl; mock the degraded
+ // plain-link result so view tests never reach the real Discord network.
+ fetchDiscordInvite: vi.fn(async (url: string) => ({ url, valid: true })),
};
}