Adds display of Team members

src/lib/api/index.ts

@@ -1,6 +1,7 @@
 import {BASE_URL, client} from './client'
 import type {
     HunterLeaderboardResponse,
+    HunterSummaryResponse,
     HuntResponse,
     ItemResponse,
     LoginResponse,
@@ -60,6 +61,9 @@ export const apiCreateTeam = (huntId: string, name: string) =>
 export const apiGetTeam = (huntId: string, teamId: string) =>
   client.get<TeamResponse>(`/hunt/${huntId}/team/${teamId}`)
 
+export const apiGetTeamHunters = (huntId: string, teamId: string) =>
+  client.get<HunterSummaryResponse[]>(`/hunt/${huntId}/team/${teamId}/hunter`)
+
 // ── Items ─────────────────────────────────────────────────────────────────────
 
 export const apiGetItems = (huntId: string) =>

src/lib/api/types.ts

@@ -51,3 +51,8 @@ export interface HunterLeaderboardResponse {
   hunterName: string
   score: number
 }
+
+export interface HunterSummaryResponse {
+  id: string
+  name: string
+}

src/routes/hunter/HuntList.svelte

@@ -6,10 +6,11 @@
     apiGetHunterTeam,
     apiGetOngoingHunts,
     apiGetUnstartedHunts,
+    apiGetTeamHunters,
     apiJoinTeam,
     apiListTeams,
   } from '../../lib/api/index'
-  import type {HuntResponse, TeamResponse} from '../../lib/api/types'
+  import type {HuntResponse, HunterSummaryResponse, TeamResponse} from '../../lib/api/types'
   import StatusBadge from '../../lib/components/StatusBadge.svelte'
   import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'
 
@@ -53,6 +54,7 @@
 
   let sheetHunt       = $state<HuntResponse | null>(null)
   let sheetTeams      = $state<TeamResponse[]>([])
+  let sheetMembers    = $state<HunterSummaryResponse[]>([])
   let sheetLoading    = $state(false)
   let newTeamName     = $state('')
   let creatingTeam    = $state(false)
@@ -63,9 +65,20 @@
     sheetHunt    = hunt
     sheetError   = ''
     newTeamName  = ''
+    sheetMembers = []
     sheetLoading = true
     try {
+      const myTeam = upcomingTeams[hunt.id]
+      if (myTeam) {
+        const [teams, members] = await Promise.all([
+          apiListTeams(hunt.id),
+          apiGetTeamHunters(hunt.id, myTeam.id),
+        ])
+        sheetTeams   = teams
+        sheetMembers = members
+      } else {
         sheetTeams = await apiListTeams(hunt.id)
+      }
     } catch (e: unknown) {
       sheetError = e instanceof Error ? e.message : 'Failed to load teams'
     } finally {
@@ -237,10 +250,21 @@
         <LoadingSpinner />
       {:else if myTeam}
         <!-- Already on a team -->
-        <div class="rounded-xl border border-base-200 p-4">
+        <div class="rounded-xl border border-base-200 p-4 flex flex-col gap-3">
+          <div>
             <p class="text-xs font-semibold uppercase tracking-wide text-base-content/40 mb-1">Your Team</p>
             <p class="text-lg font-bold">{myTeam.name}</p>
-          <!-- Team member list will be available once the backend exposes a members endpoint -->
+          </div>
+          {#if sheetMembers.length > 0}
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-wide text-base-content/40 mb-2">Members</p>
+              <div class="flex flex-col gap-1">
+                {#each sheetMembers as member}
+                  <p class="text-sm font-medium">{member.name}</p>
+                {/each}
+              </div>
+            </div>
+          {/if}
         </div>
       {:else}
         <!-- Join or create -->

src/routes/hunter/HuntLobby.svelte

@@ -8,13 +8,14 @@
         apiGetHunterTeam,
         apiGetItemPhotos,
         apiGetItems,
+        apiGetTeamHunters,
         apiGetTeamItem,
         apiJoinTeam,
         apiListTeams,
         apiRemovePhoto,
         apiSubmitPhoto
     } from '../../lib/api/index'
-    import type {HuntResponse, ItemResponse, PhotoResponse, TeamItemResponse, TeamResponse} from '../../lib/api/types'
+    import type {HuntResponse, HunterSummaryResponse, ItemResponse, PhotoResponse, TeamItemResponse, TeamResponse} from '../../lib/api/types'
     import StatusBadge from '../../lib/components/StatusBadge.svelte'
     import AuthImage from '../../lib/components/AuthImage.svelte'
     import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'
@@ -174,6 +175,21 @@
   const submitted = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'SUBMITTED').length)
   const rejected  = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'REJECTED').length)
 
+  let teamMembers        = $state<HunterSummaryResponse[]>([])
+  let teamMembersLoading = $state(false)
+  let teamMembersOpen    = $state(false)
+
+  async function openTeamMembers() {
+    if (!myTeam) return
+    teamMembersOpen    = true
+    teamMembersLoading = true
+    try {
+      teamMembers = await apiGetTeamHunters(params.huntId, myTeam.id)
+    } finally {
+      teamMembersLoading = false
+    }
+  }
+
   let searchQuery   = $state('')
   let filterStatus  = $state<string | null>(null)
   let filterPoints  = $state<number | null>(null)
@@ -228,7 +244,9 @@
         <StatusBadge status={huntStatus(hunt)} />
       </div>
       {#if myTeam}
-        <p class="text-sm text-base-content/50 mt-0.5">Team: <span class="font-medium text-base-content/70">{myTeam.name}</span></p>
+        <button class="text-sm text-base-content/50 mt-0.5 text-left" onclick={openTeamMembers}>
+          Team: <span class="font-medium text-base-content/70 underline decoration-dotted underline-offset-2">{myTeam.name}</span>
+        </button>
         {#if items.length > 0}
           <div class="flex items-center gap-2 mt-2">
             <div class="flex-1 h-2 rounded-full overflow-hidden bg-base-300 flex">
@@ -360,6 +378,31 @@
   {/if}
 </div>
 
+<!-- Team members popup -->
+{#if teamMembersOpen && myTeam}
+  {@const team = myTeam}
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-6" role="presentation" onclick={() => teamMembersOpen = false}>
+    <div class="bg-base-100 rounded-2xl shadow-2xl w-full max-w-sm p-5" role="dialog" aria-modal="true" onclick={(e) => e.stopPropagation()}>
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-wide text-base-content/40">Team</p>
+          <h3 class="font-bold text-lg leading-tight">{team.name}</h3>
+        </div>
+        <button class="btn btn-ghost btn-sm btn-circle" onclick={() => teamMembersOpen = false}>✕</button>
+      </div>
+      {#if teamMembersLoading}
+        <LoadingSpinner />
+      {:else}
+        <div class="flex flex-col gap-2">
+          {#each teamMembers as member}
+            <p class="text-sm font-medium py-1 border-b border-base-200 last:border-0">{member.name}</p>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
 <!-- Photo lightbox -->
 {#if expandedPhoto}
   {@const photo = expandedPhoto}