From 61a08a4c3d561f718ffe0fa9db584a8b3d7b8554 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Preu=C3=9F?= <rene@preuss.io>
Date: Mon, 10 Mar 2025 23:30:50 +0100
Subject: [PATCH] Add irl control dock

---
 .../src/components/docks/IrlControl.vue       |  34 ++++++
 .../components/molecules/AppGoldenLayout.vue  |  40 +------
 .../src/components/organisms/AppTitlebar.vue  | 111 ++++++++++++------
 .../src/composables/useWaitForComponent.ts    |   2 +-
 src/renderer/src/predefined-layouts.ts        |   4 +-
 src/renderer/src/store/dock.ts                | 105 +++++++++++++++++
 6 files changed, 221 insertions(+), 75 deletions(-)
 create mode 100644 src/renderer/src/components/docks/IrlControl.vue
 create mode 100644 src/renderer/src/store/dock.ts

diff --git a/src/renderer/src/components/docks/IrlControl.vue b/src/renderer/src/components/docks/IrlControl.vue
new file mode 100644
index 0000000..ad32d77
--- /dev/null
+++ b/src/renderer/src/components/docks/IrlControl.vue
@@ -0,0 +1,34 @@
+<template>
+  <AppGoldenLayoutContainer>
+    <template v-if="false">
+
+    </template>
+    <AppEmptyState
+      v-else
+      :icon="{ name: 'server' }"
+      :actions="actions"
+      title="No IRL Control"
+      description="Not connected to a server"
+    />
+  </AppGoldenLayoutContainer>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '../../store/app'
+import AppEmptyState from '../atoms/AppEmptyState.vue'
+import { ButtonVariant } from '../atoms/AppButton.vue'
+import AppGoldenLayoutContainer from '../atoms/AppGoldenLayoutContainer.vue'
+import { usePopupStore } from '../../store/popup'
+
+const { openPopup } = usePopupStore()
+const store = useAppStore()
+
+const actions = [
+  {
+    label: 'Add Server',
+    variant: 'outline' as ButtonVariant,
+    onClick: () => {
+    }
+  }
+]
+</script>
diff --git a/src/renderer/src/components/molecules/AppGoldenLayout.vue b/src/renderer/src/components/molecules/AppGoldenLayout.vue
index 148609a..0d3482e 100644
--- a/src/renderer/src/components/molecules/AppGoldenLayout.vue
+++ b/src/renderer/src/components/molecules/AppGoldenLayout.vue
@@ -1,51 +1,21 @@
 <template>
   <Glayout
     ref="GLayoutRoot"
-    :component-types="componentTypes"
+    :component-types="docks.componentTypes"
     class="h-full w-full"
   />
 </template>
 
 <script setup lang="ts">
 import Glayout from '../atoms/AppGoldenLayout.vue'
-import SceneItemList from '../docks/SceneItemList.vue'
-import SceneList from '../docks/SceneList.vue'
-import StudioView from '../docks/StudioView.vue'
-import AudioMixer from '../docks/AudioMixer.vue'
-import { markRaw, onMounted, ref } from 'vue'
-import { useWaitForRef } from '../../composables/useWaitForComponent'
-import { defaultLayoutConfig } from '../../predefined-layouts'
-import { LayoutConfig } from 'golden-layout'
+import { onMounted, ref } from 'vue'
+import { useDocksStore } from '../../store/dock'
 
 const GLayoutRoot = ref<null | typeof Glayout>(null)
 
-const componentTypes = {
-  Sources: markRaw(SceneItemList),
-  Scenes: markRaw(SceneList),
-  Main: markRaw(StudioView),
-  AudioMixer: markRaw(AudioMixer)
-}
+const docks = useDocksStore()
 
 onMounted(async () => {
-  await onLoadLayout()
+  await docks.onLoadLayout(GLayoutRoot)
 })
-
-const onLoadLayout = async () => {
-  const layout = await useWaitForRef<typeof Glayout>(GLayoutRoot)
-
-  const str = localStorage.getItem('gl_config')
-  if (!str) {
-    layout.loadGLLayout(defaultLayoutConfig)
-    return
-  }
-
-  const config = JSON.parse(str as string) as LayoutConfig
-  config.header = {
-    ...config.header,
-    maximise: false,
-    popout: false
-  }
-  console.log(config)
-  layout.loadGLLayout(config)
-}
 </script>
diff --git a/src/renderer/src/components/organisms/AppTitlebar.vue b/src/renderer/src/components/organisms/AppTitlebar.vue
index ca2b47b..68bc7f7 100644
--- a/src/renderer/src/components/organisms/AppTitlebar.vue
+++ b/src/renderer/src/components/organisms/AppTitlebar.vue
@@ -13,7 +13,7 @@
           class="flex justify-center items-center hover:bg-white/10 w-8 h-8 rounded"
           @click="showSecondLevelMenu = !showSecondLevelMenu"
         >
