fix(#15): Fix several UI bugs

legalconsenthub/app/components/FormEngine.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-for="(formElement, index) in props.modelValue" :key="formElement.id">
-    <div class="flex py-3 lg:py-4">
+    <div class="group flex py-3 lg:py-4">
-      <div class="group flex-auto">
+      <div class="flex-auto">
         <p v-if="formElement.title" class="font-semibold">{{ formElement.title }}</p>
         <p v-if="formElement.description" class="text-dimmed pb-3">{{ formElement.description }}</p>
         <component
@@ -17,8 +17,17 @@
           :comments="comments?.[formElement.id]"
         />
       </div>
-      <div>
+      <div
-        <UDropdownMenu :items="getDropdownItems(formElement.id, index)" :content="{ align: 'end' }">
+        :class="[
+          'transition-opacity duration-200',
+          openDropdownId === formElement.id ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+        ]"
+      >
+        <UDropdownMenu
+          :items="getDropdownItems(formElement.id, index)"
+          :content="{ align: 'end' }"
+          @update:open="(isOpen) => handleDropdownToggle(formElement.id, isOpen)"
+        >
           <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" />
         </UDropdownMenu>
       </div>
@@ -55,7 +64,13 @@ if (props.applicationFormId) {
   await loadComments(props.applicationFormId)
 }
 
+const route = useRoute()
 const activeFormElement = ref('')
