new selfhosted version

dashboard/app.vue

@@ -1,97 +1,31 @@
-<script lang="ts" setup>
+<script setup lang="ts">
+const { data: onboarding } = useAuthFetch<{ exists: boolean }>('/api/user/onboarding/exists', { key: 'onboarding' });
+const colorMode = useColorMode()
 
-import { Lit } from 'litlyx-js';
+await callOnce('user', async () => {
+  const { loadData } = useAppStart();
+  await loadData();
+});
 
-Lit.init('6643cd08a1854e3b81722ab5');
-
-const debugMode = process.dev;
-
-const { alerts, closeAlert } = useAlert();
-
-const { showDialog, closeDialog, dialogComponent, dialogParams, dialogStyle, dialogClosable } = useCustomDialog();
-
-const { drawerVisible, hideDrawer, drawerClasses } = useDrawer();
+import { Toaster } from '@/components/ui/sonner'
 
 </script>
 
 <template>
 
-  <div class="w-dvw h-dvh bg-lyx-lightmode-background-light dark:bg-lyx-background-light relative">
+  <ClientOnly>
+    <Toaster :rich-colors="colorMode.value === 'light' ? true : false" />
+    <GlobalDialog></GlobalDialog>
+  </ClientOnly>
 
-    <Transition name="drawer">
-      <LazyDrawerGeneric @onCloseClick="hideDrawer()" :class="drawerClasses"
-        class="bg-lyx-lightmode-background-light dark:bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]" v-if="drawerVisible">
-      </LazyDrawerGeneric>
-    </Transition>
-
-
-    <div class="fixed top-4 right-8 z-[999] flex flex-col gap-2" v-if="alerts.length > 0">
-      <div v-for="alert of alerts"
-        class="w-[30vw] min-w-[20rem] relative bg-lyx-lightmode-background dark:bg-[#151515] overflow-hidden border-solid border-[2px] border-lyx-lightmode-widget dark:border-[#262626] rounded-lg p-6 drop-shadow-lg">
-        <div class="flex items-start gap-4">
-          <div> <i :class="alert.icon"></i> </div>
-          <div class="grow">
-            <div class="poppins font-semibold">{{ alert.title }}</div>
-            <div class="poppins">
-              {{ alert.text }}
-            </div>
-          </div>
-          <div>
-            <i @click="closeAlert(alert.id)" class="fas fa-close hover:text-[#CCCCCC] cursor-pointer"></i>
-          </div>
-        </div>
-        <div :style="`width: ${Math.floor(100 / alert.ms * alert.remaining)}%; ${alert.transitionStyle}`"
-          class="absolute bottom-0 left-0 h-1 bg-lyx-primary z-100 alert-bar"></div>
-      </div>
+  <ClientOnly>
+    <div v-if="onboarding && onboarding.exists === false && !isSelfhosted()">
+      <Onboarding></Onboarding>
     </div>
+  </ClientOnly>
 
-    <div v-if="debugMode"
-      class="absolute bottom-8 right-4 bg-red-400 text-white text-[.9rem] font-bold px-4 py-[.2rem] rounded-lg z-[100]">
-      <div class="poppins flex sm:hidden"> XS </div>
-      <div class="poppins hidden sm:max-md:flex"> SM - MOBILE </div>
-      <div class="poppins hidden md:max-lg:flex"> MD - TABLET </div>
-      <div class="poppins hidden lg:max-xl:flex"> LG - LARGE </div>
-      <div class="poppins hidden xl:max-2xl:flex"> XL - EXTRA LARGE </div>
-      <div class="poppins hidden 2xl:flex"> 2XL - WIDE SCREEN </div>
-    </div>
-
-    <div v-if="showDialog"
-      class="custom-dialog w-full h-full flex items-center justify-center lg:pl-32 lg:p-20 p-4 absolute left-0 top-0 z-[100] backdrop-blur-[2px] dark:bg-black/50">
-      <div :style="dialogStyle" class="bg-lyx-lightmode-widget-light outline-lyx-lightmode-widget dark:bg-lyx-widget dark:outline-lyx-widget-lighter rounded-xl relative outline outline-1">
-        <div v-if="dialogClosable" class="flex justify-end absolute z-[100] right-8 top-8">
-          <i @click="closeDialog()" class="fas fa-close text-[1.6rem] hover:text-gray-500 cursor-pointer"></i>
-        </div>
-        <div class="flex items-center justify-center w-full h-full p-4">
-          <component class="w-full" v-if="dialogComponent" v-bind="dialogParams" :is="dialogComponent"></component>
-        </div>
-      </div>
-    </div>
-
-
-    <UModals />
-
-    <LazyOnboarding> </LazyOnboarding>
-
-    <NuxtLayout>
-      <NuxtPage></NuxtPage>
-    </NuxtLayout>
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 
 </template>
-
-<style scoped lang="scss">
-.drawer-enter-active,
-.drawer-leave-active {
-  transition: all .5s ease-in-out;
-}
-
-.drawer-enter-from,
-.drawer-leave-to {
-  transform: translateX(100%)
-}
-
-.drawer-enter-to,
-.drawer-leave-from {
-  transform: translateX(0)
-}
-</style>