improve project page

socketsupply · Mar 29, 2024 · 34c7941 · 34c7941
1 parent 47cdb1e
commit 34c7941
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 41 deletions.
diff --git a/src/css/view-home.css b/src/css/view-home.css
@@ -109,4 +109,6 @@ view-home #tab-panel-profile #profile-public-key textarea {
 
 view-home tonic-profile-image {
   margin-right: auto;
+  border: 1px solid var(--tonic-border);
+  border-radius: 4px;
 }
diff --git a/src/css/view-project-summary.css b/src/css/view-project-summary.css
@@ -62,7 +62,7 @@ view-project-summary #publish {
   grid-area: 2 / 4;
 }
 
-view-project-summary #project-status {
+view-project-summary view-git-status {
   grid-area: 3 / span 4;
   align-self: start;
 }
diff --git a/src/views/home.js b/src/views/home.js
@@ -88,7 +88,8 @@ class ViewHome extends Tonic {
     const { data: dataUser } = await app.db.state.get('user')
 
     const publicKey = Buffer.from(dataUser.publicKey).toString('base64')
-    const bio = dataUser.bio || undefined
+    const bio = dataUser.bio || ''
+    const avatar = dataUser.avatar || ''
 
     return this.html`
       <header class="component">
@@ -137,9 +138,10 @@ class ViewHome extends Tonic {
               <tonic-profile-image
                 id="profile-image-example-editable"
                 size="120px"
-                src="${dataUser.avatar}"
+                src="${avatar}"
                 data-event="change-avatar"
-                editable="true">
+                editable="true"
+              >
               </tonic-profile-image>
 
               <div class="buttons">

diff --git a/src/views/project-summary.js b/src/views/project-summary.js
@@ -2,6 +2,48 @@ import Tonic from '@socketsupply/tonic'
 import { exec } from 'socket:child_process'
 import { Encryption, sha256 } from 'socket:network'
 
+class ViewGitStatus 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>
+      `
+    } else if (!gitStatus.stderr && gitStatus.stdout.length) {
+      return this.html`
+        <pre><code>${gitStatus.stdout || 'No Changes.'}</code></pre>
+      `
+    } else {
+      return this.html`
+        <pre><code>No changes.</code></pre>
+      `
+    }
+  }
+}
+
+Tonic.add(ViewGitStatus)
+
 class ViewProjectSummary extends Tonic {
   show () {
     this.classList.add('show')
@@ -85,42 +127,6 @@ class ViewProjectSummary extends Tonic {
       `
     }
 
-    let projectUpdates = []
-    let gitStatus = { stdout: '', stderr: '' }
-
-    if (dataProject.path) {
-      //
-      // 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')) {
-        projectUpdates.push(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>
-        `)
-      } else {
-        projectUpdates = this.html`
-          <pre id="project-status"><code>No changes.</code></pre>
-        `
-
-        if (!gitStatus.stderr && gitStatus.stdout.length) {
-          projectUpdates = this.html`
-            <pre id="project-status"><code>${gitStatus.stdout || 'No Changes.'}</code></pre>
-          `
-        }
-      }
-    }
-
     if (!dataProject.waiting) {
       items = this.html`
         <div class="sharing">
@@ -157,7 +163,8 @@ class ViewProjectSummary extends Tonic {
             class="pull-right"
           >Publish</tonic-button>
 
-          ${projectUpdates}
+          <view-git-status id="git-status" app=${app} parent=${this}>
+          </view-git-status>
         </div>
       `
     }