Merge branch 'master' into scuttle-shell

Author: mixmix

.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

README.md

@@ -26,33 +26,7 @@ If you'd like to hack on Patchbay, check out the Developer Install below.
 
 ## Keyboard shortcuts
 
-`CmdOrCtrl` is the `command` key on Apple keyboards or the `ctrl` key on PC keyboards.
-
-### Tabs and window
-
-- `h` / `CmdOrCtrl+Shift+]` : tabs left
-- `j` / `CmdOrCtrl+Shift+[`: tabs right
-- `x` / `CmdOrCtrl+w` : close tab
-- `CmdOrCtrl+Shift+w` will close the current window
-
-### Message feeds
-
-`j` : next message (down)
-`k` : previous message
-`o` : open message thread (and scroll to position of this message in that thread)
-` ` ` : toggle raw message view for currently selected message (` ` ` = backtick, lives on the same key as `~`)
-
-composing : cttrl + enter = post
-
-### Nav bar thing
-
-`@` : start a person query
-`#` : start a channel query
-`?` : start a search query
-`/` : start a navigation  (e.g. /public)  - need to re-instate suggestions for this
-
-you can also paste a message id (starts with `%`) in here to navigate to it. Same with blobs (`&`)
-
+[See here](./app/page/SHORTCUTS.md) or in patchbay for to the page `/shortcuts`
 ---
 
 ## Developer Install
@@ -164,6 +138,29 @@ This is ultimately reduced along with all other `router.sync.router` modules int
 Giving modules here will add settings sections to the settings page (`app.page.settings`).
 
 
+### Requiring the core of patchbay
+
+If you don't want the default modules, you can grab the main part of patchbay and pick and choose modules like this:
+
+```js
+const patchcore = require('patchcore')
+const patchbay = require('patchbay/main')
+const combine = require('depject')
+const entry = require('depject/entry')
+const nest = require('depnest')
+
+const sockets = combine(
+  require('patchbay-dark-crystal'), // the module(s) you want
+  patchbay,
+  patchcore // required
+)
+
+const api = entry(sockets, nest('app.html.app', 'first'))
+document.body.appendChild(api.app.html.app())
+```
+
+You'll need to be running your own sbot and launch this with electro / electron. See `index.js` to see that
+
 ### How to add a new page
 
 e.g. to add a 'cats' page to the app:

about/html/edit.js

@@ -2,7 +2,6 @@ const nest = require('depnest')
 const dataurl = require('dataurl-')
 const hyperfile = require('hyperfile')
 const hypercrop = require('hypercrop')
-const hyperlightbox = require('hyperlightbox')
 const {
   h, Value, Dict, Struct,
   map, computed, when, dictToCollection, onceTrue
@@ -20,6 +19,7 @@ exports.needs = nest({
     latestValue: 'first',
     groupedValues: 'first'
   },
+  'app.html.modal': 'first',
   'blob.sync.url': 'first',
   'keys.sync.id': 'first',
   'message.html.confirm': 'first',
@@ -74,8 +74,6 @@ exports.create = function (api) {
       new: Value(api.about.obs.latestValue(id, 'publicWebHosting')())
     })
 
-    var lightbox = hyperlightbox()
-
     var isPossibleUpdate = computed([name.new, avatar.new, publicWebHosting.new], (name, avatar, publicWebHostingValue) => {
       return name || avatar.link || (isMe && publicWebHostingValue !== publicWebHosting.current())
     })
@@ -102,8 +100,12 @@ exports.create = function (api) {
       })
     })
 
