feat: Enhance useImages hook with shortCode metadata and auth headers

- Fetch image metadata (shortCode, shortUrl, downloadAllowed) from /api/images
- Include Authorization header in API calls when user is authenticated
- Merge metadata with storage file info for complete image data

src/hooks/useImages.ts

@@ -21,24 +21,60 @@ export function useImages(bucket: string = PUBLIC_BUCKET) {
       const storage = client.storage.from(bucket);
       const prefix = bucket === USER_BUCKET && userId ? `${userId}/` : '';
 
+      // Fetch from storage
       const { data, error: listError } = await storage.list(prefix, {
         limit: 100,
       });
 
       if (listError) throw listError;
 
-      const imageFiles: ImageFile[] = (data || []).map((file: FileMetadata) => ({
-        id: file.id,
-        path: file.path,
-        name: file.filename || file.path.split('/').pop() || 'Unknown',
-        size: file.size,
-        mimeType: file.mime_type,
-        url: storage.getPublicUrl(file.path).data.publicUrl,
-        createdAt: new Date(file.created_at),
-        expiresAt: getExpiryFromMetadata(file.custom_metadata),
-        isPublic: bucket === PUBLIC_BUCKET,
-        ownerId: file.owner_id,
-      }));
+      // Also fetch from image API to get shortCodes
+      const sessionToken = getSessionToken();
+      const headers: Record<string, string> = {
+        'X-Session-Token': sessionToken,
+      };
+      const accessToken = client.accessToken;
+      if (accessToken) {
+        headers['Authorization'] = `Bearer ${accessToken}`;
+      }
+
+      let imageMetadata: Record<string, { shortCode: string; shortUrl: string; downloadAllowed: boolean }> = {};
+      try {
+        const apiResponse = await fetch('/api/images', { headers });
+        if (apiResponse.ok) {
+          const apiData = await apiResponse.json();
+          // Create a lookup by path
+          for (const img of apiData.items || []) {
+            imageMetadata[img.path] = {
+              shortCode: img.short_code,
+              shortUrl: img.short_url,
+              downloadAllowed: img.download_allowed,
+            };
+          }
+        }
+      } catch (e) {
+        // Non-fatal, continue without shortCodes
+        console.warn('Failed to fetch image metadata:', e);
+      }
+
+      const imageFiles: ImageFile[] = (data || []).map((file: FileMetadata) => {
+        const meta = imageMetadata[file.path];
+        return {
+          id: file.id,
+          path: file.path,
+          name: file.filename || file.path.split('/').pop() || 'Unknown',
+          size: file.size,
+          mimeType: file.mime_type,
+          url: storage.getPublicUrl(file.path).data.publicUrl,
+          createdAt: new Date(file.created_at),
+          expiresAt: getExpiryFromMetadata(file.custom_metadata),
+          isPublic: bucket === PUBLIC_BUCKET,
+          ownerId: file.owner_id,
+          shortCode: meta?.shortCode,
+          shortUrl: meta?.shortUrl,
+          downloadAllowed: meta?.downloadAllowed,
+        };
+      });
 
       // Sort by created date, newest first
       imageFiles.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
@@ -78,12 +114,18 @@ export function useImages(bucket: string = PUBLIC_BUCKET) {
 
         // Register with image API for short URL and tracking
         const sessionToken = getSessionToken();
+        const headers: Record<string, string> = {
+          'Content-Type': 'application/json',
+          'X-Session-Token': sessionToken,
+        };
+        // Include auth token if logged in
+        const accessToken = client.accessToken;
+        if (accessToken) {
+          headers['Authorization'] = `Bearer ${accessToken}`;
+        }
         const apiResponse = await fetch('/api/images', {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'X-Session-Token': sessionToken,
-          },
+          headers,
           body: JSON.stringify({
             bucket,
             path,
@@ -142,11 +184,16 @@ export function useImages(bucket: string = PUBLIC_BUCKET) {
         // If we have a short code, delete via the image API (handles session auth)
         if (image.shortCode) {
           const sessionToken = getSessionToken();
+          const headers: Record<string, string> = {
+            'X-Session-Token': sessionToken,
+          };
+          const accessToken = client.accessToken;
+          if (accessToken) {
+            headers['Authorization'] = `Bearer ${accessToken}`;
+          }
           const apiResponse = await fetch(`/api/images/${image.shortCode}`, {
             method: 'DELETE',
-            headers: {
-              'X-Session-Token': sessionToken,
-            },
+            headers,
           });
 
           if (!apiResponse.ok) {