bug: the /play seat row opens only when you click a mode or are in a lobby (#963)

Author: lukepolo

components/play/PlayMatchmaking.vue

@@ -100,9 +100,11 @@ const selectedCanQueue = computed(
     modes.value.find((mode) => mode.type === selectedType.value)?.canQueue ??
     false,
 );
-// The seat row follows the pick; before one, it shows the biggest format.
+// The seat row opens on a click on a mode, or right away in a lobby (before
+// a pick it shows the biggest format).
 const seatType = computed(
-  () => selectedType.value ?? modes.value[0]?.type ?? null,
+  () =>
+    selectedType.value ?? (lobby.value ? modes.value[0]?.type : null) ?? null,
 );
 
 // With nothing checked, Tab lands on the first mode it can pick, like a
@@ -555,7 +557,9 @@ const linkClasses =
           ></span>
         </div>
 
-        <PlaySeatRow v-if="!isGuest && seatType" :type="seatType" />
+        <Fold :open="!isGuest && !!seatType">
+          <PlaySeatRow v-if="seatType" :type="seatType" />
+        </Fold>
 
         <div
           class="mt-4 flex items-center justify-between gap-x-6 gap-y-3.5 border-t border-border/70 pt-4 max-lg:flex-col max-lg:items-stretch max-sm:contents"

tests/components/play/PlayMatchmaking.spec.ts

@@ -16,6 +16,7 @@ afterEach(() => {
   useAuthStore().me = undefined as any;
   useApplicationSettingsStore().settings = [];
   useMatchmakingStore().joinedMatchmakingQueues = {} as any;
+  useMatchmakingStore().lobbies = [] as any;
 });
 
 describe("PlayMatchmaking", () => {
@@ -68,6 +69,38 @@ describe("PlayMatchmaking", () => {
     expect(findMatch?.attributes("disabled")).toBeDefined();
   });
 
+  it("opens the seat row once a solo player picks a mode", async () => {
+    useAuthStore().me = {
+      steam_id: "76561198000000001",
+      role: "user",
+    } as any;
+
+    const wrapper = await mountSuspended(PlayMatchmaking);
+
+    expect(wrapper.text()).not.toContain("Your side");
+    await wrapper.findAll('[role="radio"]')[0].trigger("click");
+    expect(wrapper.text()).toContain("Your side");
+  });
+
+  it("shows the seats right away in a lobby, even one of just you", async () => {
+    const me = { steam_id: "76561198000000001", role: "user" };
+    useAuthStore().me = me as any;
+    useMatchmakingStore().lobbies = [
+      {
+        id: "lobby-1",
+        access: "Invite",
+        players: [{ status: "Accepted", captain: true, player: me }],
+      },
+    ] as any;
+
+    const wrapper = await mountSuspended(PlayMatchmaking);
+
+    expect(wrapper.find('[role="radio"][aria-checked="true"]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.text()).toContain("Your side");
+  });
+
   it("picks the mode when it's the only one", async () => {
     useAuthStore().me = {
       steam_id: "76561198000000001",