Open bundle contents in a dialog; keep the info bubble inside the card

Activating a bundle card now opens a dialog with a preview of every item
and its name underneath (the card only tiles four). The cosmetic info
bubble, right-aligned under the "?" and sized to its longest line, ran
past the modal's left edge on first-column cards and was clipped; its
strip now spans the card and caps the bubble at the card's width.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: evanpelle

resources/lang/en.json

@@ -1643,6 +1643,7 @@
     "no_tribes": "You haven't bought any tribe names yet.",
     "pack_already_owned": "You already own {items}. Nothing was charged.",
     "pack_debt": "Your Plutonium balance is {debt} in debt. Settle it before buying.",
+    "pack_no_items": "None of this bundle's items are available right now.",
     "pack_owned": "Owned",
     "pack_partially_owned": "Already own {items}",
     "pack_unavailable": "This bundle is no longer available.",

src/client/Store.ts

@@ -13,6 +13,7 @@ import "./components/CurrencyDisplay";
 import "./components/CustomCurrencyCard";
 import "./components/EffectsGrid";
 import "./components/NotLoggedInWarning";
+import "./components/PackContentsDialog";
 import "./components/PurchaseButton";
 import { alignPurchaseRows } from "./components/PurchaseButton";
 import "./components/TribesPanel";