-          <i class="fas fa-fw fa-bars"/>
+          <i class="fas fa-fw fa-bars" />
         </button>
 
         <div
@@ -92,35 +92,37 @@
       </OnClickOutside>
 
       <div class="flex items-center gap-6 -mr-6">
-        <AppControls v-if="store.connected"/>
-        <AppElectronControls/>
+        <AppControls v-if="store.connected" />
+        <AppElectronControls />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {OnClickOutside} from '@vueuse/components'
-import AppTitlebarDropdown, {MenuItem} from '../atoms/AppTitlebarDropdown.vue'
-import {computed, Ref, ref} from 'vue'
-import {Connection, useAppStore} from '../../store/app'
-import {useObs} from '../../composables/useObs'
-import {useNotificationStore} from '../../store/notification'
+import { OnClickOutside } from '@vueuse/components'
+import AppTitlebarDropdown, { MenuItem } from '../atoms/AppTitlebarDropdown.vue'
+import { computed, Ref, ref } from 'vue'
+import { Connection, useAppStore } from '../../store/app'
+import { useObs } from '../../composables/useObs'
+import { useNotificationStore } from '../../store/notification'
 import AppControls from '../atoms/AppControls.vue'
-import {usePopupStore} from '../../store/popup'
-import {colorPalette} from '../../color-palette'
+import { usePopupStore } from '../../store/popup'
+import { useDocksStore } from '../../store/dock'
+import { colorPalette } from '../../color-palette'
 import AppElectronControls from '../molecules/AppElectronControls.vue'
-import {useUserStore} from '../../store/user'
-import {storeToRefs} from 'pinia'
-import LoginPopup from "../popups/LoginPopup.vue";
-import ConnectPopup from "../popups/ConnectPopup.vue";
+import { useUserStore } from '../../store/user'
+import { storeToRefs } from 'pinia'
+import LoginPopup from '../popups/LoginPopup.vue'
+import ConnectPopup from '../popups/ConnectPopup.vue'
 
 const store = useAppStore()
-const {error} = useNotificationStore()
-const {openPopup} = usePopupStore()
-const {obs} = useObs()
+const docks = useDocksStore()
+const { error } = useNotificationStore()
+const { openPopup } = usePopupStore()
+const { obs } = useObs()
 const userStore = useUserStore()
-const {user} = storeToRefs(userStore);
+const { user } = storeToRefs(userStore)
 
 const showSecondLevelMenu = ref(false)
 
