wip ui

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Use Node.js
           uses: actions/[email protected]
           with:
-            node-version: 18.x
+            node-version: 20.x
 
       - name: webfactory/ssh-agent
         uses: webfactory/[email protected]
@@ -50,7 +50,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
 
     - name: Build app
       run: |

build.js

@@ -21,6 +21,7 @@ async function copy (target) {
   await cp('src/template', target)
   await cp('src/fonts', target)
   await cp('src/lib', target)
+  await cp('src/pages', target)
   await cp('src/css', target)
 }
 

socket.ini

@@ -48,6 +48,10 @@ output = "build"
 ; The build script. It runs before the `[build] copy` phase.
 script = "node build.js"
 
+; Key value pairs added to the envrionment.
+[env]
+DEV = true
+
 [build.script]
 ; If true, it will pass build arguments to the build script. WARNING: this could be deprecated in the future.
 ; default value: false

src/components/editor.js

@@ -47,6 +47,7 @@ globalThis.MonacoEnvironment = {
 class EditorTabs extends Tonic {
   selectedTabId = null
   scrollLeft = 0
+  index = 0
 
   constructor () {
     super()
@@ -67,7 +68,6 @@ class EditorTabs extends Tonic {
 
   add (node) {
     const parent = this.props.parent
-    const count = this.state.tabs.size
 
     const tab = {
       label: node.label,
@@ -78,7 +78,7 @@ class EditorTabs extends Tonic {
       state: null,
       hash: null,
       unsaved: false,
-      index: count + 1
+      index: this.index++
     }
 
     tab.model.onDidChangeContent((...args) => editor.changes(tab, ...args))
@@ -179,7 +179,7 @@ class EditorTabs extends Tonic {
         // check if there are any other tabs
         if (this.state.tabs.size > 0) {
           const tabs = [...this.state.tabs.values()]
-          const previousSibling = tabs.find(t => t.index < tab.index)
+          const previousSibling = tabs.findLast(t => t.index < tab.index)
           const nextSibling = tabs.find(t => t.index > tab.index)
           const sibling = previousSibling || nextSibling
 

src/components/properties.js

@@ -246,15 +246,17 @@ class AppProperties extends Tonic {
         <pre id="project-status"><code>No changes.</code></pre>
       `
 
-      if (!gitStatus.stderr && gitStatus.stdout.length) {
+      const notInitialized = gitStatus.stderr.includes('not a git repo')
+
+      if (notInitialized || (!gitStatus.stderr && gitStatus.stdout.length)) {
         projectUpdates = this.html`
-          <pre id="project-status"><code>${gitStatus.stdout}</code></pre>
+          <pre id="project-status"><code>${gitStatus.stdout || 'No Changes.'}</code></pre>
           <tonic-button
             id="publish"
             data-event="publish"
             width="180px"
             class="pull-right"
-          >Publish Changes</tonic-button>
+          >Publish</tonic-button>
         `
       }
     }

src/components/publish.js

@@ -44,7 +44,13 @@ export class DialogPublish extends TonicDialog {
       // TODO(@heapwolf): probably chain with previousId
     }
 
-    const subcluster = app.socket.subclusters.get(dataProject.subclusterId)
+    let subcluster = app.socket.subclusters.get(dataProject.subclusterId)
+
+    // user created a new subcluster but it's not yet been activated.
+    if (!subcluster) {
+      subcluster = await app.socket.subcluster({ sharedKey: dataProject.sharedKey })
+    }
+
     const packets = await subcluster.emit(type, value, opts)
   }
 

src/components/subscribe.js

@@ -49,6 +49,7 @@ export class DialogSubscribe extends TonicDialog {
 
       const project = {
         bundleId,
+        waiting: true,
         clusterId,
         subclusterId,
         sharedKey,
@@ -73,7 +74,8 @@ export class DialogSubscribe extends TonicDialog {
         <tonic-input
           id="subscribe-shared-secret"
           label="Project Link"
-          placeholder="union://abc?bundleId=com.beep.boop&clusterId=haxortown"
+          placeholder="union://foo?bundleId=com.beep.boop&clusterId=bar"
+          spellcheck="false"
           value=""
           width="100%"
         >

src/css/component-editor.css

@@ -35,14 +35,16 @@ editor-tabs .tab.selected {
   opacity: 1;
 }
 
-editor-tabs .tab.unsaved .label {
-  border-bottom: 1px solid var(--tonic-warning);
-}
-
 editor-tabs .tab .label {
   justify-content: center;
   align-content: center;
   margin: 0 4px;
+  border-bottom: 1px solid transparent;
+  white-space: nowrap;
+}
+
+editor-tabs .tab.unsaved .label {
+  border-bottom: 1px solid var(--tonic-warning);
 }
 
 editor-tabs .tab tonic-button {

src/css/theme.css

@@ -3,6 +3,12 @@ body {
   --tonic-header: 'Inter Black', sans-serif;
   --tonic-subheader: 'Inter Medium', sans-serif;
   --tonic-monospace: 'FiraMono', monospace;
+  --tonic-error: rgba(240, 102, 83, 1);
+  --tonic-notification: rgba(240, 102, 83, 1);
+  --tonic-danger: rgba(240, 102, 83, 1);
+  --tonic-success: rgba(133, 178, 116, 1);
+  --tonic-warning: rgba(249, 169, 103, 1);
+  --tonic-info: rgba(153, 157, 160, 1);
 }
 
 @media (prefers-color-scheme: light) {
@@ -19,9 +25,9 @@ body {
     --tonic-disabled: rgba(152, 161, 175, 1);
     --tonic-button-text: rgba(54, 57, 61, 1);
     --tonic-button-shadow: rgba(0, 0, 0, 33%);
-    --tonic-button-background: rgba(245, 245, 245, 1);
-    --tonic-button-background-hover: rgba(230, 230, 230, 1);
-    --tonic-button-background-focus: rgba(237, 237, 237, 1);
+    --tonic-button-background: rgba(224, 224, 224, 1);
+    --tonic-button-background-hover: rgba(214, 214, 214, 1);
+    --tonic-button-background-focus: rgba(200, 200, 200, 1);
     --tonic-input-text: rgba(54, 57, 61, 1);
     --tonic-input-text-hover: rgba(228, 228, 228, 1);
     --tonic-input-border: rgba(201, 201, 201, 1);
@@ -30,12 +36,6 @@ body {
     --tonic-input-background-focus: rgba(238, 238, 238, 1);
     --tonic-border: rgba(224, 224, 224, 1);
     --tonic-border-accent: rgba(206, 206, 206, 1);
-    --tonic-error: rgba(240, 102, 83, 1);
-    --tonic-notification: rgba(240, 102, 83, 1);
-    --tonic-danger: rgba(240, 102, 83, 1);
-    --tonic-success: rgba(133, 178, 116, 1);
-    --tonic-warning: rgba(249, 169, 103, 1);
-    --tonic-info: rgba(153, 157, 160, 1);
     --tonic-overlay: rgba(255, 255, 255, 0.75);
     --tonic-selection: #eceff4;
   }
@@ -65,12 +65,6 @@ body {
     --tonic-input-border-hover: rgba(105, 105, 105, 1);
     --tonic-border: rgba(72, 72, 72, 1);
     --tonic-border-accent: rgba(90, 90, 90, 1);
-    --tonic-error: rgba(240, 102, 83, 1);
-    --tonic-notification: rgba(240, 102, 83, 1);
-    --tonic-caution: rgba(240, 102, 83, 1);
-    --tonic-success: rgba(133, 178, 116, 1);
-    --tonic-warn: rgba(249, 169, 103, 1);
-    --tonic-info: rgba(134, 134, 134, 1);
     --tonic-overlay: rgba(0, 0, 0, 0.40);
     --tonic-selection: #000000;
   }

src/css/view-home.css

@@ -19,6 +19,12 @@ view-home.show {
   opacity: 1;
 }
 
+view-home iframe {
+  border: none;
+  height: 280px;
+  width: 100%;
+}
+
 view-home .content {
   position: absolute;
   top: 50px;

src/index.js

@@ -713,6 +713,8 @@ class AppView extends Tonic {
     await this.initNetwork()
     await this.initApplication()
 
+    const previewMode = this.state.settings?.previewMode === true ? 'selected' : ''
+
     return this.html`
       <tonic-split id="split-main" type="vertical">
         <tonic-split-left width="80%">
@@ -753,7 +755,7 @@ class AppView extends Tonic {
             <tonic-button type="icon" size="22px" symbol-id="run-icon" title="Evalulate The current selection or all code in the editor" data-event="eval">
             </tonic-button>
 
-            <tonic-button type="icon" size="24px" symbol-id="speed-icon" id="toggle-preview-mode" title="Toggle real-time preview mode, save changes as you type" data-event="preview-mode">
+            <tonic-button type="icon" size="24px" symbol-id="speed-icon" id="toggle-preview-mode" class="${previewMode}" title="Toggle real-time preview mode, save changes as you type" data-event="preview-mode">
             </tonic-button>
 
             <span class="spacer"></span>

src/template/demo-project/socket.ini

@@ -142,7 +142,7 @@ flags = "-g"
 ; A unique ID that identifies the bundle (used by all app stores).
 ; It's required when `[meta] type` is not `"extension"`.
 ; It should be in a reverse DNS notation https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundleidentifier#discussion
-bundle_identifier = "com.demo-project"
+bundle_identifier = "com.demo.project"
 
 ; A unique application protocol scheme to support deep linking
 ; If this value is not defined, then it is derived from the `[meta] bundle_identifier` value

src/views/home.js

@@ -1,3 +1,4 @@
+import application from 'socket:application'
 import fs from 'socket:fs'
 import path from 'socket:path'
 
@@ -12,6 +13,40 @@ class ViewHome extends Tonic {
     this.classList.remove('show')
   }
 
+  async click (e) {
+    const el = Tonic.match(e.target, '[data-event]')
+    if (!el) return
+
+    const { event } = el.dataset
+
+    if (event === 'upgrade') {
+      const opts = {
+        config: {
+          webview_auto_register_service_workers: false,
+          webview_service_worker_frame: false
+        },
+        path: 'pages/account.html',
+        index: 14,
+        closable: true,
+        maximizable: false,
+        title: 'Signup',
+        titleBarStyle: 'hiddenInset',
+        trafficLightPosition: '10x26',
+        backgroundColorDark: 'rgba(46, 46, 46, 1)',
+        backgroundColorLight: 'rgba(255, 255, 255, 1)',
+        resizable: false,
+        width: 450,
+        height: 300
+      }
+
+      const w = await application.createWindow(opts)
+
+      w.channel.addEventListener('message', e => {
+        console.log(e.data)
+      })
+    }
+  }
+
   async change (e) {
     const el = Tonic.match(e.target, '[data-event]')
     if (!el) return
@@ -53,7 +88,7 @@ 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 || ''
+    const bio = dataUser.bio || undefined
 
     return this.html`
       <header class="component">
@@ -80,16 +115,12 @@ class ViewHome extends Tonic {
           </tonic-tabs>
 
           <tonic-tab-panel id="tab-panel-news">
-            <h2>What's New!</h2>
-            <label class="panel-label">A social feed of code that you can subscribe to.</label>
             <section>
               Content One
             </section>
           </tonic-tab-panel>
 
           <tonic-tab-panel id="tab-panel-docs">
-            <h2>Platform Documentation</h2>
-            <label class="panel-label">This section provides all documents for the current version of Socket Runtime.</label>
             <section>
               <tonic-input
                 width="100%"
@@ -102,8 +133,6 @@ class ViewHome extends Tonic {
           </tonic-tab-panel>
 
           <tonic-tab-panel id="tab-panel-profile">
-            <h2>User Profile</h2>
-            <label class="panel-label">Your profile information is used to secure and share code with others.</label>
             <section>
               <tonic-profile-image
                 id="profile-image-example-editable"
@@ -113,11 +142,18 @@ class ViewHome extends Tonic {
                 editable="true">
               </tonic-profile-image>
 
-              <tonic-button
-                id="profile-regenerate-keypair"
-                data-event="regenerate-keypair"
-                width="180px"
-              >Regenerate Keys</tonic-button>
+              <div class="buttons">
+                <tonic-button
+                  id="profile-regenerate-keypair"
+                  data-event="regenerate-keypair"
+                  width="180px"
+                >Regenerate Keys</tonic-button>
+                <!-- tonic-button
+                  id="profile-upgrade"
+                  data-event="upgrade"
+                  width="140px"
+                >Upgrade</tonic-button -->
+              </div>
 
               <tonic-textarea
                 label="Bio"