refactor: align backend and frontend types

Author: arabcoders

frontend/app/components/AdminTokensTable.vue

@@ -26,15 +26,10 @@
           <td class="px-4 py-3 text-sm">
             <div class="space-y-1.5">
               <div class="flex items-center gap-2">
-                <template v-if="token.disabled">
-                  <span>{{ token.token }}</span>
-                  <UTooltip text="Token is disabled" :arrow="true">
-                    <UIcon name="i-heroicons-lock-closed-20-solid" class="size-4 text-muted" />
-                  </UTooltip>
-                </template>
-                <template v-else>
-                  <NuxtLink :to="`/t/${token.token}`">{{ token.token }}</NuxtLink>
-                </template>
+                <NuxtLink :to="`/${token.disabled ? 'f' : 't'}/${token.token}`">{{ token.token }}</NuxtLink>
+                <UTooltip text="Token is disabled" :arrow="true" v-if="token.disabled">
+                  <UIcon name="i-heroicons-lock-closed-20-solid" class="size-4 text-muted" />
+                </UTooltip>
               </div>
             </div>
           </td>

frontend/app/components/AdminUploadsTable.vue

@@ -21,7 +21,7 @@
             No uploads found
           </td>
         </tr>
-        <tr v-else v-for="upload in uploads" :key="upload.id" class="hover:bg-elevated/50 transition-colors">
+        <tr v-else v-for="upload in uploads" :key="upload.public_id" class="hover:bg-elevated/50 transition-colors">
           <td class="px-4 py-3 text-sm">
             <div class="space-y-1">
               <UPopover mode="hover" :content="{ align: 'start' }" :ui="{ content: 'p-3' }">

frontend/app/components/UploadsTable.vue

@@ -11,8 +11,8 @@
         </tr>
       </thead>
       <tbody class="bg-default divide-y divide-default">
-        <tr v-for="row in rows" :key="row.id" class="hover:bg-elevated/50 transition-colors">
-          <td class="px-4 py-3 text-sm">{{ row.id }}</td>
+        <tr v-for="(row, index) in rows" :key="row.public_id" class="hover:bg-elevated/50 transition-colors">
+          <td class="px-4 py-3 text-sm">{{ index+1 }}</td>
           <td class="px-4 py-3 text-sm">
             <UPopover mode="hover" :content="{ align: 'start' }" :ui="{ content: 'p-3' }">
               <NuxtLink v-if="allowDownloads && row.download_url && row.status === 'completed'" :href="row.download_url" target="_blank"
@@ -43,11 +43,12 @@
               :color="getStatusColor(row.status)" 
               variant="soft"
               :icon="getStatusIcon(row.status)">
-              {{ row.status }}
+              <span v-if="row.status === 'postprocessing'">Processing</span>
+              <span v-else>{{ row.status }}</span>
             </UBadge>
           </td>
           <td class="px-4 py-3 text-sm">
-            <span v-if="row.status === 'completed'" class="font-medium">
+            <span v-if="row.status === 'completed' || row.status === 'postprocessing'" class="font-medium">
               {{ formatBytes(row.size_bytes ?? row.upload_length ?? 0) }}
             </span>
             <span v-else class="text-sm">
@@ -74,7 +75,7 @@
                 Resume
               </UButton>
 
-              <UButton v-if="row.status !== 'completed' && (row.upload_offset ?? 0) < (row.upload_length ?? 0)"
+              <UButton v-if="row.status !== 'completed' && (row.status === 'postprocessing' || (row.upload_offset ?? 0) < (row.upload_length ?? 0))"
                 color="error" variant="soft" size="xs" icon="i-heroicons-x-mark-20-solid" @click="$emit('cancel', row)">
                 Cancel
               </UButton>
@@ -107,6 +108,7 @@ function getStatusColor(status: string): 'success' | 'error' | 'warning' | 'prim
     case 'paused': return 'warning';
     case 'uploading':
     case 'in_progress':
+    case 'postprocessing':
     case 'initiating': return 'primary';
     default: return 'neutral';
   }
