user info + max size

opus_submitter/src/App.vue

@@ -2,13 +2,15 @@
 import { ref, onMounted, computed } from 'vue'
 import PuzzleCard from './components/PuzzleCard.vue'
 import SubmissionForm from './components/SubmissionForm.vue'
-import { puzzleHelpers, submissionHelpers, errorHelpers } from './services/apiService'
-import type { SteamCollection, SteamCollectionItem, Submission, PuzzleResponse } from './types'
+import AdminPanel from './components/AdminPanel.vue'
+import { puzzleHelpers, submissionHelpers, errorHelpers, apiService } from './services/apiService'
+import type { SteamCollection, SteamCollectionItem, Submission, PuzzleResponse, UserInfo } from './types'
 
 // API data
 const collections = ref<SteamCollection[]>([])
 const puzzles = ref<SteamCollectionItem[]>([])
 const submissions = ref<Submission[]>([])
+const userInfo = ref<UserInfo | null>(null)
 const isLoading = ref(true)
 const showSubmissionModal = ref(false)
 const error = ref<string>('')
@@ -92,15 +94,22 @@ const mockPuzzles: SteamCollectionItem[] = [
   }
 ]
 
+// Computed properties
+const isSuperuser = computed(() => {
+  return userInfo.value?.is_superuser || false
+})
+
 // Computed property to get responses grouped by puzzle
 const responsesByPuzzle = computed(() => {
   const grouped: Record<number, PuzzleResponse[]> = {}
   submissions.value.forEach(submission => {
     submission.responses.forEach(response => {
-      if (!grouped[response.puzzle_id]) {
-        grouped[response.puzzle_id] = []
+      // Handle both number and object types for puzzle field
+      const puzzleId = typeof response.puzzle === 'number' ? response.puzzle : response.puzzle.id
+      if (!grouped[puzzleId]) {
+        grouped[puzzleId] = []
       }
-      grouped[response.puzzle_id].push(response)
+      grouped[puzzleId].push(response)
     })
   })
   return grouped
@@ -111,9 +120,23 @@ onMounted(async () => {
     isLoading.value = true
     error.value = ''
     
+    console.log('Starting data load...')
+    
+    // Load user info
+    console.log('Loading user info...')
+    const userResponse = await apiService.getUserInfo()
+    if (userResponse.data) {
+      userInfo.value = userResponse.data
+      console.log('User info loaded:', userResponse.data)
+    } else if (userResponse.error) {
+      console.warn('User info error:', userResponse.error)
+    }
+    
     // Load puzzles from API
+    console.log('Loading puzzles...')
     const loadedPuzzles = await puzzleHelpers.loadPuzzles()
     puzzles.value = loadedPuzzles
+    console.log('Puzzles loaded:', loadedPuzzles.length)
     
     // Create mock collection from loaded puzzles for display
     if (loadedPuzzles.length > 0) {
@@ -129,17 +152,23 @@ onMounted(async () => {
         created_at: new Date().toISOString(),
         updated_at: new Date().toISOString()
       }]
+      console.log('Collection created')
     }
     
     // Load existing submissions
+    console.log('Loading submissions...')
     const loadedSubmissions = await submissionHelpers.loadSubmissions()
     submissions.value = loadedSubmissions
+    console.log('Submissions loaded:', loadedSubmissions.length)
+    
+    console.log('Data load complete!')
     
   } catch (err) {
     error.value = errorHelpers.getErrorMessage(err)
     console.error('Failed to load data:', err)
   } finally {
     isLoading.value = false
+    console.log('Loading state set to false')
   }
 })
 
@@ -208,6 +237,17 @@ const findPuzzleByName = (ocrPuzzleName: string): SteamCollectionItem | null =>
         <div class="flex-1">
           <h1 class="text-xl font-bold">Opus Magnum Puzzle Submitter</h1>
         </div>
+        <div class="flex-none">
+          <div v-if="userInfo?.is_authenticated" class="flex items-center gap-2">
+            <div class="text-sm">
+              <span class="font-medium">{{ userInfo.username }}</span>
+              <span v-if="userInfo.is_superuser" class="badge badge-warning badge-xs ml-1">Admin</span>
+            </div>
+          </div>
+          <div v-else class="text-sm text-base-content/70">
+            Not logged in
+          </div>
+        </div>
       </div>
     </div>
 
@@ -255,6 +295,11 @@ const findPuzzleByName = (ocrPuzzleName: string): SteamCollectionItem | null =>
           </div>
         </div>
 
+        <!-- Admin Panel (only for superusers) -->
+        <div v-if="isSuperuser">
+          <AdminPanel />
+        </div>
+
         <!-- Puzzles Grid -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <PuzzleCard