a better way to show petnames or other names and other improvements to Profile.

web-client/src/App.html

@@ -47,4 +47,9 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
+  a {
+    cursor: pointer;
+    color: blue;
+    text-decoration: underline;
+  }
 </style>

web-client/src/Name.html

@@ -0,0 +1,78 @@
+<template>
+  <div
+    v-if="pubkey"
+    :class="{Name: true, full}"
+    @click="full = expandable ? !full : false"
+  >
+    <span
+      class="petname"
+      :title="petnames[0].length > 1 ? 'hierarchical petname' : 'our name for this user'"
+      v-if="petnames.length"
+      >{{ petnames[0].join('.') }}</span
+    >
+    <span
+      class="petname"
+      title="hierarchical petname"
+      v-if="full && petnames.length > 1"
+      v-for="petname in petnames.slice(1)"
+      >{{ petname.join('.') }}</span
+    >
+    <span
+      class="self-given"
+      title="their own self-given name"
+      v-if="(!petnames.length || full) && selfGiven"
+      >{{ selfGiven }}</span
+    >
+    <span
+      class="abbr"
+      title="pubkey abbreviation"
+      v-if="petnames.length === 0 && !selfGiven"
+      >{{ abbr }}</span
+    >
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['pubkey', 'expandable'],
+    data() {
+      return {
+        full: false
+      }
+    },
+    computed: {
+      petnames() {
+        return (this.$store.state.petnames[this.pubkey] || [])
+          .filter(name => !name[name.length - 1].match(/^[0-9a-f]{64}$/))
+          .sort((a, b) => b.length - a.length)
+      },
+      selfGiven() {
+        let theirOwnMetadata = this.$store.state.metadata.get(this.pubkey) || {}
+        return theirOwnMetadata.name
+      },
+      abbr() {
+        return this.pubkey.slice(0, 4) + '…' + this.pubkey.slice(-4)
+      }
+    }
+  }
+</script>
+
+<style>
+  .Name {
+    display: inline-block;
+    margin: 7px;
+    padding: 3px;
+  }
+  .Name.full {
+    display: block;
+  }
+  .Name .petname {
+    background-color: lightgreen;
+  }
+  .Name .self-given {
+    background-color: orange;
+  }
+  .Name .abbr {
+    background-color: lightgrey;
+  }
+</style>

web-client/src/Note.html

@@ -4,7 +4,9 @@
       <Note :note="reference" />
     </div>
     <header class="pubkey">
-      <a :href="'#/' + pubkey">{{ $store.getters.keyName(pubkey) }}</a>
+      <a :href="'#/' + pubkey">
+        <Name :pubkey="pubkey" />
+      </a>
     </header>
     <p>{{ content }}</p>
     <footer>

web-client/src/Profile.html

@@ -1,17 +1,7 @@
 <template>
-  <div>
-    <code>{{ $route.params.key }}</code>
-    <div>
-      <label v-if="editingMetadata">
-        Picture URL:
-        <input v-model="editingMetadata.picture" />
-      </label>
-      <img
-        v-else-if="(metadata.picture || '').length"
-        :src="metadata.picture"
-      />
-    </div>
-    <div>
+  <div class="Profile">
+    <code class="canonical-pubkey">{{ $route.params.key }}</code>
+    <h1>
       <form v-if="editingName !== null" @submit="setContactName">
         <label>
           Petname:
@@ -19,47 +9,47 @@
           (Will be made public)
         </label>
         <button>Save</button>
+        <button @click="editingName = null">Cancel</button>
       </form>
-      <div v-else-if="editingMetadata">
-        <label v-if="editingMetadata">
-          Name:
-          <input v-model="editingMetadata.name" />
-        </label>
-      </div>
       <div v-else>
-        <h1>{{ $store.getters.keyName(this.$route.params.key) }}</h1>
+        <Name :pubkey="this.$route.params.key" expandable />
         <button
           v-if="!myself"
-          @click="editingName = $store.getters.keyName(this.$route.params.key)"
+          @click="editingName = this.$store.getters.ourPetNameFor(this.$route.params.key) || ''"
         >
           Rename
         </button>
       </div>
