Adds unreviewed notification bubble in Admin hunts list

Lists all unreviewed photos for a hunt
Updates favicon for Scrounge Quest theming
2026-05-19 10:26:49 -05:00 · 2026-05-19 10:02:04 -05:00 · 2026-05-19 00:05:17 -05:00 · 2026-05-18 23:58:37 -05:00 · 2026-05-18 23:35:12 -05:00 · 2026-05-18 22:14:24 -05:00
17 changed files with 981 additions and 199 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,8 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Scavenger Hunt</title>
+    <!-- App name is defined in src/lib/config.ts — keep in sync -->
+    <title>Scrounge Quest</title>
  </head>
  <body>
    <div id="app"></div>
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,8 +1,30 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
-  <!-- Magnifying glass circle -->
-  <circle cx="26" cy="26" r="18" stroke="#14b8a6" stroke-width="5" fill="#ffffff"/>
-  <!-- Magnifying glass handle -->
-  <line x1="39" y1="39" x2="56" y2="56" stroke="#f97316" stroke-width="6" stroke-linecap="round"/>
-  <!-- SH text inside the lens -->
-  <text x="26" y="31" text-anchor="middle" font-family="Georgia, serif" font-size="15" font-weight="700" fill="#14b8a6">SH</text>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- Shield (navy blue, gold border) -->
+  <path d="M8,5 H56 V36 Q56,57 32,63 Q8,57 8,36 Z" fill="#1e3a8a"/>
+  <path d="M8,5 H56 V36 Q56,57 32,63 Q8,57 8,36 Z" fill="none" stroke="#d4a017" stroke-width="2.5"/>
+
+  <!-- Bushy tail — drawn first so body sits on top of it -->
+  <path d="M30,44 C46,46 58,34 54,18 C50,6 36,6 32,16"
+        fill="none" stroke="#d4a017" stroke-width="11" stroke-linecap="round"/>
+
+  <!-- Body (upright) -->
+  <ellipse cx="24" cy="37" rx="7.5" ry="10.5" fill="#d4a017"/>
+
+  <!-- Head -->
+  <circle cx="24" cy="22" r="6.5" fill="#d4a017"/>
+
+  <!-- Ears -->
+  <polygon points="19,17 16,9 23,14" fill="#d4a017"/>
+  <polygon points="26,16 28,8 32,12" fill="#d4a017"/>
+
+  <!-- Eye -->
+  <circle cx="22" cy="21" r="1.5" fill="#1e3a8a"/>
+
+  <!-- Front paws raised (rearing up) -->
+  <line x1="18" y1="30" x2="12" y2="22" stroke="#d4a017" stroke-width="4.5" stroke-linecap="round"/>
+  <line x1="30" y1="28" x2="37" y2="20" stroke="#d4a017" stroke-width="4.5" stroke-linecap="round"/>
+
+  <!-- Hind legs -->
+  <line x1="18" y1="46" x2="16" y2="54" stroke="#d4a017" stroke-width="4.5" stroke-linecap="round"/>
+  <line x1="30" y1="47" x2="33" y2="54" stroke="#d4a017" stroke-width="4.5" stroke-linecap="round"/>
 </svg>
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -14,6 +14,7 @@
    import HuntCreate from './routes/admin/HuntCreate.svelte'
    import HuntManage from './routes/admin/HuntManage.svelte'
    import PhotoReview from './routes/admin/PhotoReview.svelte'
+    import Rules from './routes/Rules.svelte'

    const routes = {
    '/':                               HuntList,
@@ -26,6 +27,7 @@
    '/admin/hunt/create':              HuntCreate,
    '/admin/hunt/:huntId':             HuntManage,
    '/admin/hunt/:huntId/review':      PhotoReview,
+    '/rules':                          Rules,
  }

  const publicRoutes = ['/login', '/signup']
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -1,6 +1,7 @@
 import {BASE_URL, client} from './client'
 import type {
    HunterLeaderboardResponse,
+    HunterSummaryResponse,
    HuntResponse,
    ItemResponse,
    LoginResponse,
@@ -29,16 +30,19 @@ export const apiGetHunt = (huntId: string) =>
 export const apiGetUnstartedHunts = () =>
  client.get<HuntResponse[]>('/hunt/unstarted')

+export const apiGetOngoingHunts = () =>
+  client.get<HuntResponse[]>('/hunt/ongoing')
+
 export const apiGetAllHunts = (status?: 'UNSTARTED' | 'ONGOING' | 'CLOSED') =>
  client.get<HuntResponse[]>(`/hunt${status ? `?status=${status}` : ''}`)

 export const apiCreateHunt = (title: string, startDateTime: string, endDateTime: string) =>
  client.post<HuntResponse>('/hunt', { title, startDateTime, endDateTime })

-// ── Hunter ────────────────────────────────────────────────────────────────────
+export const apiUpdateHunt = (huntId: string, title: string, startDateTime: string, endDateTime: string, isTerminated: boolean) =>
+  client.patch<HuntResponse>(`/hunt/${huntId}`, { title, startDateTime, endDateTime, isTerminated })

-export const apiGetOngoingHunts = () =>
-  client.get<HuntResponse[]>('/hunter/hunt/ongoing')
+// ── Hunter ────────────────────────────────────────────────────────────────────

 export const apiGetHunterTeam = (huntId: string) =>
  client.get<TeamResponse>(`/hunter/hunt/${huntId}/team`)
@@ -57,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) =>
@@ -97,6 +104,9 @@ export function photoUrl(photoId: string, version: 'ORIGINAL' | 'LARGE' | 'MEDIU
 export const apiReviewPhoto = (photoId: string, status: 'SUBMITTED' | 'APPROVED' | 'REJECTED' | 'REMOVED') =>
  client.patch<void>(`/admin/photo/${photoId}`, { status })

+export const apiGetUnreviewedPhotos = (huntId: string) =>
+  client.get<PhotoResponse[]>(`/admin/hunt/${huntId}/photo/unreviewed`)
+
 // ── Stats ─────────────────────────────────────────────────────────────────────

 export const apiGetTeamLeaderboard = (huntId: string) =>
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -4,6 +4,7 @@ export interface HuntResponse {
  startDateTime: string
  endDateTime: string
  isTerminated: boolean
+  terminated?: boolean  // Spring may serialize boolean getter isTerminated() as "terminated"
 }

 export interface TeamResponse {
@@ -51,3 +52,8 @@ export interface HunterLeaderboardResponse {
  hunterName: string
  score: number
 }
+
+export interface HunterSummaryResponse {
+  id: string
+  name: string
+}
--- a/src/lib/components/BottomNav.svelte
+++ b/src/lib/components/BottomNav.svelte
@@ -10,9 +10,9 @@
  )
 </script>

-<nav class="btm-nav btm-nav-sm bg-base-100 border-t border-base-300 fixed bottom-0 left-0 right-0 z-30">
-  <button class:active={isActive('/')} onclick={() => push('/')}>
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+<nav class="btm-nav bg-base-100 border-t border-base-300 fixed bottom-0 left-0 right-0 z-30 pt-3">
+  <button class="px-8" class:active={isActive('/')} onclick={() => push('/')}>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
    </svg>
    <span class="btm-nav-label text-xs">Hunts</span>
@@ -20,13 +20,21 @@

  {#if huntId}
    <button
+      class="px-8"
      class:active={router.location.includes('/leaderboard')}
      onclick={() => push(`/hunt/${huntId}/leaderboard`)}
    >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
      </svg>
      <span class="btm-nav-label text-xs">Scores</span>
    </button>
  {/if}
+
+  <button class="px-8" class:active={isActive('/rules')} onclick={() => push('/rules')}>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+    </svg>
+    <span class="btm-nav-label text-xs">Rules</span>
+  </button>
 </nav>
--- a/src/lib/components/DateTimePicker.svelte
+++ b/src/lib/components/DateTimePicker.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
+
  let {
    value = $bindable(''),
    defaultTimeIndex = 36,
+    initialValue = '',
  }: {
    value?: string
    defaultTimeIndex?: number
+    initialValue?: string
  } = $props()

  const months = [
@@ -23,11 +27,21 @@
    return { value: i, label: `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}` }
  })

-  const today = new Date()
-  let month = $state(today.getMonth())
-  let day = $state(today.getDate())
-  let year = $state(today.getFullYear())
-  let timeIndex = $state(defaultTimeIndex)
+  const seed = untrack(() => {
+    if (initialValue) {
+      // Append Z if no timezone indicator is present so it's always parsed as UTC
+      const normalized = /Z$|[+-]\d{2}:?\d{2}$/.test(initialValue) ? initialValue : initialValue + 'Z'
+      const d = new Date(normalized)
+      return { month: d.getMonth(), day: d.getDate(), year: d.getFullYear(), timeIndex: d.getHours() * 4 + Math.round(d.getMinutes() / 15) }
+    }
+    const today = new Date()
+    return { month: today.getMonth(), day: today.getDate(), year: today.getFullYear(), timeIndex: defaultTimeIndex }
+  })
+
+  let month = $state(seed.month)
+  let day = $state(seed.day)
+  let year = $state(seed.year)
+  let timeIndex = $state(seed.timeIndex)

  const daysInMonth = $derived(new Date(year, month + 1, 0).getDate())

@@ -36,10 +50,9 @@
  })

  $effect(() => {
-    const pad = (n: number) => n.toString().padStart(2, '0')
    const hour = Math.floor(timeIndex / 4)
    const minute = (timeIndex % 4) * 15
-    value = new Date(`${year}-${pad(month + 1)}-${pad(day)}T${pad(hour)}:${pad(minute)}`).toISOString()
+    value = new Date(year, month, day, hour, minute).toISOString()
  })
 </script>

