More work on this.

package.json

@@ -16,6 +16,7 @@
     "@headlessui/vue": "^1.4.2",
     "@heroicons/vue": "^1.0.5",
     "@tailwindcss/aspect-ratio": "^0.3.0",
+    "@vueuse/core": "^7.1.2",
     "core-js": "^3.6.5",
     "obs-websocket-js": "^4.0.3",
     "uuid": "^8.3.2",

src/App.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col h-screen text-system-text">
+  <div class="flex flex-col h-screen text-system-text text-sm">
     <nav-bar v-if="isMacOS" class="flex-none"></nav-bar>
     <div class="flex-1 flex flex-row items-stretch">
-      <sidebar class="flex-none"></sidebar>
+      <sidebar class="flex-none border-r border-system-divider"></sidebar>
       <preview></preview>
-      <controls class="flex-none"></controls>
+      <controls class="flex-none border-l border-system-divider"></controls>
     </div>
   </div>
 </template>

src/Preferences.vue

@@ -1,8 +1,23 @@
 <template>
-  <div>Preferences</div>
+  <div class="h-screen bg-system-background-window text-system-text text-sm">
+    <p class="controls-heading">OBS Connection</p>
+    <div class="control-field">
+      <label>Host</label>
+      <input type="text">
+    </div>
+    <div class="control-field">
+      <label>Port</label>
+      <input type="number">
+    </div>
+    <div class="control-field">
+      <label>Password</label>
+      <input type="password">
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
+import '@/assets/shared.css';
 import { defineComponent } from 'vue'
 
 export default defineComponent({

src/assets/shared.css

@@ -0,0 +1,19 @@
+.controls\-heading {
+  @apply border-b border-system-separator p-2 text-system-text-secondary font-semibold;
+}
+
+.control\-field {
+  @apply p-2 flex space-x-2;
+}
+
+.control\-field label {
+  @apply w-1/3 text-right;
+}
+
+.control\-field input, .control\-field select {
+  @apply text-system-text-control bg-system-background-control w-2/3;
+}
+
+.control\-field select {
+  @apply macos:rounded;
+}

src/background.ts

@@ -36,9 +36,11 @@ async function createWindow() {
     }
   })
 
