soto: style changes

This commit amends the Soto application with style changes
requested during code review, including structuring the mark
conversion as a library.

pkg/arvo/app/soto.hoon

@@ -1,7 +1,9 @@
+::
 ::  Soto: A Dojo relay for Urbit's Landscape interface
 ::  Relays sole-effects to subscribers and forwards sole-action pokes
+::
 /-  sole
-/+  *server, *sole
+/+  *server, *soto
 /=  index
   /^  octs
   /;  as-octs:mimes:html
@@ -34,17 +36,19 @@
   /^  (map knot @)
   /:  /===/app/soto/img  /_  /png/
 ::
-=,  format
 |%
 +$  state
-  $%  [%0 bon=bone]                                     :: store bone from Dojo peer
+::  bon: bone from Dojo peer
+::
+  $%  [%0 bon=bone]
   ==
 ::
 +$  move  [bone card]
 ::
 +$  poke
   $%  [%launch-action [@tas path @t]]
-      [%sole-action sole-action:sole]
+      [%sole-action sole-action]
+      [%json json]
   ==
 ::
 +$  card
@@ -57,7 +61,7 @@
 ::
 +$  diff
   $%  [%json json]
-      [%sole-effect sole-effect:sole]
+      [%sole-effect sole-effect]
   ==
 ::
 --
@@ -77,8 +81,7 @@
         [ost.bol %connect / [~ /'~soto'] %soto]
         [ost.bol %poke /soto [our.bol %launch] launcha]
     ==
-  :-  [ost.bol %poke /soto [our.bol %launch] launcha]~
-  this(sta u.old)
+  [~ this(sta u.old)]
 ::
 ++  peer-sototile
   |=  wir=wire
@@ -91,22 +94,31 @@
 ++  peer-primary
   |=  wir=wire
   ^-  (quip move _this)
-  :-  [ost.bol %peer / [our.bol %dojo] /sole]~                                 :: poke/peer need same wire
-  %=  this
-    bon.sta  ost.bol
-  ==
+  ?>  (team:title our.bol src.bol)
+  ::  poke/peer need same wire
+  ::
+  :_  this(bon.sta ost.bol)
+  [ost.bol %peer / [our.bol %dojo] /sole]~
+::
+++  poke-json
+  |=  =json
+  ^-  (quip move _this)
+  ?>  (team:title our.bol src.bol)
+  (poke-sole-action (json-to-action json))
 ::
 ++  poke-sole-action
   |=  act=sole-action
   ^-  (quip move _this)
+  ::  poke/peer need same wire
+  ::
   :_  this
-  [bon.sta %poke / [our.bol %dojo] [%sole-action act]]~                        :: poke/peer need same wire
+  [bon.sta %poke / [our.bol %dojo] [%sole-action act]]~
 ::
 ++  diff-sole-effect
   |=  [=wire fec=sole-effect]
   ^-  (quip move _this)
   :_  this
-  [bon.sta %diff %sole-effect fec]~
+  [bon.sta %diff %json (effect-to-json fec)]~
 ::
 ++  bound
   |=  [wir=wire success=? binding=binding:eyre]

pkg/arvo/lib/soto.hoon

@@ -0,0 +1,98 @@
+/+  *sole
+::
+::TODO  revert after #1946
+::
+|%
+::
+++  json-to-action
+  |=  jon=json  ^-  sole-action
+  %-  need  %.  jon
+  =>  [dejs-soft:format ..sole-action]
+  |^  (fo %ret (of det+change tab+ni ~))
+  ++  fo
+    |*  [a=term b=fist]
+    |=(c=json ?.(=([%s a] c) (b c) (some [a ~])))
+  ::
+  ++  ra
+    |*  [a=[term fist] b=fist]
+    |=  c=json  %.  c
+    ?.(=(%a -.c) b (pe -.a (ar +.a)))
+  ::
+  ++  ke                                              ::  callbacks
+    |*  [gar=* sef=(trap fist)]
+    |=  jon=json  ^-  (unit _gar)
+    =-  ~!  gar  ~!  (need -)  -
+    ((sef) jon)
+  ::
+  ++  change  (ot ler+(at ni ni ~) ted+(pe 0v0 edit) ~)
+  ++  char  (cu taft so)
+  ++  edit
+    %+  ke  *sole-edit  |.  ~+
+    %+  fo  %nop
+    %+  ra  mor+edit
+    (of del+ni set+(cu tuba sa) ins+(ot at+ni cha+char ~) ~)
+  --
+::
+++  effect-to-json
+  |=  sef=sole-effect
+  |^  ^-  json
+      =,  enjs:format
+      ?+    -.sef
+              ~|(unsupported-effect+-.sef !!)
+          $mor  [%a (turn p.sef |=(a/sole-effect ^$(sef a)))]
+          $err  (frond %hop (numb p.sef))
+          $txt  (frond %txt (tape p.sef))
+          $tan  (frond %tan (tape (wush 160 p.sef)))
+          $det  (frond %det json:~(grow mar-sole-change +.sef))
+      ::
+          $pro
+        %+  frond  %pro
+        (pairs vis+b+vis.sef tag+s+tag.sef cad+(tape (purge cad.sef)) ~)
+      ::
+          $tab
+        :-  %a
+        %+  turn  p.sef
+        |=  [=cord =^tank]
+        %-  pairs
+        :~  match+s+cord
+            info+(tape ~(ram re tank))
+        ==
+      ::
+          ?($bel $clr $nex)
+        (frond %act %s -.sef)
+      ==
+  ++  mar-sole-change
+    |_  cha=sole-change
+    ++  grow
+      |%  ++  json
+        ^-  ^json
+        =,  enjs:format
+        =;  edi
+          =,(cha (pairs ted+(edi ted) ler+a+~[(numb own.ler) (numb his.ler)] ~))
+        |=  det=sole-edit
+        ?-  -.det
+          $nop  [%s 'nop']
+          $mor  [%a (turn p.det ..$)]
+          $del  (frond %del (numb p.det))
+          $set  (frond %set (tape (tufa p.det)))
+          $ins  (frond %ins (pairs at+(numb p.det) cha+s+(tuft q.det) ~))
+        ==
+      --
+    --
+  ++  wush
+    |=  [wid=@u tan=tang]
+    ^-  tape
+    %-  of-wall:format 
+    %+  turn  (flop tan)
+    |=  =tank
+    ~!  wid
+    ~!  tank
+    (of-wall:format (wash 0^wid tank))
+  ::
+  ++  purge
+    |=  a=styx  ^-  tape
+    %-  zing  %+  turn  a
+    |=  a=_?>(?=(^ a) i.a)
+    ?@(a (trip a) ^$(a q.a))
+  --
+--

