wip improve project pane

src/css/index.css

@@ -274,6 +274,10 @@ header {
   overflow: auto;
 }
 
+.monaco-menu-container {
+  z-index: 10000 !important; /* Adjust the value as needed */
+}
+
 .monaco-editor .view-lines, .monaco-editor .view-lines * {
   -webkit-user-select: initial;
   user-select: initial;

src/css/tonic-overrides.css

@@ -1,6 +1,17 @@
+#split-input tonic-split-top {
+  z-index: 30;
+}
+
+#split-editor .tonic--split-handle.tonic--split-vertical {
+  margin-left: -5px;
+  border-left: none !important;
+  border-right: 1px solid var(--tonic-border);
+}
+
 tonic-split .tonic--split-horizontal {
-  margin-top: -5px;
   z-index: 9;
+  border-bottom: none !important;
+  border-top: 1px solid var(--tonic-border);
 }
 
 tonic-split .tonic--split-handle {
@@ -29,6 +40,10 @@ tonic-accordion-section .tonic--accordion-panel {
   z-index: 10;
 }
 
+tonic-split > tonic-split-top, tonic-split > tonic-split-bottom, tonic-split > tonic-split-left, tonic-split > tonic-split-right {
+  overflow: visible !important;
+} 
+
 tonic-split-top {
   padding-bottom: 1px;
 }

src/editor.js

@@ -1,5 +1,6 @@
 import fs from 'socket:fs'
 import path from 'socket:path'
+import { lookup } from 'socket:mime'
 
 import Tonic from '@socketsupply/tonic'
 import { resizePNG } from './icon/index.js'
@@ -99,10 +100,14 @@ class AppEditor extends Tonic {
     this.editor.getModel().getValueInRange(this.editor.getSelection())
   }
 
-  async writeToDisk (projectNode) {
+  async writeToDisk (projectNode, data) {
     const app = document.querySelector('app-view')
-    const dest = path.join(app.state.cwd, projectNode.id)
-    await fs.promises.writeFile(dest, projectNode.data)
+
+    try {
+      await fs.promises.writeFile(projectNode.id, data)
+    } catch (err) {
+      console.error(`Unable to write to ${dest}`, err)
+    }
   }
 
   async loadProjectNode (projectNode) {
@@ -124,8 +129,14 @@ class AppEditor extends Tonic {
     imagePreview.classList.remove('show')
 
     if (this.editor) {
-      monaco.editor.setModelLanguage(this.editor.getModel(), projectNode.language)
-      this.editor.setValue(projectNode.data)
+      let languageHint = path.extname(projectNode.id).slice(1)
+      if (languageHint === 'js') languageHint = 'javascript'
+      if (languageHint === 'hh') languageHint = 'cpp'
+      if (languageHint === 'cc') languageHint = 'cpp'
+      if (languageHint === 'c') languageHint = 'cpp'
+      monaco.editor.setModelLanguage(this.editor.getModel(), languageHint)
+      const data = await fs.promises.readFile(projectNode.id, 'utf8')
+      this.editor.setValue(data)
     }
   }
 
@@ -227,10 +238,10 @@ class AppEditor extends Tonic {
       clearTimeout(this.writeDebounce)
 
       if (!this.projectNode) return
-      this.projectNode.data = this.editor.getValue()
+      const value = this.editor.getValue()
 
       this.writeDebounce = setTimeout(() => {
-        this.writeToDisk(this.projectNode)
+        this.writeToDisk(this.projectNode, value)
       }, 256)
     })
 

src/index.js

@@ -25,8 +25,29 @@ class AppView extends Tonic {
   }
 
   async init () {
+    //
+    // TODO(@heapwolf): make this.state.cwd confirgurable
+    //
     this.state.cwd = path.join(process.env.HOME, '.local', 'share', 'socket-app-studio')
-    await fs.promises.mkdir(path.join(this.state.cwd, 'src'), { recursive: true })
+
+    const exists = await fs.promises.stat(path.join(this.state.cwd, 'socket.ini'))
+
+    if (!exists) {
+      await fs.promises.mkdir(path.join(this.state.cwd, 'src'), { recursive: true })
+
+      try {
+        await fs.promises.cp('templates', this.statea.cwd, { recursive: true })
+      } catch (err) {
+        const notifications = docuent.querySelector('#notifications')
+        notifications.create({
+          type: 'error',
+          title: 'Unable to initialize directory',
+          message: err.message
+        })
+
+        return
+      }
+    }
   }
 
   //
@@ -262,7 +283,7 @@ class AppView extends Tonic {
   async connected () {
     this.setupWindow()
 
-    const tree = {
+    /* const tree = {
       id: 'root',
       children: []
     }
@@ -402,7 +423,7 @@ class AppView extends Tonic {
     project.load(this.state.tree)
 
     const editor = document.querySelector('app-editor')
-    editor.loadProjectNode(node.children[0].children[2])
+    editor.loadProjectNode(node.children[0].children[2]) */
   }
 
   render () {

src/project.js

@@ -1,5 +1,7 @@
+import application from 'socket:application'
 import fs from 'socket:fs'
 import path from 'socket:path'
+import { lookup } from 'socket:mime'
 import Tonic from '@socketsupply/tonic'
 import { convertToICO } from './icon/index.js' 
 
@@ -101,6 +103,30 @@ class AppProject extends Tonic {
     return this.clickNode(node, isIcon)
   }
 
+  async contextmenu (e) {
+    const el = Tonic.match(e.target, '[data-path]')
+    if (!el) return
+
+    const node = this.getNodeFromElement(el)
+    if (!node) this.getNodeFromElement(el.parentElement)
+    if (!node) return
+
+    e.preventDefault()
+
+    const w = await application.getCurrentWindow()
+
+
+    const x = await w.setContextMenu({
+      'Cut': 'cut',
+      'Copy': 'copy',
+      'Paste': 'copy',
+      '---': '',
+      'Delete': 'delete'
+    })
+
+    console.log(x, node)
+  }
+
   async keydown (e) {
     if (e.keyCode === 32) {
       const focused = this.querySelector('a:focus')
@@ -193,8 +219,61 @@ class AppProject extends Tonic {
     return node
   }
 
-  load (value) {
-    this.state.tree = value
+  async connected () {
+    this.load()
+  }
+
+  async load () {
+    const tree = {
+      id: 'root',
+      children: []
+    }
+
+    const readDir = async (dirPath, parent) => {
+      let entries = []
+
+      try {
+        entries = await fs.promises.readdir(dirPath, { withFileTypes: true })
+      } catch (err) {
+        console.error(err, dirPath)
+      }
+
+      for (const entry of entries) {
+        const fullPath = path.join(dirPath, entry.name)
+
+        const child = {
+          id: fullPath,
+          parent,
+          selected: 0,
+          state: 0,
+          icon: entry.isDirectory() ? 'folder' : 'file',
+          label: entry.name,
+          mime: await lookup(path.extname(entry.name)),
+          children: []
+        }
+
+        parent.children.push(child)
+
+        if (entry.isDirectory()) {
+          try {
+            await readDir(fullPath, child)
+          } catch (err) {
+            console.error(`Error reading directory ${fullPath}:`, err)
+          }
+        }
+      }
+    }
+
+    const app = document.querySelector('app-view')
+
+    try {
+      await readDir(app.state.cwd, tree)
+      this.state.tree = tree
+    } catch (err) {
+      console.error('Error initiating read directory operation:', err)
+      return
+    }
+
     this.reRender()
   }