-    </div>
-    <h2 v-if="$store.getters.keyName(this.$route.params.key) !== metadata.name">
-      {{ metadata.name }}
-    </h2>
+    </h1>
     <div v-if="!myself">
       <button v-if="following" @click="unfollow">Unfollow</button>
       <button v-else @click="follow">Follow</button>
     </div>
-    <article>
-      <span v-if="!editingMetadata">{{ metadata.about }}</span>
-      <label v-else>
+    <article class="metadata">
+      <form v-if="editingMetadata" @submit="saveEditedMetadata">
+        <label>
+          Picture URL:
+          <input v-model="editingMetadata.picture" />
+        </label>
+        <label>
+          Name:
+          <input v-model="editingMetadata.name" />
+        </label>
         About: <textarea v-model="editingMetadata.about"></textarea>
-      </label>
+        <div>
+          <button>Save</button>
+          <button @click="editingMetadata = null">Cancel</button>
+        </div>
+      </form>
+      <div v-else>
+        <img v-if="(metadata.picture || '').length" :src="metadata.picture" />
+        <h2>{{ metadata.name }}</h2>
+        <div>{{ metadata.about }}</div>
+        <button v-if="myself" @click="editingMetadata = {...metadata}">
+          Edit
+        </button>
+      </div>
     </article>
-    <div>
-      <button
-        v-if="myself && !editingMetadata"
-        @click="editingMetadata = {...metadata}"
-      >
-        Edit
-      </button>
-      <button v-else-if="editingMetadata" @click="saveEditedMetadata">
-        Save
-      </button>
-    </div>
     <List :notes="notes" />
   </div>
 </template>
@@ -128,10 +118,20 @@
   }
 </script>
 
-<style module>
-  a {
-    cursor: pointer;
-    color: blue;
+<style>
+  .Profile {
+  }
+  .Profile .metadata {
+    margin: 5px;
+    padding: 5px;
+    border: dotted 2px orange;
+  }
+  .Profile .canonical-pubkey {
+    display: block;
+    white-space: pre-wrap;
+    word-break: break-all;
+    margin: 26px;
     text-decoration: underline;
+    width: 300px;
   }
 </style>

web-client/src/Setup.html

@@ -23,8 +23,8 @@
       {{ relay.host }}
       <span v-if="relay.recommender"
         >recommended by:
-        <a :href="'#/' + relay.recommender"
-          >{{ $store.getters.keyName(relay.recommender) }}</a
+        <a :href="'#/' + relay.recommender">
+          <Name :pubkey="relay.recommender" /> </a
         >&nbsp;</span
       >
       <button @click="e => unignoreRelay(e, relay.host)">Unignore</button>
@@ -54,8 +54,8 @@
           <button @click="e => ignoreRelay(e, relay.host)">Ignore</button>
           <span v-if="relay.recommender"
             >recommended by:
-            <a :href="'#/' + relay.recommender"
-              >{{ $store.getters.keyName(relay.recommender) }}</a
+            <a :href="'#/' + relay.recommender">
+              <Name :pubkey="relay.recommender" /> </a
             >&nbsp;</span
           >
         </span>

web-client/src/main.js

@@ -8,6 +8,7 @@ import Profile from './Profile.html'
 import Note from './Note.html'
 import List from './List.html'
 import Publish from './Publish.html'
+import Name from './Name.html'
 
 import store from './store'
 
@@ -32,4 +33,5 @@ app.component('Profile', Profile)
 app.component('Note', Note)
 app.component('List', List)
 app.component('Publish', Publish)
+app.component('Name', Name)
 app.mount('#app')

web-client/src/store.js

@@ -57,12 +57,13 @@ export default createStore({
       state.relays
         .filter(({policy}) => policy.indexOf('r') !== -1)
         .map(({host}) => host),
-    keyName: state => pubkey =>
-      state.petnames[pubkey]
-        ? state.petnames[pubkey].map(name => name.join('.')).join(', ')
-        : (state.metadata.get(pubkey) || {}).name ||
-          (pubkey && pubkey.slice(0, 4) + '…' + pubkey.slice(-4)) ||
-          ''
+    ourPetNameFor: state => pubkey => {
+      if (state.petnames[pubkey]) {
+        let single = state.petnames[pubkey].find(name => name.length === 1)
+        if (single) return single[0]
+      }
+      return null
+    }
   },
   mutations,
   actions