From b097bf211d15319913d2bc671ef3210856a0ee64 Mon Sep 17 00:00:00 2001
From: haex <hexxx@ok.de>
Date: Mon, 3 Nov 2025 11:08:26 +0100
Subject: [PATCH] Make windows fullscreen on small screens

- Update window components to use fullscreen layout on small screens
- Adjust UI components styling for better mobile display
- Update desktop store for small screen handling
---
 src/components/haex/extension/launcher.vue |  8 +++++
 src/components/haex/system/developer.vue   |  2 +-
 src/components/haex/system/settings.vue    |  2 +-
 src/components/haex/window/index.vue       | 13 ++++++--
 src/components/ui/button/index.vue         |  1 +
 src/components/ui/input/index.vue          |  2 +-
 src/pages/index.vue                        |  2 +-
 src/stores/desktop/index.ts                | 37 ++++++++++++++--------
 8 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/components/haex/extension/launcher.vue b/src/components/haex/extension/launcher.vue
index 0ad1404..d99077a 100644
--- a/src/components/haex/extension/launcher.vue
+++ b/src/components/haex/extension/launcher.vue
@@ -90,11 +90,14 @@ defineOptions({
 
 const extensionStore = useExtensionsStore()
 const windowManagerStore = useWindowManagerStore()
+const uiStore = useUiStore()
 
 const { t } = useI18n()
 
 const open = ref(false)
 
+const { isSmallScreen } = storeToRefs(uiStore)
+
 // Uninstall dialog state
 const showUninstallDialog = ref(false)
 const extensionToUninstall = ref<LauncherItem | null>(null)
@@ -242,6 +245,11 @@ const handleDragStart = (event: DragEvent, item: LauncherItem) => {
   if (dragImage) {
     event.dataTransfer.setDragImage(dragImage, 20, 20)
   }
+
+  // Close drawer on small screens to reveal workspace for drop
+  if (isSmallScreen.value) {
+    open.value = false
+  }
 }
 </script>
 
diff --git a/src/components/haex/system/developer.vue b/src/components/haex/system/developer.vue
index 5e63e1a..89115fa 100644
--- a/src/components/haex/system/developer.vue
+++ b/src/components/haex/system/developer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 mx-auto space-y-6 bg-default/90 backdrop-blur-2xl">
+  <div class="p-4 mx-auto space-y-6 bg-default">
     <div class="space-y-2">
       <h1 class="text-2xl font-bold">{{ t('title') }}</h1>
       <p class="text-sm opacity-70">{{ t('description') }}</p>
diff --git a/src/components/haex/system/settings.vue b/src/components/haex/system/settings.vue
index 61c075e..1f6eac5 100644
--- a/src/components/haex/system/settings.vue
+++ b/src/components/haex/system/settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full bg-default">
+  <div class="w-full h-full bg-default overflow-scroll">
     <div class="grid grid-cols-2 p-2">
       <div class="p-2">{{ t('language') }}</div>
       <div><UiDropdownLocale @select="onSelectLocaleAsync" /></div>
diff --git a/src/components/haex/window/index.vue b/src/components/haex/window/index.vue
index ddf9858..4ffa3f2 100644
--- a/src/components/haex/window/index.vue
+++ b/src/components/haex/window/index.vue
@@ -16,6 +16,7 @@
           : 'border border-gray-200 dark:border-gray-700',
     ]"
     @mousedown="handleActivate"
+    @contextmenu.stop.prevent
   >
     <!-- Window Titlebar -->
     <div
@@ -50,6 +51,7 @@
         />
 
         <HaexWindowButton
+          v-if="!isSmallScreen"
           :is-maximized
           variant="maximize"
           @click.stop="handleMaximize"
@@ -74,7 +76,7 @@
 
     <!-- Resize Handles -->
     <HaexWindowResizeHandles
-      :disabled="isMaximized"
+      :disabled="isMaximized || isSmallScreen"
       @resize-start="handleResizeStart"
     />
   </div>
@@ -114,12 +116,16 @@ const height = defineModel<number>('height', { default: 600 })
 const windowEl = useTemplateRef('windowEl')
 const titlebarEl = useTemplateRef('titlebarEl')
 
+const uiStore = useUiStore()
+const { isSmallScreen } = storeToRefs(uiStore)
+
 // Inject viewport size from parent desktop
 const viewportSize = inject<{
   width: Ref<number>
   height: Ref<number>
 }>('viewportSize')
-const isMaximized = ref(false) // Don't start maximized
+// Start maximized on small screens
+const isMaximized = ref(isSmallScreen.value)
 
 // Store initial position/size for restore
 const preMaximizeState = ref({
@@ -151,7 +157,8 @@ const isResizingOrDragging = computed(
 // Setup drag with useDrag composable (supports mouse + touch)
 useDrag(
   ({ movement: [mx, my], first, last }) => {
-    if (isMaximized.value) return
+    // Disable dragging on small screens (always fullscreen)
+    if (isMaximized.value || isSmallScreen.value) return
 
     if (first) {
       // Drag started - save initial position
diff --git a/src/components/ui/button/index.vue b/src/components/ui/button/index.vue
index abb45d9..3929cc4 100644
--- a/src/components/ui/button/index.vue
+++ b/src/components/ui/button/index.vue
@@ -7,6 +7,7 @@
           ...buttonProps,
           ...$attrs,
         }"
+        size="lg"
         @click="$emit('click', $event)"
       >
         <template
diff --git a/src/components/ui/input/index.vue b/src/components/ui/input/index.vue
index 978a016..b1fb1e2 100644
--- a/src/components/ui/input/index.vue
+++ b/src/components/ui/input/index.vue
@@ -5,7 +5,7 @@
     :readonly="props.readOnly"
     :leading-icon="props.leadingIcon"
     :ui="{ base: 'peer' }"
-    :size="isSmallScreen ? 'lg' : 'md'"
+    size="lg"
     @change="(e) => $emit('change', e)"
     @blur="(e) => $emit('blur', e)"
     @keyup="(e: KeyboardEvent) => $emit('keyup', e)"
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 225ba72..6c81999 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -25,7 +25,7 @@
 
         <div
           v-show="lastVaults.length"
-          class="max-w-md w-full sm:px-5"
+          class="w-56"
         >
           <div class="font-thin text-sm pb-1 w-full">
             {{ t('lastUsed') }}
diff --git a/src/stores/desktop/index.ts b/src/stores/desktop/index.ts
index ff100b8..1e273b3 100644
--- a/src/stores/desktop/index.ts
+++ b/src/stores/desktop/index.ts
@@ -298,6 +298,28 @@ export const useDesktopStore = defineStore('desktopStore', () => {
       openDesktopItem(itemType, referenceId)
     }
 
+    // Build second menu group based on item type
+    const secondGroup = [
+      {
+        label: $i18n.t('desktop.contextMenu.removeFromDesktop'),
+        icon: 'i-heroicons-x-mark',
+        onSelect: async () => {
+          await removeDesktopItemAsync(id)
+        },
+      },
+    ]
+
+    // Only show uninstall option for extensions
+    if (itemType === 'extension') {
+      secondGroup.push({
+        label: $i18n.t('desktop.contextMenu.uninstall'),
+        icon: 'i-heroicons-trash',
+        onSelect: async () => {
+          onUninstall()
+        },
+      })
+    }
+
     return [
       [
         {
@@ -306,20 +328,7 @@ export const useDesktopStore = defineStore('desktopStore', () => {
           onSelect: handleOpen,
         },
       ],
-      [
-        {
-          label: $i18n.t('desktop.contextMenu.removeFromDesktop'),
-          icon: 'i-heroicons-x-mark',
-          onSelect: async () => {
-            await removeDesktopItemAsync(id)
-          },
-        },
-        {
-          label: $i18n.t('desktop.contextMenu.uninstall'),
-          icon: 'i-heroicons-trash',
-          onSelect: onUninstall,
-        },
-      ],
+      secondGroup,
     ]
   }