styling the Post component.

src/components/Post.vue

@@ -1,27 +1,41 @@
 <template>
-  <q-card flat>
-    <q-card-section class="no-shadow" horizontal>
-      <q-card-section class="no-shadow">
-        <q-btn round @click="toProfile(event.pubkey)">
-          <q-avatar class="no-shadow">
-            <img :src="$store.getters.avatar(event.pubkey)" />
-          </q-avatar>
-        </q-btn>
-      </q-card-section>
+  <q-item class="my-3">
+    <q-item-section avatar>
+      <q-avatar
+        class="no-shadow cursor-pointer"
+        @click="toProfile(event.pubkey)"
+      >
+        <img :src="$store.getters.avatar(event.pubkey)" />
+      </q-avatar>
+    </q-item-section>
 
-      <q-card-section class="col no-shadow">
-        <q-card-section @click="toEvent(event.id)">
-          <q-item-label
-            >{{ $store.getters.displayName(event.pubkey) }}
-            <small>
-              {{ niceDate(event.created_at) }}
-            </small>
-          </q-item-label>
-          {{ event.content }}
-        </q-card-section>
-      </q-card-section>
-    </q-card-section>
-  </q-card>
+    <q-item-section>
+      <q-item-label lines="1">
+        <span
+          v-if="$store.getters.hasName(event.pubkey)"
+          class="cursor-pointer font-bold mr-2 text-secondary"
+          @click="toProfile(event.pubkey)"
+        >
+          {{ $store.getters.displayName(event.pubkey) }}
+        </span>
+        <span class="text-slate-400 font-mono text-xs">
+          {{ pubShort(event.pubkey) }}
+        </span>
+      </q-item-label>
+      <q-item-label class="break-all pt-1 pl-1 text-base font-sans">
+        {{ event.content }}
+      </q-item-label>
+    </q-item-section>
+
+    <q-item-section
+      top
+      side
+      class="cursor-pointer hover:underline text-sm"
+      @click="toEvent(event.id)"
+    >
+      {{ niceDate(event.created_at) }}
+    </q-item-section>
+  </q-item>
 </template>
 
 <script>

src/store/getters.js

@@ -1,9 +1,13 @@
 import Identicon from 'identicon.js'
 
+export function hasName(state) {
+  return pubkey => !!state.profilesCache[pubkey]
+}
+
 export function displayName(state) {
   return pubkey => {
-    let {name = pubkey.slice(0, 3) + '...' + pubkey.slice(-4)} =
-      state.profilesCache[pubkey] || {}
+    let pubShort = pubkey.slice(0, 3) + '...' + pubkey.slice(-4)
+    let {name = pubShort} = state.profilesCache[pubkey] || {}
     return name
   }
 }

src/utils/mixin.js

@@ -10,6 +10,10 @@ export default {
       this.$router.push('/event/' + id)
     },
 
+    pubShort(pubkey) {
+      return pubkey.slice(0, 3) + '...' + pubkey.slice(-4)
+    },
+
     niceDate(value) {
       return date.formatDate(value * 1000, 'YYYY MMM D h:mm A')
     }