feat: add hub

app/pages/index.vue

@@ -1,3 +1,37 @@
+<script setup lang="ts">
+useHead({ title: 'huaqo.de' })
+
+const { hub } = useAppConfig()
+
+const apps = computed(() => Object.values(hub as Record<string, HubApp>).sort((a, b) => a.title.localeCompare(b.title, 'de')))
+</script>
+
 <template>
-  <div />
+  <UMain>
+    <UContainer class="max-w-3xl py-8">
+      <div class="mb-6 flex items-center justify-between gap-3">
+        <h1 class="text-2xl font-semibold text-highlighted">
+          huaqo.de
+        </h1>
+        <AppHeaderActions :hub-link="false" />
+      </div>
+
+      <ul class="grid gap-3 sm:grid-cols-2">
+        <li v-for="app in apps" :key="app.to">
+          <NuxtLink
+            :to="app.to"
+            class="group flex h-full items-center gap-4 rounded-lg border border-default p-4 transition-colors hover:border-primary hover:bg-elevated/50 focus-visible:outline-2 focus-visible:outline-primary"
+          >
+            <span class="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+              <UIcon :name="app.icon" class="size-5" />
+            </span>
+            <span class="flex min-w-0 items-center gap-1.5 font-medium text-highlighted">
+              {{ app.title }}
+              <UIcon v-if="app.locked" name="i-lucide-lock" class="size-3.5 text-muted" aria-label="Passwortgeschützt" />
+            </span>
+          </NuxtLink>
+        </li>
+      </ul>
+    </UContainer>
+  </UMain>
 </template>