extensions fixed

src/components/haex/extension/launcher.vue

@@ -0,0 +1,123 @@
+<template>
+  <UPopover v-model:open="open">
+    <UButton
+      icon="material-symbols:apps"
+      color="neutral"
+      variant="outline"
+      v-bind="$attrs"
+      size="xl"
+    />
+
+    <template #content>
+      <ul class="p-4 max-h-96 grid grid-cols-3 gap-2 overflow-scroll">
+        <!-- Enabled Extensions -->
+        <UiButton
+          v-for="extension in enabledExtensions"
+          :key="extension.id"
+          square
+          size="xl"
+          variant="ghost"
+          :ui="{
+            base: 'size-24 flex flex-wrap text-sm items-center justify-center overflow-visible',
+            leadingIcon: 'size-10',
+            label: 'w-full',
+          }"
+          :icon="extension.icon || 'i-heroicons-puzzle-piece-solid'"
+          :label="extension.name"
+          :tooltip="extension.name"
+          @click="openExtension(extension.id)"
+        />
+
+        <!-- Disabled Extensions (grayed out) -->
+        <UiButton
+          v-for="extension in disabledExtensions"
+          :key="extension.id"
+          square
+          size="xl"
+          variant="ghost"
+          :disabled="true"
+          :ui="{
+            base: 'size-24 flex flex-wrap text-sm items-center justify-center overflow-visible opacity-40',
+            leadingIcon: 'size-10',
+            label: 'w-full',
+          }"
+          :icon="extension.icon || 'i-heroicons-puzzle-piece-solid'"
+          :label="extension.name"
+          :tooltip="`${extension.name} (${t('disabled')})`"
+        />
+
+        <!-- Marketplace Button (always at the end) -->
+        <UiButton
+          square
+          size="xl"
+          variant="soft"
+          color="primary"
+          :ui="{
+            base: 'size-24 flex flex-wrap text-sm items-center justify-center overflow-visible',
+            leadingIcon: 'size-10',
+            label: 'w-full',
+          }"
+          icon="i-heroicons-plus-circle"
+          :label="t('marketplace')"
+          :tooltip="t('marketplace')"
+          @click="openMarketplace"
+        />
+      </ul>
+    </template>
+  </UPopover>
+</template>
+
+<script setup lang="ts">
+const extensionStore = useExtensionsStore()
+const router = useRouter()
+const route = useRoute()
+const localePath = useLocalePath()
+const { t } = useI18n()
+
+const open = ref(false)
+
+// Enabled extensions first
+const enabledExtensions = computed(() => {
+  return extensionStore.availableExtensions.filter((ext) => ext.enabled)
+})
+
+// Disabled extensions last
+const disabledExtensions = computed(() => {
+  return extensionStore.availableExtensions.filter((ext) => !ext.enabled)
+})
+
+const openExtension = (extensionId: string) => {
+  router.push(
+    localePath({
+      name: 'haexExtension',
+      params: {
+        vaultId: route.params.vaultId,
+        extensionId,
+      },
+    }),
+  )
+  open.value = false
+}
+
+const openMarketplace = () => {
+  router.push(
+    localePath({
+      name: 'extensionOverview',
+      params: {
+        vaultId: route.params.vaultId,
+      },
+    }),
+  )
+  open.value = false
+}
+</script>
+
+<i18n lang="yaml">
+de:
+  disabled: Deaktiviert
+  marketplace: Marketplace
+
+en:
+  disabled: Disabled
+  marketplace: Marketplace
+</i18n>

src/components/haex/extension/marketplace-card.vue

@@ -57,10 +57,17 @@
           {{ extension.description }}
         </p>
 
-        <!-- Stats -->
+        <!-- Stats and Status -->
         <div
           class="flex items-center gap-4 mt-3 text-sm text-gray-500 dark:text-gray-400"
         >
+          <div
+            v-if="isInstalled"
+            class="flex items-center gap-1 text-success font-medium"
+          >
+            <UIcon name="i-heroicons-check-circle-solid" />
+            <span>{{ t('installed') }}</span>
+          </div>
           <div
             v-if="extension.downloads"
             class="flex items-center gap-1"

src/components/haex/menu/applications.vue

@@ -1,58 +0,0 @@
-<template>
-  <UPopover v-model:open="open">
-    <UButton
-      icon="material-symbols:apps"
-      color="neutral"
-      variant="outline"
-      v-bind="$attrs"
-      size="xl"
-    />
-
-    <template #content>
-      <ul
-        class="p-4 max-h-96 grid grid-cols-3 gap-2 overflow-scroll"
-        @click="open = false"
-      >
-        <UiButton
-          v-for="item in menu"
-          :key="item.id"
-          square
-          size="xl"
-          variant="ghost"
-          :ui="{
-            base: 'size-24 flex flex-wrap  text-sm items-center justify-center overflow-visible',
-            leadingIcon: 'size-10',
-            label: 'w-full',
-          }"
-          :icon="item.icon"
-          :label="item.name"
-          :tooltip="item.name"
-          @click="item.onSelect"
-        />
-        <!-- <UiButton
-          v-for="item in extensionLinks"
-          :key="item.id"
-          v-bind="item"
-          icon-type="svg"
-        /> -->
-      </ul>
-    </template>
-  </UPopover>
-</template>
-
-<script setup lang="ts">
-//const { extensionLinks } = storeToRefs(useExtensionsStore())
-const { menu } = storeToRefs(useSidebarStore())
-
-const open = ref(false)
-</script>
-
-<i18n lang="yaml">
-de:
-  settings: 'Einstellungen'
-  close: 'Vault schließen'
-
-en:
-  settings: 'Settings'
-  close: 'Close Vault'
-</i18n>