improve sharing

Author: heapwolf

src/components/editor.js

@@ -263,6 +263,7 @@ class AppEditor extends Tonic {
     const coTerminal = document.querySelector('app-terminal')
     const coProperties = document.querySelector('app-properties')
     const coTabs = document.querySelector('editor-tabs')
+    const coEditor = document.querySelector('app-editor')
 
     if (!coTabs.tab) return
 
@@ -278,13 +279,11 @@ class AppEditor extends Tonic {
       }
 
       coTerminal.info('Settings file updated.')
+      coEditor.refreshColors()
       app.activatePreviewWindows()
     }
 
-    clearTimeout(this.debouncePropertiesRerender)
-    this.debouncePropertiesRerender = setTimeout(() => {
-      coProperties.reRender()
-    }, 512)
+    coProperties.reRender()
 
     try {
       await fs.promises.writeFile(coTabs.tab.path, value)
@@ -364,7 +363,7 @@ class AppEditor extends Tonic {
         { token: 'variable.predefined', foreground: '4864AA' },
         { token: 'variable.parameter', foreground: '9CDCFE' },
         { token: 'constant', foreground: '569CD6' },
-        { token: 'comment', foreground: '338c32' },
+        { token: 'comment', foreground: colors.secondary },
         { token: 'number', foreground: colors.accent },
         { token: 'number.hex', foreground: '5BB498' },
         { token: 'regexp', foreground: 'B46695' },

src/components/git-status.js

@@ -0,0 +1,49 @@
+import Tonic from '@socketsupply/tonic'
+import { exec } from 'socket:child_process'
+
+// TODO(@heapwolf): this should be a component
+class GitStatus extends Tonic {
+  async render () {
+    const app = this.props.app
+    const currentProject = app.state.currentProject
+
+    const { data: dataProject } = await app.db.projects.get(currentProject.projectId)
+
+    let gitStatus = { stdout: '', stderr: '' }
+
+    //
+    // Try to get the status of the project to tell the user what
+    // has changed and help them decide if they should publish.
+    //
+    try {
+      gitStatus = await exec('git status --porcelain', { cwd: dataProject.path })
+    } catch (err) {
+      gitStatus.stderr = err.message
+    }
+
+    if (gitStatus?.stderr.includes('command not found')) {
+      return this.html`
+        <tonic-toaster-inline
+          id="git-not-installed"
+          dismiss="false"
+          display="true"
+        >Git is not installed and is required to use this program.
+        </tonic-toaster-inline>
+      `
+    }
+
+    return this.html`
+      <h2>Git Integration</h2>
+      <tonic-textarea
+        id="git-status"
+        rows="10"
+        label="Git Status"
+        readonly="true"
+        resize="none"
+      >${gitStatus.stderr || gitStatus.stdout}</tonic-textarea>
+    `
+  }
+}
+
+export default GitStatus
+export { GitStatus }

src/components/patch-requests.js

@@ -0,0 +1,46 @@
+import Tonic from '@socketsupply/tonic'
+import { exec } from 'socket:child_process'
+
+class PatchRequests extends Tonic {
+  async render () {
+    const app = this.props.app
+
+    const { data: dataPatches } = await app.db.patches.readAll()
+
+    let patches = []
+
+    for (const [patchId, patch] of dataPatches.entries()) {
+      patches.push(this.html`
+        <tr>
+          <td>
+            <tonic-button type="icon" symbol-id="plus-icon" data-event="apply" data-value="${patchId}"></tonic-button>
+            <tonic-button type="icon" symbol-id="edit-icon" data-event="load" data-value="${patchId}"></tonic-button>
+          </td>
+          <td>${patch.author}</td>
+          <td>${patch.date}</td>
+          <td>${patch.parent}</td>
+          <td>${patch.message}</td>
+        </tr>
+      `)
+    }
+
+    return this.html`
+      <h2>Patch Requests</h2>
+      <table class="patches">
+        <thead>
+          <th>Actions</th>
+          <th>Author</th>
+          <th>Date</th>
+          <th>Parent</th>
+          <th>Commit Message</th>
+        </thead>
+        <tbody>
+          ${patches}
+        <tbody>
+      </table>
+    `
+  }
+}
+
+export default PatchRequests
+export { PatchRequests }

src/components/project.js

@@ -334,7 +334,7 @@ class AppProject extends Tonic {
     if (!node) this.getNodeFromElement(el.parentElement)
     if (!node) return
 
-    if (node.nonMovable && !node.type === 'project') return
+    if (node.nonMovable && node.type !== 'project') return
 
     const container = el.querySelector('.label')
 
@@ -726,6 +726,7 @@ class AppProject extends Tonic {
         selected: oldChild?.selected ?? 0,
         state: oldChild?.state ?? 0,
         id: project.path,
+        bundleId: project.bundleId,
         projectId,
         label: project.label,
         isDirectory: false,
@@ -735,6 +736,11 @@ class AppProject extends Tonic {
         children: []
       }
 
+      if (!this.props.parent.state.currentProject) {
+        this.props.parent.state.currentProject = node
+        this.props.parent.reloadPreviewWindows()
+      }
+
       tree.children.push(node)
 
       if (project.path) {

src/components/properties.js

@@ -6,38 +6,6 @@ import process from 'socket:process'
 import Config from '../lib/config.js'
 
 class AppProperties extends Tonic {
-  async saveSettingsFile () {
-    const app = this.props.parent
-    const currentProject = app.state.currentProject
-    const pathToSettingsFile = path.join(path.DATA, 'projects', 'settings.json')
-    const coTabs = document.querySelector('editor-tabs')
-    const coEditor = document.querySelector('app-editor')
-
-    // if the user currently has the config file open in the editor...
-    if (coTabs.tab?.isRootSettingsFile) {
-      try {
-        coEditor.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)
-    } catch (err) {
-      return notifications?.create({
-        type: 'error',
-        title: 'Error',
-        message: 'Unable to update settings'
-      })
-    }
-  }
-
   async change (e) {
     const el = Tonic.match(e.target, '[data-event]')
     if (!el) return
@@ -60,7 +28,7 @@ class AppProperties extends Tonic {
         previewWindow.active = !previewWindow.active
       }
 
-      await this.saveSettingsFile()
+      await app.saveSettingsFile()
       app.activatePreviewWindows()
     }
 

src/components/publish.js

@@ -19,26 +19,10 @@ export class DialogPublish extends TonicDialog {
     }
   }
 
-  async getProject () {
-    const app = this.props.parent
-    const currentProject = app.state.currentProject
-    if (!currentProject) return
-
-    let config = new Config(currentProject.id)
-    let bundleId = await config.get('meta', 'bundle_identifier')
-    bundleId = bundleId.replace(/"/g, '')
-
-    const { data: hasProject } = await app.db.projects.has(bundleId)
-
-    if (hasProject) {
-      const { data: dataProject } = await app.db.projects.get(bundleId)
-      return dataProject
-    }
-  }
-
   async publish (type, value) {
     const app = this.props.parent
-    const dataProject = await this.getProject()
+    const currentProject = app.state.currentProject
+    const { data: dataProject } = await app.db.projects.get(currentProject.bundleId)
 
     const opts = {
       // TODO(@heapwolf): probably chain with previousId
@@ -197,8 +181,8 @@ export class DialogPublish extends TonicDialog {
         this.publish('patch', Buffer.from(output.stdout)) // into the background
       }
 
-      const coProperties = document.querySelector('app-properties')
-      coProperties.reRender()
+      const coProjectSummary = document.querySelector('view-project-summary')
+      coProjectSummary.reRender()
     }
 
     return this.html`

src/css/component-patch-requests.css

@@ -0,0 +1,31 @@
+patch-requests table {
+  font-family: var(--tonic-monospace);
+  width: 100%;
+}
+
+patch-requests table thead {
+  text-align: left;
+}
+
+patch-requests table tr th {
+  height: 40px;
+  border-bottom: 1px solid var(--tonic-border);
+  color: var(--tonic-medium, #999);
+  font-weight: 500;
+  font: 12px/14px var(--tonic-subheader,  'Arial', sans-serif);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+patch-requests table td {
+  padding: 8px 0px;
+  border-bottom: 1px solid var(--tonic-border);
+}
+
+patch-requests table td {
+  min-width: 120px;
+}
+
+patch-requests table tr:last-of-type td {
+  border-bottom: none;
+}

src/css/theme.css

@@ -17,7 +17,7 @@ body {
     --tonic-window: rgba(255, 255, 255, 1);
     --tonic-accent: rgba(56, 185, 255, 1);
     --tonic-primary: rgba(54, 57, 61, 1);
-    --tonic-secondary: rgba(232, 232, 228, 1);
+    --tonic-secondary: rgba(190, 190, 190, 1);
     --tonic-light: rgba(153, 157, 160, 1);
     --tonic-medium: rgba(153, 157, 160, 1);
     --tonic-shadow: rgba(150, 150, 150, 0.25);
@@ -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(120, 120, 120, 1);
+    --tonic-secondary: rgba(93, 93, 93, 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

@@ -12,6 +12,13 @@ view-project-summary.show {
   z-index: 30;
 }
 
+view-project-summary h2 {
+  font-size: 20px;
+  text-transform: uppercase;
+  color: var(--tonic-info);
+  font-weight: 100;
+}
+
 view-project-summary header span {
   width: 100%;
   text-align: center;
@@ -42,7 +49,7 @@ view-project-summary .sharing {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 20px;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: auto auto auto 1fr;
   align-items: end;
 }
 
@@ -62,7 +69,12 @@ view-project-summary #publish {
   grid-area: 2 / 4;
 }
 
-view-project-summary view-git-status {
+view-project-summary git-status {
   grid-area: 3 / span 4;
   align-self: start;
 }
+
+view-project-summary patch-requests {
+  grid-area: 4 / span 4;
+  align-self: start;
+}

src/index.html

@@ -23,6 +23,7 @@
     <link rel="stylesheet" href="css/index.css">
 
     <link rel="stylesheet" href="css/component-editor.css">
+    <link rel="stylesheet" href="css/component-patch-requests.css">
     <link rel="stylesheet" href="css/component-properties.css">
     <link rel="stylesheet" href="css/component-publish.css">
     <link rel="stylesheet" href="css/component-subscribe.css">