Fix stuff

frontend/src/stores/layout.ts

@@ -8,7 +8,7 @@ export const useLayoutStore = defineStore("layout", {
     loading: boolean;
     show: string | null | boolean;
     showConfirm: any;
-    showAction: boolean | null;
+    showAction: PopupAction | null;
     showShell: boolean | null;
   } => ({
     loading: false,
@@ -25,7 +25,7 @@ export const useLayoutStore = defineStore("layout", {
     toggleShell() {
       this.showShell = !this.showShell;
     },
-    showHover(value: LayoutValue | string) {
+    showHover(value: PopupProps | string) {
       if (typeof value !== "object") {
         this.show = value;
         return;

frontend/src/types/common.d.ts

@@ -1,4 +0,0 @@
-interface Sorting {
-  by: string;
-  asc: boolean;
-}

frontend/src/types/file.d.ts

@@ -23,8 +23,10 @@ interface Resource extends ResourceBase {
   content?: string;
 }
 
-// interface ResourceItem extends ResourceBase {
-// }
+interface ResourceItem extends ResourceBase {
+  index?: number;
+  subtitles?: string[];
+}
 
 type ResourceType =
   | "video"

frontend/src/types/global.d.ts

@@ -5,4 +5,9 @@ declare global {
     FileBrowser: any;
     grecaptcha: any;
   }
+
+  interface HTMLElement {
+    // TODO: no idea what the exact type is
+    __vue__: any;
+  }
 }

frontend/src/types/layout.d.ts

@@ -1,5 +1,7 @@
-interface LayoutValue {
+interface PopupProps {
   prompt: string;
   confirm: any;
-  action?: boolean;
+  action?: PopupAction;
 }
+
+type PopupAction = (e: Event) => void;

frontend/src/types/settings.d.ts

@@ -13,7 +13,7 @@ interface ISettings {
 interface SettingsDefaults {
   scope: string;
   locale: string;
-  viewMode: string;
+  viewMode: ViewModeType;
   singleClick: boolean;
   sorting: Sorting;
   perm: Permissions;

frontend/src/types/upload.d.ts

@@ -19,10 +19,10 @@ interface UploadItem {
 }
 
 interface UploadEntry {
-  fullPath: string;
-  isDir: boolean;
   name: string;
   size: number;
+  isDir: boolean;
+  fullPath?: string;
   file?: File;
 }
 

frontend/src/types/user.d.ts

@@ -11,13 +11,12 @@ interface IUser {
   hideDotfiles: boolean;
   singleClick: boolean;
   dateFormat: boolean;
-  viewMode: "list" | "mosaic" | "mosaic gallery";
-  sorting?: {
-    by: string,
-    asc: boolean
-  }
+  viewMode: ViewModeType;
+  sorting?: Sorting;
 }
 
+type ViewModeType = "list" | "mosaic" | "mosaic gallery";
+
 interface IUserForm {
   id?: number;
   username?: string;
@@ -48,7 +47,7 @@ interface Permissions {
   upload: boolean;
 }
 
-interface UserSorting {
+interface Sorting {
   by: string;
   asc: boolean;
 }

frontend/src/utils/upload.ts

@@ -1,7 +1,10 @@
 import { useUploadStore } from "@/stores/upload";
 import url from "@/utils/url";
 
-export function checkConflict(files: UploadList, dest: Resource[]): boolean {
+export function checkConflict(
+  files: UploadList,
+  dest: ResourceItem[]
+): boolean {
   if (typeof dest === "undefined" || dest === null) {
     dest = [];
   }

frontend/src/views/files/FileListing.vue

@@ -303,6 +303,7 @@ import {
 } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
 
 const showLimit = ref<number>(50);
 const columnWidth = ref<number>(280);
@@ -317,6 +318,8 @@ const authStore = useAuthStore();
 const fileStore = useFileStore();
 const layoutStore = useLayoutStore();
 
+const { req } = storeToRefs(fileStore);
+
 const route = useRoute();
 
 const { t } = useI18n();
@@ -428,9 +431,7 @@ const isMobile = computed(() => {
   return width.value <= 736;
 });
 
-// @ts-ignore
-// TODO
-watch(fileStore.req, () => {
+watch(req, () => {
   // Reset the show value
   showLimit.value = 50;
 
@@ -725,7 +726,6 @@ const drop = async (event: DragEvent) => {
   ) {
     // Get url from ListingItem instance
     // TODO: Don't know what is happening here
-    // @ts-ignore
     path = el.__vue__.url;
 
     try {
@@ -740,8 +740,6 @@ const drop = async (event: DragEvent) => {
   if (conflict) {
     layoutStore.showHover({
       prompt: "replace",
-      // TODO: don't know yet
-      // @ts-ignore
       action: (event: Event) => {
         event.preventDefault();
         layoutStore.closeHovers();
@@ -766,53 +764,50 @@ const uploadInput = (event: Event) => {
   let files = (event.currentTarget as HTMLInputElement)?.files;
   if (files === null) return;
 
-  let folder_upload =
-    files[0].webkitRelativePath !== undefined &&
-    files[0].webkitRelativePath !== "";
+  let folder_upload = !files[0].webkitRelativePath;
 
-  if (folder_upload) {
-    for (let i = 0; i < files.length; i++) {
-      let file = files[i];
-      // @ts-ignore
-      files[i].fullPath = file.webkitRelativePath;
-    }
+  const uploadFiles: UploadList = [];
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    const fullPath = folder_upload ? file.webkitRelativePath : undefined;
+    uploadFiles.push({
+      file,
+      name: file.name,
+      size: file.size,
+      isDir: false,
+      fullPath,
+    });
   }
 
   let path = route.path.endsWith("/") ? route.path : route.path + "/";
-  // @ts-ignore
-  let conflict = upload.checkConflict(files, fileStore.req.items);
+  let conflict = upload.checkConflict(uploadFiles, fileStore.req!.items);
 
   if (conflict) {
     layoutStore.showHover({
       prompt: "replace",
-      // @ts-ignore
       action: (event: Event) => {
         event.preventDefault();
         layoutStore.closeHovers();
-        // @ts-ignore
-        upload.handleFiles(files, path, false);
+        upload.handleFiles(uploadFiles, path, false);
       },
       confirm: (event: Event) => {
         event.preventDefault();
         layoutStore.closeHovers();
-        // @ts-ignore
-        upload.handleFiles(files, path, true);
+        upload.handleFiles(uploadFiles, path, true);
       },
     });
 
     return;
   }
 
-  // @ts-ignore
-  upload.handleFiles(files, path);
+  upload.handleFiles(uploadFiles, path);
 };
 
 const resetOpacity = () => {
   let items = document.getElementsByClassName("item");
 
-  // @ts-ignore
-  Array.from(items).forEach((file: HTMLElement) => {
-    file.style.opacity = "1";
+  Array.from(items).forEach((file: Element) => {
+    (file as HTMLElement).style.opacity = "1";
   });
 };
 

frontend/src/views/files/Preview.vue

@@ -164,7 +164,7 @@ const mediaTypes: ResourceType[] = ["image", "video", "audio", "blob"];
 
 const previousLink = ref<string>("");
 const nextLink = ref<string>("");
-const listing = ref<null | Resource[]>(null);
+const listing = ref<ResourceItem[] | null>(null);
 const name = ref<string>("");
 const fullSize = ref<boolean>(false);
 const showNav = ref<boolean>(true);
@@ -318,7 +318,7 @@ const updatePreview = async () => {
   }
 };
 
-const prefetchUrl = (item: Resource) => {
+const prefetchUrl = (item: ResourceItem) => {
   if (item.type !== "image") {
     return "";
   }