-  win.once('ready-to-show', () => {
+  win.webContents.on('dom-ready', () => {
     injectSystemColors(win);
+  });
 
+  win.once('ready-to-show', () => {
     win.show();
   });
 

src/components/Controls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-72 bg-system-background-window p-2">
+  <div class="w-72 bg-system-background-window">
     <div v-if="component">
       <div v-for="(control, index) in controls" :key="index">
         <component :is="control" :component="component"></component>
@@ -9,6 +9,7 @@
 </template>
 
 <script lang="ts">
+import '@/assets/shared.css';
 import { Component } from '@/layout';
 import { key } from '@/store/app'
 import { computed, defineComponent } from 'vue'

src/components/Controls/FlexComponentControls.vue

@@ -1,22 +1,22 @@
 <template>
   <div>
-    <p>Flex Component</p>
-    <div>
+    <p class="controls-heading">Flex Component</p>
+    <div class="control-field">
       <label>Direction</label>
       <select v-model="direction">
         <option value="horizontal">Horizontal</option>
         <option value="vertical">Vertical</option>
       </select>
     </div>
-    <div>
+    <div class="control-field">
       <label>Distribution</label>
       <select v-model="distribution">
         <option value="leading">Leading</option>
         <option value="center">Center</option>
         <option value="trailing">Trailing</option>
       </select>
     </div>
-    <div>
+    <div class="control-field">
       <label>Spacing</label>
       <input type="number" v-model="spacing">
     </div>

src/components/Controls/InsetComponentControls.vue

@@ -1,23 +1,25 @@
 <template>
   <div>
-    <p>Flex Component</p>
-    <div>
+    <p class="controls-heading">Inset Component</p>
+    <div class="control-field">
       <label>Insets</label>
       <div>
-        <label>Top</label>
-        <input type="number" v-model="top">
-      </div>
-      <div>
-        <label>Left</label>
-        <input type="number" v-model="left">
-      </div>
-      <div>
-        <label>Bottom</label>
-        <input type="number" v-model="bottom">
-      </div>
-      <div>
-        <label>Right</label>
-        <input type="number" v-model="right">
+        <div>
+          <label>Top</label>
+          <input type="number" v-model="top">
+        </div>
+        <div>
+          <label>Left</label>
+          <input type="number" v-model="left">
+        </div>
+        <div>
+          <label>Bottom</label>
+          <input type="number" v-model="bottom">
+        </div>
+        <div>
+          <label>Right</label>
+          <input type="number" v-model="right">
+        </div>
       </div>
     </div>
   </div>

src/components/Controls/SourceComponentControls.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <p>Source Component</p>
-    <div>
+    <p class="controls-heading">Source Component</p>
+    <div class="control-field">
       <label>Source</label>
       <select v-model="source">
         <option value="">None</option>

src/components/NavBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-10 app-region-drag flex flex-row">
-    <div class="flex-none w-72"></div>
-    <div class="bg-gray-100 dark:bg-gray-800 w-full"></div>
+    <div class="flex-none w-72 border-r border-system-divider"></div>
+    <div class="bg-system-background-nav-bar w-full border-b border-system-divider"></div>
   </div>
 </template>

src/components/Preview.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="bg-gray-400 overflow-hidden w-full relative" v-observe-resize="didChangeSize">
-    <canvas ref="canvas" class='bg-yellow-100 absolute' width="1920" height="1080"></canvas>
+  <div class="bg-gray-200 dark:bg-gray-800 w-full h-full p-4">
+    <div class="overflow-hidden h-full w-full relative" v-observe-resize="didChangeSize">
+      <canvas ref="canvas" class='bg-white dark:bg-black absolute' width="1920" height="1080"></canvas>
+    </div>
   </div>
 </template>
 
@@ -10,13 +12,15 @@ import { computed, defineComponent, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { LayoutNode } from '@/layout'
 import { Size } from '@/layout'
+import { usePreferredDark } from '@vueuse/core'
 
 export default defineComponent({
   name: 'Preview',
   setup() {
     const store = useStore(key)
-    const size = ref(new Size(1920, 1080));
+    const scale = ref(1);
     const canvas = ref<HTMLCanvasElement | null>(null);
+
     const didChangeSize = (newSize: Size) => {
       let el = canvas.value
       if (!el) { return; }
@@ -28,24 +32,31 @@ export default defineComponent({
       let height = Math.min(newSize.height, newSize.width / aspectRatio);
 
       if (newSize.width > newSize.height) {
-        el.style.transform = `scale(${width / 1920}, ${width / aspectRatio / 1080})`
+        scale.value = width / 1920
+        el.style.transform = `scale(${scale.value}, ${scale.value})`
         el.style.left = ((newSize.width - width) / 2) + 'px';
         el.style.top = ((newSize.height - (width / aspectRatio)) / 2) + 'px';
       } else {
-        el.style.transform = `scale(${height * aspectRatio / 1920}, ${height / 1080})`
+        scale.value = height / 1080
+        el.style.transform = `scale(${scale.value}, ${scale.value})`
         el.style.left = ((newSize.width - (height * aspectRatio)) / 2) + 'px';
         el.style.top = ((newSize.height - height) / 2) + 'px';
       }
     }
 
-    let node = computed(() => store.state.rootNode)
+    const node = computed(() => store.state.rootNode)
+    const prefersDarkMode = usePreferredDark();
 
     const renderNode = (node: LayoutNode, context: CanvasRenderingContext2D) => {
       context.save();
       
+      context.lineWidth = 1 / scale.value;
+
       if (node.isContainer) {
-        context.setLineDash([4, 2]);
+        context.strokeStyle = 'rgb(150, 150, 150)'
+        context.setLineDash([4 / scale.value, 2 / scale.value]);
       } else {
+        context.strokeStyle = prefersDarkMode.value ? 'white' : 'black';
         context.setLineDash([]);
       }
 
@@ -75,11 +86,17 @@ export default defineComponent({
       render();
     })
 
+    watch(scale, () => {
+      render();
+    })
+
+    watch(prefersDarkMode, () => {
+      render();
+    });
+
     return {
       canvas,
       didChangeSize,
-      node,
-      size
     }
   }
 })

src/components/Sidebar/TreeControl.vue

@@ -1,15 +1,13 @@
 <template>
   <Disclosure v-slot="{ open }" :defaultOpen="true">
     <context-menu-providing>
-      <div class="flex justify-between macos:m-2 macos:rounded" :class="{'bg-system-background-selected-content': isSelected}" @click.prevent="selectComponent">
-        <div class="flex">
+      <div class="flex macos:mx-2 macos:rounded" :class="{'bg-system-background-selected-content': isSelected, 'text-white': isSelected}" :style="`padding-left: calc(0.75rem * ${indentationLevel})`" @click.prevent="selectComponent">
           <DisclosureButton v-if="isContainerComponent">
-            <ChevronRightIcon class="w-6 h-6" :class='open ? "transform rotate-90" : ""' />
+            <ChevronRightIcon class="w-4 h-4" :class='open ? "transform rotate-90" : ""' />
           </DisclosureButton>
-          <div v-else class="w-6 h-6"></div>
+          <div v-else class="w-4 h-4"></div>
 
           <span v-text="component.name"></span>
-        </div>
       </div>
 
       <template v-slot:menu>
@@ -26,8 +24,8 @@
         </context-menu>
       </template>
     </context-menu-providing>
-    <DisclosurePanel v-if="isContainerComponent" class="pl-4">
-      <TreeControl v-for="child in component.children" :key="child.id" :component="child"></TreeControl>
+    <DisclosurePanel v-if="isContainerComponent">
+      <TreeControl v-for="child in component.children" :key="child.id" :component="child" :indentationLevel="indentationLevel + 1"></TreeControl>
     </DisclosurePanel>
   </Disclosure>
 </template>
@@ -63,6 +61,10 @@ export default defineComponent({
       type: Object as PropType<Component>,
       required: true
     },
+    indentationLevel: {
+      type: Number,
+      default: 0,
+    }
   },
   setup(props) {
     const store = useStore(key)