Fix #8

frontend/pages/files/index.vue

@@ -1,47 +1,28 @@
 <script setup>
-
-
-import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
+import { ref, computed, watch } from 'vue';
 import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";
 import DocumentUploadModal from "~/components/DocumentUploadModal.vue";
 import dayjs from "dayjs";
 import arraySort from "array-sort";
 
-
-
+// --- Shortcuts ---
 defineShortcuts({
-  '+': () => {
-    //Hochladen
-    uploadModalOpen.value = true
-  },
+  '/': () => document.getElementById("searchinput").focus(),
+  '+': () => { uploadModalOpen.value = true },
   'Enter': {
     usingInput: true,
     handler: () => {
-      let entry = renderedFileList.value[selectedFileIndex.value]
-
-      if(entry.type === "file") {
-        showFile(entry.id)
-      } else if(createFolderModalOpen.value === false && entry.type === "folder") {
-        changeFolder(currentFolders.value.find(i => i.id === entry.id))
-      } else if(createFolderModalOpen.value === true) {
-        createFolder()
-      }
-
+      const entry = renderedFileList.value[selectedFileIndex.value]
+      if (!entry) return
+      if (entry.type === "file") showFile(entry.id)
+      else if (entry.type === "folder") changeFolder(folders.value.find(i => i.id === entry.id))
     }
   },
   'arrowdown': () => {
-    if(selectedFileIndex.value < renderedFileList.value.length - 1) {
-      selectedFileIndex.value += 1
-    } else {
-      selectedFileIndex.value = 0
-    }
+    if (selectedFileIndex.value < renderedFileList.value.length - 1) selectedFileIndex.value++
   },
   'arrowup': () => {
-    if(selectedFileIndex.value === 0) {
-      selectedFileIndex.value = renderedFileList.value.length - 1
-    } else {
-      selectedFileIndex.value -= 1
-    }
+    if (selectedFileIndex.value > 0) selectedFileIndex.value--
   }
 })
 
@@ -50,486 +31,362 @@ const tempStore = useTempStore()
 const router = useRouter()
 const route = useRoute()
 const modal = useModal()
-
 const auth = useAuthStore()
-
-const uploadModalOpen = ref(false)
-const createFolderModalOpen = ref(false)
-const uploadInProgress = ref(false)
-const fileUploadFormData = ref({
-  tags: ["Eingang"],
-  path: "",
-  tenant: auth.activeTenant,
-  folder: null
-})
-
 const files = useFiles()
 
-const displayMode = ref("list")
-const displayModes = ref([{label: 'Liste',key:'list', icon: 'i-heroicons-list-bullet'},{label: 'Kacheln',key:'rectangles', icon: 'i-heroicons-squares-2x2'}])
-
-
-
+// --- State ---
 const documents = ref([])
 const folders = ref([])
 const filetags = ref([])
-
 const currentFolder = ref(null)
-
-const loadingDocs = ref(false)
-const isDragTarget = ref(false)
-
+const loadingDocs = ref(true)
 const loaded = ref(false)
+const displayMode = ref("list")
+const displayModes = [
+  { label: 'Liste', key: 'list', icon: 'i-heroicons-list-bullet' },
+  { label: 'Kacheln', key: 'rectangles', icon: 'i-heroicons-squares-2x2' }
+]
 
+const createFolderModalOpen = ref(false)
+const createFolderData = ref({ name: '', standardFiletype: null, standardFiletypeIsOptional: true })
+const selectedFiles = ref({})
+const selectedFileIndex = ref(0)
+
+// --- Search & Debounce ---
+const searchString = ref(tempStore.searchStrings["files"] || '')
+const debouncedSearch = ref(searchString.value)
+let debounceTimeout = null
+
+watch(searchString, (val) => {
+  clearTimeout(debounceTimeout)
+  debounceTimeout = setTimeout(() => {
+    debouncedSearch.value = val
+    tempStore.modifySearchString('files', val)
+  }, 300)
+})
+
+// --- Logic ---
 const setupPage = async () => {
-  folders.value = await useEntities("folders").select()
+  loadingDocs.value = true
+  const [fRes, dRes, tRes] = await Promise.all([
+    useEntities("folders").select(),
+    files.selectDocuments(),
+    useEntities("filetags").select()
+  ])
+  folders.value = fRes
+  documents.value = dRes
+  filetags.value = tRes
 
-  documents.value = await files.selectDocuments()
-
-  filetags.value = await useEntities("filetags").select()
-
-  if(route.query) {
-    if(route.query.folder) {
-      currentFolder.value = await useEntities("folders").selectSingle(route.query.folder)
-
-    }
+  if (route.query?.folder) {
+    currentFolder.value = folders.value.find(i => i.id === route.query.folder) || null
   }
-
-
-  const dropZone = document.getElementById("drop_zone")
-  dropZone.ondragover = function (event) {
-    modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.value.id, type: currentFolder.value.standardFiletype, typeEnabled: currentFolder.value.standardFiletypeIsOptional}, onUploadFinished: () => {
-      setupPage()
-      }})
-    event.preventDefault()
-  }
-
-  dropZone.ondragleave = function (event) {
-    isDragTarget.value = false
-  }
-
-  dropZone.ondrop = async function (event) {
-    event.preventDefault()
-
-  }
-
-
   loadingDocs.value = false
   loaded.value = true