pkg/arvo/mar/sole/effect.hoon

@@ -65,8 +65,13 @@
       (pairs vis+b+vis.sef tag+s+tag.sef cad+(tape (purge cad.sef)) ~)
     ::
         $tab
-      %+  frond  %tab
-      a+(turn p.sef |=([=cord tan=^tank] (pairs match+s+cord info+(tape ~(ram re tan)) ~)))
+      :-  %a
+      %+  turn  p.sef
+      |=  [=cord =^tank]
+      %-  pairs
+      :~  match+s+cord
+          info+(tape ~(ram re tank))
+      ==
     ::
         ?($bel $clr $nex)
       (frond %act %s -.sef)

pkg/interface/soto/gulpfile.js

@@ -134,7 +134,7 @@ gulp.task('clean-min', function () {
 });
 
 gulp.task('urbit-copy', function () {
-  let ret = gulp.src('urbit/**/*');
+  let ret = gulp.src('../../arvo/**/*');
 
   urbitrc.URBIT_PIERS.forEach(function(pier) {
     ret = ret.pipe(gulp.dest(pier));

pkg/interface/soto/src/css/custom.css

@@ -1,9 +1,9 @@
-p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
+p, input {
   margin-block-end: unset;
   margin-block-start: unset;
   -webkit-margin-before: unset;
   -webkit-margin-after: unset;
-  font-family: Inter, sans-serif;
+  font-family: "Source Code Pro", monospace;
 }
 
 textarea, select, input, button { 
@@ -39,51 +39,6 @@ textarea, select, input, button {
   font-family: "Source Code Pro", monospace;
 }
 
-.body-regular-400 {
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-}
-
-.plus-font {
-  font-size: 48px;
-  line-height: 24px;
-}
-
-.btn-font {
-  font-size: 14px;
-  line-height: 16px;
-  font-weight: 600;
-}
-
-.fw-normal {
-  font-weight: 400;
-}
-
-.fw-bold {
-  font-weight: bold;
-}
-
-.bg-v-light-gray {
-  background-color: #f9f9f9;
-}
-
-.nice-green {
-  color: #2AA779;
-}
-
-.bg-nice-green {
-  background: #2ED196;
-}
-
-.nice-red {
-  color: #EE5432;
-}
-
-.inter {
-  font-family: Inter, sans-serif;
-}
-
 input {
   background-color: inherit;
   color: inherit;

pkg/interface/soto/src/js/api.js

@@ -30,7 +30,7 @@ class UrbitApi {
   }
 
   soto(data) {
-    this.action("soto", "sole-action", data);
+    this.action("soto", "json", data); //TODO: revert after #1946
   }
 
   action(appl, mark, data) {

pkg/interface/soto/src/js/components/history.js

@@ -1,22 +1,22 @@
 import React, { Component } from 'react';
 
 export class History extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-render() {
+  constructor(props) {
+    super(props);
+  }
+  
+  render() {
     return (
-        <div className="history flex flex-column-reverse overflow-container"
-        style={{ height: 'calc(100% - 1rem)', resize: 'vertical' }}>
-            <div style={{ marginTop: 'auto'}}>
-                {this.props.history.map((text, index) => {
-                    return <p className="mono" key={index}>{text}</p>
-                })}
-            </div>
+      <div className="flex flex-column-reverse overflow-container"
+      style={{ height: 'calc(100% - 1rem)', resize: 'vertical' }}>
+        <div style={{ marginTop: 'auto'}}>
+          {this.props.commandLog.map((text, index) => {
+            return <p className="mono" key={index}>{text}</p>
+          })}
         </div>
-        )
+      </div>
+      )
     }
-}
-
+  }
+  
 export default History;

pkg/interface/soto/src/js/components/lib/sole.js

@@ -77,7 +77,11 @@ export class Share {
     switch (false) {
       case 'nop' !== ted: return ted;
       case !ted.map:
-        return ted.map( tad=> { const res=this.inverse(tad); this.apply(tad); return res; }).reverse();
+        return ted.map( tad => { 
+          const res = this.inverse(tad); 
+          this.apply(tad); 
+          return res;
+        }).reverse();
       default: switch (Object.keys(ted)[0]) {
         case 'set': return {set: this.buf};
         case 'ins': return {del: ted.ins};
@@ -115,12 +119,18 @@ export class Share {
   }
 
   transpose(ted,pos){
-    if (pos === undefined) { 
+    if (pos === undefined) {
       return this.transpose(this.leg, ted);
-    } else { 
+    } 
+    else {
       let left;
-    return ((left = (this.transmute(ted, {ins: {at: pos}})).ins) != null ? left : {at:0}).at; }
-  }
+      return ((left = 
+          (this.transmute(
+            ted, {ins: {at: pos}})).ins) != null ? 
+            left : { at:0 }
+          ).at;
+      }
+    }
 };
 
-export default Share
+export default Share;

pkg/interface/soto/src/js/components/root.js

@@ -13,7 +13,6 @@ export class Root extends Component {
     super(props);
     this.state = store.state;
     store.setStateHandler(this.setState.bind(this));
-    let ship = window.ship;
   }
 
   render() {
@@ -25,7 +24,7 @@ export class Root extends Component {
           return (
             <div className="pa3 bg-black mono gray3 w-100"
             style={{lineHeight: "1.4", height: "calc(100% - 48px)", cursor: "text"}}>
-              <History history={this.state.txt}/>
+              <History commandLog={this.state.txt}/>
               <Input ship={ship} cursor={this.state.cursor} prompt={this.state.prompt} input={this.state.input}/>
             </div>
           )}}

pkg/interface/soto/src/js/store.js

@@ -14,7 +14,7 @@ export class Store {
         this.sync = this.sync.bind(this);
         this.print = this.print.bind(this);
     }
-
+    
     handleEvent(data) {
         // recursive handler
         if (data.data) {
@@ -28,41 +28,41 @@ export class Store {
         }
         switch(Object.keys(dojoReply)[0]) {
             case 'txt':
-                return this.print(dojoReply.txt);
+            return this.print(dojoReply.txt);
             case 'tab':
-                for (let suggestion of dojoReply.tab) {
-                    let match = suggestion.match;
-                    let info = suggestion.info;
-                    this.print(match + " " + info);
-                }
-                return;
+            for (let suggestion of dojoReply.tab) {
+                let match = suggestion.match;
+                let info = suggestion.info;
+                this.print(match + " " + info);
+            }
+            return;
             case 'tan':
-                return dojoReply.tan.split("\n").map(this.print);
+            return dojoReply.tan.split("\n").map(this.print);
             case 'pro':
-                return this.setState({ prompt: dojoReply.pro.cad });
+            return this.setState({ prompt: dojoReply.pro.cad });
             case 'hop':
-                return this.setState({ cursor: dojoReply.hop });
+            return this.setState({ cursor: dojoReply.hop });
             case 'det':
-                buffer.receive(dojoReply.det);
-                return this.sync(dojoReply.det.ted);
+            buffer.receive(dojoReply.det);
+            return this.sync(dojoReply.det.ted);
             case 'act':
-                switch(dojoReply.act) {
-                    case 'clr': return this.setState({txt: []});
-                    case 'nex': return this.setState({
-                        input: "",
-                        cursor: 0
-                    });
-                } break;
+            switch(dojoReply.act) {
+                case 'clr': return this.setState({txt: []});
+                case 'nex': return this.setState({
+                    input: "",
+                    cursor: 0
+                });
+            } break;
             default: console.log(dojoReply);
         }
     }
-
+    
     doEdit(ted) {
         let detSend = buffer.transmit(ted);
         this.sync(ted);
         return api.soto({det: detSend});
     }
-
+    
     print(txt) {
         let textLog = this.state.txt;
         textLog.push(txt);
@@ -70,11 +70,11 @@ export class Store {
     }
     
     sync(ted) {
-        return this.setState({ input: buffer.buf, 
-                               cursor: buffer.transpose(ted, this.state.cursor)
-                            });
+        return this.setState({ input: buffer.buf,
+            cursor: buffer.transpose(ted, this.state.cursor)
+        });
     }
-
+    
     setStateHandler(setState) {
         this.setState = setState;
     }