improve window handling

src/components/editor.js

@@ -274,18 +274,21 @@ class AppEditor extends Tonic {
 
       if (!this.projectNode) return
       const value = this.editor.getValue()
-      const terminal = document.querySelector('app-terminal')
+      const coTerminal = document.querySelector('app-terminal')
+      const coProperties = document.querySelector('app-properties')
 
       this.writeDebounce = setTimeout(() => {
         if (this.projectNode.label === 'settings.json' && this.projectNode.parent.id === 'root') {
 
           try {
             this.props.parent.state.settings = JSON.parse(value)
           } catch (err) {
-            terminal.error(`Unable to parse settings file (${err.message})`)
+            coTerminal.error(`Unable to parse settings file (${err.message})`)
             return
           }
-          terminal.info(`Settings file updated.`)
+          coTerminal.info(`Settings file updated.`)
+          coProperties.reRender()
+          parent.activatePreviewWindows()
         }
 
         this.writeToDisk(this.projectNode, value)

src/components/project.js

@@ -584,8 +584,8 @@ class AppProject extends Tonic {
         child.icon = entry.isDirectory() ? 'folder' : 'file'
 
         if (parent.id === 'root' && entry.isDirectory()) {
-          if (!this.props.parent.currentProject) {
-            this.props.parent.currentProject = child
+          if (!this.props.parent.state.currentProject) {
+            this.props.parent.state.currentProject = child
           }
 
           child.icon = 'package'

src/components/properties.js

@@ -47,6 +47,21 @@ class AppProperties extends Tonic {
       if (previewWindow) {
         previewWindow.active = !previewWindow.active
 
+        const currentProject = app.state.currentProject
+
+        // if the user currently has the config file open in the editor...
+        if (currentProject.label === 'settings.json' && currentProject.parent.id === 'root') {
+          try {
+            editor.value = JSON.stringify(app.state.settings, null, 2)
+          } catch (err) {
+            return notifications.create({
+              type: 'error',
+              title: 'Unable to save config file',
+              message: err.message
+            })
+          }
+        }
+
         try {
           const str = JSON.stringify(app.state.settings)
           await fs.promises.writeFile(pathToSettingsFile, str)
@@ -131,7 +146,7 @@ class AppProperties extends Tonic {
     }
 
     return this.html`
-      <tonic-accordion id="options">
+      <tonic-accordion id="options" selected="preview-windows">
         <tonic-accordion-section
           name="preview-windows"
           id="preview-windows"

src/index.js

@@ -2,13 +2,16 @@ import fs from 'socket:fs'
 import path from 'socket:path'
 import process from 'socket:process'
 import application from 'socket:application'
+import { network, Encryption, sha256 } from 'socket:network'
 import vm from 'socket:vm'
 import { inspect, format } from 'socket:util'
 import { spawn, exec } from 'socket:child_process'
 
 import Tonic from '@socketsupply/tonic'
 import components from '@socketsupply/components'
 
+import Database from './db/index.js'
+
 import { AppTerminal } from './components/terminal.js'
 import { AppProject } from './components/project.js'
 import { AppProperties } from './components/properties.js'
@@ -30,7 +33,7 @@ class AppView extends Tonic {
       this.reloadPreviewWindows()
     })
 
-    window.addEventListener('close', async e => {
+    window.addEventListener('window-closed', async e => {
       const data = e.detail.data
 
       const previewWindowSettings = this.state.settings.previewWindows[data - 1]
@@ -142,11 +145,6 @@ class AppView extends Tonic {
       return
     }
 
-    for (const [k, v] of Object.entries(this.previewWindows)) {
-      delete this.state.zoom[k]
-      await v.close() // destroy any existing preview windows
-    }
-
     if (!this.state.userScript) {
       const res = await fetch('./preview.js')
       this.state.userScript = await res.text()
@@ -156,19 +154,27 @@ class AppView extends Tonic {
     const screenSize = await application.getScreenSize()
 
     for (let i = 0; i < this.state.settings.previewWindows.length; i++) {
+      const index = i + 1
       const preview = this.state.settings.previewWindows[i]
-      if (!preview.active) continue
+
+      if (!preview.active) {
+        const w = this.previewWindows[index]
+        if (w) {
+          delete this.state.zoom[index]
+          await w.close()
+        }
+        continue
+      }
 
       let width = screenSize.width * 0.6
       let height = screenSize.height * 0.6
-      const index = i + 1
       const scale = preview.scale || 1
       const platform = preview.platform || process.platform
 
       if (/\d+x\d+/.test(preview.resolution)) {
         const size = preview.resolution.split('x')
-        width = preview.resolution = size[0]
-        height = preview.resolution = size[1]
+        width = size[0]
+        height = size[1]
       }
 
       let hostOS = process.platform
@@ -243,13 +249,55 @@ class AppView extends Tonic {
         })
 
         this.previewWindows[w.index] = w
-      } catch {}
+      } catch (err) {
+        console.log(err)
+      }
     }
   }
 
-  async init () {
-    await navigator.serviceWorker.ready
+  async initData () {
+    if (process.env.DEBUG === '1') {
+      const databases = await window.indexedDB.databases()
+      for (const { name } of databases) await Database.drop(name)
+    }
+
+    this.db = {
+      channels: await Database.open('shares'),
+      state: await Database.open('state')
+    }
+
+    Database.onerror = err => {
+      console.error(err)
 
+      const notifications = document.querySelector('#notifications')
+      notifications?.create({
+        type: 'error',
+        title: 'Unhandled Database Error',
+        message: err.message
+      })
+    }
+
+    //
+    // Create a default clusterId (used as the default group)
+    //
+    const clusterId = await Encryption.createClusterId('socket-app-studio')
+
+    const { data: dataPeer } = await this.db.state.has('peer')
+
+    if (!dataPeer) {
+      const signingKeys = await Encryption.createKeyPair()
+      await this.db.state.put('peer', {
+        config: {
+          peerId: await Encryption.createId(),
+          clusterId
+        }
+      })
+    }
+
+
+  }
+
+  async initApplication () {
     const notifications = document.querySelector('#notifications')
     const settingsFile = path.join(path.DATA, 'projects', 'settings.json')
 
@@ -523,7 +571,10 @@ class AppView extends Tonic {
   }
 
   async render () {
-    await this.init()
+    await navigator.serviceWorker.ready
+
+    await this.initData()
+    await this.initApplication()
 
     return this.html`
       <header>

src/template/demo-project/socket.ini

@@ -255,6 +255,7 @@ codesign_paths = ""
 ; default value: "13.0.0"
 ; minimum_supported_version = "13.0.0"
 
+trafficLightPosition = "10x24"
 
 [native]
 
@@ -320,6 +321,7 @@ width = 50%
 ; default value: false
 ; utility = false
 
+; titleBarStyle = "hiddenInset"
 
 [window.alert]
 ; The title that appears in the 'alert', 'prompt', and 'confirm' dialogs. If this value is not present, then the application title is used instead. Currently only supported on iOS/macOS.

src/worker.js

@@ -32,7 +32,8 @@ export default async function (req, env, ctx) {
   }
 
   let css = `
-    #SOCKET_NOTCH {
+    body::after {
+      content: ' ';
       position: fixed;
       transform: translateX(-50%);
       background: ${bgColor};
@@ -42,7 +43,7 @@ export default async function (req, env, ctx) {
 
   if (params.get('device') === 'iphone-15') {
     css += `
-      #SOCKET_NOTCH {
+      body::after {
         top: 2%;
         left: 50%;
         width: 35%;
@@ -54,7 +55,7 @@ export default async function (req, env, ctx) {
 
   if (params.get('device') === 'iphone-13') {
     css += `
-      #SOCKET_NOTCH {
+      body::after {
         top: 0;
         left: 50%;
         width: 45%;
@@ -66,7 +67,7 @@ export default async function (req, env, ctx) {
 
   if (url.pathname.endsWith('index.html')) {
     data = data.replace(/<html(?:[^\n\r]*)>/, `<html style="zoom: ${params.get('zoom')}">`)
-    data = data.replace('</body>', `<style>${css}</style><div id="SOCKET_NOTCH"></div></body>`)
+    data = data.replace('</head>', `<style>${css}</style></head>`)
   }
 
   const types = await lookup(path.extname(url.pathname).slice(1))