From 61dde23e9ae21c2d4638e85060395f094810b889 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 11 Mar 2020 15:14:29 -0400
Subject: [PATCH 1/9] launch: left-align "home" in mobile layout

We don't want long patps to overlay the "Home"
title -- to do so without truncating planet names,
we just push "Home" out of the way here.
---
 pkg/interface/launch/src/js/components/header.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/launch/src/js/components/header.js b/pkg/interface/launch/src/js/components/header.js
index f89fbd369e..69b9094dac 100644
--- a/pkg/interface/launch/src/js/components/header.js
+++ b/pkg/interface/launch/src/js/components/header.js
@@ -49,10 +49,11 @@ export default class Header extends Component {
 
     return (
       <header
-        className="bg-white bg-gray0-d w-100 justify-between relative tc pt3"
+        className={"bg-white bg-gray0-d w-100 justify-between relative " +
+        "tl tc-m tc-l tc-xl pt3"}
         style={{ height: 40 }}>
         <span
-          className="f9 white-d inter dib"
+          className="f9 white-d inter dib ml4 ml0-m ml0-l ml0-xl"
           style={{
             verticalAlign: "text-top",
             paddingTop: 3

From 81d88a0e790a6a8dc081714ae51a0cc53240aecb Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 11 Mar 2020 15:43:20 -0400
Subject: [PATCH 2/9] various: add "cite" utility function

Replicating the arm in zuse that shortens
comet and moons.
---
 pkg/interface/chat/src/js/lib/util.js    | 21 ++++++++++++++++++++-
 pkg/interface/groups/src/js/lib/util.js  | 21 ++++++++++++++++++++-
 pkg/interface/launch/src/js/lib/util.js  | 19 ++++++++++++++++++-
 pkg/interface/link/src/js/lib/util.js    | 19 +++++++++++++++++++
 pkg/interface/publish/src/js/lib/util.js | 22 +++++++++++++++++++++-
 pkg/interface/soto/src/js/lib/util.js    | 18 ++++++++++++++++++
 6 files changed, 116 insertions(+), 4 deletions(-)
 create mode 100644 pkg/interface/soto/src/js/lib/util.js

diff --git a/pkg/interface/chat/src/js/lib/util.js b/pkg/interface/chat/src/js/lib/util.js
index feab48fbb2..f166c5d5c0 100644
--- a/pkg/interface/chat/src/js/lib/util.js
+++ b/pkg/interface/chat/src/js/lib/util.js
@@ -95,4 +95,23 @@ export function writeText(str) {
   }).catch(function (error) {
     console.error(error);
   });;
-};
\ No newline at end of file
+};
+
+// trim patps to match dojo, chat-cli
+export function cite(ship) {
+  let patp = ship, shortened = "";
+  if (patp.startsWith("~")) {
+    patp = patp.substr(1);
+  }
+  // comet
+  if (patp.length === 56) {
+    shortened = "~" + patp.slice(0, 6) + "_" + patp.slice(50, 56);
+    return shortened;
+  }
+  // moon
+  if (patp.length === 27) {
+    shortened = "~" + patp.slice(14, 20) + "^" + patp.slice(21, 27);
+    return shortened;
+  }
+  return `~${patp}`;
+}
\ No newline at end of file
diff --git a/pkg/interface/groups/src/js/lib/util.js b/pkg/interface/groups/src/js/lib/util.js
index 96288a87b6..f34fd5e0a6 100644
--- a/pkg/interface/groups/src/js/lib/util.js
+++ b/pkg/interface/groups/src/js/lib/util.js
@@ -67,7 +67,26 @@ export function uxToHex(ux) {
     let value = ux.substr(2).replace('.', '').padStart(6, '0');
     return value;
   }
-  
+
   let value = ux.replace('.', '').padStart(6, '0');
   return value;
 }
+
+// trim patps to match dojo, chat-cli
+export function cite(ship) {
+  let patp = ship, shortened = "";
+  if (patp.startsWith("~")) {
+    patp = patp.substr(1);
+  }
+  // comet
+  if (patp.length === 56) {
+    shortened = "~" + patp.slice(0, 6) + "_" + patp.slice(50, 56);
+    return shortened;
+  }
+  // moon
+  if (patp.length === 27) {
+    shortened = "~" + patp.slice(14, 20) + "^" + patp.slice(21, 27);
+    return shortened;
+  }
+  return `~${patp}`;
+}
\ No newline at end of file
diff --git a/pkg/interface/launch/src/js/lib/util.js b/pkg/interface/launch/src/js/lib/util.js
index 45662f6f99..708c5accfe 100644
--- a/pkg/interface/launch/src/js/lib/util.js
+++ b/pkg/interface/launch/src/js/lib/util.js
@@ -9,4 +9,21 @@ export function daToDate(st) {
   return new Date(ds);
 }
 
-
+// trim patps to match dojo, chat-cli
+export function cite(ship) {
+  let patp = ship, shortened = "";
+  if (patp.startsWith("~")) {
+    patp = patp.substr(1);
+  }
+  // comet
+  if (patp.length === 56) {
+    shortened = "~" + patp.slice(0, 6) + "_" + patp.slice(50, 56);
+    return shortened;
+  }
+  // moon
+  if (patp.length === 27) {
+    shortened = "~" + patp.slice(14, 20) + "^" + patp.slice(21, 27);
+    return shortened;
+  }
+  return `~${patp}`;
+}
\ No newline at end of file
diff --git a/pkg/interface/link/src/js/lib/util.js b/pkg/interface/link/src/js/lib/util.js
index 9ebc884161..8f1c2b2eb9 100644
--- a/pkg/interface/link/src/js/lib/util.js
+++ b/pkg/interface/link/src/js/lib/util.js
@@ -146,3 +146,22 @@ export function uxToHex(ux) {
     return ux.replace('.', '').padStart(6, '0');
   }
 }
