experiments(dui3): wip

packages/dui3/app.vue

@@ -6,6 +6,12 @@
   </div>
 </template>
 <script setup lang="ts">
+import { useAccountsSetup } from '~/lib/accounts/composables/setup'
+import { useDocumentInfoSetup } from '~/lib/document-info'
+
+useAccountsSetup()
+useDocumentInfoSetup()
+
 useHead({
   // Title suffix
   titleTemplate: (titleChunk) =>

packages/dui3/components/header/NavBar.vue

@@ -13,6 +13,9 @@
             </FormButton>
           </div>
         </div>
+        <div>
+          <HeaderUserMenu />
+        </div>
       </div>
     </div>
   </nav>

packages/dui3/components/header/UserMenu.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <Menu as="div" class="ml-2 flex items-center">
+      <MenuButton v-slot="{ open }">
+        <span class="sr-only">Open user menu</span>
+        =
+        <!-- <UserAvatar v-if="!userOpen" size="lg" :user="activeUser" hover-effect />
+        <UserAvatar v-else size="lg" hover-effect>
+          <XMarkIcon class="w-5 h-5" />
+        </UserAvatar> -->
+      </MenuButton>
+      <Transition
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-75"
+        leave-from-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
+      >
+        <MenuItems
+          class="absolute right-0 md:right-4 top-14 md:top-16 w-full md:w-64 origin-top-right bg-foundation outline outline-2 outline-primary-muted rounded-md shadow-lg overflow-hidden"
+        >
+          <MenuItem v-slot="{ active, close }" as="div">
+            <NuxtLink
+              :class="[
+                active ? 'bg-foundation-focus' : '',
+                'flex items-center  justify-between px-2 py-3 text-sm text-foreground cursor-pointer transition'
+              ]"
+              to="/"
+              @click="close"
+            >
+              Haello
+            </NuxtLink>
+          </MenuItem>
+
+          <MenuItem v-slot="{ active, close }" as="div">
+            <NuxtLink
+              :class="[
+                active ? 'bg-foundation-focus' : '',
+                'flex items-center justify-between px-2 py-3 text-sm text-primary cursor-pointer transition border-b border-primary'
+              ]"
+              to="/test"
+              @click="close"
+            >
+              Tests
+            </NuxtLink>
+          </MenuItem>
+        </MenuItems>
+      </Transition>
+    </Menu>
+  </div>
+</template>
+<script setup lang="ts">
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+</script>

packages/dui3/components/user/Avatar.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>Hello avatar!</div>
+</template>
+<script setup lang="ts">
+import { Account } from '~/lib/bindings/definitions/baseBindings'
+
+const props = defineProps<{
+  userInfo: Account
+}>()
+</script>

packages/dui3/lib/accounts/composables/setup.ts

@@ -18,8 +18,10 @@ export type DUIAccountsState = {
 }
 
 const AccountsInjectionKey = 'DUI_ACCOUNTS_STATE'
-
-export async function useAccountsSetup(): Promise<DUIAccountsState> {
+/**
+ * Use this composable to set up the account bindings and graphql clients at the top of the app.
+ */
+export function useAccountsSetup(): DUIAccountsState {
   const app = useNuxtApp()
   const $baseBinding = app.$baseBinding
 
@@ -31,6 +33,8 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
   // Matches local accounts coming from the host app to app state.
   const refreshAccounts = async () => {
     const accs = await $baseBinding.getAccounts()
+    // We create a whole new list of accounts that will replace the old list. This way we ensure we drop
+    // out of scope old accounts that not exist anymore (TODO: test), and we don't need to do complex diffing.
     const newAccs = [] as DUIAccount[]
     for (const acc of accs) {
       const existing = accounts.value.find((a) => a.accountInfo.id === acc.id)
@@ -45,7 +49,9 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
           authToken: () => acc.token
         })
       )
+
       apolloClients[acc.id] = client
+
       newAccs.push({
         accountInfo: acc,
         client
@@ -54,7 +60,7 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
     accounts.value = newAccs
   }
 
-  await refreshAccounts()
+  ;(async () => await refreshAccounts())()
 
   const defaultAccount = computed(() =>
     accounts.value.find((acc) => acc.accountInfo.isDefault)
@@ -71,6 +77,9 @@ export async function useAccountsSetup(): Promise<DUIAccountsState> {
   return accState
 }
 
+/**
+ * Use this composable to access the users' local accounts and their corresponding graphql client.
+ */
 export function useInjectedAccounts(): DUIAccountsState {
   const state = inject(AccountsInjectionKey) as DUIAccountsState
   return state

packages/dui3/lib/document-info/index.ts

@@ -1,20 +1,19 @@
 import { DocumentInfo } from '~/lib/bindings/definitions/baseBindings'
 import { ref } from 'vue'
 
-const DocumentInfoInjectionKey = 'DUI_ACCOUNTS_STATE'
+const DocumentInfoInjectionKey = 'DUI_DOC_INFO_STATE'
 
-export async function useDocumentInfoSetup() {
+export function useDocumentInfoSetup() {
   const app = useNuxtApp()
   const documentInfo = ref<DocumentInfo>()
 
-  app.$baseBinding.on('documentChanged', () => {
+  app.$baseBinding?.on('documentChanged', () => {
     setTimeout(async () => {
       const docInfo = await app.$baseBinding.getDocumentInfo()
       documentInfo.value = docInfo
-    }, 500) // Don't ask
+    }, 500) // Rhino needs some time.
   })
-
-  documentInfo.value = await app.$baseBinding.getDocumentInfo()
+  ;(async () => (documentInfo.value = await app.$baseBinding.getDocumentInfo()))()
   provide(DocumentInfoInjectionKey, documentInfo)
   return documentInfo
 }

packages/dui3/pages/index.vue

@@ -39,17 +39,17 @@
 </template>
 <script setup lang="ts">
 import { UseQueryReturn, useQuery } from '@vue/apollo-composable'
-import { useAccountsSetup } from '~/lib/accounts/composables/setup'
+import { useInjectedAccounts } from '~/lib/accounts/composables/setup'
 import { graphql } from '~/lib/common/generated/gql'
 import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
-import { useDocumentInfoSetup } from '~/lib/document-info'
+import { useInjectedDocumentInfo } from '~/lib/document-info'
 
-const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
+const { accounts, refreshAccounts, defaultAccount } = useInjectedAccounts()
 
 const { $baseBinding } = useNuxtApp()
 const appName = await $baseBinding.getSourceApplicationName()
 
-const documentInfo = await useDocumentInfoSetup()
+const documentInfo = useInjectedDocumentInfo()
 
 const versionQuery = graphql(`
   query ServerInfoTest {

packages/dui3/pages/test.vue

@@ -38,10 +38,8 @@
 
 <script setup lang="ts">
 import { TestEventArgs } from '~/lib/bindings/definitions/testBindings'
-import { useAccountsSetup } from '~/lib/accounts/composables/setup'
 import { CheckIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/20/solid'
 const { $testBindings } = useNuxtApp()
-// const { accounts } = await useAccountsSetup()
 
 const tests = ref([
   {
@@ -97,7 +95,7 @@ const tests = ref([
       return 'not ok'
     },
     status: 0,
-    result: 'asdf' as unknown
+    result: 'not run yet' as unknown
   },
   {
     name: 'Event capture with args',
@@ -106,7 +104,7 @@ const tests = ref([
       return 'not ok'
     },
     status: 0,
-    result: 'asdf' as unknown
+    result: 'not run yet' as unknown
   }
 ])