Move name fields next to the composer textarea

instead of in the preview area. This is to clarify that the name
completions are part of what is being composed.

2 files changed, 35 insertions, 19 deletions

diff --git a/lib/serve.js b/lib/serve.js
index 68eebda..d3a1a6b 100644
--- a/lib/serve.js
+++ b/lib/serve.js
@@ -1177,6 +1177,24 @@ Serve.prototype.composer = function (opts, cb) {
       + '[' + data.upload.name + '](' + data.upload.link + ')'
   }
 
+  // get bare feed names
+  var unknownMentionNames = {}
+  var unknownMentions = ssbMentions(data.text, {bareFeedNames: true})
+    .filter(function (mention) {
+      return mention.link === '@'
+    })
+    .filter(function (mention) {
+      if (unknownMentionNames[mention.name]) return false
+      unknownMentionNames[mention.name] = true
+      return true
+    })
+    .map(function (mention) {
+      var name = mention.name
+      var fullName = mention.link + name
+      var id = formNames[name] || self.app.getReverseNameSync(fullName)
+      return {name: name, fullName: fullName, id: id}
+    })
+
   var done = multicb({pluck: 1, spread: true})
   done()(null, h('section.composer',
     h('form', {method: 'post', action: opts.id ? '#' + opts.id : '',
@@ -1196,6 +1214,17 @@ Serve.prototype.composer = function (opts, cb) {
         cols: 70,
         placeholder: opts.placeholder || 'public message',
       }, data.text || ''),
+      unknownMentions.length > 0 ? [
+        h('div', h('em', 'names:')),
+        h('ul.mentions', unknownMentions.map(function (mention) {
+          return h('li',
+            h('code', mention.fullName), ': ',
+            h('input', {name: 'mention_name', type: 'hidden',
+              value: mention.name}),
+            h('input.mention-id-input', {name: 'mention_id',
+              value: mention.id, placeholder: 'id'}))
+        }))
+      ] : '',
       h('table.ssb-msgs',
         h('tr.msg-row',
           h('td.msg-left', {colspan: 2},
@@ -1216,8 +1245,6 @@ Serve.prototype.composer = function (opts, cb) {
   function preview(raw, cb) {
     var myId = self.app.sbot.id
     var content
-    var unknownMentions = []
-    var unknownMentionNames = {}
     try {
       content = JSON.parse(data.text)
     } catch (err) {
@@ -1227,8 +1254,7 @@ Serve.prototype.composer = function (opts, cb) {
         text: data.text,
       }
       var mentions = ssbMentions(data.text, {bareFeedNames: true})
-      if (mentions.length) {
-        content.mentions = mentions.filter(function (mention) {
+        .filter(function (mention) {
           var blob = blobs[mention.link]
           if (blob) {
             if (!isNaN(blob.size))
@@ -1238,17 +1264,14 @@ Serve.prototype.composer = function (opts, cb) {
           } else if (mention.link === '@') {
             // bare feed name
             var name = mention.name
-            if (unknownMentionNames[name]) return false
-            unknownMentionNames[name] = true
             var fullName = mention.link + name
             var id = formNames[name] || self.app.getReverseNameSync(fullName)
-            unknownMentions.push({name: name, fullName: fullName, id: id})
             if (id) mention.link = id
             else return false
           }
           return true
         })
-      }
+      if (mentions.length) content.mentions = mentions
       if (data.recps != null) {
         if (opts.recps) return cb(new Error('got recps in opts and data'))
         content.recps = [myId]
@@ -1284,17 +1307,6 @@ Serve.prototype.composer = function (opts, cb) {
         value: JSON.stringify(content)}),
       h('div', h('em', 'draft:')),
       msgContainer,
-      unknownMentions.length > 0 ? [
-        h('div', h('em', 'names:')),
-        h('ul', unknownMentions.map(function (mention) {
-          return h('li',
-            h('code', mention.fullName), ': ',
-            h('input', {name: 'mention_name', type: 'hidden',
-              value: mention.name}),
-            h('input.mention-id-input', {name: 'mention_id',
-              value: mention.id, placeholder: 'id'}))
-        }))
-      ] : '',
       h('div.composer-actions',
         h('input', {type: 'submit', name: 'action', value: 'publish'})
       )
diff --git a/static/styles.css b/static/styles.css
index c75ec2e..f376a38 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -141,6 +141,10 @@ td {
   padding: 0;
 }
 
+.mentions li {
+  list-style-type: none;
+}
+
 .mention-id-input {
   width: 60ex;
 }