+
+// trim patps to match dojo, chat-cli
+export function cite(ship) {
+  let patp = ship, shortened = "";
+  if (patp.startsWith("~")) {
+    patp = patp.substr(1);
+  }
+  // comet
+  if (patp.length === 56) {
+    shortened = "~" + patp.slice(0, 6) + "_" + patp.slice(50, 56);
+    return shortened;
+  }
+  // moon
+  if (patp.length === 27) {
+    shortened = "~" + patp.slice(14, 20) + "^" + patp.slice(21, 27);
+    return shortened;
+  }
+  return `~${patp}`;
+}
\ No newline at end of file
diff --git a/pkg/interface/publish/src/js/lib/util.js b/pkg/interface/publish/src/js/lib/util.js
index 98ce0d06b2..efac3e2937 100644
--- a/pkg/interface/publish/src/js/lib/util.js
+++ b/pkg/interface/publish/src/js/lib/util.js
@@ -70,4 +70,24 @@ export function writeText(str) {
   }).catch(function (error) {
     console.error(error);
   });;
-};
\ No newline at end of file
+};
+
+
+// trim patps to match dojo, chat-cli
+export function cite(ship) {
+  let patp = ship, shortened = "";
+  if (patp.startsWith("~")) {
+    patp = patp.substr(1);
+  }
+  // comet
+  if (patp.length === 56) {
+    shortened = "~" + patp.slice(0, 6) + "_" + patp.slice(50, 56);
+    return shortened;
+  }
+  // moon
+  if (patp.length === 27) {
+    shortened = "~" + patp.slice(14, 20) + "^" + patp.slice(21, 27);
+    return shortened;
+  }
+  return `~${patp}`;
+}
\ No newline at end of file
diff --git a/pkg/interface/soto/src/js/lib/util.js b/pkg/interface/soto/src/js/lib/util.js
new file mode 100644
index 0000000000..90d7dc1550
--- /dev/null
+++ b/pkg/interface/soto/src/js/lib/util.js
@@ -0,0 +1,18 @@
+// trim patps to match dojo, chat-cli
+export function cite(ship) {
+  let patp = ship, shortened = "";
+  if (patp.startsWith("~")) {
+    patp = patp.substr(1);
+  }
+  // comet
+  if (patp.length === 56) {
+    shortened = "~" + patp.slice(0, 6) + "_" + patp.slice(50, 56);
+    return shortened;
+  }
+  // moon
+  if (patp.length === 27) {
+    shortened = "~" + patp.slice(14, 20) + "^" + patp.slice(21, 27);
+    return shortened;
+  }
+  return `~${patp}`;
+}
\ No newline at end of file

From 8d580b45330ecb3fbabd6977d58da6336dacef09 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 11 Mar 2020 15:43:28 -0400
Subject: [PATCH 3/9] launch: shorten patp in header

---
 pkg/interface/launch/src/js/components/header.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pkg/interface/launch/src/js/components/header.js b/pkg/interface/launch/src/js/components/header.js