-
 }
-setupPage()
+
+onMounted(() => setupPage())
+
 const currentFolders = computed(() => {
-  if(folders.value.length > 0) {
-
-    let tempFolders = folders.value.filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
-
-    return tempFolders
-  } else return []
-
+  return folders.value
+      .filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
+      .sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }))
 })
 
 const breadcrumbLinks = computed(() => {
-
-  if(currentFolder.value) {
-    let parents = []
-
-    const addParent = (parent) => {
-      parents.push(parent)
-      if(parent.parent) {
-        addParent(folders.value.find(i => i.id === parent.parent))
-      }
+  const links = [{ label: "Home", icon: "i-heroicons-home", click: () => changeFolder(null) }]
+  if (currentFolder.value) {
+    let path = []
+    let curr = currentFolder.value
+    while (curr) {
+      path.unshift({
+        label: curr.name,
+        icon: "i-heroicons-folder",
+        click: () => changeFolder(folders.value.find(f => f.id === curr.id))
+      })
+      curr = folders.value.find(f => f.id === curr.parent)
     }
-
-    if(currentFolder.value.parent) {
-      addParent(folders.value.find(i => i.id === currentFolder.value.parent))
-    }
-
-    return [{
-      label: "Home",
-      click: () => {
-        changeFolder(null)
-      },
-      icon: "i-heroicons-folder"
-    },
-    ...parents.map(i => {
-      return {
-        label: folders.value.find(x => x.id === i.id).name,
-        click: () => {
-          changeFolder(i)
-        },
-        icon: "i-heroicons-folder"
-      }
-    }).reverse(),
-    {
-      label: currentFolder.value.name,
-      click: () => {
-        changeFolder(currentFolder.value)
-      },
-      icon: "i-heroicons-folder"
-    }]
-
-  } else {
-    return [{
-      label: "Home",
-      click: () => {
-        changeFolder(null)
-      },
-      icon: "i-heroicons-folder"
-    }]
+    return [...links, ...path]
   }
+  return links
 })
 
-const filteredDocuments = computed(() => {
+const renderedFileList = computed(() => {
+  const folderList = currentFolders.value.map(i => ({
+    label: i.name,
+    id: i.id,
+    type: "folder",
+    createdAt: i.createdAt
+  }))
 
-  return documents.value.filter(i => currentFolder.value ? i.folder === currentFolder.value.id : !i.folder)
+  const fileList = documents.value
+      .filter(i => currentFolder.value ? i.folder === currentFolder.value.id : !i.folder)
+      .map(i => ({
+        label: i.path.split("/").pop(),
+        id: i.id,
+        type: "file",
+        createdAt: i.createdAt
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
 
+  let combined = [...folderList, ...fileList]
+  if (debouncedSearch.value) {
+    combined = useSearch(debouncedSearch.value, combined)
+  }
+  return combined
 })
 
-const changeFolder = async (newFolder) => {
-  loadingDocs.value = true
-  currentFolder.value = newFolder
-
-  if(newFolder) {
-    fileUploadFormData.value.folder = newFolder.id
-    await router.push(`/files?folder=${newFolder.id}`)
-  } else {
-    fileUploadFormData.value.folder = null
-    await router.push(`/files`)
-  }
+const changeFolder = async (folder) => {
+  currentFolder.value = folder
+  await router.push(folder ? `/files?folder=${folder.id}` : `/files`)
+}
 
+const createFolder = async () => {
+  await useEntities("folders").create({
+    parent: currentFolder.value?.id,
+    name: createFolderData.value.name,
+    standardFiletype: createFolderData.value.standardFiletype,
+    standardFiletypeIsOptional: createFolderData.value.standardFiletypeIsOptional
+  })
+  createFolderModalOpen.value = false
+  createFolderData.value = { name: '', standardFiletype: null, standardFiletypeIsOptional: true }
   setupPage()
 }
 
-const createFolderData = ref({})
-const createFolder = async () => {
-  const res = await useEntities("folders").create({
-    parent: currentFolder.value ? currentFolder.value.id : undefined,
-    name: createFolderData.value.name,
+const showFile = (fileId) => {
+  modal.open(DocumentDisplayModal, {
+    documentData: documents.value.find(i => i.id === fileId),
+    onUpdatedNeeded: () => setupPage()
   })
-
-  createFolderModalOpen.value = false
-
-  setupPage()
-
 }
 
 const downloadSelected = async () => {
-
-  let files = []
-
-  files = filteredDocuments.value.filter(i => selectedFiles.value[i.id] === true).map(i => i.path)
-
-
-  await useFiles().downloadFile(undefined,Object.keys(selectedFiles.value))
-
-}
-
-const searchString = ref(tempStore.searchStrings["files"] ||'')
-const renderedFileList = computed(() => {
-    let files = filteredDocuments.value.map(i => {
-      return {
-        label: i.path.split("/")[i.path.split("/").length -1],
-        id: i.id,
-        type: "file"
-      }
-    })
-
-    arraySort(files, (a,b) => {
-      let aVal = a.path ? a.path.split("/")[a.path.split("/").length -1] : null
-      let bVal = b.path ? b.path.split("/")[b.path.split("/").length -1] : null
-
-      if(aVal && bVal) {
-        return aVal.localeCompare(bVal)
-      } else if(!aVal && bVal) {
-        return 1
-      } else {
-        return -1
-      }
-    }, {reverse: true})
-
-    if(searchString.value.length > 0) {
-      files = useSearch(searchString.value, files)
-    }
-
-
-    let folders = currentFolders.value.map(i => {
-      return {
-        label: i.name,
-        id: i.id,
-        type: "folder"
-      }
-    })
-
-    arraySort(folders, "label")
-
-    /*folders.sort(function(a, b) {
-
-      // Compare the 2 dates
-      if (a.name < b.name) return -1;
-      if (a.name > b.name) return 1;
-      return 0;
-    });*/
-    return [...folders,...files]
-
-})
-const selectedFileIndex = ref(0)
-
-const showFile = (fileId) => {
-  modal.open(DocumentDisplayModal,{
-    documentData: documents.value.find(i => i.id === fileId),
-    onUpdatedNeeded: setupPage()
-  })
-}
-const selectedFiles = ref({});
-
-const selectAll = () => {
-  if(Object.keys(selectedFiles.value).find(i => selectedFiles.value[i] === true)) {
-    selectedFiles.value = {}
-  } else {
-    selectedFiles.value = Object.fromEntries(filteredDocuments.value.map(i => i.id).map(k => [k,true]))
-
-  }
+  const ids = Object.keys(selectedFiles.value).filter(k => selectedFiles.value[k])
+  await useFiles().downloadFile(undefined, ids)
 }
 
 const clearSearchString = () => {
-  tempStore.clearSearchString("files")
   searchString.value = ''
+  debouncedSearch.value = ''
+  tempStore.clearSearchString("files")
 }
 
-
-
+const selectAll = (event) => {
+  if (event.target.checked) {
+    const obj = {}
+    renderedFileList.value.filter(e => e.type === 'file').forEach(e => obj[e.id] = true)
+    selectedFiles.value = obj
+  } else {
+    selectedFiles.value = {}
+  }
+}
 </script>
 
 <template>
-
-  <UDashboardNavbar
-      title="Dateien"
-  >
+  <UDashboardNavbar title="Dateien">
     <template #right>
       <UInput
           id="searchinput"
           v-model="searchString"
-          icon="i-heroicons-funnel"
+          icon="i-heroicons-magnifying-glass"
           autocomplete="off"
           placeholder="Suche..."
-          class="hidden lg:block"
+          class="hidden lg:block w-64"
           @keydown.esc="$event.target.blur()"
-          @change="tempStore.modifySearchString('files',searchString)"
       >
         <template #trailing>
-          <UKbd value="/" />
+          <div class="flex items-center gap-1">
+            <UKbd value="/" />
+            <UButton
+                v-if="searchString.length > 0"
+                icon="i-heroicons-x-mark"
+                variant="ghost"
+                color="gray"
+                size="xs"
+                @click="clearSearchString"
+            />
+          </div>
         </template>
       </UInput>
-      <UButton
-          icon="i-heroicons-x-mark"
-          variant="outline"
-          color="rose"
-          @click="clearSearchString()"
-          v-if="searchString.length > 0"
-      />
     </template>
   </UDashboardNavbar>
-  <UDashboardToolbar>
+
+  <UDashboardToolbar class="sticky top-0 z-10 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
     <template #left>
-      <UBreadcrumb
-          :links="breadcrumbLinks"
-      />
+      <UBreadcrumb :links="breadcrumbLinks" :ui="{ ol: 'gap-x-2', li: 'text-sm' }" />
     </template>
     <template #right>
       <USelectMenu
-        :options="displayModes"
-        value-attribute="key"
-        option-attribute="label"
-        v-model="displayMode"
-        :ui-menu="{ width: 'min-w-max'}"
+          v-model="displayMode"
+          :options="displayModes"
+          value-attribute="key"
+          class="w-32"
       >
         <template #label>
-          <UIcon class="w-5 h-5" :name="displayModes.find(i => i.key === displayMode).icon"/>
+          <UIcon :name="displayModes.find(i => i.key === displayMode).icon" class="w-4 h-4" />
+          <span>{{ displayModes.find(i => i.key === displayMode).label }}</span>
         </template>
       </USelectMenu>
 
+      <UButtonGroup size="sm">
+        <UButton
+            icon="i-heroicons-document-plus"
+            color="primary"
+            @click="modal.open(DocumentUploadModal, {
+            fileData: {
+              folder: currentFolder?.id,
+              type: currentFolder?.standardFiletype,
+              typeEnabled: currentFolder?.standardFiletypeIsOptional
+            },
+            onUploadFinished: () => setupPage()
+          })"
+        >Datei</UButton>
+        <UButton
+            icon="i-heroicons-folder-plus"
+            color="white"
+            @click="createFolderModalOpen = true"
+        >Ordner</UButton>
+      </UButtonGroup>
 
       <UButton
-          :disabled="!currentFolder"
-          @click="modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.id, type: currentFolder.standardFiletype, typeEnabled: currentFolder.standardFiletypeIsOptional}, onUploadFinished: () => {setupPage()}})"
-      >+ Datei</UButton>
-      <UButton
-          @click="createFolderModalOpen = true"
-          variant="outline"
-      >+ Ordner</UButton>
-      <UButton
-          @click="downloadSelected"
+          v-if="Object.values(selectedFiles).some(Boolean)"
           icon="i-heroicons-cloud-arrow-down"
-          variant="outline"
-          v-if="Object.keys(selectedFiles).find(i => selectedFiles[i] === true)"
-      >Herunterladen</UButton>
-      <UModal v-model="createFolderModalOpen">
-        <UCard :ui="{ body: { base: 'space-y-4' } }">
-          <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              Ordner Erstellen
-            </h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="createFolderModalOpen = false" />
-          </div>
-        </template>
+          color="gray"
+          variant="solid"
+          @click="downloadSelected"
+      >Download</UButton>
+    </template>
+  </UDashboardToolbar>
 
-        <UFormGroup label="Name des Ordners" required>
-          <UInput
-              v-model="createFolderData.name"
-              placeholder="z.B. Rechnungen 2024"
-              autofocus
-          />
+  <div id="drop_zone" class="flex-1 overflow-hidden flex flex-col relative">
+    <div v-if="!loaded" class="p-10 flex justify-center">
+      <UProgress animation="carousel" class="w-1/2" />
+    </div>
+
+    <UDashboardPanelContent v-else class="p-0 overflow-y-auto">
+      <div v-if="displayMode === 'list'" class="min-w-full inline-block align-middle">
+        <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+          <thead class="bg-gray-50 dark:bg-gray-800 sticky top-0 z-20">
+          <tr>
+            <th scope="col" class="py-3.5 pl-4 pr-3 sm:pl-6 w-10">
+              <UCheckbox @change="selectAll" />
+            </th>
+            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6">Name</th>
+            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Erstellt am</th>
+          </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200 dark:divide-gray-800 bg-white dark:bg-gray-900">
+          <tr
+              v-for="(entry, index) in renderedFileList"
+              :key="entry.id"
+              class="hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer transition-colors"
+              :class="{'bg-primary-50 dark:bg-primary-900/10': index === selectedFileIndex}"
+              @click="entry.type === 'folder' ? changeFolder(entry) : showFile(entry.id)"
+          >
+            <td class="relative w-12 px-6 sm:w-16 sm:px-8" @click.stop>
+              <UCheckbox v-if="entry.type === 'file'" v-model="selectedFiles[entry.id]" />
+            </td>
+            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
+              <div class="flex items-center">
+                <UIcon
+                    :name="entry.type === 'folder' ? 'i-heroicons-folder-solid' : 'i-heroicons-document-text'"
+                    class="flex-shrink-0 h-5 w-5 mr-3"
+                    :class="entry.type === 'folder' ? 'text-primary-500' : 'text-gray-400'"
+                />
+                <span class="font-medium text-gray-900 dark:text-white truncate max-w-md">
+                    {{ entry.label }}
+                  </span>
+              </div>
+            </td>
+            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+              {{ dayjs(entry.createdAt).format("DD.MM.YY · HH:mm") }}
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-else class="p-6">
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
+          <div
+              v-for="folder in currentFolders"
+              :key="folder.id"
+              class="group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 flex flex-col items-center hover:border-primary-500 transition-all cursor-pointer"
+              @click="changeFolder(folder)"
+          >
+            <UIcon name="i-heroicons-folder-solid" class="w-12 h-12 text-primary-500 mb-2 group-hover:scale-110 transition-transform" />
+            <span class="text-sm font-medium text-center truncate w-full">{{ folder.name }}</span>
+          </div>
+
+          <div
+              v-for="doc in renderedFileList.filter(e => e.type === 'file')"
+              :key="doc.id"
+              class="group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 flex flex-col items-center hover:border-primary-500 transition-all cursor-pointer"
+              @click="showFile(doc.id)"
+          >
+            <UCheckbox v-model="selectedFiles[doc.id]" class="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity" @click.stop />
+            <UIcon name="i-heroicons-document-text" class="w-12 h-12 text-gray-400 mb-2 group-hover:scale-110 transition-transform" />
+            <span class="text-sm font-medium text-center truncate w-full">{{ doc.label }}</span>
+          </div>
+        </div>
+      </div>
+    </UDashboardPanelContent>
+  </div>
+
+  <UModal v-model="createFolderModalOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-bold">Ordner erstellen</h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="createFolderModalOpen = false" />
+        </div>
+      </template>
+
+      <div class="space-y-4">
+        <UFormGroup label="Name" required>
+          <UInput v-model="createFolderData.name" placeholder="Name eingeben..." autofocus @keyup.enter="createFolder" />
         </UFormGroup>
 
-        <UFormGroup
-            label="Standard Dateityp"
-        >
+        <UFormGroup label="Standard-Dateityp">
           <USelectMenu
               v-model="createFolderData.standardFiletype"
               :options="filetags"
               option-attribute="name"
               value-attribute="id"
-              searchable
-              searchable-placeholder="Typ suchen..."
-              placeholder="Kein Standard-Typ"
-              clear-search-on-close
-          >
-            <template #label>
-              <span v-if="createFolderData.standardFiletype">
-                {{ filetags.find(t => t.id === createFolderData.standardFiletype)?.name }}
-              </span>
-              <span v-else class="text-gray-400">Kein Typ ausgewählt</span>
-            </template>
-          </USelectMenu>
+              placeholder="Kein Standard"
+          />
         </UFormGroup>
 
-          <div v-if="createFolderData.standardFiletype">
-            <UCheckbox
-                v-model="createFolderData.standardFiletypeIsOptional"
-                name="isOptional"
-                label="Dateityp ist optional"
-                help="Wenn deaktiviert, MUSS der Nutzer beim Upload diesen Typ verwenden."
-            />
-          </div>
+        <UCheckbox
+            v-if="createFolderData.standardFiletype"
+            v-model="createFolderData.standardFiletypeIsOptional"
+            label="Typ ist optional"
+        />
+      </div>
 
-          <template #footer>
-            <div class="flex justify-end gap-2">
-              <UButton color="gray" variant="ghost" @click="createFolderModalOpen = false">
-                Abbrechen
-              </UButton>
-              <UButton @click="createFolder" :disabled="!createFolderData.name">
-                Erstellen
-              </UButton>
-            </div>
-          </template>
-        </UCard>
-      </UModal>
-
-    </template>
-  </UDashboardToolbar>
-  <div id="drop_zone" class="h-full scrollList" >
-    <div v-if="loaded">
-      <UDashboardPanelContent>
-        <div v-if="displayMode === 'list'">
-          <table class="w-full">
-            <thead>
-            <tr>
-              <td>
-                <UCheckbox
-                    v-if="renderedFileList.find(i => i.type === 'file')"
-                    @change="selectAll"
-                />
-              </td>
-              <td class="font-bold">Name</td>
-              <td class="font-bold">Erstellt am</td>
-            </tr>
-            </thead>
-            <tr v-for="(entry,index) in renderedFileList">
-              <td>
-                <UCheckbox
-                    v-if="entry.type === 'file'"
-                    v-model="selectedFiles[entry.id]"
-                />
-              </td>
-              <td>
-                <UIcon class="mr-1" :name="entry.type === 'folder' ? 'i-heroicons-folder' : 'i-heroicons-document'"/>
-                <a
-                    style="cursor: pointer"
-                    :class="[...index === selectedFileIndex ? ['text-primary', 'text-xl'] : ['dark:text-white','text-black','text-xl']]"
-                    @click="entry.type === 'folder' ? changeFolder(currentFolders.find(i => i.id === entry.id)) : showFile(entry.id)"
-                >{{entry.label}}</a>
-
-              </td>
-              <td>
-                <span v-if="entry.type === 'file'" class="text-xl">{{dayjs(documents.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
-                <span v-if="entry.type === 'folder'" class="text-xl">{{dayjs(currentFolders.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
-              </td>
-            </tr>
-          </table>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton color="gray" variant="soft" @click="createFolderModalOpen = false">Abbrechen</UButton>
+          <UButton color="primary" :disabled="!createFolderData.name" @click="createFolder">Erstellen</UButton>
         </div>
-        <div v-else-if="displayMode === 'rectangles'">
-          <div class="flex flex-row w-full flex-wrap" v-if="currentFolders.length > 0">
-            <a
-                class="w-1/6 folderIcon flex flex-col p-5 m-2"
-                v-for="folder in currentFolders"
-                @click="changeFolder(folder)"
-            >
-
-              <UIcon
-                  name="i-heroicons-folder"
-                  class="w-20 h-20"
-              />
-              <span class="text-center truncate">{{folder.name}}</span>
-            </a>
-          </div>
-
-          <UDivider class="my-5" v-if="currentFolder">{{currentFolder.name}}</UDivider>
-          <UDivider class="my-5" v-else>Ablage</UDivider>
-
-          <div v-if="!loadingDocs">
-            <DocumentList
-                v-if="filteredDocuments.length > 0"
-                :documents="filteredDocuments"
-                @selectDocument="(info) => console.log(info)"
-            />
-            <UAlert
-                v-else
-                class="mt-5 w-1/2 mx-auto"
-                icon="i-heroicons-light-bulb"
-                title="Keine Dokumente vorhanden"
-                color="primary"
-                variant="outline"
-            />
-          </div>
-          <UProgress
-              animation="carousel"
-              v-else
-              class="w-2/3 my-5 mx-auto"
-          />
-        </div>
-      </UDashboardPanelContent>
-    </div>
-    <UProgress animation="carousel" v-else class="w-5/6 mx-auto mt-5"/>
-
-  </div>
+      </template>
+    </UCard>
+  </UModal>
 </template>
 
 <style scoped>
-.folderIcon {
-  border: 1px solid lightgrey;
-  border-radius: 10px;
-  color: dimgrey;
+#drop_zone::after {
+  content: 'Datei hierher ziehen';
+  @apply absolute inset-0 flex items-center justify-center bg-primary-500/10 border-4 border-dashed border-primary-500 opacity-0 pointer-events-none transition-opacity z-50 rounded-xl m-4;
 }
 
-.folderIcon:hover {
-  border: 1px solid #69c350;
-  color: #69c350;
+#drop_zone:hover::after {
+  /* In der setupPage Logik wird das Modal getriggert,
+     dieser Style dient nur der visuellen Hilfe */
 }
 
-tr:nth-child(odd) {
-  background-color: rgba(0, 0, 0, 0.05);
+/* Custom Table Shadows & Borders */
+table {
+  border-collapse: separate;
+  border-spacing: 0;
 }
-
 </style>