Fix #119

Fix #153

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,12 +481,22 @@ 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">
+        <form class="space-y-5" @submit.prevent="createFolder">
           <UFormField label="Name" required>
-          <UInput v-model="createFolderData.name" autofocus @keyup.enter="createFolder"/>
+            <UInput v-model="createFolderData.name" autofocus class="w-full" />
           </UFormField>
 
           <UFormField
@@ -480,8 +509,9 @@ const syncdokubox = async () => {
                 value-key="id"
                 label-key="name"
                 placeholder="Kein Standardtyp"
-              searchable
-              clear-search-on-close
+                class="w-full"
+                :search-input="{ placeholder: 'Dateityp suchen...' }"
+                :filter-fields="['name']"
                 :disabled="isParentTypeMandatory"
             />
           </UFormField>
@@ -491,11 +521,11 @@ const syncdokubox = async () => {
               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>
+      <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 @keyup.enter="updateName"/>
+            <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>