@@ -132,13 +134,13 @@ const secondLevelMenus = computed(() => {
         {
           id: 0,
           label: 'Sign in',
-          icon: {name: 'sign-in'},
+          icon: { name: 'sign-in' },
           click: () => openPopup(LoginPopup)
         },
         {
           id: 1,
           label: 'Sign out',
-          icon: {name: 'sign-out'},
+          icon: { name: 'sign-out' },
           click: () => userStore.logout()
         }
       ]
@@ -149,56 +151,91 @@ const secondLevelMenus = computed(() => {
         {
           id: 0,
           label: 'Studio Mode',
-          icon: store.studioMode ? {name: 'check'} : {name: 'empty'},
+          icon: store.studioMode ? { name: 'check' } : { name: 'empty' },
           click: () => store.toggleStudioMode()
         },
         {
           id: 10,
           label: 'Image Quality: Low Bandwidth',
-          icon: store.screenshot.imageCompressionQuality === 10 ? {name: 'check'} : {name: 'empty'},
+          icon: store.screenshot.imageCompressionQuality === 10 ? { name: 'check' } : { name: 'empty' },
           click: () => store.setImageCompressionQuality(10)
         },
         {
           id: 40,
           label: 'Image Quality: Medium Bandwidth',
-          icon: store.screenshot.imageCompressionQuality === 40 ? {name: 'check'} : {name: 'empty'},
+          icon: store.screenshot.imageCompressionQuality === 40 ? { name: 'check' } : { name: 'empty' },
           click: () => store.setImageCompressionQuality(40)
         },
         {
           id: 80,
           label: 'Image Quality: High Bandwidth',
-          icon: store.screenshot.imageCompressionQuality === 80 ? {name: 'check'} : {name: 'empty'},
+          icon: store.screenshot.imageCompressionQuality === 80 ? { name: 'check' } : { name: 'empty' },
           click: () => store.setImageCompressionQuality(80)
         }
       ]
     },
+    {
+      label: 'Docks',
+      menuItems: [
+        {
+          id: 0,
+          label: 'Scenes',
+          icon: docks.loadedComponentTypes.includes('Sources') ? { name: 'check' } : { name: 'empty' },
+          click: async () => await docks.addComponent('Sources', 'Sources')
+        },
+        {
+          id: 10,
+          label: 'Sources',
+          icon: docks.loadedComponentTypes.includes('Scenes') ? { name: 'check' } : { name: 'empty' },
+          click: async () => await docks.addComponent('Scenes', 'Scenes')
+        },
+        {
+          id: 40,
+          label: 'Studio View',
+          icon: docks.loadedComponentTypes.includes('StudioView') ? { name: 'check' } : { name: 'empty' },
+          click: async () => await docks.addComponent('StudioView', 'Studio View')
+        },
+        {
+          id: 80,
+          label: 'Audio Mixer',
+          icon: docks.loadedComponentTypes.includes('AudioMixer') ? { name: 'check' } : { name: 'empty' },
+          click: async () => await docks.addComponent('AudioMixer', 'Audio Mixer')
+        },
+        {
+          id: 80,
+          label: 'IRL Control',
+          icon: docks.loadedComponentTypes.includes('IrlControl') ? { name: 'check' } : { name: 'empty' },
+          click: async () => await docks.addComponent('IrlControl', 'IRL Control')
+        }
+      ]
+    },
     {
       label: 'Help',
       menuItems: [
         {
           id: 0,
           label: 'About',
-          icon: {name: 'info-circle'}
+          icon: { name: 'info-circle' }
         },
         {
           id: 1,
           label: 'Check for updates',
-          icon: {name: 'download'}
+          icon: { name: 'download' }
         },
         {
           id: 2,
           label: 'Report a bug',
-          icon: {name: 'bug'}
+          icon: { name: 'bug' }
         },
         {
           id: 3,
           label: 'Join the Discord',
-          icon: {name: 'discord'}
+          icon: { name: 'discord' }
         },
         {
           id: 4,
           label: 'Open the Wiki',
-          icon: {name: 'book'}
+          icon: { name: 'book' }
         }
       ]
     }
@@ -210,16 +247,16 @@ const menuItems: Ref<MenuItem[]> = computed(() => {
     {
       id: 0,
       label: 'Connect to a new server',
-      icon: {name: 'plus'}
+      icon: { name: 'plus' }
     }
-  ];
+  ]
 
   user.value?.connections?.forEach((connection) => {
     items.push({
       id: connection.id,
       label: connection.name,
       subtitle: `ws://${connection.ip}:${connection.port}`,
-      letter: {text: connection.name[0], color: connection.color},
+      letter: { text: connection.name[0], color: connection.color },
       data: {
         ip: connection.ip,
         port: connection.port,
@@ -232,7 +269,7 @@ const menuItems: Ref<MenuItem[]> = computed(() => {
 })
 
 const calculateViaGradient = computed(() => {
-  const {r, g, b} = colorPalette[activeConnection.value.letter?.color ?? 'red']
+  const { r, g, b } = colorPalette[activeConnection.value.letter?.color ?? 'red']
   return {
     'background': `linear-gradient(90deg, #18181B 0px, rgba(${r}, ${g}, ${b}, .4) 95px, #18181B 300px)`,
     '-webkit-app-region': 'drag'
@@ -243,7 +280,7 @@ const profileMenuItems = computed(() => {
   return store.profileList.profiles.map((profile) => ({
     id: profile,
     label: profile,
-    icon: {name: 'user'}
+    icon: { name: 'user' }
   }))
 })
 
@@ -251,7 +288,7 @@ const sceneCollectionMenuItems = computed(() => {
   return store.sceneCollectionList.sceneCollections.map((sceneCollection) => ({
     id: sceneCollection,
     label: sceneCollection,
-    icon: {name: 'rectangle-history'}
+    icon: { name: 'rectangle-history' }
   }))
 })
 
@@ -265,7 +302,7 @@ const activeConnection = computed(() => {
   }) ?? {
     label: store.connection.ip,
     subtitle: `ws://${store.connection.ip}:${store.connection.port}`,
-    letter: {text: store.connection.ip[0], color: 'rose'},
+    letter: { text: store.connection.ip[0], color: 'rose' }
   }
 })
 
diff --git a/src/renderer/src/composables/useWaitForComponent.ts b/src/renderer/src/composables/useWaitForComponent.ts
index a860f88..6e5f77e 100644
--- a/src/renderer/src/composables/useWaitForComponent.ts
+++ b/src/renderer/src/composables/useWaitForComponent.ts
@@ -1,6 +1,6 @@
 import { Ref } from 'vue'
 
-export async function useWaitForRef<T>(ref: Ref) {
+export async function useWaitForRef<T>(ref: Ref): Promise<T> {
   return new Promise<T>((resolve) => {
     const interval = setInterval(() => {
       if (ref.value) {
diff --git a/src/renderer/src/predefined-layouts.ts b/src/renderer/src/predefined-layouts.ts
index 5a1cf78..9701fef 100644
--- a/src/renderer/src/predefined-layouts.ts
+++ b/src/renderer/src/predefined-layouts.ts
@@ -86,8 +86,8 @@ export const defaultLayoutConfig: LayoutConfig = {
                 maximised: false,
                 isClosable: true,
                 reorderEnabled: true,
-                title: 'Main',
-                componentType: 'Main',
+                title: 'Studio View',
+                componentType: 'StudioView',
                 componentState: {
                   refId: 2
                 }
diff --git a/src/renderer/src/store/dock.ts b/src/renderer/src/store/dock.ts
new file mode 100644
index 0000000..f27682f
--- /dev/null
+++ b/src/renderer/src/store/dock.ts
@@ -0,0 +1,105 @@
+import { defineStore } from 'pinia'
+import { useWaitForRef } from '../composables/useWaitForComponent'
+import AppGoldenLayout from '../components/atoms/AppGoldenLayout.vue'
+import SceneItemList from '../components/docks/SceneItemList.vue'
+import SceneList from '../components/docks/SceneList.vue'
+import StudioView from '../components/docks/StudioView.vue'
+import AudioMixer from '../components/docks/AudioMixer.vue'
+import IrlControl from '../components/docks/IrlControl.vue'
+import { defaultLayoutConfig } from '../predefined-layouts'
+import type { ComponentItemConfig, ItemConfig, LayoutConfig, ResolvedLayoutConfig } from 'golden-layout'
+import { Component, markRaw, Ref, ref } from 'vue'
+import { Raw } from '@vue/reactivity'
+
+export const useDocksStore = defineStore('dock', () => {
+  const layout: Ref<AppGoldenLayout> = ref<typeof AppGoldenLayout>()
+  const layoutConfig: Ref<ResolvedLayoutConfig> = ref<ResolvedLayoutConfig>()
+  const loadedComponentTypes: Ref<string> = ref<string>()
+  const componentTypes: {
+    [key: string]: Raw<Component>
+  } = {
+    Sources: markRaw(SceneItemList),
+    Scenes: markRaw(SceneList),
+    StudioView: markRaw(StudioView),
+    AudioMixer: markRaw(AudioMixer),
+    IrlControl: markRaw(IrlControl)
+  }
+
+  const loadLayout = async (config: ResolvedLayoutConfig) => {
+    layoutConfig.value = config
+    await layout.value.loadGLLayout(defaultLayoutConfig)
+  }
+
+  const onLoadLayout = async (goldenLayout) => {
+    layout.value = await useWaitForRef<typeof AppGoldenLayout>(goldenLayout)
+
+    const str = localStorage.getItem('gl_config')
+    if (!str) {
+      await loadLayout(defaultLayoutConfig)
+      return
+    }
+
+    const config = JSON.parse(str as string) as LayoutConfig
+    config.header = {
+      ...config.header,
+      maximise: false,
+      popout: false
+    }
+    console.log(config)
+    await loadLayout(config)
+  }
+
+  const addComponent = async (componentType: string, title: string) => {
+    await layout.value.addGLComponent(componentType, title)
+    console.log(await layout.value.getLayoutConfig())
+  }
+
+  /**
+   * Recursively checks if a componentType exists in the given layout config.
+   *
+   * @param config The LayoutConfig to search through.
+   * @param targetType The component type to look for.
+   * @returns True if found, false otherwise.
+   */
+  function hasComponentType(config: LayoutConfig, targetType: string): boolean {
+    const rootContent = config.root?.content
+    if (!rootContent || !Array.isArray(rootContent)) {
+      return false
+    }
+
+    const searchContent = (items: ItemConfig[]): boolean => {
+      for (const item of items) {
+        if (item.type === 'component') {
+          const componentItem = item as ComponentItemConfig
+          if (componentItem.componentType === targetType) {
+            return true
+          }
+        }
+
+        if (item.content && item.content.length > 0) {
+          if (searchContent(item.content)) {
+            return true
+          }
+        }
+      }
+
+      return false
+    }
+
+    return searchContent(rootContent)
+  }
+
+  setInterval(async () => {
+    if (!layout.value) return
+    const config = await layout.value.getLayoutConfig()
+    loadedComponentTypes.value = Object.keys(componentTypes)
+      .filter(x => hasComponentType(config, x))
+  }, 1000)
+
+  return {
+    onLoadLayout,
+    addComponent,
+    componentTypes,
+    loadedComponentTypes
+  }
+})