improve tree and create project

src/components/editor.js

@@ -335,6 +335,7 @@ class AppEditor extends Tonic {
     const colors = {
       background: rgbaToHex(styles.getPropertyValue('--tonic-background').trim()),
       primary: rgbaToHex(styles.getPropertyValue('--tonic-primary').trim()),
+      secondary: rgbaToHex(styles.getPropertyValue('--tonic-secondary').trim()),
       info: rgbaToHex(styles.getPropertyValue('--tonic-info').trim()),
       dark: rgbaToHex(styles.getPropertyValue('--tonic-dark').trim()),
       accent: rgbaToHex(styles.getPropertyValue('--tonic-accent').trim()),
@@ -354,7 +355,7 @@ class AppEditor extends Tonic {
         { token: 'keyword', foreground: colors.accent },
         { token: 'punctuation', foreground: colors.primary },
 
-        { token: '', foreground: 'D4D4D4', background: '1E1E1E' },
+        { token: '', foreground: colors.primary },
         { token: 'invalid', foreground: 'f44747' },
         { token: 'emphasis', fontStyle: 'italic' },
         { token: 'strong', fontStyle: 'bold' },
@@ -363,7 +364,7 @@ class AppEditor extends Tonic {
         { token: 'variable.predefined', foreground: '4864AA' },
         { token: 'variable.parameter', foreground: '9CDCFE' },
         { token: 'constant', foreground: '569CD6' },
-        { token: 'comment', foreground: colors.info },
+        { token: 'comment', foreground: '338c32' },
         { token: 'number', foreground: colors.accent },
         { token: 'number.hex', foreground: '5BB498' },
         { token: 'regexp', foreground: 'B46695' },
@@ -377,8 +378,8 @@ class AppEditor extends Tonic {
         { token: 'tag', foreground: '569CD6' },
         { token: 'meta.scss', foreground: 'A79873' },
         { token: 'meta.tag', foreground: 'CE9178' },
-        { token: 'metatag', foreground: 'DD6A6F' },
-        { token: 'metatag.content.html', foreground: '9CDCFE' },
+        { token: 'metatag', foreground: colors.accent },
+        { token: 'metatag.content.html', foreground: colors.primary },
         { token: 'metatag.html', foreground: '569CD6' },
         { token: 'metatag.xml', foreground: '569CD6' },
         { token: 'metatag.php', fontStyle: 'bold' },

src/components/project.js

@@ -11,7 +11,7 @@ const NOT_SELECTED = 0
 const IS_SELECTED = 1
 
 async function rm (directory) {
-  const files = await fs.promises.readdir(directory, { withfiletypes: true })
+  const files = await fs.promises.readdir(directory, { withFileTypes: true })
 
   for (const file of files) {
     const filePath = path.join(directory, file.name)
@@ -334,6 +334,8 @@ class AppProject extends Tonic {
     if (!node) this.getNodeFromElement(el.parentElement)
     if (!node) return
 
+    if (node.nonMovable && !node.type === 'project') return
+
     const container = el.querySelector('.label')
 
     const input = document.createElement('input')
@@ -444,7 +446,11 @@ class AppProject extends Tonic {
     }
 
     if (value === 'delete') {
-      if (node.isDirectory) {
+      if (node.type === 'project') {
+        const app = this.props.parent
+        await app.db.projects.del(node.id)
+        await rm(node.id)
+      } else if (node.isDirectory) {
         try {
           await rm(node.id)
         } catch (err) {
@@ -496,26 +502,34 @@ class AppProject extends Tonic {
 
   async onSelection (node, isToggle) {
     if (!isToggle) {
+      const app = this.props.parent
       const projectNode = this.getProjectNode(node)
+      const coImagePreview = document.querySelector('view-image-preview')
+      const coProjectSummary = document.querySelector('view-project-summary')
+      const coHome = document.querySelector('view-home')
+
+      coImagePreview.hide()
+      coProjectSummary.hide()
+      coHome.hide()
 
       // Check if the project has changed, refresh the props component
-      if (this.state.currentProject !== projectNode.id) {
+      if (this.state.currentProjectId !== projectNode.id) {
         this.props.parent.state.currentProject = projectNode
         this.props.parent.reloadPreviewWindows()
 
         const coProperties = document.querySelector('app-properties')
         coProperties.loadProjectNode(projectNode)
       }
 
-      this.state.currentProject = projectNode.id
-
-      if (node.isDirectory) return
+      this.state.currentProjectId = projectNode.id
 
-      const coImagePreview = document.querySelector('view-image-preview')
-      const coHome = document.querySelector('view-home')
+      if (node.type === 'project') {
+        await coProjectSummary.reRender()
+        coProjectSummary.show()
+        return
+      }
 
-      coImagePreview.hide()
-      coHome.hide()
+      if (node.isDirectory) return
 
       if (projectNode.id === 'home') {
         coHome.show()
@@ -712,9 +726,11 @@ class AppProject extends Tonic {
         selected: oldChild?.selected ?? 0,
         state: oldChild?.state ?? 0,
         id: project.path,
+        projectId,
         label: project.label,
-        isDirectory: true,
+        isDirectory: false,
         nonMovable: true,
+        type: 'project',
         icon: 'package',
         children: []
       }

src/components/properties.js

@@ -52,7 +52,7 @@ class AppProperties extends Tonic {
     const project = document.querySelector('app-project')
     const config = new Config(app.state.currentProject?.id)
 
-    if (event === 'org-name' || event === 'shared-secret') {
+    if (event === 'org' || event === 'shared-secret') {
       const app = this.props.parent
       const config = new Config(app.state.currentProject?.id)
       if (!config) return
@@ -61,8 +61,8 @@ class AppProperties extends Tonic {
       if (bundleId) bundleId = bundleId.replace(/"/g, '')
       const { data: dataBundle } = await app.db.projects.get(bundleId)
 
-      if (event === 'org-name') {
-        dataBundle.orgName = el.value
+      if (event === 'org') {
+        dataBundle.org = el.value
         dataBundle.clusterId = await sha256(el.value, { bytes: true })
       }
 
@@ -193,7 +193,7 @@ class AppProperties extends Tonic {
         clusterId,
         subclusterId,
         sharedKey,
-        orgName: 'socket-app-studio',
+        org: 'union-app-studio',
       })
 
       await app.db.projects.put(bundleId, project)
@@ -323,9 +323,9 @@ class AppProperties extends Tonic {
           <tonic-input
             label="Organization"
             id="org-name"
-            data-event="org-name"
+            data-event="org"
             spellcheck="false"
-            value="${project.orgName}"
+            value="${project.org}"
           ></tonic-input>
 
           <tonic-input
@@ -343,7 +343,7 @@ class AppProperties extends Tonic {
             position="right"
             spellcheck="false"
             readonly="true"
-            value="union://${project.sharedSecret}?bundleId=${encodeURIComponent(bundleId)}&orgName=${project.orgName}"
+            value="union://${project.sharedSecret}?id=${encodeURIComponent(bundleId)}&org=${project.org}"
           ></tonic-input>
 
           <label>Project Status</label>

src/components/subscribe.js

@@ -19,6 +19,7 @@ export class DialogSubscribe extends TonicDialog {
     if (!el) return
 
     const app = this.props.parent
+    const notifications = document.querySelector('#notifications')
 
     const { event } = el.dataset
 
@@ -32,7 +33,6 @@ export class DialogSubscribe extends TonicDialog {
       // union://foo?id=com.demo.project&org=test
 
       if (!bundleId || !cId) {
-        const notifications = document.querySelector('#notifications')
         notifications.create({
           type: 'error',
           title: 'Error',
@@ -48,10 +48,25 @@ export class DialogSubscribe extends TonicDialog {
       const sharedKey = await Encryption.createSharedKey(sharedSecret)
       const derivedKeys = await Encryption.createKeyPair(sharedKey)
       const subclusterId = Buffer.from(derivedKeys.publicKey)
+      const pathToProject = path.join(path.DATA, bundleId)
+
+      try {
+        await fs.promises.mkdir(pathToProject, { recursive: true })
+      } catch (err) {
+        notifications.create({
+          type: 'error',
+          title: 'Error',
+          message: err.message
+        })
+        super.hide()
+        return
+      }
 
       const project = {
         bundleId,
+        label: bundleId,
         waiting: true,
+        path: pathToProject,
         clusterId,
         subclusterId,
         sharedKey,
@@ -62,8 +77,8 @@ export class DialogSubscribe extends TonicDialog {
       await app.initNetwork()
 
       const coProject = document.querySelector('app-project')
-      await this.close()
-      coProject.reRender()
+      await this.hide()
+      coProject.load()
     }
   }
 
@@ -96,7 +111,7 @@ export class DialogSubscribe extends TonicDialog {
         <tonic-input
           id="subscribe-shared-secret"
           label="Project Link"
-          placeholder="union://foo?bundleId=com.beep.boop&clusterId=bar"
+          placeholder="union://foo?id=com.beep.boop&org=bar"
           spellcheck="false"
           value=""
           width="100%"

src/css/component-editor.css

@@ -18,7 +18,7 @@ editor-tabs .tab {
   display: flex;
   align-items: center;
   margin: 10px 6px;
-  padding: 8px;
+  padding: 8px 6px;
   border-radius: 4px;
   background-color: var(--tonic-background);
   transition: opacity .2s ease-in-out, background-color .2s ease-in-out;

src/css/theme.css

@@ -47,7 +47,7 @@ body {
     --tonic-window: rgba(46, 46, 46, 1);
     --tonic-accent: rgba(56, 185, 255, 1);
     --tonic-primary: rgba(255, 255, 255, 1);
-    --tonic-secondary: rgba(195, 195, 195, 1);
+    --tonic-secondary: rgba(120, 120, 120, 1);
     --tonic-medium: rgba(153, 157, 160, 1);
     --tonic-dark: rgba(28, 28, 28, 1);
     --tonic-shadow: rgba(0, 0, 0, 0.3);

src/css/view-project-summary.css

@@ -0,0 +1,39 @@
+view-project-summary {
+  position: absolute;
+  top: 0; bottom: 0; left: 0; right: 0;
+  z-index: -1;
+  opacity: 0;
+  transition: z-index .1s ease, opacity .1s ease;
+  background-color: var(--tonic-background);
+}
+
+view-project-summary.show {
+  opacity: 1;
+  z-index: 30;
+}
+
+view-project-summary header span {
+  width: 100%;
+  text-align: center;
+}
+
+view-project-summary .container {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  padding: 6%;
+}
+
+view-project-summary .empty-state {
+  position: absolute;
+  top: 0px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  justify-content: center;
+  align-content: center;
+}

src/index.html

@@ -30,6 +30,7 @@
     <link rel="stylesheet" href="css/component-project.css">
 
     <link rel="stylesheet" href="css/view-image-preview.css">
+    <link rel="stylesheet" href="css/view-project-summary.css">
     <link rel="stylesheet" href="css/view-home.css">
   </head>
 

src/index.js

@@ -14,6 +14,7 @@ import Database from './db/index.js'
 
 import { ViewHome } from './views/home.js'
 import { ViewImagePreview } from './views/image-preview.js'
+import { ViewProjectSummary } from './views/project-summary.js'
 
 import { AppTerminal } from './components/terminal.js'
 import { AppProject } from './components/project.js'
@@ -509,7 +510,7 @@ class AppView extends Tonic {
 
       File:
         Save: s + CommandOrControl
-        New Project: n + CommandOrControl
+        New Project: N + CommandOrControl
         Add Shared Project: G + CommandOrControl
         ---
         Reset Demo Project: _
@@ -570,7 +571,7 @@ class AppView extends Tonic {
       }
 
       case 'New Project': {
-        this.createProject()
+        await this.createProject()
         const coProject = document.querySelector('app-project')
         coProject.load()
         break
@@ -671,7 +672,7 @@ class AppView extends Tonic {
     }
 
     if (event === 'create-new-project') {
-      this.createProject()
+      await this.createProject()
       const coProject = document.querySelector('app-project')
       coProject.load()
     }
@@ -721,6 +722,7 @@ class AppView extends Tonic {
 
               <view-home id="view-home" parent=${this}></view-home>
               <view-image-preview id="image-preview" parent=${this}></view-image-preview>
+              <view-project-summary id="project-summary" parent=${this}></view-project-summary>
             </tonic-split-right>
           </tonic-split>
         </tonic-split-left>
@@ -783,4 +785,5 @@ window.onload = () => {
   Tonic.add(DialogSubscribe)
   Tonic.add(ViewHome)
   Tonic.add(ViewImagePreview)
+  Tonic.add(ViewProjectSummary)
 }

src/views/project-summary.js

@@ -0,0 +1,42 @@
+import Tonic from '@socketsupply/tonic'
+
+class ViewProjectSummary extends Tonic {
+  show () {
+    this.classList.add('show')
+  }
+
+  hide () {
+    this.classList.remove('show')
+  }
+
+  async render () {
+    const app = this.props.parent
+    const currentProject = app.state.currentProject
+
+    if (!currentProject) return this.html``
+
+    const { data: dataProject } = await app.db.projects.get(currentProject.projectId)
+
+    let items
+
+    if (dataProject.waiting) {
+      items = this.html`
+        <div class="empty-state">
+          <p>Waiting...</p>
+        </div>
+      `
+    }
+
+    return this.html`
+      <header class="component">
+        <span>${currentProject.label}</span>
+      </header>
+      <div class="container">
+        ${items}
+      </div>
+    `
+  }
+}
+
+export default ViewProjectSummary
+export { ViewProjectSummary }