feat: use portainer hook instead of pushing image to gitea package repository

app/pages/dashboard.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { LazyLinkModal, LazyConfirmModal } from "#components";
+import { LazyLinkModal, LazyConfirmModal, LazyRenameFileModal } from "#components";
 
 definePageMeta({ middleware: "auth" });
 
 const toast = useToast();
 const overlay = useOverlay();
+const fileInput = ref<HTMLInputElement | null>(null);
 
 const { fetch: fetchSession } = useUserSession();
 
@@ -14,10 +15,13 @@ const signOut = async () => {
   await navigateTo("/auth/sign-in");
 };
 
-const { data: links, status, refresh } = useLazyFetch("/api/links", { key: "links", server: false, });
+const { data: links, status: linksStatus, refresh: refreshLinks } = useLazyFetch("/api/links", { key: "links", server: false });
+const { data: files, status: filesStatus, refresh: refreshFiles } = useLazyFetch("/api/files", { key: "files", server: false });
 
 const route = useRoute();
+const section = computed(() => route.query.section === "files" ? "files" : "links");
 const category = computed(() => {
+  if (section.value !== "links") return "all";
   if (route.query.filter === "active") return "active";
   if (route.query.filter === "disabled") return "disabled";
   return "all";
@@ -28,7 +32,9 @@ const categoryTitle = computed(() => {
   if (category.value === "disabled") return "Disabled links";
   return "All links";
 });
-useHead({ title: categoryTitle });
+
+const pageTitle = computed(() => section.value === "files" ? "Files" : categoryTitle.value);
+useHead({ title: pageTitle });
 
 const filteredLinks = computed(() => {
   if (!links.value) return [];
@@ -37,11 +43,12 @@ const filteredLinks = computed(() => {
   return links.value;
 });
 
+// Link actions
 const openModal = async (link: Link | null) => {
   const modal = overlay.create(LazyLinkModal, { destroyOnClose: true });
   const instance = modal.open({ link });
-  if (await instance.result) await refresh();
-}
+  if (await instance.result) await refreshLinks();
+};
 
 const deleteLink = async (link: Link) => {
   const modal = overlay.create(LazyConfirmModal, { destroyOnClose: true });
@@ -51,12 +58,55 @@ const deleteLink = async (link: Link) => {
   try {
     await $fetch(`/api/links/${link.id}`, { method: "DELETE" });
     toast.add({ title: "Link deleted", color: "success" });
-    await refresh();
+    await refreshLinks();
   } catch (error) {
     toast.add({ title: getApiError(error), color: "error" });
   }
 };
 
+// File actions
+const uploading = ref(false);
+
+const handleUpload = async (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  if (!input.files || input.files.length === 0) return;
+
+  uploading.value = true;
+  try {
+    for (const file of Array.from(input.files)) {
+      const form = new FormData();
+      form.append("file", file);
+      await $fetch("/api/files", { method: "POST", body: form });
+    }
+    toast.add({ title: `${input.files.length === 1 ? "File" : "Files"} uploaded`, color: "success" });
+    await refreshFiles();
+  } catch (error) {
+    toast.add({ title: getApiError(error), color: "error" });
+  } finally {
+    uploading.value = false;
+    input.value = "";
+  }
+};
+
+const renameFile = async (file: FileEntry) => {
+  const modal = overlay.create(LazyRenameFileModal, { destroyOnClose: true });
+  const instance = modal.open({ filename: file.name });
+  if (await instance.result) await refreshFiles();
+};
+
+const deleteFile = async (file: FileEntry) => {
+  const modal = overlay.create(LazyConfirmModal, { destroyOnClose: true });
+  const instance = modal.open({ title: "Delete file", description: `Are you sure you want to delete "${file.name}"?` });
+  if (!await instance.result) return;
+
+  try {
+    await $fetch(`/api/files/${encodeURIComponent(file.name)}`, { method: "DELETE" });
+    toast.add({ title: "File deleted", color: "success" });
+    await refreshFiles();
+  } catch (error) {
+    toast.add({ title: getApiError(error), color: "error" });
+  }
+};
 </script>
 
 <template>
@@ -66,42 +116,60 @@ const deleteLink = async (link: Link) => {
         <span class="font-semibold text-highlighted text-lg">pihka.al</span>
       </template>
 
-      <UNavigationMenu
-        orientation="vertical"
-        highlight
-        :items="[
-          {
-            label: 'All',
-            icon: 'i-lucide-link',
-            badge: links?.length ?? 0,
-            to: '/dashboard',
-            active: category === 'all',
-          },
-          {
-            label: 'Active',
-            icon: 'i-lucide-link-2',
-            badge: links?.filter((l) => !l.disabled).length ?? 0,
-            to: '/dashboard?filter=active',
-            active: category === 'active',
-          },
-          {
-            label: 'Disabled',
-            icon: 'i-lucide-link-2-off',
-            badge: links?.filter((l) => l.disabled).length ?? 0,
-            to: '/dashboard?filter=disabled',
-            active: category === 'disabled',
-          },
-        ]"
-        class="px-2"
-      />
+      <div class="px-2 space-y-2">
+        <UNavigationMenu
+          orientation="vertical"
+          highlight
+          :items="[
+            {
+              label: 'All',
+              icon: 'i-lucide-link',
+              badge: links?.length ?? 0,
+              to: '/dashboard',
+              active: section === 'links' && category === 'all',
+            },
+            {
+              label: 'Active',
+              icon: 'i-lucide-link-2',
+              badge: links?.filter((l) => !l.disabled).length ?? 0,
+              to: '/dashboard?filter=active',
+              active: section === 'links' && category === 'active',
+            },
+            {
+              label: 'Disabled',
+              icon: 'i-lucide-link-2-off',
+              badge: links?.filter((l) => l.disabled).length ?? 0,
+              to: '/dashboard?filter=disabled',
+              active: section === 'links' && category === 'disabled',
+            },
+          ]"
+        />
+
+        <USeparator />
+
+        <UNavigationMenu
+          orientation="vertical"
+          highlight
+          :items="[
+            {
+              label: 'Files',
+              icon: 'i-lucide-folder',
+              badge: files?.length ?? 0,
+              to: '/dashboard?section=files',
+              active: section === 'files',
+            },
+          ]"
+        />
+      </div>
+
       <template #footer>
         <UButton variant="link" icon="i-lucide-log-out" block @click="signOut">Sign out</UButton>
       </template>
     </UDashboardSidebar>
 
-    <UDashboardPanel>
+    <UDashboardPanel v-if="section === 'links'">
       <template #header>
-        <UDashboardNavbar :title="category === 'all' ? 'All links' : category === 'active' ? 'Active links' : 'Disabled links'">
+        <UDashboardNavbar :title="categoryTitle">
           <template #right>
             <UButton icon="i-lucide-plus" variant="subtle" @click="openModal(null)">New link</UButton>
           </template>
@@ -111,11 +179,31 @@ const deleteLink = async (link: Link) => {
       <template #body>
         <LinksTable
           :data="filteredLinks"
-          :status="status"
+          :status="linksStatus"
           @edit="openModal"
           @delete="deleteLink"
         />
       </template>
     </UDashboardPanel>
+
+    <UDashboardPanel v-else>
+      <template #header>
+        <UDashboardNavbar title="Files">
+          <template #right>
+            <input ref="fileInput" type="file" class="hidden" multiple @change="handleUpload" />
+            <UButton icon="i-lucide-upload" variant="subtle" :loading="uploading" @click="(fileInput as HTMLInputElement)?.click()">Upload</UButton>
+          </template>
+        </UDashboardNavbar>
+      </template>
+
+      <template #body>
+        <FilesTable
+          :data="files ?? []"
+          :status="filesStatus"
+          @rename="renameFile"
+          @delete="deleteFile"
+        />
+      </template>
+    </UDashboardPanel>
   </UDashboardGroup>
 </template>