From 7ad44544cfba12581694a4cae6b458709dc543f8 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 25 Mar 2026 17:20:47 +0100
Subject: [PATCH] Fix #119 Fix #153

---
 frontend/pages/files/index.vue | 118 +++++++++++++++++++++------------
 1 file changed, 75 insertions(+), 43 deletions(-)

diff --git a/frontend/pages/files/index.vue b/frontend/pages/files/index.vue
index 58f1949..5c1c7e1 100644
--- a/frontend/pages/files/index.vue
+++ b/frontend/pages/files/index.vue
@@ -37,6 +37,14 @@ const renameData = ref({id: null, name: '', type: ''})
 const selectedFileIndex = ref(0)
 const draggedItem = ref(null)
 
+const getEntryActions = (entry) => [[
+  {
+    label: 'Umbenennen',
+    icon: 'i-heroicons-pencil-square',
+    onSelect: () => openRenameModal(entry)
+  }
+]]
+
 // --- Search & Debounce ---
 const searchString = ref(tempStore.searchStrings["files"] || '')
 const debouncedSearch = ref(searchString.value)
@@ -289,11 +297,15 @@ const showFile = (fileId) => {
   })
 }
 
+const isDialogOpen = computed(() => createFolderModalOpen.value || renameModalOpen.value)
+
 defineShortcuts({
   '/': () => document.getElementById("searchinput")?.focus(),
   'Enter': {
-    usingInput: true,
+    usingInput: false,
     handler: () => {
+      if (isDialogOpen.value) return
+
       const entry = renderedFileList.value[selectedFileIndex.value]
       if (!entry) return
       if (entry.type === "file") showFile(entry.id)
@@ -413,10 +425,13 @@ const syncdokubox = async () => {
               {{ entry.type !== 'up' ? dayjs(entry.createdAt).format("DD.MM.YY") : '-' }}
             </td>
             <td class="px-3 text-right" @click.stop>
-              <UDropdown v-if="entry.type !== 'up'"
-                         :items="[[{ label: 'Umbenennen', icon: 'i-heroicons-pencil-square', click: () => openRenameModal(entry) }]]">
-                <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal"/>
-              </UDropdown>
+              <UDropdownMenu
+                  v-if="entry.type !== 'up'"
+                  :items="getEntryActions(entry)"
+                  :content="{ align: 'end' }"
+              >
+                <UButton color="neutral" variant="ghost" icon="i-heroicons-ellipsis-horizontal"/>
+              </UDropdownMenu>
             </td>
           </tr>
           <tr v-if="renderedFileList.length === 0">
@@ -438,11 +453,15 @@ const syncdokubox = async () => {
             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="entry.type === 'folder' ? changeFolder(entry) : (entry.type === 'up' ? navigateUp() : showFile(entry.id))"
         >
-          <UDropdown v-if="entry.type !== 'up'"
-                     :items="[[{ label: 'Umbenennen', icon: 'i-heroicons-pencil-square', click: () => openRenameModal(entry) }]]"
-                     class="absolute top-1 right-1 opacity-0 group-hover:opacity-100" @click.stop>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-vertical" size="xs"/>
-          </UDropdown>
+          <UDropdownMenu
+              v-if="entry.type !== 'up'"
+              :items="getEntryActions(entry)"
+              :content="{ align: 'end' }"
+              class="absolute top-1 right-1 opacity-0 group-hover:opacity-100"
+              @click.stop
+          >
+            <UButton color="neutral" variant="ghost" icon="i-heroicons-ellipsis-vertical" size="xs"/>
+          </UDropdownMenu>
           <UIcon
               :name="entry.type === 'up' ? 'i-heroicons-arrow-uturn-left' : (entry.type === 'folder' ? 'i-heroicons-folder-solid' : 'i-heroicons-document-text')"
               class="w-12 h-12 mb-2"
@@ -462,40 +481,51 @@ const syncdokubox = async () => {
 
   <UModal v-model:open="createFolderModalOpen">
     <template #content>
-      <UCard>
-        <template #header><h3 class="font-bold">Ordner erstellen</h3></template>
+      <UCard class="shadow-xl ring-1 ring-black/5">
+        <template #header>
+          <div class="flex items-start gap-4">
+            <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/15">
+              <UIcon name="i-heroicons-folder-plus" class="h-6 w-6" />
+            </div>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">Ordner erstellen</h3>
+              <p class="mt-1 text-sm text-muted">Lege einen neuen Ordner im aktuellen Bereich an.</p>
+            </div>
+          </div>
+        </template>
 
-      <div class="space-y-4">
-        <UFormField label="Name" required>
-          <UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder"/>
-        </UFormField>
+        <form class="space-y-5" @submit.prevent="createFolder">
+          <UFormField label="Name" required>
+            <UInput v-model="createFolderData.name" autofocus class="w-full" />
+          </UFormField>
 
-        <UFormField
-            label="Standard Dateityp (Tag)"
-            :help="isParentTypeMandatory ? 'Vom übergeordneten Ordner vorgegeben' : ''"
-        >
-          <USelectMenu
-              v-model="createFolderData.standardFiletype"
-              :items="filetags"
-              value-key="id"
-              label-key="name"
-              placeholder="Kein Standardtyp"
-              searchable
-              clear-search-on-close
+          <UFormField
+              label="Standard Dateityp (Tag)"
+              :help="isParentTypeMandatory ? 'Vom übergeordneten Ordner vorgegeben' : ''"
+          >
+            <USelectMenu
+                v-model="createFolderData.standardFiletype"
+                :items="filetags"
+                value-key="id"
+                label-key="name"
+                placeholder="Kein Standardtyp"
+                class="w-full"
+                :search-input="{ placeholder: 'Dateityp suchen...' }"
+                :filter-fields="['name']"
+                :disabled="isParentTypeMandatory"
+            />
+          </UFormField>
+
+          <UCheckbox
+              v-model="createFolderData.standardFiletypeIsOptional"
+              label="Dateityp ist optional"
               :disabled="isParentTypeMandatory"
           />
-        </UFormField>
-
-        <UCheckbox
-            v-model="createFolderData.standardFiletypeIsOptional"
-            label="Dateityp ist optional"
-            :disabled="isParentTypeMandatory"
-        />
-      </div>
+        </form>
 
         <template #footer>
           <div class="flex justify-end gap-2">
-            <UButton color="gray" @click="createFolderModalOpen = false">Abbrechen</UButton>
+            <UButton color="neutral" variant="ghost" @click="createFolderModalOpen = false">Abbrechen</UButton>
             <UButton color="primary" @click="createFolder">Erstellen</UButton>
           </div>
         </template>
@@ -505,14 +535,16 @@ const syncdokubox = async () => {
 
   <UModal v-model:open="renameModalOpen">
     <template #content>
-      <UCard>
-        <template #header><h3 class="font-bold">Umbenennen</h3></template>
-        <UFormField label="Neuer Name">
-          <UInput v-model="renameData.name" autofocus @keyup.enter="updateName"/>
-        </UFormField>
+      <UCard class="shadow-xl ring-1 ring-black/5">
+        <template #header><h3 class="text-lg font-semibold text-highlighted">Umbenennen</h3></template>
+        <form @submit.prevent="updateName">
+          <UFormField label="Neuer Name">
+            <UInput v-model="renameData.name" autofocus class="w-full" />
+          </UFormField>
+        </form>
         <template #footer>
           <div class="flex justify-end gap-2">
-            <UButton color="gray" @click="renameModalOpen = false">Abbrechen</UButton>
+            <UButton color="neutral" variant="ghost" @click="renameModalOpen = false">Abbrechen</UButton>
             <UButton color="primary" @click="updateName">Speichern</UButton>
           </div>
         </template>