qarpeo 0.0.0-alpha.10

package/dist/runtime/app/pages/devtools/blob.vue

@@ -0,0 +1,745 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue"
+
+definePageMeta({ layout: false })
+
+const route = useRoute()
+
+const {
+  data: blobData,
+  status: blobStatus,
+  pending: blobPending,
+  execute: executeLoadBlob,
+} = useFetch<any>("/_qarpeo/api/blob/files", {
+  immediate: false,
+  lazy: true,
+  default: () => ({ files: [] }),
+})
+
+const blobLoading = computed(
+  () => blobPending.value || blobStatus.value === "idle" || blobStatus.value === "pending",
+)
+
+const blobFiles = computed(() => blobData.value?.files || [])
+const blobSearch = ref("")
+const filterType = ref<"all" | "images" | "documents" | "other">("all")
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const uploadingBlob = ref(false)
+const deletingBlob = ref(false)
+const showDeleteBlobModal = ref(false)
+const isDragging = ref(false)
+const copiedUrl = ref(false)
+const copiedKey = ref(false)
+
+const textContent = ref<string | null>(null)
+const textLoading = ref(false)
+const failedImages = ref<Record<string, boolean>>({})
+
+function onImageError(key: string) {
+  failedImages.value[key] = true
+}
+
+// selectedKey is derived from / synced to the ?key= query param
+const selectedKey = computed({
+  get: () => (route.query.key as string) || null,
+  set: (key: string | null) => {
+    navigateTo({ query: { ...route.query, key: key ?? undefined } })
+  },
+})
+
+const selectedBlob = computed(
+  () => blobFiles.value.find((f) => f.key === selectedKey.value) || null,
+)
+
+const isSlideoverOpen = computed({
+  get: () => Boolean(selectedBlob.value),
+  set: (val: boolean) => {
+    if (!val) {
+      selectedKey.value = null
+    }
+  },
+})
+
+function fmtBytes(bytes: number) {
+  if (!bytes) return "0 B"
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+}
+
+function fmtDate(iso?: string) {
+  if (!iso) return "—"
+  return new Date(iso).toLocaleDateString()
+}
+
+function fmtFullDate(iso?: string) {
+  if (!iso) return "—"
+  return new Date(iso).toLocaleString()
+}
+
+function getBlobIcon(contentType?: string): string {
+  if (contentType?.startsWith("image/")) return "i-lucide-image"
+  if (contentType?.startsWith("audio/")) return "i-lucide-music"
+  if (contentType?.startsWith("video/")) return "i-lucide-video"
+  if (
+    contentType?.includes("pdf") ||
+    contentType?.includes("document") ||
+    contentType?.includes("sheet")
+  ) {
+    return "i-lucide-file-text"
+  }
+  if (
+    contentType?.includes("json") ||
+    contentType?.includes("javascript") ||
+    contentType?.includes("text/")
+  ) {
+    return "i-lucide-file-code"
+  }
+  return "i-lucide-file"
+}
+
+function isImage(ct?: string) {
+  return Boolean(ct?.startsWith("image/"))
+}
+
+function isAudio(ct?: string) {
+  return Boolean(ct?.startsWith("audio/"))
+}
+
+function isVideo(ct?: string) {
+  return Boolean(ct?.startsWith("video/"))
+}
+
+function isTextOrJson(ct?: string) {
+  if (!ct) return false
+  return ct.startsWith("text/") || ct.includes("json") || ct.includes("javascript")
+}
+
+const counts = computed(() => {
+  let images = 0
+  let docs = 0
+  let other = 0
+  for (const f of blobFiles.value) {
+    if (isImage(f.contentType)) {
+      images++
+    } else if (
+      f.contentType?.includes("pdf") ||
+      f.contentType?.includes("text/") ||
+      f.contentType?.includes("json")
+    ) {
+      docs++
+    } else {
+      other++
+    }
+  }
+  return { all: blobFiles.value.length, images, docs, other }
+})
+
+const filteredFiles = computed(() => {
+  let list = blobFiles.value
+
+  if (filterType.value === "images") {
+    list = list.filter((f) => isImage(f.contentType))
+  } else if (filterType.value === "documents") {
+    list = list.filter(
+      (f) =>
+        !isImage(f.contentType) &&
+        (f.contentType?.includes("pdf") ||
+          f.contentType?.includes("text/") ||
+          f.contentType?.includes("json")),
+    )
+  } else if (filterType.value === "other") {
+    list = list.filter(
+      (f) =>
+        !isImage(f.contentType) &&
+        !f.contentType?.includes("pdf") &&
+        !f.contentType?.includes("text/") &&
+        !f.contentType?.includes("json"),
+    )
+  }
+
+  if (blobSearch.value.trim()) {
+    const q = blobSearch.value.toLowerCase()
+    list = list.filter((f) => f.key.toLowerCase().includes(q))
+  }
+
+  return list
+})
+
+async function loadBlob() {
+  await executeLoadBlob()
+}
+
+// Fetch text preview whenever a text/json file is selected in slideover
+watch(
+  selectedKey,
+  async (key) => {
+    textContent.value = null
+    if (!key) return
+    const file = blobFiles.value.find((f) => f.key === key)
+    if (file && isTextOrJson(file.contentType)) {
+      textLoading.value = true
+      try {
+        textContent.value = await $fetch<string>(`/api/storage/file/${key}`, {
+          responseType: "text",
+        })
+      } catch {
+        textContent.value = "(Unable to load preview)"
+      } finally {
+        textLoading.value = false
+      }
+    }
+  },
+  { immediate: true },
+)
+
+function selectFile(file: any) {
+  selectedKey.value = file.key
+}
+
+async function uploadFileObject(file: File) {
+  uploadingBlob.value = true
+  try {
+    const formData = new FormData()
+    formData.append("file", file)
+    const uploaded = await $fetch<any>("/api/storage/upload", {
+      method: "POST",
+      body: formData,
+    })
+    await loadBlob()
+    const newKey = uploaded?.key || uploaded?.files?.[0]?.key || file.name
+    selectedKey.value = newKey
+  } catch (err) {
+    console.error("Upload failed", err)
+  } finally {
+    uploadingBlob.value = false
+  }
+}
+
+async function handleBlobUpload(e: Event) {
+  const target = e.target as HTMLInputElement
+  const file = target?.files?.[0]
+  if (!file) return
+  await uploadFileObject(file)
+  if (target) target.value = ""
+}
+
+async function handleDrop(e: DragEvent) {
+  isDragging.value = false
+  const files = e.dataTransfer?.files
+  if (!files || files.length === 0) return
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i]
+    if (file) {
+      await uploadFileObject(file)
+    }
+  }
+}
+
+async function deleteBlobFile(key?: string) {
+  if (!key) return
+  deletingBlob.value = true
+  try {
+    await $fetch(`/api/storage/file/${key}`, {
+      method: "DELETE",
+    }).catch(() => {})
+    showDeleteBlobModal.value = false
+    selectedKey.value = null
+    await loadBlob()
+  } finally {
+    deletingBlob.value = false
+  }
+}
+
+function copyBlobUrl(key?: string) {
+  if (!key) return
+  if (typeof window !== "undefined") {
+    const url = `${window.location.origin}/api/storage/file/${key}`
+    navigator.clipboard?.writeText(url)
+    copiedUrl.value = true
+    setTimeout(() => {
+      copiedUrl.value = false
+    }, 1500)
+  }
+}
+
+function copyBlobKey(key?: string) {
+  if (!key) return
+  if (typeof navigator !== "undefined") {
+    navigator.clipboard?.writeText(key)
+    copiedKey.value = true
+    setTimeout(() => {
+      copiedKey.value = false
+    }, 1500)
+  }
+}
+
+onMounted(() => {
+  loadBlob()
+})
+</script>
+
+<template>
+  <UDashboardPanel id="devtools-blob">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-box" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">Blob Storage</span>
+            <UBadge size="xs" color="neutral" variant="subtle">R2</UBadge>
+            <UBadge size="xs" color="neutral" variant="subtle">
+              {{ filteredFiles.length }}
+            </UBadge>
+          </div>
+        </template>
+
+        <template #right>
+          <div class="flex items-center gap-1.5">
+            <input ref="fileInputRef" type="file" class="hidden" @change="handleBlobUpload" />
+            <UButton
+              icon="i-lucide-upload"
+              label="Upload File"
+              size="xs"
+              color="primary"
+              :loading="uploadingBlob"
+              @click="fileInputRef?.click()"
+            />
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh files"
+              :loading="blobLoading"
+              @click="loadBlob"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+
+      <!-- Media Filter Toolbar -->
+      <UDashboardToolbar>
+        <!-- Type Filter Segmented Buttons -->
+        <div class="flex items-center gap-1 bg-muted p-0.5 rounded border border-default">
+          <UButton
+            label="All"
+            size="xs"
+            :color="filterType === 'all' ? 'primary' : 'neutral'"
+            :variant="filterType === 'all' ? 'subtle' : 'ghost'"
+            @click="filterType = 'all'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="filterType === 'all' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                {{ counts.all }}
+              </UBadge>
+            </template>
+          </UButton>
+
+          <UButton
+            label="Images"
+            icon="i-lucide-image"
+            size="xs"
+            :color="filterType === 'images' ? 'primary' : 'neutral'"
+            :variant="filterType === 'images' ? 'subtle' : 'ghost'"
+            @click="filterType = 'images'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="filterType === 'images' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                {{ counts.images }}
+              </UBadge>
+            </template>
+          </UButton>
+
+          <UButton
+            label="Documents"
+            icon="i-lucide-file-text"
+            size="xs"
+            :color="filterType === 'documents' ? 'primary' : 'neutral'"
+            :variant="filterType === 'documents' ? 'subtle' : 'ghost'"
+            @click="filterType = 'documents'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="filterType === 'documents' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                {{ counts.docs }}
+              </UBadge>
+            </template>
+          </UButton>
+
+          <UButton
+            label="Other"
+            size="xs"
+            :color="filterType === 'other' ? 'primary' : 'neutral'"
+            :variant="filterType === 'other' ? 'subtle' : 'ghost'"
+            @click="filterType = 'other'"
+          >
+            <template #trailing>
+              <UBadge
+                size="xs"
+                :color="filterType === 'other' ? 'primary' : 'neutral'"
+                variant="subtle"
+              >
+                {{ counts.other }}
+              </UBadge>
+            </template>
+          </UButton>
+        </div>
+
+        <!-- Search Input -->
+        <div class="flex items-center gap-2 max-w-xs flex-1">
+          <UInput
+            v-model="blobSearch"
+            icon="i-lucide-search"
+            placeholder="Search files by key…"
+            class="w-full"
+          />
+        </div>
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div
+        class="space-y-4 min-h-[400px]"
+        @dragover.prevent="isDragging = true"
+        @dragleave.prevent="isDragging = false"
+        @drop.prevent="handleDrop"
+      >
+        <!-- Drag & Drop Active Overlay -->
+        <div
+          v-if="isDragging"
+          class="border-2 border-dashed border-primary rounded-xl p-8 flex flex-col items-center justify-center text-primary bg-primary/10 animate-pulse text-center"
+        >
+          <UIcon name="i-lucide-upload-cloud" class="w-10 h-10 mb-2" />
+          <span class="text-sm font-bold">Drop files here to upload</span>
+          <span class="text-xs text-muted"
+            >Files will be uploaded directly to Cloudflare R2 storage</span
+          >
+        </div>
+        <!-- Loading Skeleton Grid -->
+        <div
+          v-if="blobLoading"
+          class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"
+        >
+          <div
+            v-for="i in 12"
+            :key="i"
+            class="bg-elevated/40 border border-default rounded-xl overflow-hidden flex flex-col animate-pulse"
+          >
+            <div class="aspect-square bg-muted/60"></div>
+            <div class="p-2.5 space-y-2">
+              <div class="h-3 w-3/4 rounded bg-muted"></div>
+              <div class="h-2 w-1/2 rounded bg-muted"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Visual Media Grid -->
+        <div
+          v-else-if="filteredFiles.length"
+          class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"
+        >
+          <div
+            v-for="file in filteredFiles"
+            :key="file.key"
+            class="group relative bg-elevated/40 hover:bg-elevated border border-default hover:border-primary/50 rounded-xl cursor-pointer transition-all duration-200 flex flex-col shadow-xs"
+            @click="selectFile(file)"
+          >
+            <!-- Thumbnail preview area -->
+            <div
+              class="aspect-square bg-muted/20 flex items-center justify-center border-b border-default relative"
+            >
+              <img
+                v-if="isImage(file.contentType) && !failedImages[file.key]"
+                :src="'/api/storage/file/' + file.key"
+                :alt="file.key"
+                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                loading="lazy"
+                @error="onImageError(file.key)"
+              />
+              <div v-else class="flex flex-col items-center justify-center p-4 text-center">
+                <UIcon
+                  :name="getBlobIcon(file.contentType)"
+                  class="w-10 h-10 text-primary/70 mb-2 group-hover:scale-110 transition-transform"
+                />
+                <span class="text-[10px] font-mono text-muted uppercase">
+                  {{ file.contentType?.split("/")[1] || "file" }}
+                </span>
+              </div>
+
+              <!-- Hover overlay badge -->
+              <div
+                class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+              >
+                <UBadge size="xs" color="primary" variant="solid">View Details</UBadge>
+              </div>
+            </div>
+
+            <!-- Metadata Caption -->
+            <div class="p-2.5 flex flex-col justify-between flex-1">
+              <div
+                class="font-mono text-xs font-semibold text-highlighted truncate"
+                :title="file.key"
+              >
+                {{ file.key }}
+              </div>
+              <div class="flex items-center justify-between text-[11px] text-muted mt-1 font-mono">
+                <span>{{ fmtBytes(file.size) }}</span>
+                <span>{{ fmtDate(file.uploaded) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else class="flex flex-col items-center justify-center py-20 text-center space-y-3">
+          <div
+            class="w-12 h-12 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center text-primary"
+          >
+            <UIcon name="i-lucide-box" class="w-6 h-6" />
+          </div>
+          <div class="font-bold text-sm text-highlighted">No files found</div>
+          <p class="text-xs text-muted max-w-sm">
+            Upload images, documents, or data files to store them directly in your Cloudflare R2
+            bucket.
+          </p>
+          <UButton
+            label="Upload First File"
+            icon="i-lucide-upload"
+            size="sm"
+            color="primary"
+            @click="fileInputRef?.click()"
+          />
+        </div>
+      </div>
+    </template>
+  </UDashboardPanel>
+  <!-- ── Right Side Slideover for File Details & Live Preview ─────────── -->
+  <USlideover v-model:open="isSlideoverOpen" side="right" :title="selectedBlob?.key">
+    <template #title>
+      <div class="flex items-center gap-2 min-w-0 pr-4">
+        <UIcon
+          :name="getBlobIcon(selectedBlob?.contentType)"
+          class="w-5 h-5 text-primary shrink-0"
+        />
+        <span
+          class="font-mono font-bold text-sm text-highlighted truncate"
+          :title="selectedBlob?.key"
+        >
+          {{ selectedBlob?.key }}
+        </span>
+      </div>
+    </template>
+
+    <template #body>
+      <div v-if="selectedBlob" class="space-y-6">
+        <!-- Live Media Preview Box -->
+        <div
+          class="bg-muted/30 border border-default rounded-xl flex items-center justify-center p-4 min-h-[220px]"
+        >
+          <!-- Image -->
+          <div
+            v-if="isImage(selectedBlob.contentType)"
+            class="w-full flex items-center justify-center"
+          >
+            <img
+              v-if="!failedImages[selectedBlob.key]"
+              :src="'/api/storage/file/' + selectedBlob.key"
+              :alt="selectedBlob.key"
+              class="max-h-[320px] max-w-full object-contain rounded-lg shadow-xs"
+              @error="onImageError(selectedBlob.key)"
+            />
+            <div v-else class="text-center py-8 text-muted">
+              <UIcon name="i-lucide-image" class="w-12 h-12 opacity-40 mx-auto mb-2 text-primary" />
+              <div class="text-xs">Preview placeholder</div>
+            </div>
+          </div>
+
+          <!-- Audio -->
+          <div v-else-if="isAudio(selectedBlob.contentType)" class="w-full p-2 text-center">
+            <audio controls :src="'/api/storage/file/' + selectedBlob.key" class="w-full" />
+          </div>
+
+          <!-- Video -->
+          <div v-else-if="isVideo(selectedBlob.contentType)" class="w-full text-center">
+            <video
+              controls
+              :src="'/api/storage/file/' + selectedBlob.key"
+              class="w-full rounded-lg max-h-[300px]"
+            />
+          </div>
+
+          <!-- Text / Code / JSON -->
+          <div v-else-if="isTextOrJson(selectedBlob.contentType)" class="w-full">
+            <div v-if="textLoading" class="text-xs text-muted text-center py-8">
+              Loading text preview…
+            </div>
+            <pre
+              v-else
+              class="font-mono text-xs text-default bg-muted/40 p-3 rounded-md border border-default overflow-auto max-h-[300px] whitespace-pre-wrap break-all"
+              >{{ textContent || "(empty file)" }}</pre>
+          </div>
+
+          <!-- Generic Document / File -->
+          <div v-else class="text-center py-8 space-y-2 text-muted">
+            <UIcon
+              :name="getBlobIcon(selectedBlob.contentType)"
+              class="w-16 h-16 opacity-40 mx-auto"
+            />
+            <div class="text-xs">Preview not supported for this file format</div>
+          </div>
+        </div>
+
+        <!-- File Metadata List -->
+        <div class="space-y-3">
+          <div class="text-xs font-semibold uppercase tracking-wider text-muted">File Metadata</div>
+
+          <div
+            class="divide-y divide-default rounded-lg border border-default bg-elevated/40 text-xs font-mono"
+          >
+            <div class="flex items-center justify-between p-3">
+              <span class="text-muted">Storage Key</span>
+              <div class="flex items-center gap-1.5 min-w-0 ml-2">
+                <span class="text-highlighted font-bold truncate">{{ selectedBlob.key }}</span>
+                <UButton
+                  type="button"
+                  :icon="copiedKey ? 'i-lucide-check' : 'i-lucide-copy'"
+                  :color="copiedKey ? 'success' : 'neutral'"
+                  variant="ghost"
+                  size="xs"
+                  :title="copiedKey ? 'Copied!' : 'Copy key'"
+                  class="shrink-0"
+                  @click="copyBlobKey(selectedBlob.key)"
+                />
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between p-3">
+              <span class="text-muted">Content-Type</span>
+              <span class="text-default font-semibold">{{ selectedBlob.contentType }}</span>
+            </div>
+
+            <div class="flex items-center justify-between p-3">
+              <span class="text-muted">File Size</span>
+              <span class="text-default">{{ fmtBytes(selectedBlob.size) }}</span>
+            </div>
+
+            <div class="flex items-center justify-between p-3">
+              <span class="text-muted">Uploaded</span>
+              <span class="text-default">{{ fmtFullDate(selectedBlob.uploaded) }}</span>
+            </div>
+
+            <div class="flex items-start justify-between p-3 gap-2">
+              <span class="text-muted shrink-0">Public URL</span>
+              <div class="flex items-center gap-1.5 min-w-0">
+                <span class="text-primary truncate font-mono text-[11px]">
+                  /api/storage/file/{{ selectedBlob.key }}
+                </span>
+                <UButton
+                  type="button"
+                  :icon="copiedUrl ? 'i-lucide-check' : 'i-lucide-copy'"
+                  :color="copiedUrl ? 'success' : 'neutral'"
+                  variant="ghost"
+                  size="xs"
+                  :title="copiedUrl ? 'Copied URL!' : 'Copy URL'"
+                  class="shrink-0"
+                  @click="copyBlobUrl(selectedBlob.key)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div v-if="selectedBlob" class="flex items-center justify-between w-full gap-2">
+        <div class="flex items-center gap-1.5">
+          <UButton
+            :label="copiedUrl ? 'Copied!' : 'Copy URL'"
+            :icon="copiedUrl ? 'i-lucide-check' : 'i-lucide-link'"
+            size="xs"
+            :color="copiedUrl ? 'success' : 'neutral'"
+            variant="subtle"
+            @click="copyBlobUrl(selectedBlob.key)"
+          />
+          <UButton
+            label="Download"
+            icon="i-lucide-download"
+            size="xs"
+            color="neutral"
+            variant="subtle"
+            :to="'/api/storage/file/' + selectedBlob.key"
+            target="_blank"
+            download
+          />
+        </div>
+        <UButton
+          label="Delete"
+          icon="i-lucide-trash"
+          size="xs"
+          color="error"
+          variant="subtle"
+          @click="showDeleteBlobModal = true"
+        />
+      </div>
+    </template>
+  </USlideover>
+
+  <!-- Delete File Confirmation Modal -->
+  <UModal v-model:open="showDeleteBlobModal" title="Delete Storage File">
+    <template #body>
+      <div class="space-y-3">
+        <p class="text-xs text-default">
+          Are you sure you want to permanently delete
+          <span class="font-mono font-bold text-highlighted">{{ selectedBlob?.key }}</span
+          >?
+        </p>
+        <div class="bg-elevated/40 border border-default rounded-lg p-2.5 text-xs space-y-1">
+          <div class="flex justify-between text-muted">
+            <span>Size:</span>
+            <span class="text-default font-mono">{{ fmtBytes(selectedBlob?.size || 0) }}</span>
+          </div>
+          <div class="flex justify-between text-muted">
+            <span>Type:</span>
+            <span class="text-default font-mono">{{ selectedBlob?.contentType }}</span>
+          </div>
+        </div>
+        <p class="text-xs text-muted">
+          This object will be deleted from your Cloudflare R2 bucket. Public or signed links to this
+          file will immediately return 404 Not Found.
+        </p>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          @click="showDeleteBlobModal = false"
+        />
+        <UButton
+          label="Confirm Delete"
+          color="error"
+          size="xs"
+          icon="i-lucide-trash"
+          :loading="deletingBlob"
+          @click="deleteBlobFile(selectedBlob?.key)"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>