Feat: Initial Setup through env vars (#1736)

* initial support for initial setup

* improve setup

* improve mobile view

* move base admin route

* admin panel mobile view

* set initial host and port

* add docs

* properly setup everything, use for dev env

* change userconfig and interface port on setup, note users afterwards

src/app/components/Base/Tooltip.vue

@@ -1,14 +1,17 @@
 <template>
   <TooltipProvider>
-    <TooltipRoot>
+    <TooltipRoot :open="open" @update:open="open = $event">
       <TooltipTrigger
-        class="inline-flex h-8 w-8 items-center justify-center rounded-full text-gray-400 outline-none focus:shadow-sm focus:shadow-black"
+        class="mx-2 inline-flex h-4 w-4 items-center justify-center rounded-full text-gray-400 outline-none focus:shadow-sm focus:shadow-black"
+        as-child
       >
-        <slot />
+        <button @click="open = !open">
+          <slot />
+        </button>
       </TooltipTrigger>
       <TooltipPortal>
         <TooltipContent
-          class="select-none rounded bg-gray-600 px-3 py-2 text-sm leading-none text-white shadow-lg will-change-[transform,opacity]"
+          class="select-none whitespace-pre-line rounded bg-gray-600 px-3 py-2 text-sm leading-none text-white shadow-lg will-change-[transform,opacity]"
           :side-offset="5"
         >
           {{ text }}
@@ -21,4 +24,6 @@
 
 <script lang="ts" setup>
 defineProps<{ text: string }>();
+
+const open = ref(false);
 </script>

src/app/components/Form/Group.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+  <section class="grid grid-cols-2 gap-4">
     <slot />
     <Separator
       decorative

src/app/components/Header/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink to="/" class="mb-4 flex-grow self-start">
+  <NuxtLink to="/" class="mb-4">
     <h1 class="text-4xl font-medium dark:text-neutral-200">
       <img
         src="/logo.png"

src/app/components/Header/Update.vue

@@ -1,6 +1,10 @@
 <template>
   <div
-    v-if="globalStore.release?.updateAvailable"
+    v-if="
+      globalStore.release?.updateAvailable &&
+      authStore.userData &&
+      hasPermissions(authStore.userData, 'admin', 'any')
+    "
     class="font-small mb-10 rounded-md bg-red-800 p-4 text-sm text-white shadow-lg dark:bg-red-100 dark:text-red-600"
     :title="`v${globalStore.release.currentRelease} → v${globalStore.release.latestRelease.version}`"
   >
@@ -23,6 +27,5 @@
 
 <script lang="ts" setup>
 const globalStore = useGlobalStore();
-
-// TODO: only show this to admins
+const authStore = useAuthStore();
 </script>