Feature/settings

package.json

@@ -24,7 +24,11 @@
   },
   "homepage": "https://github.com/blockades/patchbay-dark-crystal#readme",
   "dependencies": {
+    "dataurl-": "^0.1.0",
     "depnest": "^1.3.0",
+    "hypercrop": "^1.1.0",
+    "hyperfile": "^2.0.0",
+    "hyperlightbox": "^1.0.0",
     "libnested": "^1.3.2",
     "lodash.set": "^4.3.2",
     "lodash.sortby": "^4.7.0",

plugs/app/page/dark-crystal-index.js

@@ -1,18 +1,35 @@
 const nest = require('depnest')
-const { h, Value, computed } = require('mutant')
+const pull = require('pull-stream')
 const Scuttle = require('scuttle-dark-crystal')
 
+const {
+  h,
+  Value,
+  computed,
+  when,
+  onceTrue,
+  Array: MutantArray,
+  Struct,
+} = require('mutant')
+
+// Views
 const CrystalsIndex = require('../../../views/crystals/index')
 const CrystalsNew = require('../../../views/crystals/new')
-
+const CrystalsShow = require('../../../views/crystals/show')
 const FriendsCrystalsIndex = require('../../../views/friends/crystals/index')
 const FriendsCrystalsShow = require('../../../views/friends/crystals/show')
-
 const FriendsIndex = require('../../../views/friends/index')
 const FriendsShow = require('../../../views/friends/show')
-
 const ForwardNew = require('../../../views/forward/new')
-// const ForwardIndex = require('../../../views/forward/index')
+const SettingsShow = require('../../../views/settings/show')
+
+// Components
+const Tooltip = require('../../../views/component/tooltip')
+
+// Modes / Tabs
+const MINE = 'My Crystals'
+const OTHERS = 'Others Shards'
+const FORWARDS = 'Others Crystals'
 
 exports.gives = nest({
   'app.html.menuItem': true,
@@ -26,13 +43,13 @@ exports.needs = nest({
   'app.html.modal': 'first',
   'app.sync.goTo': 'first',
   'keys.sync.id': 'first',
-  'sbot.obs.connection': 'first'
+  'sbot.obs.connection': 'first',
+  'blob.sync.url': 'first',
+  'message.async.publish': 'first',
+  'sbot.async.addBlob': 'first',
+  'sbot.obs.localPeers': 'first'
 })
 
-// modes
-const MINE = 'My Crystals'
-const OTHERS = 'Others Shards'
-const FORWARDS = 'Others Crystals'
 
 exports.create = function (api) {
   return nest({
@@ -48,42 +65,136 @@ exports.create = function (api) {
   }
 
   function darkCrystalIndexPage (location) {
-    const scuttle = Scuttle(api.sbot.obs.connection)
-    const mode = Value(MINE)
-
-    // mix: TODO seperate this page and the routing out
-
-    const page = h('DarkCrystal -index', { title: '/dark-crystal' }, [
-      h('h1', { title: '' }, [ 'Dark Crystal', h('i.fa.fa-diamond') ]),
-      h('section.picker', { title: '' }, [MINE, OTHERS, FORWARDS].map(m => {
-        return h('div', {
-          'ev-click': () => mode.set(m),
-          className: computed(mode, mode => mode === m ? '-active' : '')
-        }, m)
-      })),
-      MySecrets({ mode, scuttle }),
-      OthersShards({ mode, scuttle }),
-      FriendsCrystals({ mode, scuttle })
-      // ForwardShards({ mode, scuttle })
+    const server = api.sbot.obs.connection
+    const scuttle = Scuttle(server)
+
+    const state = Struct({
+      ready: Value(false),
+      mode: Value(MINE),
+      abouts: MutantArray([])
+    })
+
+    // %%TODO%% extract into separate file
+    onceTrue(server, server => {
+      updateStore()
+      watchForUpdates()
+
+      function aboutsQuery () {
+        return {
+          query: [{
+            $filter: {
+              value: {
+                author: server.id,
+                timestamp: { $gt: 0 },
+                content: {
+                  type: 'about',
+                  about: server.id
+                }
+              }
+            },
+            // %%TODO%%: Work out why reduce isn't working?
+            // $map: ['value', 'content', 'type'],
+            // $reduce: { $count: true }
+          }]
+        }
+      }
+
+      function updateStore () {
+        pull(
+          server.query.read(Object.assign({}, aboutsQuery(), { live: false })),
+          pull.collect(
+            (err, abouts) => {
+              if (err) throw err
+              else {
+                state.abouts.set(abouts)
+                state.ready.set(true)
+              }
+            }
+          )
+        )
+      }
+
+      function watchForUpdates () {
+        pull(
+          server.query.read(Object.assign({}, aboutsQuery(), { old: false, live: true })),
+          pull.filter(m => !m.sync),
+          pull.drain(m => updateStore())
+        )
+      }
+    })
+
+    return h('DarkCrystal -index', { title: '/dark-crystal' }, [
+      h('div.header', [
+        h('h1', 'Dark Crystal'),
+        h('i.fa.fa-diamond.fa-lg'),
+        when(state.ready, Settings({ abouts: state.abouts, scuttle }))
+      ]),
+      when(state.ready,
+        [
+          h('section.picker', [MINE, OTHERS, FORWARDS].map(m => {
+            return h('div', {
+              'ev-click': () => state.mode.set(m),
+              className: computed(state.mode, mode => mode === m ? '-active' : '')
+            }, m)
+          })),
+          MySecrets({ mode: state.mode, scuttle }),
+          OthersShards({ mode: state.mode, scuttle }),
+          FriendsCrystals({ mode: state.mode, scuttle })
+        ],
+        h('i.fa.fa-spinner.fa-pulse.fa-5x')
+      )
     ])
+  }
 
-    // page.scroll = () => {} // stops keyboard shortcuts from breaking
-    return page
+  function Settings ({ scuttle, abouts }) {
+    const isOpen = Value(false)
+
+    const view = SettingsShow({
+      onCancel: () => isOpen.set(false),
+      feedId: api.keys.sync.id(),
+      avatar: api.about.html.avatar,
+      name: api.about.obs.name,
+      publish: api.message.async.publish,
+      blobUrl: api.blob.sync.url,
+      addBlob: api.sbot.async.addBlob,
+      localPeers: api.sbot.obs.localPeers
+    })
+
+    const modal = api.app.html.modal(view, { isOpen })
+
+    return [
+      h('i.fa.fa-cog.fa-2x', { 'ev-click': () => isOpen.set(true), title: 'Settings' }),
+      // %%TODO%%: integrate a tooltip or flash alert system to begin to show warning messages to users...
+      computed([abouts], abouts => {
+        if (abouts.length === 0) return h('i.fa.fa-warning')
+        else return null
+      }),
+      modal
+    ]
   }
 
   function MySecrets ({ mode, scuttle }) {
+    const view = Value('Rabbits!')
+    const isOpen = Value(false)
+    const modal = api.app.html.modal(view, { isOpen })
+
+    function showCrystal (opts) {
+      view.set(CrystalsShow(Object.assign({}, opts, {
+        scuttle,
+        avatar: api.about.html.avatar,
+        name: api.about.obs.name
+      })))
+      isOpen.set(true)
+    }
+
     const { formModal, formOpen } = NewCrystalForm(scuttle)
 
     return h('section.content', { className: computed(mode, m => m === MINE ? '-active' : '') }, [
       formModal,
       h('button -primary', { 'ev-click': () => formOpen.set(true) }, 'New'),
-      h('CrystalsIndex', [
-        CrystalsIndex({
-          scuttle,
-          routeTo: api.app.sync.goTo
-        })
-      ])
-    ])
+      h('CrystalsIndex', [ CrystalsIndex({ scuttle, showCrystal }) ]),
+      modal
+   ])
   }
 
   function OthersShards ({ mode, scuttle }) {
@@ -151,34 +262,6 @@ exports.create = function (api) {
     ])
   }
 
-  // function ForwardShards ({ mode, scuttle }) {
-  //   const view = Value('Cats are cooler')
-  //   const isOpen = Value(false)
-  //   const forwardModal = api.app.html.modal(view, { isOpen })
-
-  //   const newForward = (opts) => {
-  //     view.set(ForwardNew(Object.assign({}, opts, {
-  //       avatar: api.about.html.avatar,
-  //       name: api.about.obs.name,
-  //       suggest: { about: api.about.async.suggest },
-  //       scuttle,
-  //       onCancel: () => isOpen.set(false)
-  //     })))
-  //     isOpen.set(true)
-  //   }
-
-  //   return h('section.content', { className: computed(mode, m => m === FORWARD ? '-active' : '') }, [
-  //     h('div.message', [ h('div.span',  'Select a friend whose shards you have been asked to forward...') ]),
-  //     ForwardIndex({
-  //       scuttle,
-  //       avatar: api.about.html.avatar,
-  //       name: api.about.obs.name,
-  //       newForward
-  //     }),
-  //     forwardModal
-  //   ])
-  // }
-
   function NewCrystalForm (scuttle) {
     const form = CrystalsNew({
       scuttle,

plugs/app/page/dark-crystal-index.mcss

@@ -1,4 +1,11 @@
 DarkCrystal -index {
+  i.fa.fa-spinner {
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+  }
+
   section.picker {
     display: flex
 

plugs/app/page/dark-crystal.mcss

@@ -3,31 +3,32 @@ DarkCrystal {
   align-content: start
   justify-content: center
   grid-template-columns: 40rem
-  grid-template-rows: 6rem 1rem 1fr auto
+  grid-template-rows: 4rem 3rem 1rem auto
   grid-gap: 1rem
 
   width: 100%
   overflow-y: scroll
 
-  h1 {
-    text-transform: uppercase
-    letter-spacing: .5rem
-    font-size: 1.2rem
-
+  div.header {
     display: grid
-    grid-template-columns: repeat(4, auto)
-    grid-gap: .9rem
+    grid-template-columns: auto 1fr auto;
+    grid-gap: 1rem
     justify-content: start
     align-items: baseline
+    margin-top: .5rem
+
+    h1 {
+      text-transform: uppercase
+      letter-spacing: .5rem
+      font-size: 1.2rem
+    }
 
     i {
       :hover {
         color: rebeccapurple
         cursor: pointer
       }
     }
-
-    margin-top: 2.5rem
   }
 }
 

views/component/secret.js

@@ -8,9 +8,10 @@ module.exports = function Secret (opts) {
     error = Value(),
     modalOpen = Value(),
     secretLabel = Value(),
-    secret = Value()
+    secret = ''
   } = opts
 
+  console.log(secret)
   return h('DarkCrystalSecret', when(error, renderError(), renderSecret()))
 
   function renderSecret () {