fix(project): rename tree node, refactor(config): for socket updates

socket.ini

@@ -275,7 +275,7 @@ codesign_paths = ""
 ; default value: "13.0.0"
 ; minimum_supported_version = "13.0.0"
 
-trafficLightPosition = "10x24"
+window_control_offsets = "10x24"
 
 ; The icon to use for identifying your app on MacOS.
 icon = "icons/icon.png"
@@ -322,8 +322,8 @@ height = 80%
 ; The initial width of the first window in pixels or as a percentage of the screen.
 width = 80%
 
-backgroundColorDark = "rgba(46, 46, 46, 1)"
-backgroundColorLight = "rgba(255, 255, 255, 1)"
+;background_color_dark = "rgba(46, 46, 46, 1)"
+;background_color_light = "rgba(255, 255, 255, 1)"
 
 ; Maximum height of the window in pixels or as a percentage of the screen.
 ; default value: 100%
@@ -349,7 +349,7 @@ min_width = 700
 ; default value: false
 ; frameless = false
 
-titleBarStyle = "hiddenInset"
+titlebar_style = "hiddenInset"
 
 ; If the window is utility window or not.
 ; default value: false

src/components/editor.js

@@ -45,14 +45,15 @@ globalThis.MonacoEnvironment = {
 }
 
 class EditorTabs extends Tonic {
-  selectedTabId = null
   scrollLeft = 0
   index = 0
 
   constructor () {
     super()
 
     this.state = {
+      selectedTabId: null,
+      editingTabId: null,
       tabs: new Map(),
       ...this.state
     }
@@ -606,10 +607,17 @@ class AppEditor extends Tonic {
       const coTabs = document.querySelector('editor-tabs')
       this.editor.updateOptions({ readOnly: false })
 
-      if (coTabs.tab?.label.endsWith('.patch') || coTabs.tab?.label.endsWith('.ini')) {
+      if (coTabs.tab?.label.endsWith('.patch')) {
         this.editor.updateOptions({ readOnly: true })
-        this.editor.getAction('editor.foldAll').run()
       }
+
+      if (coTabs.tab?.label.endsWith('.patch') || coTabs.tab?.label.endsWith('.ini')) {
+        if (coTabs.state.editingTabId !== coTabs.tab.id) {
+          this.editor.getAction('editor.foldAll').run()
+        }
+      }
+
+      coTabs.state.editingTabId = coTabs.tab.id
     })
 
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {

src/components/project.js

@@ -108,6 +108,30 @@ class AppProject extends Tonic {
     })
   }
 
+  resetMouse () {
+    this.mouseMoveThreshold = 0
+    this.removeAttribute('dragging')
+    this.mouseIsDragging = false
+    this.mouseIsDown = false
+  }
+
+  async renameNode (node, value) {
+    const dirname = path.dirname(node.id).replace(/%20/g, ' ')
+    const newId = path.join(dirname, value)
+    await fs.promises.rename(node.id, newId)
+
+    const coTabs = document.querySelector('editor-tabs')
+
+    if (coTabs && coTabs.tab?.id === node.id) {
+      coTabs.rename({ oldId: coTabs.tab.id, newId, label: value })
+    }
+
+    node.label = value
+    node.id = newId
+
+    this.load()
+  }
+
   mousedown (e) {
     const el = Tonic.match(e.target, '[data-path]')
     if (!el) return
@@ -125,13 +149,6 @@ class AppProject extends Tonic {
     this.referenceNode = node
   }
 
-  resetMouse () {
-    this.mouseMoveThreshold = 0
-    this.removeAttribute('dragging')
-    this.mouseIsDragging = false
-    this.mouseIsDown = false
-  }
-
   async mouseup (e) {
     const mouseDragged = this.mouseIsDragging
     this.resetMouse()
@@ -270,20 +287,7 @@ class AppProject extends Tonic {
       if (e.key === 'Enter') {
         const value = e.target.value.trim()
         if (this.getNodeByProperty('id', value)) return
-
-        const dirname = path.dirname(node.id).replace(/%20/g, ' ')
-        const newId = path.join(dirname, value)
-        await fs.promises.rename(node.id, newId)
-
-        const coTabs = document.querySelector('editor-tabs')
-        if (coTabs && coTabs.tab.id === node.id) {
-          coTabs.rename({ oldId: coTabs.tab.id, newId, label: value })
-        }
-
-        node.label = value
-        node.id = newId
-
-        this.load()
+        this.renameNode(node, value)
       }
     }
   }
@@ -313,6 +317,10 @@ class AppProject extends Tonic {
     input.addEventListener('blur', () => {
       container.innerHTML = ''
       container.textContent = node.label
+
+      const value = input.value.trim()
+      if (this.getNodeByProperty('id', value)) return
+      this.renameNode(node, value)
     })
 
     container.innerHTML = ''
@@ -489,7 +497,6 @@ class AppProject extends Tonic {
       }
 
       this.state.currentProjectId = projectNode.id
-      this.props.parent.activatePreviewWindows()
 
       if (node.type === 'project') {
         await coProjectSummary.reRender()

src/index.js

@@ -189,8 +189,8 @@ class AppView extends Tonic {
         title: preview.title,
         titleBarStyle: preview.titleBarStyle, // ie 'hiddenInset'
         trafficLightPosition: preview.trafficLightPosition, // ie '10x26'
-        backgroundColorDark: 'rgba(46, 46, 46, 0.1)',
-        backgroundColorLight: 'rgba(255, 255, 255, 0.1)',
+        // backgroundColorDark: 'rgba(46, 46, 46, 0.1)',
+        // backgroundColorLight: 'rgba(255, 255, 255, 0.1)',
         aspectRatio: preview.aspectRatio, // ie '9:19.5'
         width: Math.floor(width / scale),
         height: Math.floor(height / scale)