+    const modalContent = Value()
+    const isOpen = Value(false)
+    const modal = api.app.html.modal(modalContent, { isOpen })
+
     return h('AboutEditor', [
-      lightbox,
+      modal,
       h('section.avatar', [
         h('section', [
           h('img', { src: avatarSrc })
@@ -162,9 +164,9 @@ exports.create = function (api) {
     ])
 
     function dataUrlCallback (data) {
-      const cropCallback = (err, cropData) => {
+      const cropEl = Crop(data, (err, cropData) => {
         if (err) throw err
-        if (!cropData) return lightbox.close()
+        if (!cropData) return isOpen.set(false)
 
         var _data = dataurl.parse(cropData)
         api.sbot.async.addBlob(pull.once(_data.data), (err, hash) => {
@@ -178,17 +180,17 @@ exports.create = function (api) {
             height: 512
           })
         })
-        lightbox.close()
-      }
+        isOpen.set(false)
+      })
 
-      const cropEl = Crop(data, cropCallback)
-      lightbox.show(cropEl)
+      modalContent.set(cropEl)
+      isOpen.set(true)
     }
 
     function Crop (data, cb) {
-      var img = h('img', {src: data})
+      var img = h('img', { src: data })
 
-      var crop = h('div')
+      var crop = Value()
 
       waitForImg()
 
@@ -206,7 +208,7 @@ exports.create = function (api) {
         }
 
         var canvas = hypercrop(img)
-        crop = (
+        crop.set(
           h('PatchProfileCrop', [
             h('header', 'click and drag to crop your image'),
             canvas,

app/html/app.js

@@ -17,13 +17,14 @@ exports.needs = nest({
 exports.create = function (api) {
   return nest('app.html.app', app)
 
-  function app () {
+  function app (initialTabs) {
     console.log('STARTING app')
 
     window = api.app.sync.window(window) // eslint-disable-line no-global-assign
 
-    const initialTabs = api.settings.sync.get('patchbay.defaultTabs')
-    const App = h('App', api.app.html.tabs(initialTabs))
+    const App = h('App', api.app.html.tabs({
+      initial: initialTabs || api.settings.sync.get('patchbay.defaultTabs')
+    }))
 
     api.app.sync.initialise(App)
     // runs all the functions in app/sync/initialise

app/html/modal.js

@@ -7,16 +7,41 @@ exports.create = (api) => {
   return nest('app.html.modal', (content, { isOpen, onClose, className = '' } = {}) => {
     if (typeof isOpen !== 'function') isOpen = Value(false)
 
-    const openMe = () => isOpen.set(true)
+    const openMe = () => {
+      isOpen.set(true)
+    }
     const closeMe = () => {
       isOpen.set(false)
       if (typeof onClose === 'function') onClose()
     }
 
-    const lb = h('Modal', { classList: [when(isOpen, '-open', '-close'), className], 'ev-click': closeMe },
-      h('div.content', {'ev-click': (ev) => ev.stopPropagation()}, [
-        content
-      ]))
+    const lb = h('Modal',
+      {
+        classList: [ className, when(isOpen, '-open', '-close') ],
+        'ev-click': closeMe,
+        'ev-keydown': ev => {
+          if (ev.keyCode === 27) closeMe() // Escape
+        }
+      },
+      [
+        h('div.content', { 'ev-click': (ev) => ev.stopPropagation() }, [
+          content
+        ])
+      ]
+    )
+
+    isOpen(state => {
+      if (!state) return
+
+      focus()
+      function focus () {
+        if (!lb.isConnected) setTimeout(focus, 200)
+        else {
+          const target = lb.querySelector('input') || lb.querySelector('textarea')
+          if (target) target.focus()
+        }
+      }
+    })
 
     lb.open = openMe
     lb.close = closeMe

app/html/scroller.js

@@ -7,7 +7,7 @@ exports.create = function (api) {
   return nest('app.html.scroller', Scroller)
 
   function Scroller (opts = {}) {
-    const { prepend, content = null, append, classList = [], className = '', title = '' } = opts
+    const { prepend, content = null, append, classList = [], className = '', title = '', scrollIntoView } = opts
 
     const contentSection = h('section.content', { title: '' }, content)
 
@@ -20,7 +20,7 @@ exports.create = function (api) {
       ]
     )
 
-    container.scroll = keyscroll(contentSection)
+    container.scroll = keyscroll(contentSection, scrollIntoView)
 
     return {
       content: contentSection,
@@ -29,7 +29,7 @@ exports.create = function (api) {
   }
 }
 
-function keyscroll (content) {
+function keyscroll (content, scrollIntoView = false) {
   var curMsgEl
 
   if (!content) return () => {}
@@ -60,9 +60,14 @@ function keyscroll (content) {
   function selectChild (el) {
     if (!el) { return }
 
-    if (!el.scrollIntoViewIfNeeded && !el.scrollIntoView) return
-    ;(el.scrollIntoViewIfNeeded || el.scrollIntoView).call(el)
-    el.focus()
+    if (scrollIntoView) {
+      if (!el.scrollIntoViewIfNeeded && !el.scrollIntoView) return
+      ;(el.scrollIntoViewIfNeeded || el.scrollIntoView).call(el)
+    } else {
+      content.parentElement.scrollTop = el.offsetTop - content.parentElement.offsetTop - 10
+    }
+
+    if (el.focus) el.focus()
     curMsgEl = el
   }
 }

app/html/search-bar.js

@@ -73,8 +73,8 @@ exports.create = function (api) {
     // TODO extract
     function getPagesSuggestions (word) {
       const pages = [
-        'blogs', 'calendar', 'posts', 'public', 'private', 'inbox', 'profile', 'notifications', 'settings',
-        'gatherings', 'chess', 'books', 'imageSearch', 'polls', 'query', 'dark-crystal', 'postRank', 'scry/new'
+        'blogs', 'calendar', 'posts', 'public', 'private', 'inbox', 'profile', 'notifications', 'settings', 'shortcuts',
+        'gatherings', 'chess', 'books', 'imageSearch', 'polls', 'query', 'dark-crystal', 'postRank', 'scry', 'scry/new'
       ]
 
       return pages

app/html/tabs.js

@@ -22,7 +22,7 @@ exports.create = function (api) {
     'app.html.tabs': tabs
   })
 
-  function tabs (initialTabs = []) {
+  function tabs ({ initial = [], prepend, append } = {}) {
     if (_tabs) return _tabs
 
     const onSelect = (indexes) => {
@@ -47,12 +47,9 @@ exports.create = function (api) {
 
     const search = api.app.html.searchBar()
     const menu = api.app.html.menu()
+    if (append === undefined) append = h('div.navExtra', [ search, menu ])
 
-    _tabs = Tabs({
-      onSelect,
-      onClose,
-      append: h('div.navExtra', [ search, menu ])
-    })
+    _tabs = Tabs({ onSelect, onClose, prepend, append })
     _tabs.currentPage = () => {
       const currentPage = _tabs.get(_tabs.selected[0])
       return currentPage && currentPage.firstChild
@@ -62,8 +59,8 @@ exports.create = function (api) {
     _tabs.closeCurrentTab = () => { _tabs.currentPage() && _tabs.remove(_tabs.selected[0]) }
 
     // # TODO: review - this works but is strange
-    initialTabs.forEach(p => api.app.sync.goTo(p))
-    if (initialTabs[0]) api.app.sync.goTo(initialTabs[0])
+    initial.forEach(p => api.app.sync.goTo(p))
+    if (initial[0]) api.app.sync.goTo(initial[0])
     return _tabs
   }
 }

app/html/tabs.mcss

@@ -1,3 +1,6 @@
+/* TODO depricate this carefully (see styles/mcss/hypertabs.mcss) */
+/* NOTE there are some active styles in here still */
+
 Hypertabs {
   position: fixed
   top: 0
@@ -38,22 +41,13 @@ Hypertabs {
         border: 1px gainsboro solid
         border-bottom: none
 
-        :hover {
-          a.close {
-            visibility: visible
-          }
-        }
-
         -selected {
           color: #222
           $backgroundPrimary
 
           a.link {
             max-width: calc(100% - 2rem)
           }
-          a.close {
-            visibility: visible
-          }
         }
 
         -notify {
@@ -82,26 +76,6 @@ Hypertabs {
           padding: .5rem 0 .5rem .6rem
         }
 
-        a.close {
-          visibility: hidden
-          font-family: monospace
-          line-height: 1rem
-          width: .9rem
-          height: .9rem
-          /* border-radius: 1rem */
-
-          margin-right: .3rem
-
-          display: flex
-          justify-content: center
-
-          :hover {
-            background: #aaaaaa
-            color: #fff
-            font-weight: 600
-          }
-        }
-
       }
 
     }