@@ -57,6 +58,8 @@ export class StoreModal extends BaseModal {
   private cosmeticsSubTab: CosmeticsSubTab = "patterns";
   private inspected: ResolvedCosmetic | null = null;
   private visibleGroups: readonly (readonly ResolvedCosmetic[])[] = [];
+  /** The bundle whose contents dialog is open, if any. */
+  private openedPack: ResolvedCosmetic | null = null;
 
   protected modalConfig() {
     if (this.affiliateCode) {
@@ -234,6 +237,18 @@ export class StoreModal extends BaseModal {
     this.requestUpdate();
   }
 
+  // Activating a bundle also opens its contents: the card only has room to
+  // tile a few items, so the dialog is where each one is shown with its name.
+  private activate(resolved: ResolvedCosmetic): void {
+    if (resolved.type === "cosmeticPack") this.openedPack = resolved;
+    this.inspect(resolved);
+  }
+
+  private closePack(): void {
+    this.openedPack = null;
+    this.requestUpdate();
+  }
+
   private reconcileInspection(
     groups: readonly (readonly ResolvedCosmetic[])[],
   ): void {
@@ -331,7 +346,7 @@ export class StoreModal extends BaseModal {
         .activeVariantKey=${active.key}
         .actionContent=${action}
         state=${focused ? "focused" : "idle"}
-        .onActivate=${(resolved: ResolvedCosmetic) => this.inspect(resolved)}
+        .onActivate=${(resolved: ResolvedCosmetic) => this.activate(resolved)}
         .onVariantActivate=${(resolved: ResolvedCosmetic) =>
           this.inspect(resolved)}
       ></cosmetic-card>`;
@@ -522,9 +537,14 @@ export class StoreModal extends BaseModal {
   }
 
   private renderBundleGrid(): TemplateResult {
-    return this.renderBrowser(this.visibleGroups, {
+    return html`${this.renderBrowser(this.visibleGroups, {
       emptyTranslationKey: "store.no_bundles",
-    });
+    })}${this.openedPack
+      ? html`<pack-contents-dialog
+          .pack=${this.openedPack}
+          @close=${() => this.closePack()}
+        ></pack-contents-dialog>`
+      : ""}`;
   }
 
   private renderSubscriptionGrid(): TemplateResult {
@@ -592,6 +612,7 @@ export class StoreModal extends BaseModal {
 
   protected onClose(): void {
     this.affiliateCode = null;
+    this.openedPack = null;
     this.selectVisible(this.groupsForTab(this.activeTab));
   }
 

src/client/components/CosmeticInfo.ts

@@ -40,21 +40,25 @@ export class CosmeticInfo extends LitElement {
     }
 
     const rarityColor = rarityColors[this.rarity ?? ""] ?? "text-white/70";
+    // The strip spans the card so the bubble (right-aligned under the "?")
+    // can be capped at the card's width and wrap. Sized to its longest line,
+    // it used to run past the modal's left edge on first-column cards and
+    // get clipped. Only the button takes pointer events.
     return html`<div
       data-cosmetic-info
-      class="group/cosmetic-info absolute right-2 top-2 z-10"
+      class="group/cosmetic-info pointer-events-none absolute inset-x-2 top-2 z-10 flex justify-end"
       @click=${(event: Event) => event.stopPropagation()}
     >
       <button
         type="button"
         aria-label="Show cosmetic details"
-        class="flex h-7 w-7 cursor-help items-center justify-center rounded-full bg-black/55 text-xs font-black text-white/80 ring-1 ring-white/20 transition-colors hover:bg-black/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
+        class="pointer-events-auto flex h-7 w-7 cursor-help items-center justify-center rounded-full bg-black/55 text-xs font-black text-white/80 ring-1 ring-white/20 transition-colors hover:bg-black/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
       >
         ?
       </button>
       <div
         role="tooltip"
-        class="pointer-events-none absolute right-0 top-9 hidden min-w-max flex-col gap-0.5 whitespace-nowrap rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white shadow-xl group-hover/cosmetic-info:flex group-focus-within/cosmetic-info:flex"
+        class="pointer-events-none absolute right-0 top-9 hidden w-max max-w-full flex-col gap-0.5 whitespace-normal rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-left text-xs text-white shadow-xl group-hover/cosmetic-info:flex group-focus-within/cosmetic-info:flex"
       >
         ${this.rarity
           ? html`<div class="font-bold uppercase tracking-wider ${rarityColor}">
@@ -75,13 +79,13 @@ export class CosmeticInfo extends LitElement {
           : nothing}
         ${this.perks.map(
           (perk) =>
-            html`<div class="w-56 whitespace-normal">
+            html`<div class="max-w-56">
               <span class="font-bold text-purple-300">${perk.label}:</span>
               <span class="text-white/80">${perk.info}</span>
             </div>`,
         )}
         ${this.items.length > 0
-          ? html`<div data-cosmetic-info-items class="w-56 whitespace-normal">
+          ? html`<div data-cosmetic-info-items class="max-w-56">
               <span class="font-bold text-purple-300"
                 >${translateText("cosmetics.pack_includes")}</span
               >

src/client/components/PackContentsDialog.ts

@@ -0,0 +1,117 @@
+import { html, LitElement, render as litRender } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { CosmeticPack } from "../../core/CosmeticSchemas";
+import { ResolvedCosmetic } from "../Cosmetics";
+import { translateText } from "../Utils";
+import { cosmeticDisplayName } from "./CosmeticPresentation";
+import "./CosmeticPreview";
+
+/**
+ * Shows everything in a cosmetic bundle: a preview of each resolved item with
+ * its name underneath. Rendered into a body portal (like confirm-dialog) so it
+ * sits above the store modal. Set `.pack`; dispatches `close`.
+ */
+@customElement("pack-contents-dialog")
+export class PackContentsDialog extends LitElement {
+  @property({ attribute: false }) pack: ResolvedCosmetic | null = null;
+
+  private portal: HTMLDivElement | null = null;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.portal = document.createElement("div");
+    document.body.appendChild(this.portal);
+    window.addEventListener("keydown", this.onKeyDown);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("keydown", this.onKeyDown);
+    if (this.portal) {
+      litRender(html``, this.portal);
+      this.portal.remove();
+      this.portal = null;
+    }
+    super.disconnectedCallback();
+  }
+
+  private onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") this.close();
+  };
+
+  private close() {
+    this.dispatchEvent(new CustomEvent("close"));
+  }
+
+  render() {
+    if (this.portal) {
+      litRender(
+        this.pack ? this.renderOverlay(this.pack) : html``,
+        this.portal,
+      );
+    }
+    return html``;
+  }
+
+  private renderOverlay(resolved: ResolvedCosmetic) {
+    const pack = resolved.cosmetic as CosmeticPack;
+    const items = resolved.packItems ?? [];
+    return html`<div
+      class="fixed inset-0 z-[10020] flex items-center justify-center bg-black/80"
+      @click=${(e: Event) => {
+        if (e.target === e.currentTarget) this.close();
+      }}
+    >
+      <div
+        data-pack-contents
+        role="dialog"
+        aria-label=${pack.displayName}
+        class="relative mx-4 max-h-[85vh] w-full max-w-2xl overflow-y-auto rounded-2xl border border-white/10 bg-surface p-6 shadow-2xl"
+      >
+        <button
+          type="button"
+          aria-label=${translateText("common.close")}
+          @click=${() => this.close()}
+          class="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-lg text-xl leading-none text-white/50 transition-all hover:bg-white/10 hover:text-white"
+        >
+          ×
+        </button>
+        <h2 class="mb-1 pr-8 text-lg font-bold text-white">
+          ${pack.displayName}
+        </h2>
+        ${pack.description
+          ? html`<p class="mb-4 text-sm text-white/60">${pack.description}</p>`
+          : html`<div class="mb-4"></div>`}
+        ${items.length === 0
+          ? html`<p class="py-6 text-center text-sm text-white/50">
+              ${translateText("store.pack_no_items")}
+            </p>`
+          : html`<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
+              ${items.map(
+                (item) =>
+                  html`<div
+                    data-pack-contents-item=${item.key}
+                    class="flex flex-col items-center gap-2 rounded-lg border border-white/10 bg-white/5 p-2"
+                  >
+                    <div
+                      class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-black/30 p-2"
+                    >
+                      <cosmetic-preview
+                        .resolved=${item}
+                        size="card"
+                      ></cosmetic-preview>
+                    </div>
+                    <span
+                      class="w-full break-words text-center text-sm font-bold leading-tight text-white"
+                      >${cosmeticDisplayName(item)}</span
+                    >
+                  </div>`,
+              )}
+            </div>`}
+      </div>
+    </div>`;
+  }
+}

tests/client/CosmeticCard.test.ts

@@ -207,6 +207,30 @@ describe("CosmeticCard", () => {
     expect(info.parentElement!.contains(name)).toBe(false);
   });
 
+  it("keeps the info bubble within the card's width", async () => {
+    installTranslations();
+    await createCard();
+    card!.resolved = {
+      ...red,
+      cosmetic: { ...red.cosmetic!, artist: "A very long artist name indeed" },
+    };
+    await card!.updateComplete;
+
+    const info = card!.querySelector<HTMLElement>("[data-cosmetic-info]")!;
+    const bubble = info.querySelector<HTMLElement>("[role=tooltip]")!;
+    // Right-aligned under the "?", the bubble used to be as wide as its
+    // longest line, so on a first-column card it ran past the modal's left
+    // edge and was clipped. Its strip spans the card and caps it there.
+    expect(info.className).toContain("inset-x-2");
+    expect(bubble.className).toContain("max-w-full");
+    expect(bubble.className).not.toContain("whitespace-nowrap");
+    // The strip must not swallow clicks meant for the artwork beneath it.
+    expect(info.className).toContain("pointer-events-none");
+    expect(info.querySelector("button")?.className).toContain(
+      "pointer-events-auto",
+    );
+  });
+
   it("does not ellipsize long cosmetic names", async () => {
     installTranslations();
     await createCard();

tests/client/StoreModal.test.ts

@@ -1,3 +1,4 @@
+import type { LitElement } from "lit";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   fetchCosmetics,
@@ -671,6 +672,38 @@ describe("StoreModal cosmetic browser", () => {
     expect(purchaseCosmetic).toHaveBeenCalledWith(starterBundle, "hard");
   });
 
+  it("opens a contents dialog naming each bundle item when a bundle is activated", async () => {
+    resolvedCatalog = [starterBundle];
+    const modal = await openStoreOnTab("bundles");
+    expect(document.querySelector("[data-pack-contents]")).toBeNull();
+
+    card(modal, starterBundle.key)!.onActivate!(starterBundle);
+    await modal.updateComplete;
+    const dialogHost = modal.querySelector(
+      "pack-contents-dialog",
+    ) as LitElement;
+    await dialogHost.updateComplete;
+
+    // Portaled to the body so it sits above the store modal.
+    const dialog = document.body.querySelector<HTMLElement>(
+      "[data-pack-contents]",
+    )!;
+    expect(dialog.closest("store-modal")).toBeNull();
+    expect(dialog.getAttribute("aria-label")).toBe("Starter Pack");
+    const items = [...dialog.querySelectorAll("[data-pack-contents-item]")];
+    expect(
+      items.map((item) => item.getAttribute("data-pack-contents-item")),
+    ).toEqual(["pattern:stripes", "flag:aurora"]);
+    expect(items[1].querySelector("cosmetic-preview")).toBeTruthy();
+    expect(items[1].textContent).toContain("Aurora");
+
+    dialog.querySelector<HTMLButtonElement>("button[aria-label]")!.click();
+    await modal.updateComplete;
+    expect(document.querySelector("[data-pack-contents]")).toBeNull();
+    // The card stays inspected after closing.
+    expect(card(modal, starterBundle.key)?.state).toBe("focused");
+  });
+
   it("shows owned and partially owned bundles as a status, not a sale", async () => {
     const owned = { ...starterBundle, relationship: "owned" as const };
     const partial = {