Make search results look like messages

client/src/css/style.css

@@ -377,6 +377,10 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   padding: 10px 15px;
 }
 
+.search-result:not(:last-child) {
+  margin-bottom: 5px;
+}
+
 .messagebox {
   position: absolute;
   left: 0;
@@ -412,6 +416,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .message-sender {
+  font-weight: 700;
   color: #6BB758;
   cursor: pointer;
 }

client/src/js/components/Search.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import pure from 'pure-render-decorator';
-import { timestamp } from '../util';
+import SearchResult from './SearchResult';
 
 @pure
 export default class Search extends Component {
@@ -19,9 +19,7 @@ export default class Search extends Component {
     };
 
     const results = search.results.map(result => (
-      <p key={result.id}>
-        {timestamp(new Date(result.time * 1000))} {result.from} {result.content}
-      </p>
+      <SearchResult key={result.id} result={result} />
     ));
 
     return (

client/src/js/components/SearchResult.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import Autolinker from 'autolinker';
+import pure from 'pure-render-decorator';
+import { timestamp } from '../util';
+
+@pure
+export default class Search extends Component {
+  render() {
+    const { result } = this.props;
+    const content = Autolinker.link(result.content, { stripPrefix: false });
+
+    const style = {
+      paddingLeft: window.messageIndent + 'px',
+      textIndent: -window.messageIndent + 'px'
+    };
+
+    return (
+      <p className="search-result" style={style}>
+        <span className="message-time">{timestamp(new Date(result.time * 1000))}</span>
+        <span>
+          {' '}
+          <span className="message-sender">{result.from}</span>
+        </span>
+        <span dangerouslySetInnerHTML={{ __html: ' ' + content }}></span>
+      </p>
+    );
+  }
+}