refactored design

src/components/haex/desktop/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="desktopEl"
-    class="w-full h-full relative overflow-hidden isolate"
+    class="w-full h-full relative overflow-hidden"
   >
     <Swiper
       :modules="[SwiperNavigation]"
@@ -24,7 +24,7 @@
         class="w-full h-full"
       >
         <div
-          class="w-full h-full relative isolate"
+          class="w-full h-full relative"
           @click.self.stop="handleDesktopClick"
           @mousedown.left.self="handleAreaSelectStart"
           @dragover.prevent="handleDragOver"
@@ -51,7 +51,6 @@
             class="absolute right-0 top-0 bottom-0 border-blue-500 pointer-events-none backdrop-blur-sm z-50 transition-all duration-500 ease-in-out"
             :class="showRightSnapZone ? 'w-1/2 bg-blue-500/20 border-2' : 'w-0'"
           />
-          <!--  </Transition> -->
 
           <!-- Area Selection Box -->
           <div
@@ -199,52 +198,6 @@
 
     <!-- Window Overview Modal -->
     <HaexWindowOverview />
-
-    <!-- Workspace Drawer -->
-    <UDrawer
-      v-model:open="isOverviewMode"
-      direction="left"
-      :dismissible="false"
-      :overlay="false"
-      :modal="false"
-      title="Workspaces"
-      description="Workspaces"
-    >
-      <template #content>
-        <div class="p-6 h-full overflow-y-auto">
-          <UButton
-            block
-            trailing-icon="mdi-close"
-            class="text-2xl font-bold ext-gray-900 dark:text-white mb-4"
-            @click="isOverviewMode = false"
-          >
-            Workspaces
-          </UButton>
-
-          <!-- Workspace Cards -->
-          <div class="flex flex-col gap-3">
-            <HaexWorkspaceCard
-              v-for="workspace in workspaces"
-              :key="workspace.id"
-              :workspace
-            />
-          </div>
-
-          <!-- Add New Workspace Button -->
-          <UButton
-            block
-            variant="outline"
-            class="mt-6"
-            @click="handleAddWorkspace"
-          >
-            <template #leading>
-              <UIcon name="i-heroicons-plus" />
-            </template>
-            New Workspace
-          </UButton>
-        </div>
-      </template>
-    </UDrawer>
   </div>
 </template>
 
@@ -600,17 +553,6 @@ const onSlideChange = (swiper: SwiperType) => {
   )
 }
 
-// Workspace control handlers
-const handleAddWorkspace = async () => {
-  await workspaceStore.addWorkspaceAsync()
-  // Swiper will auto-slide to new workspace because we switch in addWorkspaceAsync
-  nextTick(() => {
-    if (swiperInstance.value) {
-      swiperInstance.value.slideTo(workspaces.value.length - 1)
-    }
-  })
-}
-
 /* const handleRemoveWorkspace = async () => {
   if (!currentWorkspace.value || workspaces.value.length <= 1) return
 

src/components/haex/vault/open.vue

@@ -5,7 +5,7 @@
     :description="vault.path || path"
     @confirm="onOpenDatabase"
   >
-    <!-- <UiButton
+    <UiButton
       :label="t('vault.open')"
       :ui="{
         base: 'px-3 py-2',
@@ -14,8 +14,7 @@
       size="xl"
       variant="outline"
       block
-      @click.stop="onLoadDatabase"
-    /> -->
+    />
 
     <template #title>
       <i18n-t

src/components/haex/window/button.vue

@@ -0,0 +1,83 @@
+<template>
+  <UTooltip :text="tooltip">
+    <button
+      class="size-8 shrink-0 rounded-lg flex justify-center transition-colors group"
+      :class="variantClasses.buttonClass"
+      @click="(e) => $emit('click', e)"
+    >
+      <UIcon
+        :name="icon"
+        class="size-4 text-gray-600 dark:text-gray-400"
+        :class="variantClasses.iconClass"
+      />
+    </button>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  variant: 'close' | 'maximize' | 'minimize'
+  isMaximized?: boolean
+}>()
+
+defineEmits(['click'])
+
+const icon = computed(() => {
+  switch (props.variant) {
+    case 'close':
+      return 'i-heroicons-x-mark'
+    case 'maximize':
+      return props.isMaximized
+        ? 'i-heroicons-arrows-pointing-in'
+        : 'i-heroicons-arrows-pointing-out'
+    default:
+      return 'i-heroicons-minus'
+  }
+})
+
+const variantClasses = computed(() => {
+  if (props.variant === 'close') {
+    return {
+      iconClass: 'group-hover:text-error',
+      buttonClass: 'hover:bg-error/30 items-center',
+    }
+  } else if (props.variant === 'maximize') {
+    return {
+      iconClass: 'group-hover:text-warning',
+      buttonClass: 'hover:bg-warning/30 items-center',
+    }
+  } else {
+    return {
+      iconClass: 'group-hover:text-success',
+      buttonClass: 'hover:bg-success/30 items-end pb-1',
+    }
+  }
+})
+
+const { t } = useI18n()
+
+const tooltip = computed(() => {
+  switch (props.variant) {
+    case 'close':
+      return t('close')
+    case 'maximize':
+      return props.isMaximized ? t('shrink') : t('maximize')
+    default:
+      return t('minimize')
+  }
+})
+</script>
+
+<i18n lang="yaml">
+de:
+  close: Schließen
+  maximize: Maximieren
+  shrink: Verkleinern
+  minimize: Minimieren
+
+en:
+  close: Close
+  maximize: Maximize
+  shrink: Shrink
+  minimize: Minimize
+</i18n>

src/components/haex/window/index.vue

@@ -38,37 +38,21 @@
 
       <!-- Right: Window Controls -->
       <div class="flex items-center gap-1 justify-end">
-        <button
-          class="w-8 h-8 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center justify-center transition-colors"
+        <HaexWindowButton
+          variant="minimize"
           @click.stop="handleMinimize"
-        >
-          <UIcon
-            name="i-heroicons-minus"
-            class="w-4 h-4 text-gray-600 dark:text-gray-400"
-          />
-        </button>
-        <button
-          class="w-8 h-8 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center justify-center transition-colors"
+        />
+
+        <HaexWindowButton
+          :is-maximized
+          variant="maximize"
           @click.stop="handleMaximize"
-        >
-          <UIcon
-            :name="
-              isMaximized
-                ? 'i-heroicons-arrows-pointing-in'
-                : 'i-heroicons-arrows-pointing-out'
-            "
-            class="w-4 h-4 text-gray-600 dark:text-gray-400"
-          />
-        </button>
-        <button
-          class="w-8 h-8 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 flex items-center justify-center transition-colors group"
+        />
+
+        <HaexWindowButton
+          variant="close"
           @click.stop="handleClose"
-        >
-          <UIcon
-            name="i-heroicons-x-mark"
-            class="w-4 h-4 text-gray-600 dark:text-gray-400 group-hover:text-red-600 dark:group-hover:text-red-400"
-          />
-        </button>
+        />
       </div>
     </div>