index 69b9094dac..f60f2d31be 100644
--- a/pkg/interface/launch/src/js/components/header.js
+++ b/pkg/interface/launch/src/js/components/header.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Sigil } from './sigil';
+import { cite } from '../lib/util';
 import _ from 'lodash';
 
 export default class Header extends Component {
@@ -67,7 +68,7 @@ export default class Header extends Component {
             size={16} color={"#000000"}
             classes="mix-blend-diff v-mid" />
           <span className="mono white-d f9 ml2">
-            {"~" + window.ship}
+            {cite(window.ship)}
           </span>
         </div>
       </header>

From 7c0a4a35aeb5d856855ee884d6e319219d5bdb18 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 11 Mar 2020 15:44:44 -0400
Subject: [PATCH 4/9] various: pass classes to blank sigil component

Previously, we only passed classes as properties to actual sigils.
When we were using passed classes to line up sigils,
having a blank sigil would also turn the display askew.
---
 pkg/interface/chat/src/js/components/lib/icons/sigil.js    | 4 +++-
 pkg/interface/groups/src/js/components/lib/icons/sigil.js  | 2 +-
 pkg/interface/launch/src/js/components/sigil.js            | 2 +-
 pkg/interface/link/src/js/components/lib/icons/sigil.js    | 2 +-
 pkg/interface/publish/src/js/components/lib/icons/sigil.js | 4 +++-
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/pkg/interface/chat/src/js/components/lib/icons/sigil.js b/pkg/interface/chat/src/js/components/lib/icons/sigil.js
index c160e62f8a..853332901f 100644
--- a/pkg/interface/chat/src/js/components/lib/icons/sigil.js
+++ b/pkg/interface/chat/src/js/components/lib/icons/sigil.js
@@ -10,7 +10,9 @@ export class Sigil extends Component {
 
     if (props.ship.length > 14) {
       return (
-        <div className="bg-black dib" style={{width: props.size, height: props.size}}>
+        <div
+        className={"bg-black dib " + classes}
+        style={{width: props.size, height: props.size}}>
         </div>
       );
     } else {
diff --git a/pkg/interface/groups/src/js/components/lib/icons/sigil.js b/pkg/interface/groups/src/js/components/lib/icons/sigil.js
index 89cdd95371..8bd10a3791 100644
--- a/pkg/interface/groups/src/js/components/lib/icons/sigil.js
+++ b/pkg/interface/groups/src/js/components/lib/icons/sigil.js
@@ -10,7 +10,7 @@ export class Sigil extends Component {
     if (props.ship.length > 14) {
       return (
         <div
-          className="bg-black dib"
+          className={"bg-black dib " + classes}
           style={{ width: props.size, height: props.size }}></div>
       );
     } else {
diff --git a/pkg/interface/launch/src/js/components/sigil.js b/pkg/interface/launch/src/js/components/sigil.js
index d02aa3526e..49650987bd 100644
--- a/pkg/interface/launch/src/js/components/sigil.js
+++ b/pkg/interface/launch/src/js/components/sigil.js
@@ -10,7 +10,7 @@ export class Sigil extends Component {
     if (props.ship.length > 14) {
       return (
         <div
-          className="bg-black dib"
+          className={"bg-black dib " + classes}
           style={{ width: props.size, height: props.size }}></div>
       );
     } else {
diff --git a/pkg/interface/link/src/js/components/lib/icons/sigil.js b/pkg/interface/link/src/js/components/lib/icons/sigil.js
index bae6c4f78c..2ef775e8bc 100644
--- a/pkg/interface/link/src/js/components/lib/icons/sigil.js
+++ b/pkg/interface/link/src/js/components/lib/icons/sigil.js
@@ -10,7 +10,7 @@ export class Sigil extends Component {
     if (props.ship.length > 14) {
       return (
         <div
-          className="bg-black dib"
+          className={"bg-black dib " + classes}
           style={{ width: props.size, height: props.size }}></div>
       );
     } else {
diff --git a/pkg/interface/publish/src/js/components/lib/icons/sigil.js b/pkg/interface/publish/src/js/components/lib/icons/sigil.js
index 68fa449d96..55336013d3 100644
--- a/pkg/interface/publish/src/js/components/lib/icons/sigil.js
+++ b/pkg/interface/publish/src/js/components/lib/icons/sigil.js
@@ -10,7 +10,9 @@ export class Sigil extends Component {
 
     if (props.ship.length > 14) {
       return (
-        <div className="bg-black dib" style={{ width: props.size, height: props.size }}>
+        <div
+        className={"bg-black dib " + classes}
+        style={{ width: props.size, height: props.size }}>
         </div>
       );
     } else {

From a7b6ed4ef34759abe4e2b9670579257c50f7ab2a Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 11 Mar 2020 16:14:40 -0400
Subject: [PATCH 5/9] chat: shorten patps, add patp as title attr

No matter what, if you mouseover a name, you'll
now see its original patp. Comets and moons get
truncated accordingly.
---
 .../chat/src/js/components/lib/header-bar.js      |  4 ++--
 .../chat/src/js/components/lib/member-element.js  |  4 ++--
 .../chat/src/js/components/lib/message.js         | 15 ++++++++++++---
 .../chat/src/js/components/lib/sidebar-item.js    | 10 +++++++---
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/pkg/interface/chat/src/js/components/lib/header-bar.js b/pkg/interface/chat/src/js/components/lib/header-bar.js
index 3798ded8d1..7a990aad4d 100644
--- a/pkg/interface/chat/src/js/components/lib/header-bar.js
+++ b/pkg/interface/chat/src/js/components/lib/header-bar.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import classnames from "classnames";
+import { cite } from '../../lib/util';
 import { IconHome } from "/components/lib/icons/icon-home";
 import { Sigil } from "/components/lib/icons/sigil";
 
@@ -50,7 +50,7 @@ export class HeaderBar extends Component {
             size={16}
             color={"#000000"}
           />
-          <span className="mono white-d f9 ml2">{"~" + window.ship}</span>
+          <span className="mono white-d f9 ml2 c-default">{cite(window.ship)}</span>
         </div>
       </div>
     );
diff --git a/pkg/interface/chat/src/js/components/lib/member-element.js b/pkg/interface/chat/src/js/components/lib/member-element.js
index b0151f223a..2e25b63078 100644
--- a/pkg/interface/chat/src/js/components/lib/member-element.js
+++ b/pkg/interface/chat/src/js/components/lib/member-element.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Sigil } from '/components/lib/icons/sigil';
-import { uxToHex } from '/lib/util';
+import { uxToHex, cite } from '/lib/util';
 
 
 export class MemberElement extends Component {
@@ -35,7 +35,7 @@ export class MemberElement extends Component {
     }
 
     let name = !!props.contact
-      ? `${props.contact.nickname} (~${props.ship})` : `~${props.ship}`;
+      ? `${props.contact.nickname} (${cite(props.ship)})` : `${cite(props.ship)}`;
     let color = !!props.contact ? uxToHex(props.contact.color) : '000000';
 
     return (
diff --git a/pkg/interface/chat/src/js/components/lib/message.js b/pkg/interface/chat/src/js/components/lib/message.js
index 304fef97ef..36fd7eb363 100644
--- a/pkg/interface/chat/src/js/components/lib/message.js
+++ b/pkg/interface/chat/src/js/components/lib/message.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Sigil } from '/components/lib/icons/sigil';
 import classnames from 'classnames';
 import { Route, Link } from 'react-router-dom'
-import { uxToHex } from '/lib/util';
+import { uxToHex, cite } from '/lib/util';
 import urbitOb from 'urbit-ob';
 import moment from 'moment';
 import _ from 'lodash';
@@ -154,6 +154,11 @@ export class Message extends Component {
         color = `#${uxToHex(contact.color)}`;
         sigilClass = "";
       }
+
+      if (`~${props.msg.author}` === name) {
+        name = cite(props.msg.author);
+      }
+
       return (
         <div
           className={
@@ -174,8 +179,12 @@ export class Message extends Component {
             className="fr clamp-message white-d"
             style={{ flexGrow: 1, marginTop: -8 }}>
             <div className="hide-child" style={paddingTop}>
-              <p className="v-mid f9 gray2 dib mr3">
-                <span className={contact.nickname ? null : "mono"}>{name}</span>
+              <p className="v-mid f9 gray2 dib mr3 c-default">
+                <span
+                  className={contact.nickname ? null : "mono"}
+                  title={`~${props.msg.author}`}>
+                    {name}
+                </span>
               </p>
               <p className="v-mid mono f9 gray2 dib">{timestamp}</p>
               <p className="v-mid mono f9 ml2 gray2 dib child dn-s">{datestamp}</p>
diff --git a/pkg/interface/chat/src/js/components/lib/sidebar-item.js b/pkg/interface/chat/src/js/components/lib/sidebar-item.js
index 618f8866a3..3d0ecb2c42 100644
--- a/pkg/interface/chat/src/js/components/lib/sidebar-item.js
+++ b/pkg/interface/chat/src/js/components/lib/sidebar-item.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { cite } from '../../lib/util';
 import classnames from 'classnames';
 import moment from 'moment';
 
@@ -62,13 +63,15 @@ export class SidebarItem extends Component {
 
     let latest = this.getLetter(props.latest);
 
-    let selectedCss = !!props.selected ? 'bg-gray5 bg-gray1-d gray3-d' : 'bg-white bg-gray0-d gray3-d pointer';
+    let selectedCss = !!props.selected
+      ? 'bg-gray5 bg-gray1-d gray3-d c-default'
+      : 'bg-white bg-gray0-d gray3-d pointer';
 
     let authorCss = (props.nickname === props.ship)
       ? "mono" : "";
 
     let author = (props.nickname === props.ship)
-      ? `~${props.ship}` : props.nickname;
+      ? cite(props.ship) : props.nickname;
 
     return (
       <div
@@ -82,7 +85,8 @@ export class SidebarItem extends Component {
         </div>
         <div className="w-100 pt3">
           <p className={((unreadElem === "") ? "black white-d" : "") +
-          unreadElem + " dib f9 mr3 mw4 truncate v-mid " + authorCss}>
+          unreadElem + " dib f9 mr3 mw4 truncate v-mid " + authorCss}
+          title={props.ship || ""}>
             {(author === "~") ? "" : author}
           </p>
           <p className="dib mono f9 gray3 v-mid">{state.timeSinceNewestMessage}</p>

From b5af51f03e17ec4c5317234341ef6e420a4c70a2 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 11 Mar 2020 16:23:35 -0400
Subject: [PATCH 6/9] groups: shorten comet and moon patps

---
 pkg/interface/groups/src/js/components/lib/contact-item.js | 7 ++++---
 .../groups/src/js/components/lib/contact-sidebar.js        | 6 ++++--
 .../groups/src/js/components/lib/group-sidebar.js          | 4 ++--
 pkg/interface/groups/src/js/components/lib/header-bar.js   | 4 ++--
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/pkg/interface/groups/src/js/components/lib/contact-item.js b/pkg/interface/groups/src/js/components/lib/contact-item.js
index b9b3e80d83..2a53c5808e 100644
--- a/pkg/interface/groups/src/js/components/lib/contact-item.js
+++ b/pkg/interface/groups/src/js/components/lib/contact-item.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Route, Link } from 'react-router-dom';
 import { Sigil } from '../lib/icons/sigil';
-import { uxToHex } from '../../lib/util';
+import { uxToHex, cite } from '../../lib/util';
 
 
 export class ContactItem extends Component {
@@ -10,7 +10,7 @@ export class ContactItem extends Component {
 
     let selectedClass = (props.selected) ? "bg-gray4 bg-gray1-d" : "";
     let hexColor = uxToHex(props.color);
-    let name = (props.nickname) ? props.nickname : "~" + props.ship;
+    let name = (props.nickname) ? props.nickname : cite(props.ship);
 
     let prefix = props.share ? 'share' : 'view';
     let suffix = !props.share ? `/${props.ship}` : '';
@@ -28,7 +28,8 @@ export class ContactItem extends Component {
             className={
               "f9 w-70 dib v-mid ml2 nowrap " +
               ((props.nickname) ? "" : "mono")}
-            style={{ paddingTop: 6 }}>
+            style={{ paddingTop: 6 }}
+            title={props.ship}>
             {name}
           </p>
         </div>
diff --git a/pkg/interface/groups/src/js/components/lib/contact-sidebar.js b/pkg/interface/groups/src/js/components/lib/contact-sidebar.js
index 0f296d854d..84188bfa6a 100644
--- a/pkg/interface/groups/src/js/components/lib/contact-sidebar.js
+++ b/pkg/interface/groups/src/js/components/lib/contact-sidebar.js
@@ -3,6 +3,7 @@ import { Route, Link } from 'react-router-dom';
 import { ContactItem } from '/components/lib/contact-item';
 import { ShareSheet } from '/components/lib/share-sheet';
 import { Sigil } from '../lib/icons/sigil';
+import { cite } from '../../lib/util';
 
 export class ContactSidebar extends Component {
   render() {
@@ -60,8 +61,9 @@ export class ContactSidebar extends Component {
               classes="mix-blend-diff"
               />
             <p className="f9 w-70 dib v-mid ml2 nowrap mono"
-              style={{ paddingTop: 6, color: '#aaaaaa' }}>
-              ~{member}
+              style={{ paddingTop: 6, color: '#aaaaaa' }}
+              title={member}>
+              {cite(member)}
             </p>
           </div>
         );
diff --git a/pkg/interface/groups/src/js/components/lib/group-sidebar.js b/pkg/interface/groups/src/js/components/lib/group-sidebar.js
index 9d606f1d3e..c41b57aa23 100644
--- a/pkg/interface/groups/src/js/components/lib/group-sidebar.js
+++ b/pkg/interface/groups/src/js/components/lib/group-sidebar.js
@@ -4,7 +4,7 @@ import { Route, Link } from 'react-router-dom';
 import { GroupItem } from '/components/lib/group-item';
 import { Sigil } from '/components/lib/icons/sigil';
 import { SidebarInvite } from '/components/lib/sidebar-invite';
-import { uxToHex } from '/lib/util';
+import { cite } from '/lib/util';
 
 export class GroupSidebar extends Component {
   // drawer to the left
@@ -29,7 +29,7 @@ export class GroupSidebar extends Component {
               <p
                 className="f9 w-70 dib v-mid ml2 nowrap mono"
                 style={{paddingTop: 6}}>
-                ~{window.ship}
+                {cite(window.ship)}
               </p>
             </div>
           </Link>
diff --git a/pkg/interface/groups/src/js/components/lib/header-bar.js b/pkg/interface/groups/src/js/components/lib/header-bar.js
index cf3be78dd9..aa03afd4e3 100644
--- a/pkg/interface/groups/src/js/components/lib/header-bar.js
+++ b/pkg/interface/groups/src/js/components/lib/header-bar.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import classnames from "classnames";
+import { cite } from '../../lib/util';
 import { IconHome } from "/components/lib/icons/icon-home";
 import { Sigil } from "/components/lib/icons/sigil";
 
@@ -51,7 +51,7 @@ export class HeaderBar extends Component {
             color={"#000000"}
             classes={"v-mid mix-blend-diff"}
           />
-          <span className="mono white-d f9 ml2">{"~" + window.ship}</span>
+          <span className="mono white-d f9 ml2 c-default">{cite(window.ship)}</span>
         </div>
       </div>
     );

From ffd95526e0958f63991c2933ff0d00efe628d5cb Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 11 Mar 2020 16:35:12 -0400
Subject: [PATCH 7/9] link: shorten comet/moon patps

---
 .../link/src/js/components/lib/comment-item.js       |  6 ++++--
 .../link/src/js/components/lib/header-bar.js         |  3 ++-
 .../src/js/components/lib/link-detail-preview.js     |  7 ++++---
 .../link/src/js/components/lib/link-item.js          | 11 +++++++----
 .../link/src/js/components/lib/member-element.js     | 12 +++++++-----
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/pkg/interface/link/src/js/components/lib/comment-item.js b/pkg/interface/link/src/js/components/lib/comment-item.js
index f552e8f39a..c916897c76 100644
--- a/pkg/interface/link/src/js/components/lib/comment-item.js
+++ b/pkg/interface/link/src/js/components/lib/comment-item.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { Sigil } from './icons/sigil';
+import { cite } from '../../lib/util';
 import moment from 'moment';
 
 export class CommentItem extends Component {
@@ -44,8 +45,9 @@ export class CommentItem extends Component {
           classes={(member ? "mix-blend-diff" : "")}
           />
           <p className="gray2 f9 flex items-center ml2">
-            <span className={"black white-d " + props.nameClass}>
-            {props.nickname ? props.nickname : '~'+props.ship}
+            <span className={"black white-d " + props.nameClass}
+            title={props.ship}>
+              {props.nickname ? props.nickname : cite(props.ship)}
             </span>
             <span className="ml2">
               {this.state.timeSinceComment}
diff --git a/pkg/interface/link/src/js/components/lib/header-bar.js b/pkg/interface/link/src/js/components/lib/header-bar.js
index 0639f0bde3..fcfb3d9353 100644
--- a/pkg/interface/link/src/js/components/lib/header-bar.js
+++ b/pkg/interface/link/src/js/components/lib/header-bar.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { IconHome } from "/components/lib/icons/icon-home";
 import { Sigil } from "/components/lib/icons/sigil";
+import { cite } from "../../lib/util";
 
 export class HeaderBar extends Component {
   constructor(props) {
@@ -50,7 +51,7 @@ export class HeaderBar extends Component {
             size={16}
             color={"#000000"}
           />
-          <span className="mono f9 ml2 white-d">{"~" + window.ship}</span>
+          <span className="mono f9 ml2 white-d c-default">{cite(window.ship)}</span>
         </div>
       </div>
     );
diff --git a/pkg/interface/link/src/js/components/lib/link-detail-preview.js b/pkg/interface/link/src/js/components/lib/link-detail-preview.js
index d62cb1a67a..5590c45970 100644
--- a/pkg/interface/link/src/js/components/lib/link-detail-preview.js
+++ b/pkg/interface/link/src/js/components/lib/link-detail-preview.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Route, Link } from "react-router-dom";
-import { makeRoutePath } from "../../lib/util";
+import { makeRoutePath, cite } from "../../lib/util";
 import moment from "moment";
 
 export class LinkPreview extends Component {
@@ -107,8 +107,9 @@ export class LinkPreview extends Component {
             <span className="gray2 ml2 f8 dib v-btm flex-shrink-0">{hostname} ↗</span>
           </a>
           <div className="w-100 pt1">
-            <span className={"f9 pr2 white-d v-mid " + nameClass}>
-              {props.nickname ? props.nickname : "~" + props.ship}
+            <span className={"f9 pr2 white-d v-mid " + nameClass}
+            title={props.ship}>
+              {props.nickname ? props.nickname : cite(props.ship)}
             </span>
             <span className="f9 inter gray2 pr3 v-mid">
               {this.state.timeSinceLinkPost}
diff --git a/pkg/interface/link/src/js/components/lib/link-item.js b/pkg/interface/link/src/js/components/lib/link-item.js
index 55ae417a64..1abc625326 100644
--- a/pkg/interface/link/src/js/components/lib/link-item.js
+++ b/pkg/interface/link/src/js/components/lib/link-item.js
@@ -3,7 +3,7 @@ import moment from 'moment';
 
 import { Sigil } from '/components/lib/icons/sigil';
 import { Route, Link } from 'react-router-dom';
-import { makeRoutePath } from '../../lib/util';
+import { makeRoutePath, cite } from '../../lib/util';
 
 export class LinkItem extends Component {
   constructor(props) {
@@ -79,9 +79,12 @@ export class LinkItem extends Component {
             <span className="gray2 dib v-btm ml2 f8 flex-shrink-0">{hostname} ↗</span>
           </a>
           <div className="w-100 pt1">
-            <span className={"f9 pr2 v-mid " + mono}>{(props.nickname)
-            ? props.nickname
-            : "~" + props.ship}</span>
+            <span className={"f9 pr2 v-mid " + mono}
+            title={props.ship}>
+            {(props.nickname)
+              ? props.nickname
+              : cite(props.ship)}
+            </span>
           <span
             className={seenState + " f9 inter pr3 v-mid"}
             onClick={this.markPostAsSeen}>
diff --git a/pkg/interface/link/src/js/components/lib/member-element.js b/pkg/interface/link/src/js/components/lib/member-element.js
index 7f660055ea..df78e83b55 100644
--- a/pkg/interface/link/src/js/components/lib/member-element.js
+++ b/pkg/interface/link/src/js/components/lib/member-element.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Sigil } from '/components/lib/icons/sigil';
-import { uxToHex } from '/lib/util';
+import { uxToHex, cite } from '/lib/util';
 
 
 export class MemberElement extends Component {
@@ -36,15 +36,17 @@ export class MemberElement extends Component {
     }
 
     let name = !!props.contact
-      ? `${props.contact.nickname} (~${props.ship})` : `~${props.ship}`;
+      ? `${props.contact.nickname} (${cite(props.ship)})`
+      : `${cite(props.ship)}`;
     let color = !!props.contact ? uxToHex(props.contact.color) : '000000';
 
     return (
       <div className="flex mb2">
         <Sigil ship={props.ship} size={32} color={`#${color}`} />
-        <p className={
-            "w-70 mono list-ship dib v-mid black white-d ml2 nowrap f8"
-           }>{name}</p>
+        <p className={"w-70 mono list-ship dib v-mid black white-d ml2 nowrap f8"}
+           title={props.ship}>
+            {name}
+           </p>
         {actionElem}
       </div>
     );

From 1ed1eb36fdf1e487b6453369c954530b8cdbdba9 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 11 Mar 2020 16:51:07 -0400
Subject: [PATCH 8/9] publish: shorten comet / moon patps

---
 .../publish/src/js/components/lib/comment-item.js      | 10 +++++++---
 .../publish/src/js/components/lib/header-bar.js        |  3 ++-
 pkg/interface/publish/src/js/components/lib/note.js    | 10 ++++++++--
 .../publish/src/js/components/lib/notebook-item.js     |  8 +++++++-
 .../publish/src/js/components/lib/notebook-posts.js    |  9 +++++++--
 .../publish/src/js/components/lib/notebook.js          |  8 +++++++-
 .../publish/src/js/components/lib/subscribers.js       |  7 ++++---
 7 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/pkg/interface/publish/src/js/components/lib/comment-item.js b/pkg/interface/publish/src/js/components/lib/comment-item.js
index 416b62c203..80215431bd 100644
--- a/pkg/interface/publish/src/js/components/lib/comment-item.js
+++ b/pkg/interface/publish/src/js/components/lib/comment-item.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 import { Sigil } from './icons/sigil';
-import { uxToHex } from '../../lib/util';
+import { uxToHex, cite } from '../../lib/util';
 
 export class CommentItem extends Component {
   constructor(props){
@@ -50,6 +50,9 @@ export class CommentItem extends Component {
       classes = "";
     }
 
+    if (name === commentData.author) {
+      name = cite(commentData.author);
+    }
 
     return (
       <div>
@@ -60,8 +63,9 @@ export class CommentItem extends Component {
           color={color}
           classes={classes}
         />
-          <div className={"f9 mh2 pt1" +
-          ((name === commentData.author) ? " mono" : "")}>
+          <div className={"f9 mh2 pt1 " +
+            (contact.nickname ? null : "mono")}
+            title={commentData.author}>
             {name}
           </div>
           <div className="f9 gray3 pt1">{date}</div>
diff --git a/pkg/interface/publish/src/js/components/lib/header-bar.js b/pkg/interface/publish/src/js/components/lib/header-bar.js
index 1f21aff916..73e660d0f5 100644
--- a/pkg/interface/publish/src/js/components/lib/header-bar.js
+++ b/pkg/interface/publish/src/js/components/lib/header-bar.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { IconHome } from '/components/lib/icons/icon-home';
 import { Sigil } from '/components/lib/icons/sigil';
+import { cite } from '../../lib/util';
 
 export class HeaderBar extends Component {
   constructor(props) {
@@ -52,7 +53,7 @@ export class HeaderBar extends Component {
           size={16}
           color={"#000000"}
         />
-          <span className="mono f9 ml2">{"~" + window.ship}</span>
+          <span className="mono f9 ml2 c-default">{cite(window.ship)}</span>
         </div>
       </div>
     );
diff --git a/pkg/interface/publish/src/js/components/lib/note.js b/pkg/interface/publish/src/js/components/lib/note.js
index c8c18a62fe..9957048e82 100644
--- a/pkg/interface/publish/src/js/components/lib/note.js
+++ b/pkg/interface/publish/src/js/components/lib/note.js
@@ -5,6 +5,7 @@ import { Comments } from './comments';
 import { NoteNavigation } from './note-navigation';
 import moment from 'moment';
 import ReactMarkdown from 'react-markdown';
+import { cite } from '../../lib/util';
 
 export class Note extends Component {
   constructor(props){
@@ -125,6 +126,10 @@ export class Note extends Component {
         ? contact.nickname : author;
     }
 
+    if (name === author) {
+      name = cite(author);
+    }
+
     if (!file) {
       return null;
     }
@@ -197,8 +202,9 @@ export class Note extends Component {
               <div className="flex mb6">
                 <div
                   className={
-                    "di f9 gray2 mr2 " + (name === author ? "mono" : "")
-                  }>
+                    "di f9 gray2 mr2 " + (contact.nickname ? null : "mono")
+                  }
+                  title={author}>
                   {name}
                 </div>
                 <div className="di">
diff --git a/pkg/interface/publish/src/js/components/lib/notebook-item.js b/pkg/interface/publish/src/js/components/lib/notebook-item.js
index 519b88c0c8..1c2a1d21e3 100644
--- a/pkg/interface/publish/src/js/components/lib/notebook-item.js
+++ b/pkg/interface/publish/src/js/components/lib/notebook-item.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Route, Link } from 'react-router-dom';
+import { cite } from '../../lib/util';
 
 export class NotebookItem extends Component {
   render() {
@@ -24,13 +25,18 @@ export class NotebookItem extends Component {
         ? contact.nickname : props.author;
     }
 
+    if (name === props.author) {
+      name = cite(props.author);
+    }
+
     return (
       <Link
       to={"/~publish/notebook/" + props.path}>
         <div className={"w-100 v-mid f9 pl4 bb " + selectedClass}>
           <p className="f9 pt1">{props.title}</p>
           <p className="f9 gray2">by
-            <span className={"pl1 " + ((name === props.author) ? "mono" : "")}>
+            <span className={"pl1 " + (contact.nickname ? null : "mono")}
+              title={props.author}>
               {name}
             </span>
           </p>
diff --git a/pkg/interface/publish/src/js/components/lib/notebook-posts.js b/pkg/interface/publish/src/js/components/lib/notebook-posts.js
index 2511d0ec82..b5fff27c0c 100644
--- a/pkg/interface/publish/src/js/components/lib/notebook-posts.js
+++ b/pkg/interface/publish/src/js/components/lib/notebook-posts.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown'
+import { cite } from '../../lib/util';
 
 export class NotebookPosts extends Component {
   constructor(props){
@@ -48,6 +49,9 @@ export class NotebookPosts extends Component {
         name = (contact.nickname.length > 0)
           ? contact.nickname : note.author;
       }
+      if (name === note.author) {
+        name = cite(note.author);
+      }
       let comment = "No Comments";
       if (note["num-comments"] == 1) {
         comment = "1 Comment";
@@ -70,8 +74,9 @@ export class NotebookPosts extends Component {
               {note.snippet}
             </p>
             <div className="flex">
-              <div className={((note.author === name) ? "mono" : "") +
-               " gray2 mr3"}>{name}</div>
+              <div className={(contact.nickname ? null : "mono") +
+               " gray2 mr3"}
+               title={note.author}>{name}</div>
               <div className="gray2 mr3">{date}</div>
               <div className="gray2">{comment}</div>
             </div>
diff --git a/pkg/interface/publish/src/js/components/lib/notebook.js b/pkg/interface/publish/src/js/components/lib/notebook.js
index cbe785c1f2..d4fecce614 100644
--- a/pkg/interface/publish/src/js/components/lib/notebook.js
+++ b/pkg/interface/publish/src/js/components/lib/notebook.js
@@ -5,6 +5,7 @@ import { NotebookPosts } from './notebook-posts';
 import { Subscribers } from './subscribers';
 import { Settings } from './settings';
 import Sidebar from './sidebar';
+import { cite } from '../../lib/util';
 
 export class Notebook extends Component {
   constructor(props){
@@ -133,6 +134,10 @@ export class Notebook extends Component {
         ? contact.nickname : props.ship;
     }
 
+    if (name === props.ship) {
+      name = cite(props.ship);
+    }
+
     let popout = (props.popout) ? "popout/" : "";
     let base = `/~publish/${popout}notebook/${props.ship}/${props.book}`;
     let about = base + '/about';
@@ -204,7 +209,8 @@ export class Notebook extends Component {
               <div className="mb1">{notebook.title}</div>
               <span>
                 <span className="gray3 mr1">by</span>
-                <span className={props.ship === name ? "mono" : ""}>
+                <span className={contact.nickname ? null : "mono"}
+                title={props.ship}>
                   {name}
                 </span>
               </span>
diff --git a/pkg/interface/publish/src/js/components/lib/subscribers.js b/pkg/interface/publish/src/js/components/lib/subscribers.js
index c503de4894..0df0c4e5c2 100644
--- a/pkg/interface/publish/src/js/components/lib/subscribers.js
+++ b/pkg/interface/publish/src/js/components/lib/subscribers.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Dropdown } from './dropdown';
+import { cite } from '../../lib/util';
 
 export class Subscribers extends Component {
   constructor(props){
@@ -68,7 +69,7 @@ export class Subscribers extends Component {
         }
         return (
           <div className="flex justify-between" key={i}>
-            <div className="f9 mono mr2">{`~${who}`}</div>
+            <div className="f9 mono mr2">{`${cite(who)}`}</div>
             <Dropdown
               options={options}
               width={width}
@@ -103,7 +104,7 @@ export class Subscribers extends Component {
           ];
           return (
             <div className="flex justify-between" key={i}>
-              <div className="f9 mono mr2">{who}</div>
+              <div className="f9 mono mr2">{cite(who)}</div>
               <Dropdown
                 options={options}
                 width={width}
@@ -168,7 +169,7 @@ export class Subscribers extends Component {
         <div className="flex flex-column">
           <div className="f9 gray2">Host</div>
           <div className="flex justify-between mt3">
-            <div className="f9 mono mr2">{this.props.host}</div>
+            <div className="f9 mono mr2">{cite(this.props.host)}</div>
           </div>
         </div>
         <div className="flex flex-column">

From f8dc023aa7a9076a58dc732b3df205351e888295 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 11 Mar 2020 16:57:19 -0400
Subject: [PATCH 9/9] soto: shorten comet/moon patp in prompt

---
 pkg/interface/soto/src/js/components/input.js    |  3 ++-
 .../soto/src/js/components/lib/header-bar.js     |  7 +++++--
 .../soto/src/js/components/lib/icons/sigil.js    | 16 +++++++++-------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/pkg/interface/soto/src/js/components/input.js b/pkg/interface/soto/src/js/components/input.js
index 1bbe530ec5..8d43f8e283 100644
--- a/pkg/interface/soto/src/js/components/input.js
+++ b/pkg/interface/soto/src/js/components/input.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { store } from '../store';
 import { api } from '../api';
+import { cite } from '../lib/util';
 
 export class Input extends Component {
   constructor(props) {
@@ -66,7 +67,7 @@ export class Input extends Component {
 render() {
   return (
     <div className="flex flex-row flex-grow-1">
-      <div className="flex-shrink-0">~{this.props.ship}:dojo
+      <div className="flex-shrink-0">{cite(this.props.ship)}:dojo
       </div>
       <span id="prompt">
         {this.props.prompt}
diff --git a/pkg/interface/soto/src/js/components/lib/header-bar.js b/pkg/interface/soto/src/js/components/lib/header-bar.js
index 61dc0620e7..1cb4c3130b 100644
--- a/pkg/interface/soto/src/js/components/lib/header-bar.js
+++ b/pkg/interface/soto/src/js/components/lib/header-bar.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import { IconHome } from '/components/lib/icons/icon-home';
 import { Sigil } from '/components/lib/icons/sigil';
+import { cite } from '../../lib/util';
 
 export class HeaderBar extends Component {
   render() {
@@ -41,7 +42,7 @@ export class HeaderBar extends Component {
             verticalAlign: "text-top",
             paddingTop: 3
           }}>{title}</span>
-        <div className="absolute right-1 lh-copy"
+        <div className="absolute right-1 lh-copy flex"
           style={{ top: 12 }}>
           <Sigil
             ship={"~" + window.ship}
@@ -49,7 +50,9 @@ export class HeaderBar extends Component {
             color={"#000000"}
             classes="mix-blend-diff"
           />
-          <span className="mono black white-d f9 ml2 v-top">{"~" + window.ship}</span>
+          <span className="mono black white-d f9 ml2 v-top c-default flex-shrink-0">
+            {cite(window.ship)}
+          </span>
         </div>
       </div>
     );
diff --git a/pkg/interface/soto/src/js/components/lib/icons/sigil.js b/pkg/interface/soto/src/js/components/lib/icons/sigil.js
index 7cc563c762..8bd10a3791 100644
--- a/pkg/interface/soto/src/js/components/lib/icons/sigil.js
+++ b/pkg/interface/soto/src/js/components/lib/icons/sigil.js
@@ -1,21 +1,23 @@
-import React, { Component } from 'react';
-import { sigil, reactRenderer } from 'urbit-sigil-js';
-
+import React, { Component } from "react";
+import { sigil, reactRenderer } from "urbit-sigil-js";
 
 export class Sigil extends Component {
   render() {
     const { props } = this;
 
-    let classes = !!this.props.classes ? this.props.classes : "";
+    let classes = props.classes || "";
 
     if (props.ship.length > 14) {
       return (
-        <div className="bg-black flex-shrink-0" style={{ width: props.size, height: props.size }}>
-        </div>
+        <div
+          className={"bg-black dib " + classes}
+          style={{ width: props.size, height: props.size }}></div>
       );
     } else {
       return (
-        <div className={"dib flex-shrink-0 " + classes} style={{ flexBasis: 32, backgroundColor: props.color }}>
+        <div
+          className={"dib " + classes}
+          style={{ flexBasis: 32, backgroundColor: props.color }}>
           {sigil({
             patp: props.ship,
             renderer: reactRenderer,