--- a/src/lib/components/TopBar.svelte
+++ b/src/lib/components/TopBar.svelte
@@ -2,8 +2,9 @@
    import {push} from 'svelte-spa-router'
    import {auth, clearTokens} from '../stores/auth.svelte'
    import {apiLogout} from '../api/index'
+    import {APP_NAME} from '../config'

-    let { title = 'Scavenger Hunt' }: { title?: string } = $props()
+    let { title = APP_NAME }: { title?: string } = $props()

  async function handleLogout() {
    try {
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -0,0 +1,2 @@
+// If you change this, also change it in `index.html`
+export const APP_NAME = 'Scrounge Quest'
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,23 @@
+import type { HuntResponse } from './api/types'
+
+// Ensures API datetime strings are always parsed as UTC, even if the Z suffix is missing.
+export function parseUTC(iso: string): Date {
+  const normalized = /Z$|[+-]\d{2}:?\d{2}$/.test(iso) ? iso : iso + 'Z'
+  return new Date(normalized)
+}
+
+export function huntStatus(hunt: HuntResponse): 'ONGOING' | 'UNSTARTED' | 'CLOSED' {
+  if (hunt.isTerminated || hunt.terminated) return 'CLOSED'
+  const now = Date.now()
+  if (now < parseUTC(hunt.startDateTime).getTime()) return 'UNSTARTED'
+  if (now > parseUTC(hunt.endDateTime).getTime()) return 'CLOSED'
+  return 'ONGOING'
+}
+
+export function formatDateTime(iso: string): string {
+  return parseUTC(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+export function formatDate(iso: string): string {
+  return parseUTC(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+}
--- a/src/routes/Login.svelte
+++ b/src/routes/Login.svelte
@@ -2,6 +2,7 @@
    import {push} from 'svelte-spa-router'
    import {apiLogin} from '../lib/api/index'
    import {auth, setTokens} from '../lib/stores/auth.svelte'
+    import {APP_NAME} from '../lib/config'

    let email = $state('')
  let password = $state('')
@@ -32,7 +33,7 @@
  <div class="card bg-base-100 shadow-xl w-full max-w-sm">
    <div class="card-body gap-4">
      <div class="text-center mb-2">
-        <h1 class="text-3xl font-extrabold text-primary">Scavenger Hunt</h1>
+        <h1 class="text-3xl font-extrabold text-primary">{APP_NAME}</h1>
        <p class="text-base-content/60 mt-1">Sign in to play</p>
      </div>

--- a/src/routes/Rules.svelte
+++ b/src/routes/Rules.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+</script>
+
+<div class="max-w-lg mx-auto px-4 py-6">
+  <h1 class="text-2xl font-bold mb-1">Rules</h1>
+  <p class="text-base-content/60 text-sm mb-6">How to play fairly and have a great time.</p>
+
+  <div class="space-y-3">
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body py-4 px-5">
+        <h2 class="card-title text-base">1. Photos Must Be Taken Live</h2>
+        <p class="text-sm text-base-content/70">All photos must be taken during the hunt. No screenshots, stock images, or photos taken before the hunt started.</p>
+      </div>
+    </div>
+
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body py-4 px-5">
+        <h2 class="card-title text-base">2. Stay Safe and Legal</h2>
+        <p class="text-sm text-base-content/70">Never trespass on private property or put yourself in danger to get a shot. No clue is worth it.</p>
+      </div>
+    </div>
+
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body py-4 px-5">
+        <h2 class="card-title text-base">3. Leave No Trace</h2>
+        <p class="text-sm text-base-content/70">Leave every location exactly as you found it. Be respectful of spaces and the people in them.</p>
+      </div>
+    </div>
+
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body py-4 px-5">
+        <h2 class="card-title text-base">4. No Sharing Answers</h2>
+        <p class="text-sm text-base-content/70">Keep your finds to yourself until the hunt is over. Sharing clue answers or locations with other teams is not allowed.</p>
+      </div>
+    </div>
+
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body py-4 px-5">
+        <h2 class="card-title text-base">5. Photos Must Be Clear</h2>
+        <p class="text-sm text-base-content/70">Submitted photos must clearly show the required subject. Blurry, cropped, or ambiguous photos may be rejected by the organizer.</p>
+      </div>
+    </div>
+
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body py-4 px-5">
+        <h2 class="card-title text-base">6. Finish Before Time's Up</h2>
+        <p class="text-sm text-base-content/70">All submissions must be made before the hunt ends. Late entries will not count toward your score.</p>
+      </div>
+    </div>
+
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body py-4 px-5">
+        <h2 class="card-title text-base">7. Organizer Decisions Are Final</h2>
+        <p class="text-sm text-base-content/70">The hunt organizer has final say on whether a photo meets the requirements. Disputes should be raised politely and promptly.</p>
+      </div>
+    </div>
+
+    <div class="card bg-base-100 shadow-sm">
+      <div class="card-body py-4 px-5">
+        <h2 class="card-title text-base">8. Have Fun</h2>
+        <p class="text-sm text-base-content/70">Good sportsmanship is expected from everyone. Celebrate the wins, shake off the misses, and enjoy the adventure.</p>
+      </div>
+    </div>
+  </div>
+</div>
--- a/src/routes/admin/AdminHome.svelte
+++ b/src/routes/admin/AdminHome.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
    import {push} from 'svelte-spa-router'
    import {auth} from '../../lib/stores/auth.svelte'
-    import {apiGetAllHunts} from '../../lib/api/index'
+    import {huntStatus, formatDate} from '../../lib/utils'
+    import {apiGetAllHunts, apiGetUnreviewedPhotos} from '../../lib/api/index'
    import type {HuntResponse} from '../../lib/api/types'
    import StatusBadge from '../../lib/components/StatusBadge.svelte'
    import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'
@@ -14,25 +15,25 @@
  let hunts = $state<HuntResponse[]>([])
  let loading = $state(true)
  let error = $state('')
+  let unreviewedCounts = $state<Record<string, number>>({})

  $effect(() => {
    apiGetAllHunts()
-      .then(h => { hunts = h })
+      .then(async h => {
+        hunts = h
+        const counts = await Promise.all(
+          h.map(hunt =>
+            apiGetUnreviewedPhotos(hunt.id)
+              .then(photos => [hunt.id, photos.length] as const)
+              .catch(() => [hunt.id, 0] as const)
+          )
+        )
+        unreviewedCounts = Object.fromEntries(counts)
+      })
      .catch(e => { error = e instanceof Error ? e.message : 'Failed to load' })
      .finally(() => { loading = false })
  })

-  function huntStatus(h: HuntResponse): 'ONGOING' | 'UNSTARTED' | 'CLOSED' {
-    if (h.isTerminated) return 'CLOSED'
-    const now = Date.now()
-    if (now < new Date(h.startDateTime).getTime()) return 'UNSTARTED'
-    if (now > new Date(h.endDateTime).getTime()) return 'CLOSED'
-    return 'ONGOING'
-  }
-
-  function formatDate(dt: string) {
-    return new Date(dt).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
-  }
 </script>

 <div class="p-4 pb-6">
@@ -68,6 +69,9 @@
            <div class="card-actions justify-end gap-2 mt-1">
              <button class="btn btn-outline btn-xs" onclick={() => push(`/admin/hunt/${hunt.id}/review`)}>
                Review Photos
+                {#if (unreviewedCounts[hunt.id] ?? 0) > 0}
+                  <span class="badge badge-error badge-sm">{unreviewedCounts[hunt.id]}</span>
+                {/if}
              </button>
              <button class="btn btn-primary btn-xs" onclick={() => push(`/admin/hunt/${hunt.id}`)}>
                Manage
--- a/src/routes/admin/HuntManage.svelte
+++ b/src/routes/admin/HuntManage.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
    import {push} from 'svelte-spa-router'
    import {auth} from '../../lib/stores/auth.svelte'
+    import {huntStatus} from '../../lib/utils'
    import {
        apiAddItem,
        apiCreateTeam,
@@ -8,11 +9,13 @@
        apiGetHunt,
        apiGetItems,
        apiListTeams,
+        apiUpdateHunt,
        apiUpdateItem
    } from '../../lib/api/index'
    import type {HuntResponse, ItemResponse, TeamResponse} from '../../lib/api/types'
    import StatusBadge from '../../lib/components/StatusBadge.svelte'
    import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'
+    import DateTimePicker from '../../lib/components/DateTimePicker.svelte'

    let { params }: { params: { huntId: string } } = $props()

@@ -34,6 +37,40 @@
  let newTeamName = $state('')
  let addingTeam = $state(false)

+  let editingHunt    = $state(false)
+  let editTitle      = $state('')
+  let editStart      = $state('')
+  let editEnd        = $state('')
+  let editTerminated = $state(false)
+  let savingHunt     = $state(false)
+
+  function startEditHunt() {
+    if (!hunt) return
+    editTitle      = hunt.title
+    editStart      = hunt.startDateTime
+    editEnd        = hunt.endDateTime
+    editTerminated = hunt.isTerminated || hunt.terminated || false
+    editingHunt    = true
+  }
+
+  function cancelEditHunt() {
+    editingHunt = false
+  }
+
+  async function saveHunt() {
+    if (!hunt || !editTitle.trim() || !editStart || !editEnd) return
+    savingHunt = true
+    error = ''
+    try {
+      hunt = await apiUpdateHunt(params.huntId, editTitle.trim(), editStart, editEnd, editTerminated)
+      editingHunt = false
+    } catch (e: unknown) {
+      error = e instanceof Error ? e.message : 'Failed to update hunt'
+    } finally {
+      savingHunt = false
+    }
+  }
+
  let editingItemId = $state<string | null>(null)
  let editName = $state('')
  let editPoints = $state(0)
@@ -115,30 +152,72 @@
    }
  }

-  function huntStatus(h: HuntResponse): 'ONGOING' | 'UNSTARTED' | 'CLOSED' {
-    if (h.isTerminated) return 'CLOSED'
-    const now = Date.now()
-    if (now < new Date(h.startDateTime).getTime()) return 'UNSTARTED'
-    if (now > new Date(h.endDateTime).getTime()) return 'CLOSED'
-    return 'ONGOING'
-  }
 </script>

 <div class="p-4 pb-6">
  <div class="flex items-center gap-3 mb-4">
    <button class="btn btn-ghost btn-sm btn-circle" onclick={() => push('/admin')}>←</button>
-    <div>
+    <div class="flex-1 min-w-0">
      {#if hunt}
-        <h1 class="text-lg font-bold leading-tight">{hunt.title}</h1>
+        <h1 class="text-lg font-bold leading-tight truncate">{hunt.title}</h1>
        <StatusBadge status={huntStatus(hunt)} />
      {/if}
    </div>
+    {#if hunt && !editingHunt}
+      <button class="btn btn-outline btn-sm shrink-0" onclick={startEditHunt}>Edit Hunt</button>
+    {/if}
  </div>

+  {#if editingHunt && hunt}
+    <div class="bg-base-200 rounded-2xl p-4 mb-4 flex flex-col gap-4">
+      <h2 class="font-bold text-sm uppercase tracking-wide text-base-content/50">Edit Hunt</h2>
+      {#if error}
+        <div class="alert alert-error text-sm">{error}</div>
+      {/if}
+      <label class="form-control">
+        <span class="label-text text-xs font-medium mb-1">Title</span>
+        <input type="text" class="input input-bordered input-sm" bind:value={editTitle} disabled={savingHunt} required />
+      </label>
+      <fieldset class="form-control">
+        <legend class="label-text text-xs font-medium mb-1">Start</legend>
+        <DateTimePicker bind:value={editStart} initialValue={editStart} />
+      </fieldset>
+      <fieldset class="form-control">
+        <legend class="label-text text-xs font-medium mb-1">End</legend>
+        <DateTimePicker bind:value={editEnd} initialValue={editEnd} />
+      </fieldset>
+      <button
+        type="button"
+        class="flex items-center justify-between p-4 rounded-xl border-2 transition-all {editTerminated ? 'border-error bg-error/10' : 'border-base-300 bg-base-100'}"
+        onclick={() => editTerminated = !editTerminated}
+        disabled={savingHunt}
+      >
+        <div class="text-left">
+          <p class="font-semibold {editTerminated ? 'text-error' : 'text-base-content'}">Terminated</p>
+          <p class="text-xs text-base-content/50">Permanently closes the hunt for all hunters</p>
+        </div>
+        <div class="w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 {editTerminated ? 'border-error bg-error' : 'border-base-300'}">
+          {#if editTerminated}
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-error-content" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" clip-rule="evenodd" />
+            </svg>
+          {/if}
+        </div>
+      </button>
+      <div class="flex gap-2">
+        <button class="btn btn-primary btn-sm flex-1" onclick={saveHunt} disabled={savingHunt}>
+          {#if savingHunt}<span class="loading loading-spinner loading-xs"></span>{/if}
+          Save
+        </button>
+        <button class="btn btn-ghost btn-sm" onclick={cancelEditHunt} disabled={savingHunt}>Cancel</button>
+      </div>
+    </div>
+  {/if}
+
  {#if loading}
    <LoadingSpinner />
  {:else}
-    {#if error}
+    {#if error && !editingHunt}
      <div class="alert alert-error mb-4 text-sm">{error}</div>
    {/if}

--- a/src/routes/admin/PhotoReview.svelte
+++ b/src/routes/admin/PhotoReview.svelte
@@ -1,64 +1,85 @@
 <script lang="ts">
-    import {push, router} from 'svelte-spa-router'
+    import {push} from 'svelte-spa-router'
    import {auth} from '../../lib/stores/auth.svelte'
-    import {apiGetHunt, apiGetItemPhotos, apiGetItems, apiListTeams, apiReviewPhoto} from '../../lib/api/index'
+    import {apiGetHunt, apiGetItemPhotos, apiGetItems, apiGetUnreviewedPhotos, apiListTeams, apiReviewPhoto} from '../../lib/api/index'
+    import {parseUTC} from '../../lib/utils'
    import type {HuntResponse, ItemResponse, PhotoResponse, 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'

-    let { params }: { params: { huntId: string } } = $props()
+  let { params }: { params: { huntId: string } } = $props()

  $effect(() => {
    if (!auth.isLoggedIn) push('/login')
    if (!auth.isAdmin) push('/')
  })

+  type PhotoWithContext = PhotoResponse & { teamName: string; itemName: string }
+
  let hunt = $state<HuntResponse | null>(null)
  let teams = $state<TeamResponse[]>([])
  let items = $state<ItemResponse[]>([])
-  let selectedTeam = $state<TeamResponse | null>(null)
  let selectedItem = $state<ItemResponse | null>(null)
-  let photos = $state<PhotoResponse[]>([])
+  let photos = $state<PhotoWithContext[]>([])
+  let unreviewedPhotos = $state<PhotoWithContext[]>([])
  let loading = $state(true)
  let photosLoading = $state(false)
  let error = $state('')
  let reviewing = $state<string | null>(null)
+  let expandedPhoto = $state<PhotoWithContext | null>(null)

  $effect(() => {
    const { huntId } = params
-    Promise.all([apiGetHunt(huntId), apiListTeams(huntId), apiGetItems(huntId)])
-      .then(([h, t, i]) => {
+    Promise.all([apiGetHunt(huntId), apiListTeams(huntId), apiGetItems(huntId), apiGetUnreviewedPhotos(huntId)])
+      .then(async ([h, t, i, unreviewed]) => {
        hunt = h
        teams = t
        items = i
-        // Pre-select team from query string if provided
-        const qs = new URLSearchParams(router.querystring ?? '')
-        const preTeam = qs.get('teamId')
-        if (preTeam) {
-          selectedTeam = t.find(x => x.id === preTeam) ?? null
-        }
+        // Build photoId → context map from all item+team combos in parallel
+        const rows = await Promise.all(
+          i.flatMap(item =>
+            t.map(team =>
+              apiGetItemPhotos(huntId, team.id, item.id)
+                .then(ps => ps.map(p => [p.id, { itemName: item.name, teamName: team.name }] as [string, { itemName: string; teamName: string }]))
+                .catch(() => [] as [string, { itemName: string; teamName: string }][])
+            )
+          )
+        )
+        const contextMap = new Map(rows.flat())
+        unreviewedPhotos = unreviewed.map(p => {
+          const ctx = contextMap.get(p.id) ?? { itemName: 'Unknown', teamName: 'Unknown' }
+          return { ...p, ...ctx }
+        })
      })
      .catch(e => { error = e instanceof Error ? e.message : 'Failed to load' })
      .finally(() => { loading = false })
  })

  $effect(() => {
-    if (selectedTeam && selectedItem) {
+    if (selectedItem) {
      photosLoading = true
      photos = []
-      apiGetItemPhotos(params.huntId, selectedTeam.id, selectedItem.id)
-        .then(p => { photos = p })
+      Promise.all(
+        teams.map(team =>
+          apiGetItemPhotos(params.huntId, team.id, selectedItem!.id)
+            .then(ps => ps.map(p => ({ ...p, teamName: team.name, itemName: selectedItem!.name })))
+        )
+      )
+        .then(results => { photos = results.flat() })
        .catch(e => { error = e instanceof Error ? e.message : 'Failed to load photos' })
        .finally(() => { photosLoading = false })
    }
  })

-  async function review(photo: PhotoResponse, status: 'APPROVED' | 'REJECTED') {
+  async function review(photo: PhotoWithContext, status: 'APPROVED' | 'REJECTED' | 'REMOVED') {
    reviewing = photo.id
    try {
      await apiReviewPhoto(photo.id, status)
-      photos = photos.map(p => p.id === photo.id ? { ...p, photoStatus: status } : p)
+      const updated = { ...photo, photoStatus: status } as PhotoWithContext
+      photos = photos.map(p => p.id === photo.id ? updated : p)
+      unreviewedPhotos = unreviewedPhotos.map(p => p.id === photo.id ? updated : p)
+      if (expandedPhoto?.id === photo.id) expandedPhoto = updated
    } catch (e: unknown) {
      error = e instanceof Error ? e.message : 'Failed to review photo'
    } finally {
@@ -66,9 +87,71 @@
    }
  }

-  const activePhotos = $derived(photos.filter(p => p.photoStatus !== 'REMOVED'))
+  const activePhotos    = $derived(photos.filter(p => p.photoStatus !== 'REMOVED'))
+  const activeUnreviewed = $derived(unreviewedPhotos.filter(p => p.photoStatus === 'SUBMITTED'))
 </script>

+<!-- Lightbox -->
+{#if expandedPhoto}
+  {@const photo = expandedPhoto}
+  <div
+    class="fixed inset-0 z-50 bg-black/90 flex flex-col"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="flex items-center justify-between px-4 py-3 shrink-0">
+      <div>
+        <p class="text-xs font-semibold uppercase tracking-wide text-white/40">{photo.itemName}</p>
+        <p class="font-semibold text-white">{photo.hunterName} <span class="text-white/50 font-normal">· {photo.teamName}</span></p>
+        <p class="text-xs text-white/40">{parseUTC(photo.photoUploadDateTime).toLocaleString()}</p>
+      </div>
+      <div class="flex items-center gap-3">
+        <StatusBadge status={photo.photoStatus} />
+        <button class="btn btn-ghost btn-sm btn-circle text-white" onclick={() => expandedPhoto = null}>✕</button>
+      </div>
+    </div>
+
+    <div class="flex-1 min-h-0 flex items-center justify-center px-4">
+      <AuthImage photoId={photo.id} version="LARGE" alt={photo.hunterName} class="max-h-full max-w-full object-contain rounded-lg" />
+    </div>
+
+    <div class="px-4 py-4 shrink-0">
+      {#if photo.photoStatus === 'SUBMITTED'}
+        <div class="flex gap-2 mb-2">
+          <button class="btn btn-success btn-sm flex-1" onclick={() => review(photo, 'APPROVED')} disabled={reviewing === photo.id}>
+            {#if reviewing === photo.id}<span class="loading loading-spinner loading-xs"></span>{/if}
+            Approve
+          </button>
+          <button class="btn btn-error btn-sm flex-1" onclick={() => review(photo, 'REJECTED')} disabled={reviewing === photo.id}>
+            Reject
+          </button>
+        </div>
+        <button class="btn btn-ghost btn-sm w-full text-white/40" onclick={() => review(photo, 'REMOVED')} disabled={reviewing === photo.id}>
+          Remove
+        </button>
+      {:else if photo.photoStatus === 'APPROVED'}
+        <div class="flex gap-2">
+          <button class="btn btn-outline btn-error btn-sm flex-1" onclick={() => review(photo, 'REJECTED')} disabled={reviewing === photo.id}>
+            Revoke Approval
+          </button>
+          <button class="btn btn-ghost btn-sm text-white/40" onclick={() => review(photo, 'REMOVED')} disabled={reviewing === photo.id}>
+            Remove
+          </button>
+        </div>
+      {:else if photo.photoStatus === 'REJECTED'}
+        <div class="flex gap-2">
+          <button class="btn btn-outline btn-success btn-sm flex-1" onclick={() => review(photo, 'APPROVED')} disabled={reviewing === photo.id}>
+            Approve Instead
+          </button>
+          <button class="btn btn-ghost btn-sm text-white/40" onclick={() => review(photo, 'REMOVED')} disabled={reviewing === photo.id}>
+            Remove
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
 <div class="p-4 pb-6">
  <div class="flex items-center gap-3 mb-4">
    <button class="btn btn-ghost btn-sm btn-circle" onclick={() => push(`/admin/hunt/${params.huntId}`)}>←</button>
@@ -82,43 +165,31 @@
  {#if loading}
    <LoadingSpinner />
  {:else}
-    <!-- Team selector -->
+    <!-- Item selector -->
    <div class="mb-4">
-      <p class="text-sm font-medium text-base-content/60 mb-2">Select Team</p>
+      <p class="text-sm font-medium text-base-content/60 mb-2">
+        {#if selectedItem}
+          Filtering by item — tap again to see all unreviewed
+        {:else}
+          Unreviewed ({activeUnreviewed.length})
+        {/if}
+      </p>
      <div class="flex flex-wrap gap-2">
-        {#each teams as team}
+        {#each items as item}
          <button
            class="btn btn-sm"
-            class:btn-primary={selectedTeam?.id === team.id}
-            class:btn-outline={selectedTeam?.id !== team.id}
-            onclick={() => { selectedTeam = team; selectedItem = null; photos = [] }}
+            class:btn-secondary={selectedItem?.id === item.id}
+            class:btn-outline={selectedItem?.id !== item.id}
+            onclick={() => { selectedItem = selectedItem?.id === item.id ? null : item }}
          >
-            {team.name}
+            {item.name}
          </button>
        {/each}
      </div>
    </div>

-    {#if selectedTeam}
-      <!-- Item selector -->
-      <div class="mb-4">
-        <p class="text-sm font-medium text-base-content/60 mb-2">Select Item</p>
-        <div class="flex flex-wrap gap-2">
-          {#each items as item}
-            <button
-              class="btn btn-sm"
-              class:btn-secondary={selectedItem?.id === item.id}
-              class:btn-outline={selectedItem?.id !== item.id}
-              onclick={() => { selectedItem = item }}
-            >
-              {item.name}
-            </button>
-          {/each}
-        </div>
-      </div>
-    {/if}
-
-    {#if selectedTeam && selectedItem}
+    {#if selectedItem}
+      <!-- Per-item photo view -->
      {#if photosLoading}
        <LoadingSpinner />
      {:else if activePhotos.length === 0}
@@ -127,51 +198,100 @@
        </div>
      {:else}
        <div class="flex flex-col gap-4">
-          {#each activePhotos as photo}
+          {#each activePhotos as photo (photo.id)}
            <div class="card bg-base-100 shadow-sm border border-base-200 overflow-hidden">
-              <AuthImage photoId={photo.id} version="LARGE" alt={photo.hunterName} class="w-full h-56 object-cover" />
+              <button class="w-full cursor-zoom-in" onclick={() => expandedPhoto = photo}>
+                <AuthImage photoId={photo.id} version="SMALL" alt={photo.hunterName} class="w-full h-56 object-cover" />
+              </button>
              <div class="p-3">
                <div class="flex items-center justify-between mb-3">
                  <div>
-                    <p class="font-semibold">{photo.hunterName}</p>
+                    <p class="font-semibold">{photo.hunterName} <span class="text-base-content/50 font-normal">· {photo.teamName}</span></p>
                    <p class="text-xs text-base-content/50">
-                      {new Date(photo.photoUploadDateTime).toLocaleString()}
+                      {parseUTC(photo.photoUploadDateTime).toLocaleString()}
                    </p>
                  </div>
                  <StatusBadge status={photo.photoStatus} />
                </div>
                {#if photo.photoStatus === 'SUBMITTED'}
-                  <div class="flex gap-2">
-                    <button
-                      class="btn btn-success btn-sm flex-1"
-                      onclick={() => review(photo, 'APPROVED')}
-                      disabled={reviewing === photo.id}
-                    >
+                  <div class="flex gap-2 mb-2">
+                    <button class="btn btn-success btn-sm flex-1" onclick={() => review(photo, 'APPROVED')} disabled={reviewing === photo.id}>
                      {#if reviewing === photo.id}<span class="loading loading-spinner loading-xs"></span>{/if}
                      Approve
                    </button>
-                    <button
-                      class="btn btn-error btn-sm flex-1"
-                      onclick={() => review(photo, 'REJECTED')}
-                      disabled={reviewing === photo.id}
-                    >
+                    <button class="btn btn-error btn-sm flex-1" onclick={() => review(photo, 'REJECTED')} disabled={reviewing === photo.id}>
                      Reject
                    </button>
                  </div>
+                  <button class="btn btn-ghost btn-sm w-full text-base-content/50" onclick={() => review(photo, 'REMOVED')} disabled={reviewing === photo.id}>
+                    Remove
+                  </button>
                {:else if photo.photoStatus === 'APPROVED'}
-                  <button class="btn btn-outline btn-error btn-sm w-full" onclick={() => review(photo, 'REJECTED')} disabled={reviewing === photo.id}>
-                    Revoke Approval
-                  </button>
+                  <div class="flex gap-2">
+                    <button class="btn btn-outline btn-error btn-sm flex-1" onclick={() => review(photo, 'REJECTED')} disabled={reviewing === photo.id}>
+                      Revoke Approval
+                    </button>
+                    <button class="btn btn-ghost btn-sm text-base-content/50" onclick={() => review(photo, 'REMOVED')} disabled={reviewing === photo.id}>
+                      Remove
+                    </button>
+                  </div>
                {:else if photo.photoStatus === 'REJECTED'}
-                  <button class="btn btn-outline btn-success btn-sm w-full" onclick={() => review(photo, 'APPROVED')} disabled={reviewing === photo.id}>
-                    Approve Instead
-                  </button>
+                  <div class="flex gap-2">
+                    <button class="btn btn-outline btn-success btn-sm flex-1" onclick={() => review(photo, 'APPROVED')} disabled={reviewing === photo.id}>
+                      Approve Instead
+                    </button>
+                    <button class="btn btn-ghost btn-sm text-base-content/50" onclick={() => review(photo, 'REMOVED')} disabled={reviewing === photo.id}>
+                      Remove
+                    </button>
+                  </div>
                {/if}
              </div>
            </div>
          {/each}
        </div>
      {/if}
+
+    {:else}
+      <!-- All-unreviewed view -->
+      {#if activeUnreviewed.length === 0}
+        <div class="text-center py-10 text-base-content/50">
+          <p>All caught up — no unreviewed photos!</p>
+        </div>
+      {:else}
+        <div class="flex flex-col gap-4">
+          {#each activeUnreviewed as photo (photo.id)}
+            <div class="card bg-base-100 shadow-sm border border-base-200 overflow-hidden">
+              <button class="w-full cursor-zoom-in" onclick={() => expandedPhoto = photo}>
+                <AuthImage photoId={photo.id} version="SMALL" alt={photo.hunterName} class="w-full h-56 object-cover" />
+              </button>
+              <div class="p-3">
+                <p class="text-xs font-semibold uppercase tracking-wide text-primary mb-1">{photo.itemName}</p>
+                <div class="flex items-center justify-between mb-3">
+                  <div>
+                    <p class="font-semibold">{photo.hunterName} <span class="text-base-content/50 font-normal">· {photo.teamName}</span></p>
+                    <p class="text-xs text-base-content/50">
+                      {parseUTC(photo.photoUploadDateTime).toLocaleString()}
+                    </p>
+                  </div>
+                  <StatusBadge status={photo.photoStatus} />
+                </div>
+                <div class="flex gap-2 mb-2">
+                  <button class="btn btn-success btn-sm flex-1" onclick={() => review(photo, 'APPROVED')} disabled={reviewing === photo.id}>
+                    {#if reviewing === photo.id}<span class="loading loading-spinner loading-xs"></span>{/if}
+                    Approve
+                  </button>
+                  <button class="btn btn-error btn-sm flex-1" onclick={() => review(photo, 'REJECTED')} disabled={reviewing === photo.id}>
+                    Reject
+                  </button>
+                </div>
+                <button class="btn btn-ghost btn-sm w-full text-base-content/50" onclick={() => review(photo, 'REMOVED')} disabled={reviewing === photo.id}>
+                  Remove
+                </button>
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
    {/if}
  {/if}
 </div>
--- a/src/routes/hunter/HuntList.svelte
+++ b/src/routes/hunter/HuntList.svelte
@@ -1,29 +1,56 @@
 <script lang="ts">
-    import {push} from 'svelte-spa-router'
-    import {auth} from '../../lib/stores/auth.svelte'
-    import {apiGetOngoingHunts, apiGetUnstartedHunts} from '../../lib/api/index'
-    import type {HuntResponse} from '../../lib/api/types'
-    import StatusBadge from '../../lib/components/StatusBadge.svelte'
-    import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'
+  import {push} from 'svelte-spa-router'
+  import {auth} from '../../lib/stores/auth.svelte'
+  import {huntStatus, formatDateTime} from '../../lib/utils'
+  import {
+    apiCreateTeam,
+    apiGetOngoingHunts,
+    apiGetHunterTeam,
+    apiGetUnstartedHunts,
+    apiGetTeamHunters,
+    apiJoinTeam,
+    apiListTeams,
+  } from '../../lib/api/index'
+  import type {HuntResponse, HunterSummaryResponse, TeamResponse} from '../../lib/api/types'
+  import StatusBadge from '../../lib/components/StatusBadge.svelte'
+  import LoadingSpinner from '../../lib/components/LoadingSpinner.svelte'

-    $effect(() => {
+  $effect(() => {
    if (!auth.isLoggedIn) push('/login')
    else if (auth.isAdmin) push('/admin')
  })

-  let ongoing = $state<HuntResponse[]>([])
+  let ongoing  = $state<HuntResponse[]>([])
  let upcoming = $state<HuntResponse[]>([])
-  let loading = $state(true)
-  let error = $state('')
-  let tab = $state<'active' | 'upcoming'>('active')
+  let loading  = $state(true)
+  let error    = $state('')
+  let tab      = $state<'active' | 'upcoming'>('active')
+
+  // huntId → team the hunter has joined (null = not joined)
+  let ongoingTeams  = $state<Record<string, TeamResponse | null>>({})
+  let upcomingTeams = $state<Record<string, TeamResponse | null>>({})

  $effect(() => {
    Promise.all([
      apiGetOngoingHunts(),
      apiGetUnstartedHunts(),
-    ]).then(([o, u]) => {
-      ongoing = o
+    ]).then(async ([o, u]) => {
+      ongoing  = o
      upcoming = u
+      const [ongoingEntries, upcomingEntries] = await Promise.all([
+        Promise.all(o.map(hunt =>
+          apiGetHunterTeam(hunt.id)
+            .then(t  => [hunt.id, t] as const)
+            .catch(() => [hunt.id, null] as const)
+        )),
+        Promise.all(u.map(hunt =>
+          apiGetHunterTeam(hunt.id)
+            .then(t  => [hunt.id, t] as const)
+            .catch(() => [hunt.id, null] as const)
+        )),
+      ])
+      ongoingTeams  = Object.fromEntries(ongoingEntries)
+      upcomingTeams = Object.fromEntries(upcomingEntries)
    }).catch(e => {
      error = e instanceof Error ? e.message : 'Failed to load hunts'
    }).finally(() => {
@@ -31,30 +58,108 @@
    })
  })

-  function huntStatus(hunt: HuntResponse): 'ONGOING' | 'UNSTARTED' | 'CLOSED' {
-    if (hunt.isTerminated) return 'CLOSED'
-    const now = Date.now()
-    const start = new Date(hunt.startDateTime).getTime()
-    const end = new Date(hunt.endDateTime).getTime()
-    if (now < start) return 'UNSTARTED'
-    if (now > end) return 'CLOSED'
-    return 'ONGOING'
+  // ── Hunt sheet (shared for active + upcoming) ─────────────────────────────────
+
+  let sheetHunt     = $state<HuntResponse | null>(null)
+  let sheetIsActive = $state(false)
+  let sheetTeams    = $state<TeamResponse[]>([])
+  let sheetMembers  = $state<HunterSummaryResponse[]>([])
+  let sheetLoading  = $state(false)
+  let newTeamName   = $state('')
+  let creatingTeam  = $state(false)
+  let joiningTeamId = $state<string | null>(null)
+  let sheetError    = $state('')
+
+  function currentTeam(hunt: HuntResponse) {
+    return sheetIsActive ? ongoingTeams[hunt.id] : upcomingTeams[hunt.id]
  }

-  function formatDate(dt: string) {
-    return new Date(dt).toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+  async function openSheet(hunt: HuntResponse, isActive: boolean) {
+    sheetHunt     = hunt
+    sheetIsActive = isActive
+    sheetError    = ''
+    newTeamName   = ''
+    sheetMembers  = []
+    sheetLoading  = true
+    try {
+      const myTeam = currentTeam(hunt)
+      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 {
+      sheetLoading = false
+    }
+  }
+
+  function closeSheet() {
+    sheetHunt  = null
+    sheetTeams = []
+  }
+
+  async function createTeam() {
+    if (!sheetHunt || !newTeamName.trim()) return
+    creatingTeam = true
+    sheetError   = ''
+    try {
+      await apiCreateTeam(sheetHunt.id, newTeamName.trim())
+      sheetTeams = await apiListTeams(sheetHunt.id)
+      const created = sheetTeams.find(t => t.name === newTeamName.trim())
+      if (created) await joinTeam(created.id)
+      else newTeamName = ''
+    } catch (e: unknown) {
+      sheetError = e instanceof Error ? e.message : 'Failed to create team'
+    } finally {
+      creatingTeam = false
+    }
+  }
+
+  async function joinTeam(teamId: string) {
+    if (!sheetHunt) return
+    joiningTeamId = teamId
+    sheetError    = ''
+    try {
+      await apiJoinTeam(sheetHunt.id, teamId)
+      const team = sheetTeams.find(t => t.id === teamId) ?? null
+      if (sheetIsActive) {
+        ongoingTeams = { ...ongoingTeams, [sheetHunt.id]: team }
+        push(`/hunt/${sheetHunt.id}`)
+      } else {
+        upcomingTeams = { ...upcomingTeams, [sheetHunt.id]: team }
+        newTeamName   = ''
+        closeSheet()
+      }
+    } catch (e: unknown) {
+      sheetError = e instanceof Error ? e.message : 'Failed to join team'
+    } finally {
+      joiningTeamId = null
+    }
  }
 </script>

 <div class="p-4 pb-20">
  <div class="tabs tabs-boxed bg-base-200 mb-4">
-    <button class="tab flex-1" class:tab-active={tab === 'active'} onclick={() => tab = 'active'}>
+    <button
+      class="tab flex-1 font-bold transition-all {tab === 'active' ? 'bg-primary text-primary-content rounded-lg' : 'text-base-content/40'}"
+      onclick={() => tab = 'active'}
+    >
      Active
-      {#if ongoing.length > 0}<span class="badge badge-primary badge-sm ml-1">{ongoing.length}</span>{/if}
+      {#if ongoing.length > 0}<span class="badge badge-md ml-1 {tab === 'active' ? 'badge-outline' : 'badge-primary'}">{ongoing.length}</span>{/if}
    </button>
-    <button class="tab flex-1" class:tab-active={tab === 'upcoming'} onclick={() => tab = 'upcoming'}>
+    <button
+      class="tab flex-1 font-bold transition-all {tab === 'upcoming' ? 'bg-primary text-primary-content rounded-lg' : 'text-base-content/40'}"
+      onclick={() => tab = 'upcoming'}
+    >
      Upcoming
-      {#if upcoming.length > 0}<span class="badge badge-info badge-sm ml-1">{upcoming.length}</span>{/if}
+      {#if upcoming.length > 0}<span class="badge badge-md ml-1 {tab === 'upcoming' ? 'badge-outline' : 'badge-info'}">{upcoming.length}</span>{/if}
    </button>
  </div>

@@ -63,31 +168,160 @@
  {:else if error}
    <div class="alert alert-error">{error}</div>
  {:else}
-    {@const hunts = tab === 'active' ? ongoing : upcoming}
-    {#if hunts.length === 0}
-      <div class="text-center py-16 text-base-content/50">
-        <p class="text-4xl mb-3">🔍</p>
-        <p class="font-medium">{tab === 'active' ? 'No active hunts right now' : 'No upcoming hunts'}</p>
-      </div>
-    {:else}
-      <div class="flex flex-col gap-3">
-        {#each hunts as hunt}
-          <button
-            class="card bg-base-100 shadow-sm border border-base-200 text-left w-full hover:border-primary hover:shadow-md transition-all"
-            onclick={() => push(`/hunt/${hunt.id}`)}
-          >
-            <div class="card-body p-4 gap-2">
-              <div class="flex items-start justify-between gap-2">
-                <h2 class="card-title text-base">{hunt.title}</h2>
-                <StatusBadge status={huntStatus(hunt)} />
+    {#if tab === 'active'}
+      {#if ongoing.length === 0}
+        <div class="text-center py-16 text-base-content/50">
+          <p class="text-4xl mb-3">🔍</p>
+          <p class="font-medium">No active hunts right now</p>
+        </div>
+      {:else}
+        <div class="flex flex-col gap-3">
+          {#each ongoing as hunt}
+            {@const myTeam = ongoingTeams[hunt.id]}
+            <button
+              class="card bg-base-100 shadow-sm border border-base-200 text-left w-full hover:border-primary hover:shadow-md transition-all"
+              onclick={() => myTeam ? push(`/hunt/${hunt.id}`) : openSheet(hunt, true)}
+            >
+              <div class="card-body p-4 gap-2">
+                <div class="flex items-start justify-between gap-2">
+                  <h2 class="card-title text-base">{hunt.title}</h2>
+                  <StatusBadge status={huntStatus(hunt)} />
+                </div>
+                <p class="text-xs text-base-content/50">
+                  {formatDateTime(hunt.startDateTime)} – {formatDateTime(hunt.endDateTime)}
+                </p>
+                {#if myTeam}
+                  <p class="text-sm font-medium text-primary">Team: {myTeam.name}</p>
+                {:else}
+                  <p class="text-sm font-medium text-secondary">Join to play →</p>
+                {/if}
              </div>
-              <p class="text-xs text-base-content/50">
-                {formatDate(hunt.startDateTime)} – {formatDate(hunt.endDateTime)}
-              </p>
-            </div>
-          </button>
-        {/each}
-      </div>
+            </button>
+          {/each}
+        </div>
+      {/if}
+
+    {:else}
+      {#if upcoming.length === 0}
+        <div class="text-center py-16 text-base-content/50">
+          <p class="text-4xl mb-3">🔍</p>
+          <p class="font-medium">No upcoming hunts</p>
+        </div>
+      {:else}
+        <div class="flex flex-col gap-3">
+          {#each upcoming as hunt}
+            {@const myTeam = upcomingTeams[hunt.id]}
+            <button
+              class="card bg-base-100 shadow-sm border border-base-200 text-left w-full hover:border-primary hover:shadow-md transition-all"
+              onclick={() => openSheet(hunt, false)}
+            >
+              <div class="card-body p-4 gap-2">
+                <div class="flex items-start justify-between gap-2">
+                  <h2 class="card-title text-base">{hunt.title}</h2>
+                  <StatusBadge status={huntStatus(hunt)} />
+                </div>
+                <p class="text-xs text-base-content/50">
+                  {formatDateTime(hunt.startDateTime)} – {formatDateTime(hunt.endDateTime)}
+                </p>
+                {#if myTeam}
+                  <p class="text-sm font-medium text-primary">Team: {myTeam.name}</p>
+                {:else}
+                  <p class="text-sm font-medium text-secondary">Join a team →</p>
+                {/if}
+              </div>
+            </button>
+          {/each}
+        </div>
+      {/if}
    {/if}
  {/if}
 </div>
+
+<!-- Hunt sheet -->
+{#if sheetHunt}
+  {@const hunt = sheetHunt}
+  {@const myTeam = sheetIsActive ? ongoingTeams[hunt.id] : upcomingTeams[hunt.id]}
+  <div class="fixed inset-0 z-40" onclick={closeSheet} role="presentation"></div>
+  <div class="fixed bottom-0 left-0 right-0 z-50 bg-base-200 rounded-t-2xl shadow-2xl max-h-[80vh] overflow-y-auto">
+    <div class="p-4 border-b border-base-300 flex items-center justify-between sticky top-0 bg-base-200">
+      <div>
+        <h3 class="font-bold text-lg">{hunt.title}</h3>
+        <p class="text-xs text-base-content/50">{formatDateTime(hunt.startDateTime)} – {formatDateTime(hunt.endDateTime)}</p>
+      </div>
+      <button class="btn btn-ghost btn-sm btn-circle" onclick={closeSheet}>✕</button>
+    </div>
+
+    <div class="p-4 flex flex-col gap-4">
+      {#if sheetError}
+        <div class="alert alert-error text-sm">{sheetError}</div>
+      {/if}
+
+      {#if sheetLoading}
+        <LoadingSpinner />
+      {:else if myTeam}
+        <!-- Already on a team -->
+        <div class="rounded-xl bg-base-100 border border-base-300 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>
+          </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>
+        {#if sheetIsActive}
+          <button class="btn btn-primary w-full" onclick={() => push(`/hunt/${hunt.id}`)}>
+            Play Now →
+          </button>
+        {/if}
+      {:else}
+        <!-- Join or create -->
+        {#if sheetIsActive}
+          <div class="alert alert-info text-sm">This hunt is already in progress — join a team to start playing!</div>
+        {/if}
+        <form onsubmit={(e) => { e.preventDefault(); createTeam() }} class="flex gap-2">
+          <input
+            type="text"
+            placeholder="New team name"
+            class="input input-bordered input-sm flex-1"
+            bind:value={newTeamName}
+            disabled={creatingTeam}
+          />
+          <button type="submit" class="btn btn-secondary btn-sm" disabled={creatingTeam || !newTeamName.trim()}>
+            {#if creatingTeam}<span class="loading loading-spinner loading-xs"></span>{/if}
+            Create
+          </button>
+        </form>
+
+        {#if sheetTeams.length > 0}
+          <div>
+            <p class="text-xs font-semibold uppercase tracking-wide text-base-content/40 mb-2">Or join an existing team</p>
+            <div class="flex flex-col gap-2">
+              {#each sheetTeams as team}
+                <button
+                  class="card bg-base-100 shadow-sm border border-base-200 text-left w-full hover:border-primary transition-colors"
+                  onclick={() => joinTeam(team.id)}
+                  disabled={joiningTeamId !== null}
+                >
+                  <div class="card-body p-4 flex-row items-center justify-between">
+                    <p class="font-semibold">{team.name}</p>
+                    {#if joiningTeamId === team.id}
+                      <span class="loading loading-spinner loading-xs"></span>
+                    {/if}
+                  </div>
+                </button>
+              {/each}
+            </div>
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </div>
+{/if}
--- a/src/routes/hunter/HuntLobby.svelte
+++ b/src/routes/hunter/HuntLobby.svelte
@@ -2,19 +2,21 @@
    import {push} from 'svelte-spa-router'
    import {fade} from 'svelte/transition'
    import {auth} from '../../lib/stores/auth.svelte'
+    import {huntStatus, parseUTC} from '../../lib/utils'
    import {
        apiCreateTeam,
        apiGetHunt,
        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'
@@ -41,7 +43,9 @@
  let itemPhotos = $state<PhotoResponse[]>([])
  let photosLoading = $state(false)
  let submitting = $state(false)
+  let expandedPhoto = $state<PhotoResponse | null>(null)
  let fileInput = $state<HTMLInputElement | undefined>()
+  let cameraInput = $state<HTMLInputElement | undefined>()
  let _uploading = false
  let _errorTimer: ReturnType<typeof setTimeout> | null = null

@@ -160,15 +164,65 @@
    }
  }

-  function huntStatus(h: HuntResponse): 'ONGOING' | 'UNSTARTED' | 'CLOSED' {
-    if (h.isTerminated) return 'CLOSED'
-    const now = Date.now()
-    if (now < new Date(h.startDateTime).getTime()) return 'UNSTARTED'
-    if (now > new Date(h.endDateTime).getTime()) return 'CLOSED'
-    return 'ONGOING'
+
+  const approved  = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'APPROVED').length)
+  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
+    }
  }

-  const approved = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'APPROVED').length)
+  let searchQuery   = $state('')
+  let filterStatus  = $state<string | null>(null)
+  let filterPoints  = $state<number | null>(null)
+  let sortBy        = $state<'name' | 'points'>('points')
+  let sortDir       = $state<'asc' | 'desc'>('asc')
+
+  const uniquePointValues = $derived([...new Set(items.map(i => i.points))].sort((a, b) => a - b))
+
+  const filteredItems = $derived(
+    [...items]
+      .filter(item => {
+        if (searchQuery && !item.name.toLowerCase().includes(searchQuery.toLowerCase())) return false
+        if (filterStatus && (itemStatuses[item.id]?.itemFoundStatus ?? 'NOT_FOUND') !== filterStatus) return false
+        if (filterPoints !== null && item.points !== filterPoints) return false
+        return true
+      })
+      .sort((a, b) => {
+        if (sortBy === 'name') {
+          const cmp = a.name.localeCompare(b.name)
+          return sortDir === 'asc' ? cmp : -cmp
+        }
+        const ptsCmp = a.points - b.points
+        if (ptsCmp !== 0) return sortDir === 'asc' ? ptsCmp : -ptsCmp
+        return a.name.localeCompare(b.name)
+      })
+  )
+
+  function toggleSort(field: 'name' | 'points') {
+    if (sortBy === field) sortDir = sortDir === 'asc' ? 'desc' : 'asc'
+    else { sortBy = field; sortDir = 'asc' }
+  }
+
+  const statusFilters: { label: string; value: string | null }[] = [
+    { label: 'All',       value: null },
+    { label: 'Not Found', value: 'NOT_FOUND' },
+    { label: 'Submitted', value: 'SUBMITTED' },
+    { label: 'Approved',  value: 'APPROVED' },
+    { label: 'Rejected',  value: 'REJECTED' },
+  ]
 </script>

 <div class="pb-20">
@@ -184,11 +238,17 @@
        <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">
-            <progress class="progress progress-primary flex-1 h-1.5" value={approved} max={items.length}></progress>
-            <span class="text-xs font-medium text-primary">{approved}/{items.length}</span>
+            <div class="flex-1 h-2 rounded-full overflow-hidden bg-base-300 flex">
+              <div class="bg-success h-full transition-all" style="width: {approved  / items.length * 100}%"></div>
+              <div class="bg-warning h-full transition-all" style="width: {submitted / items.length * 100}%"></div>
+              <div class="bg-error   h-full transition-all" style="width: {rejected  / items.length * 100}%"></div>
+            </div>
+            <span class="text-xs font-medium text-base-content/60">{approved}/{items.length}</span>
          </div>
        {/if}
      {/if}
@@ -240,8 +300,55 @@

    <!-- On a team: item list -->
    {:else}
+      <!-- Filter & sort controls -->
+      <div class="px-4 pt-3 pb-2 flex flex-col gap-2 border-b border-base-200">
+        <input
+          type="search"
+          placeholder="Search items…"
+          class="input input-bordered input-sm w-full"
+          bind:value={searchQuery}
+        />
+        <div class="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
+          {#each statusFilters as f}
+            <button
+              class="btn btn-xs shrink-0"
+              class:btn-primary={filterStatus === f.value}
+              class:btn-outline={filterStatus !== f.value}
+              onclick={() => filterStatus = f.value}
+            >{f.label}</button>
+          {/each}
+        </div>
+        <div class="flex items-center gap-2">
+          <select
+            class="select select-bordered select-sm flex-1"
+            onchange={(e) => filterPoints = (e.target as HTMLSelectElement).value === '' ? null : Number((e.target as HTMLSelectElement).value)}
+          >
+            <option value="">All pts</option>
+            {#each uniquePointValues as pts}
+              <option value={pts}>{pts} pts</option>
+            {/each}
+          </select>
+          <button
+            class="btn btn-sm gap-1"
+            class:btn-primary={sortBy === 'points'}
+            class:btn-outline={sortBy !== 'points'}
+            onclick={() => toggleSort('points')}
+          >
+            Pts {sortBy === 'points' ? (sortDir === 'asc' ? '↑' : '↓') : '↕'}
+          </button>
+          <button
+            class="btn btn-sm gap-1"
+            class:btn-primary={sortBy === 'name'}
+            class:btn-outline={sortBy !== 'name'}
+            onclick={() => toggleSort('name')}
+          >
+            Name {sortBy === 'name' ? (sortDir === 'asc' ? '↑' : '↓') : '↕'}
+          </button>
+        </div>
+      </div>
+
      <div class="flex flex-col gap-2 p-4">
-        {#each items as item}
+        {#each filteredItems as item}
          {@const status = itemStatuses[item.id]}
          <button
            class="card bg-base-100 shadow-sm border border-base-200 text-left w-full hover:border-primary transition-colors"
@@ -257,46 +364,127 @@
              {/if}
            </div>
          </button>
+        {:else}
+          <p class="text-center text-base-content/50 py-8 text-sm">No items match your filters</p>
        {/each}
      </div>
    {/if}
  {/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-200 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}
+  <div
+    class="fixed inset-0 z-60 bg-black/90 flex flex-col"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="flex items-center justify-between px-4 py-3 shrink-0">
+      <div>
+        <p class="font-semibold text-white">{photo.hunterName}</p>
+        <p class="text-xs text-white/40">{parseUTC(photo.photoUploadDateTime).toLocaleString()}</p>
+      </div>
+      <div class="flex items-center gap-3">
+        <StatusBadge status={photo.photoStatus} />
+        <button class="btn btn-ghost btn-sm btn-circle text-white" onclick={() => expandedPhoto = null}>✕</button>
+      </div>
+    </div>
+
+    <div class="flex-1 min-h-0 flex items-center justify-center px-4">
+      <AuthImage photoId={photo.id} version="LARGE" alt={photo.hunterName} class="max-h-full max-w-full object-contain rounded-lg" />
+    </div>
+
+    {#if photo.photoStatus === 'SUBMITTED' || photo.photoStatus === 'REJECTED'}
+      <div class="px-4 py-4 shrink-0">
+        <button class="btn btn-ghost btn-sm w-full text-white/40" onclick={() => { removePhoto(photo); expandedPhoto = null }}>
+          Remove
+        </button>
+      </div>
+    {:else}
+      <div class="pb-4"></div>
+    {/if}
+  </div>
+{/if}
+
 <!-- Item detail bottom sheet -->
 {#if selectedItem}
  <div class="fixed inset-0 z-40" onclick={closeSheet} role="presentation"></div>
-  <div class="fixed bottom-0 left-0 right-0 z-50 bg-base-100 rounded-t-2xl shadow-2xl max-h-[80vh] overflow-y-auto">
-    <div class="p-4 border-b border-base-200 flex items-center justify-between sticky top-0 bg-base-100">
+  <div class="fixed bottom-0 left-0 right-0 z-50 bg-base-200 rounded-t-2xl shadow-2xl max-h-[80vh] overflow-y-auto">
+    <div class="p-4 border-b border-base-300 flex items-center justify-between sticky top-0 bg-base-200">
      <div>
        <h3 class="font-bold text-lg">{selectedItem.name}</h3>
        <p class="text-xs text-base-content/50">{selectedItem.points} points</p>
      </div>
-      <button class="btn btn-ghost btn-sm btn-circle" onclick={closeSheet}>✕</button>
+      <button class="btn btn-outline btn-sm" onclick={closeSheet}>Done</button>
    </div>
    <div class="p-4 flex flex-col gap-4">
-      <button
-        type="button"
-        class="btn btn-primary w-full gap-2"
-        class:opacity-50={submitting}
-        disabled={submitting}
-        onclick={() => fileInput?.click()}
-      >
-        {#if submitting}
+      {#if submitting}
+        <button type="button" class="btn btn-primary w-full gap-2 opacity-50" disabled>
          <span class="loading loading-spinner loading-sm"></span>
          Uploading…
-        {:else}
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
-          </svg>
-          Take / Upload Photo
-        {/if}
-      </button>
+        </button>
+      {:else}
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="btn btn-primary flex-1 gap-2"
+            onclick={() => cameraInput?.click()}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
+            </svg>
+            Camera
+          </button>
+          <button
+            type="button"
+            class="btn btn-outline flex-1 gap-2"
+            onclick={() => fileInput?.click()}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
+            </svg>
+            Gallery
+          </button>
+        </div>
+      {/if}
+      <input
+        bind:this={cameraInput}
+        type="file"
+        accept="image/*"
+        capture="environment"
+        class="hidden"
+        onchange={handleFileChange}
+      />
      <input
        bind:this={fileInput}
        type="file"
        accept="image/*"
-        capture="environment"
        class="hidden"
        onchange={handleFileChange}
      />
@@ -306,14 +494,16 @@
      {:else if itemPhotos.filter(p => p.photoStatus !== 'REMOVED').length > 0}
        <div class="flex flex-col gap-3">
          {#each itemPhotos.filter(p => p.photoStatus !== 'REMOVED') as photo (photo.id)}
-            <div class="card bg-base-200 overflow-hidden">
-              <AuthImage photoId={photo.id} version="LARGE" alt={photo.hunterName} class="w-full h-48 object-cover" />
+            <div class="card bg-base-100 overflow-hidden">
+              <button class="w-full cursor-zoom-in" onclick={() => expandedPhoto = photo}>
+                <AuthImage photoId={photo.id} version="SMALL" alt={photo.hunterName} class="w-full max-h-64 object-contain bg-base-300" />
+              </button>
              <div class="p-3 flex items-center justify-between">
                <div>
                  <p class="text-sm font-medium">{photo.hunterName}</p>
                  <StatusBadge status={photo.photoStatus} />
                </div>
-                {#if photo.photoStatus === 'SUBMITTED'}
+                {#if photo.photoStatus === 'SUBMITTED' || photo.photoStatus === 'REJECTED'}
                  <button class="btn btn-ghost btn-xs text-error" onclick={() => removePhoto(photo)}>Remove</button>
                {/if}
              </div>
@@ -323,6 +513,7 @@
      {:else}
        <p class="text-center text-base-content/50 py-4 text-sm">No photos submitted yet</p>
      {/if}
+
    </div>
  </div>
 {/if}
Author	SHA1	Message	Date
aarbit	c6f1475b84	Adds unreviewed notification bubble in Admin hunts list	2026-05-19 10:26:49 -05:00
aarbit	2c7cb00745	Lists all unreviewed photos for a hunt	2026-05-19 10:02:04 -05:00
aarbit	ef8ab903ee	Updates favicon for Scrounge Quest theming	2026-05-19 00:05:17 -05:00
aarbit	44a5805b2b	Makes photo dialog clearer	2026-05-18 23:58:37 -05:00
aarbit	efab8b3083	Fixes terminated hunt issues	2026-05-18 23:35:12 -05:00
aarbit	46060fc150	Allows Hunters to join in mid-Hunt	2026-05-18 22:14:24 -05:00
aarbit	1772081495	Fixes time zone based stuff	2026-05-18 20:59:55 -05:00
aarbit	aae0c3ff8d	Consolidates and renames the app title	2026-05-18 17:28:39 -05:00
aarbit	86866f4db7	Adds display of Team members	2026-05-18 17:12:43 -05:00
aarbit	6e4edd96ce	Allows for editing Hunt details	2026-05-18 16:31:00 -05:00
aarbit	fd4d86db5b	Unstarted Hunts no longer go to the Items view for Hunters	2026-05-18 16:12:48 -05:00
aarbit	3a0a0ae791	Adds filters and sorts for Hunt view	2026-05-18 14:19:16 -05:00
aarbit	63d027ebb7	Makes the progress bar more informative	2026-05-18 13:55:09 -05:00
aarbit	53706b4035	Fixes up some non-null silliness	2026-05-18 13:46:40 -05:00
aarbit	67fe81dc41	Adds ability to expand photos, and upload both from camera and from gallery	2026-05-18 13:44:23 -05:00
aarbit	2ba8b60063	Allows admins to remove photos	2026-05-18 13:02:39 -05:00
aarbit	6191c6c804	Makes the photo review process easier	2026-05-18 12:05:31 -05:00
aarbit	2c614a2d46	Makes the active tab easier to determine	2026-05-18 11:35:45 -05:00
aarbit	51a9448fdb	Makes the bottom nav buttons easier to press	2026-05-18 11:35:26 -05:00
aarbit	5aeb6818f8	Fixes startup warning	2026-05-18 10:29:20 -05:00
aarbit	ebe0a9692f	Adds rules page	2026-05-18 00:44:53 -05:00