read two levels of marks, sort result

app/mark-dashboard.hoon

@@ -43,7 +43,7 @@
   ^-  {beak silk}
   :-  now-beak
   :-  %tabl
-  %+  turn  list-marks
+  %+  turn  (weld list-marks list-sub-marks)
   |=  {a/mark $~}  ^-  {silk silk}
   :-  [%$ %mark !>(a)]
   [%bunt a]
@@ -61,4 +61,18 @@
   %+  skim  (~(tap by dir))
   |=  {a/mark $~}
   ?=(^ (file (en-beam now-beak /hoon/[a]/mar)))
+::
+++  list-sub-marks
+  =,  space:userlib
+  =,  format
+  ^-  (list {mark $~})
+  %-  zing  ^-  (list (list {mark $~}))
+  =/  top  .^(arch %cy (en-beam now-beak /mar))
+  %+  turn  (~(tap by dir.top))
+  |=  {sub/knot $~}
+  =+  .^(arch %cy (en-beam now-beak /[sub]/mar))
+  %+  murn  (~(tap by dir))
+  |=  {a/mark $~}  ^-  (unit {mark $~})
+  ?~  (file (en-beam now-beak /hoon/[a]/[sub]/mar))  ~
+  `[(rap 3 sub '-' a ~) ~]
 --

web/mark-dashboard/main.js

@@ -5,11 +5,14 @@ TreeActions.registerComponent("mark-dashboard", React.createClass({
   render: function(){ 
     return d.ul({},
       !this.state.data ? "loading..." :
-      _.map(this.state.data,
-         function(result,mark){
-           return d.li({key:mark},"%"+mark, "  ", 
-              (!/\n/.test(result) ? d.code({},result) : d.pre({},d.code({},result)))
-      )})
+      _(this.state.data)
+        .map(function(result,mark){return {result:result, mark:mark}})
+        .sortBy('mark')
+        .map(function(x){
+           return d.li({key:x.mark},"%"+x.mark, "  ", 
+              (!/\n/.test(x.result) ? d.code({},x.result) : d.pre({},d.code({},x.result)))
+          )})
+        .value()
   )},
   getInitialState: function(){ return {data:null}},
   componentDidMount: function(){