+const openDropdownId = ref<string | null>(null)
+
+function handleDropdownToggle(formElementId: string, isOpen: boolean) {
+  openDropdownId.value = isOpen ? formElementId : null
+}
 
 function getResolvedComponent(formElement: FormElementDto) {
   switch (formElement.type) {
@@ -77,20 +92,23 @@ function getResolvedComponent(formElement: FormElementDto) {
 }
 
 function getDropdownItems(formElementId: string, formElementPosition: number): DropdownMenuItem[] {
-  return [
+  const items = []
-    [
+
-      {
+  if (route.path !== '/create') {
+    items.push({
       label: 'Comments',
       icon: 'i-lucide-message-square-more',
       onClick: () => toggleComments(formElementId)
-      },
+    })
-      {
+  }
+
+  items.push({
     label: 'Add input field below',
     icon: 'i-lucide-list-plus',
     onClick: () => emit('add:input-form', formElementPosition)
-      }
+  })
-    ]
+
-  ]
+  return [items]
 }
 
 function updateFormOptions(formOptions: FormOptionDto[], formElementIndex: number) {

legalconsenthub/app/components/FormStepperWithNavigation.vue

@@ -37,16 +37,17 @@
         v-if="stepper?.hasNext"
         trailing-icon="i-lucide-arrow-right"
         :disabled="!stepper?.hasNext"
+        size="lg"
         @click="handleNavigate('forward')"
       >
         Next
       </UButton>
 
       <div v-if="!stepper?.hasNext" class="flex flex-wrap items-center gap-1.5">
-        <UButton trailing-icon="i-lucide-save" :disabled="disabled" variant="outline" @click="emit('save')">
+        <UButton trailing-icon="i-lucide-save" :disabled="disabled" variant="outline" size="lg" @click="emit('save')">
           Save
         </UButton>
-        <UButton trailing-icon="i-lucide-send-horizontal" :disabled="disabled" @click="emit('submit')">
+        <UButton trailing-icon="i-lucide-send-horizontal" :disabled="disabled" size="lg" @click="emit('submit')">
           Submit
         </UButton>
       </div>

legalconsenthub/app/components/formelements/TheInput.vue

@@ -1,6 +1,6 @@
 <template>
   <UFormField :label="label">
-    <UInput v-model="modelValue" />
+    <UInput v-model="modelValue" class="w-full" />
   </UFormField>
 </template>
 

legalconsenthub/app/composables/useApplicationFormNavigation.ts

@@ -40,16 +40,6 @@ export async function useApplicationFormNavigation(applicationFormId: string) {
     ]
   ])
 
-  const dropdownItems = [
-    [
-      {
-        label: 'Neuer Mitbestimmungsantrag',
-        icon: 'i-lucide-send',
-        to: '/create'
-      }
-    ]
-  ]
-
   function updateApplicationForm(updatedForm: ApplicationFormDto) {
     data.value = updatedForm
   }
@@ -57,7 +47,6 @@ export async function useApplicationFormNavigation(applicationFormId: string) {
   return {
     applicationForm,
     navigationLinks,
-    dropdownItems,
     refresh,
     updateApplicationForm,
     error

legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue

@@ -7,14 +7,24 @@
         </template>
 
         <template #right>
-          <UDropdownMenu :items="items">
+          <UButton
-            <UButton icon="i-lucide-plus" size="md" class="rounded-full" />
+            icon="i-lucide-circle-plus"
-          </UDropdownMenu>
+            label="Neuer Mitbestimmungsantrag"
+            to="/create"
+            :disabled="!canWriteApplicationForms"
+            size="xl"
+            variant="outline"
+            color="neutral"
+            :ui="{
+              leadingIcon: 'text-primary'
+            }"
+          />
         </template>
       </UDashboardNavbar>
 
       <UDashboardToolbar>
         <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
+        <USeparator orientation="vertical" class="h-8 mx-2" />
         <FormValidationIndicator :status="validationStatus" />
       </UDashboardToolbar>
     </template>
@@ -59,12 +69,12 @@ const applicationFormId = Array.isArray(route.params.id) ? route.params.id[0] :
 const {
   applicationForm,
   navigationLinks: links,
-  dropdownItems: items,
   updateApplicationForm
 } = await useApplicationFormNavigation(applicationFormId!)
 
 const { updateApplicationForm: updateForm, submitApplicationForm } = useApplicationForm()
 const { validateFormElements, getHighestComplianceStatus } = useApplicationFormValidator()
+const { canWriteApplicationForms } = usePermissions()
 const userStore = useUserStore()
 const { user } = storeToRefs(userStore)
 

legalconsenthub/app/pages/create.vue

@@ -8,6 +8,8 @@
       </UDashboardNavbar>
 
       <UDashboardToolbar>
+        <div class="flex-1" />
+        <USeparator orientation="vertical" class="h-8 mx-2" />
         <FormValidationIndicator :status="validationStatus" />
       </UDashboardToolbar>
     </template>
@@ -28,7 +30,7 @@
             @add-input-form="handleAddInputForm"
           >
             <UFormField label="Name" class="mb-4">
-              <UInput v-model="applicationFormTemplate.name" />
+              <UInput v-model="applicationFormTemplate.name" class="w-full" />
             </UFormField>
           </FormStepperWithNavigation>
         </div>

legalconsenthub/app/pages/index.vue

@@ -29,15 +29,20 @@
             </UButton>
           </UTooltip>
 
-          <UDropdownMenu :items="items">
+          <UButton
-            <UButton icon="i-lucide-plus" size="md" class="rounded-full" />
+            icon="i-lucide-circle-plus"
-          </UDropdownMenu>
+            label="Neuer Mitbestimmungsantrag"
+            to="/create"
+            :disabled="!canWriteApplicationForms"
+            size="xl"
+            variant="outline"
+            color="neutral"
+            :ui="{
+              leadingIcon: 'text-primary'
+            }"
+          />
         </template>
       </UDashboardNavbar>
-
-      <UDashboardToolbar>
-        <template #left> toolbar left </template>
-      </UDashboardToolbar>
     </template>
 
     <template #body>
@@ -54,9 +59,7 @@
                 <h3 class="font-semibold text-lg text-highlighted truncate">
                   {{ applicationFormElem.name }}
                 </h3>
-                <p class="text-xs text-muted mt-1">
+                <p class="text-xs text-muted mt-1">#{{ index }}</p>
-                  #{{ index }}
-                </p>
               </div>
               <div class="flex items-center gap-2">
                 <UBadge
@@ -163,17 +166,6 @@ const selectedOrganizationId = computed({
 
 const { canWriteApplicationForms } = usePermissions()
 
-const items = computed(() => [
-  [
-    {
-      label: 'Neuer Mitbestimmungsantrag',
-      icon: 'i-lucide-send',
-      to: '/create',
-      disabled: !canWriteApplicationForms.value
-    }
-  ]
-])
-
 const applicationForms = computed({
   get: () => data?.value?.content ?? [],
   set: (val) => {