@@ -120,6 +122,7 @@ function getStatusIcon(status: string): string {
     case 'paused': return 'i-heroicons-pause-circle-20-solid';
     case 'uploading':
     case 'in_progress': return 'i-heroicons-arrow-path-20-solid';
+    case 'postprocessing': return 'i-heroicons-cog-6-tooth-20-solid';
     case 'initiating': return 'i-heroicons-arrow-up-tray-20-solid';
     case 'pending': return 'i-heroicons-clock-20-solid';
     default: return 'i-heroicons-question-mark-circle-20-solid';

frontend/app/composables/useTokenInfo.ts

@@ -1,5 +1,6 @@
 import { ref, computed } from 'vue'
 import type { TokenInfo } from '~/types/token'
+import type { ApiError } from '~/types/uploads'
 
 export function useTokenInfo(tokenValue: Ref<string>) {
     const tokenInfo = ref<TokenInfo | null>(null)
@@ -23,8 +24,8 @@ export function useTokenInfo(tokenValue: Ref<string>) {
         isDisabled.value = false
         try {
             const { $apiFetch } = useNuxtApp()
-            const data = await $apiFetch('/api/tokens/' + tokenValue.value)
-            tokenInfo.value = data as any
+            const data = await $apiFetch<TokenInfo>('/api/tokens/' + tokenValue.value)
+            tokenInfo.value = data
             notFound.value = false
 
             // Check token status based on returned data
@@ -36,10 +37,11 @@ export function useTokenInfo(tokenValue: Ref<string>) {
                 }
                 isDisabled.value = tokenInfo.value.disabled || false
             }
-        } catch (err: any) {
+        } catch (err) {
+            const error = err as ApiError
             tokenInfo.value = null
             notFound.value = true
-            tokenError.value = err?.data?.detail || err?.message || 'Failed to load token info.'
+            tokenError.value = error?.data?.detail || error?.message || 'Failed to load token info.'
         }
     }
 

frontend/app/composables/useTusUpload.ts

@@ -3,7 +3,13 @@ import type { Slot } from '~/types/uploads'
 import type { TokenInfo } from '~/types/token'
 
 export function useTusUpload() {
-    async function startTusUpload(slot: Slot, uploadUrl: string, file: File, tokenInfo: TokenInfo | null) {
+    async function startTusUpload(
+        slot: Slot,
+        uploadUrl: string,
+        file: File,
+        tokenInfo: TokenInfo | null,
+        onUploadComplete?: (slot: Slot) => void
+    ) {
         slot.status = 'uploading'
         slot.paused = false
         return new Promise<void>((resolve, reject) => {
@@ -17,7 +23,7 @@ export function useTusUpload() {
                     filename: file.name,
                     filetype: file.type,
                 },
-                onError(error: any) {
+                onError(error: Error) {
                     slot.error = error.message
                     slot.status = 'error'
                     slot.tusUpload = undefined
@@ -29,9 +35,14 @@ export function useTusUpload() {
                     slot.status = 'uploading'
                 },
                 onSuccess() {
-                    slot.status = 'completed'
+                    slot.status = 'postprocessing'
                     slot.progress = 100
                     slot.tusUpload = undefined
+                    
+                    if (onUploadComplete) {
+                        onUploadComplete(slot)
+                    }
+                    
                     resolve()
                 },
             })

frontend/app/composables/useUploadPolling.ts

@@ -0,0 +1,62 @@
+import { ref } from 'vue'
+import type { Slot } from '~/types/uploads'
+import type { TokenInfo } from '~/types/token'
+
+export function useUploadPolling() {
+  const pollingIntervals = ref<Map<string, NodeJS.Timeout>>(new Map())
+
+  async function pollUploadStatus(uploadId: string, token: string, slot: Slot, onComplete?: () => void) {
+    if (pollingIntervals.value.has(uploadId)) {
+      return
+    }
+
+    const interval = setInterval(async () => {
+      try {
+        const { $apiFetch } = useNuxtApp()
+        const data = await $apiFetch<TokenInfo>(`/api/tokens/${token}`)
+        const upload = data.uploads?.find((u) => u.public_id === uploadId)
+        
+        if (!upload) {
+          stopPolling(uploadId)
+          return
+        }
+
+        if (upload.status === 'completed') {
+          slot.status = 'completed'
+          stopPolling(uploadId)
+          if (onComplete) {
+            onComplete()
+          }
+        } else if (upload.status === 'failed') {
+          slot.status = 'error'
+          const errorMsg = upload.meta_data?.error
+          slot.error = typeof errorMsg === 'string' ? errorMsg : 'Processing failed'
+          stopPolling(uploadId)
+        }
+      } catch (err) {
+        console.error('Failed to poll upload status:', err)
+      }
+    }, 2000)
+
+    pollingIntervals.value.set(uploadId, interval)
+  }
+
+  function stopPolling(uploadId: string) {
+    const interval = pollingIntervals.value.get(uploadId)
+    if (interval) {
+      clearInterval(interval)
+      pollingIntervals.value.delete(uploadId)
+    }
+  }
+
+  function stopAllPolling() {
+    pollingIntervals.value.forEach((interval) => clearInterval(interval))
+    pollingIntervals.value.clear()
+  }
+
+  return {
+    pollUploadStatus,
+    stopPolling,
+    stopAllPolling,
+  }
+}

frontend/app/pages/admin/index.vue

@@ -126,7 +126,7 @@ import AdminTokenForm from "~/components/AdminTokenForm.vue";
 import AdminTokensTable from "~/components/AdminTokensTable.vue";
 import AdminUploadsTable from "~/components/AdminUploadsTable.vue";
 import type { AdminToken } from "~/types/token";
-import type { UploadRow } from "~/types/uploads";
+import type { UploadRow, ApiError } from "~/types/uploads";
 
 definePageMeta({ middleware: "admin" });
 
@@ -187,8 +187,8 @@ async function fetchTokens() {
     });
     tokens.value = res.tokens;
     totalTokens.value = res.total;
-  } catch (err: any) {
-    handleAuthError(err);
+  } catch (err) {
+    handleAuthError(err as ApiError);
   } finally {
     loadingTokens.value = false;
   }
@@ -201,8 +201,8 @@ async function handleCreate(payload: Record<string, any>) {
     toast.add({ title: "Token created", color: "success", icon: "i-heroicons-check-circle-20-solid" });
     createOpen.value = false;
     await fetchTokens();
-  } catch (err: any) {
-    handleAuthError(err);
+  } catch (err) {
+    handleAuthError(err as ApiError);
   } finally {
     creating.value = false;
   }
@@ -221,8 +221,8 @@ async function handleUpdate(payload: Record<string, any>) {
     toast.add({ title: "Token updated", color: "success", icon: "i-heroicons-check-circle-20-solid" });
     editOpen.value = false;
     await fetchTokens();
-  } catch (err: any) {
-    handleAuthError(err);
+  } catch (err) {
+    handleAuthError(err as ApiError);
   } finally {
     savingEdit.value = false;
   }
@@ -245,8 +245,8 @@ async function confirmDelete() {
     toast.add({ title: "Token deleted", color: "success", icon: "i-heroicons-check-circle-20-solid" });
     deleteOpen.value = false;
     await fetchTokens();
-  } catch (err: any) {
-    handleAuthError(err);
+  } catch (err) {
+    handleAuthError(err as ApiError);
   } finally {
     deleting.value = false;
   }
@@ -281,21 +281,21 @@ async function confirmDeleteUpload() {
   if (!deleteUploadTarget.value) return;
   deletingUpload.value = true;
   try {
-    await $apiFetch(`/api/admin/uploads/${deleteUploadTarget.value.id}`, { method: "DELETE" });
+    await $apiFetch(`/api/admin/uploads/${deleteUploadTarget.value.public_id}`, { method: "DELETE" });
     toast.add({ title: "Upload deleted", color: "success", icon: "i-heroicons-check-circle-20-solid" });
     deleteUploadOpen.value = false;
     // Refresh the uploads list
     if (uploadsToken.value) {
       await openUploads(uploadsToken.value);
     }
-  } catch (err: any) {
-    handleAuthError(err);
+  } catch (err) {
+    handleAuthError(err as ApiError);
   } finally {
     deletingUpload.value = false;
   }
 }
 
-function handleAuthError(err: any) {
+function handleAuthError(err: ApiError) {
   if (err?.response?.status === 401 || err?.status === 401) {
     adminToken.value = null;
     toast.add({

frontend/app/pages/f/[token].vue

@@ -92,7 +92,7 @@
               </tr>
             </thead>
             <tbody class="bg-default divide-y divide-default">
-              <tr v-for="upload in uploads" :key="upload.id" class="hover:bg-elevated/50 transition-colors">
+              <tr v-for="upload in uploads" :key="upload.public_id" class="hover:bg-elevated/50 transition-colors">
                 <td class="px-4 py-3 text-sm">
                   <UPopover mode="hover" :content="{ align: 'start' }" :ui="{ content: 'p-3' }">
                     <div class="flex items-center gap-2">
@@ -114,7 +114,7 @@
                         <div class="space-y-2">
                           <div class="grid grid-cols-[auto_1fr] gap-2">
                             <span class="text-muted font-medium">ID:</span>
-                            <span>{{ upload.id }}</span>
+                            <span>{{ upload.public_id }}</span>
                           </div>
                           <div v-if="upload.mimetype" class="grid grid-cols-[auto_1fr] gap-2">
                             <span class="text-muted font-medium">Type:</span>
@@ -202,6 +202,7 @@ function getStatusColor(status: string): 'success' | 'error' | 'warning' | 'neut
     case 'error':
     case 'validation_failed': return 'error'
     case 'in_progress':
+    case 'postprocessing':
     case 'uploading': return 'warning'
     default: return 'neutral'
   }

frontend/app/pages/index.vue

@@ -30,6 +30,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import type { ApiError } from "~/types/uploads";
 
 const route = useRoute();
 const toast = useToast();
@@ -58,9 +59,10 @@ const onSubmit = async () => {
     await $apiFetch("/api/admin/validate");
     toast.add({ title: "Signed in", color: "success", icon: "i-heroicons-check-circle-20-solid" });
     await navigateTo(redirectTo.value);
-  } catch (err: any) {
+  } catch (err) {
+    const apiError = err as ApiError;
     adminToken.value = null;
-    error.value = err?.data?.detail || err?.message || "Invalid api key";
+    error.value = apiError?.data?.detail || apiError?.message || "Invalid api key";
     console.log("Admin sign-in error:", err, error.value);
   } finally {
     loading.value = false;