Add highlight for thread "target"

I don't think "target" is the right word to use, but when you click a
message and you're taken to the thread I think it's useful to actually
highlight which message you selected.

src/assets/style.css

@@ -28,6 +28,11 @@ pre {
   overflow-x: auto;
 }
 
+.message.thread-target {
+  border-color: hsl(240, 66%, 75%);
+  box-shadow: 0 0 0 .17rem hsl(240, 66%, 92%);
+}
+
 .message img, .message video {
   max-width: 100%;
 }

src/routes/models/post.js

@@ -293,7 +293,11 @@ module.exports = {
 
     debug('deep replies: %O', deepReplies)
 
-    const allMessages = [rootAncestor, ...deepReplies]
+    const allMessages = [rootAncestor, ...deepReplies].map(message => {
+      const isThreadTarget = message.key === msgId
+      lodash.set(message, 'value.meta.thread.target', isThreadTarget)
+      return message
+    })
 
     const transformed = await transform(ssb, allMessages)
     return transformed

src/routes/views/components/post.js

@@ -31,11 +31,12 @@ module.exports = ({ msg }) => {
   }
 
   const isPrivate = Boolean(msg.value.meta.private)
+  const isThreadTarget = Boolean(lodash.get(msg, 'value.meta.thread.target', false))
 
   const name = msg.value.meta.author.name
   const timeAgo = msg.value.meta.timestamp.received.since
 
-  const depth = lodash.get(msg, 'value.meta.thread.depth')
+  const depth = lodash.get(msg, 'value.meta.thread.depth', 0)
 
   const markdownContent = msg.value.meta.md.block()
 
@@ -49,10 +50,20 @@ module.exports = ({ msg }) => {
     ? a({ href: url.parent }, 'parent')
     : null
 
+  const messageClasses = ['message']
+
+  if (isPrivate) {
+    messageClasses.push('private')
+  }
+
+  if (isThreadTarget) {
+    messageClasses.push('thread-target')
+  }
+
   const fragment =
     section({
       id: msg.key,
-      class: 'message',
+      class: messageClasses.join(' '),
       style: `margin-left: ${depth * 1.5}rem`
     },
     header(