ui: add features (#504)

packages/ui-default/components/messagepad/MessagePad.page.styl

@@ -20,11 +20,21 @@ $send-button-width = 50px
   overflow: auto
   height: rem($list-height)
 
-.messagepad__content
+.messagepad__header
   position: absolute
   left: rem($sidebar-width)
   right: 0
   top: 0
+  height: rem(30px)
+  padding: rem(5px)
+  text-align: center
+  border-bottom: 1px solid #eee;
+
+.messagepad__content
+  position: absolute
+  left: rem($sidebar-width)
+  right: 0
+  top: rem(30px)
   bottom: rem($input-height)
   overflow: auto
   padding: rem(30px)

packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx

@@ -90,9 +90,19 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
 
   render() {
     return (
-      <ol className="messagepad__content" ref="list">
-        {this.renderInner()}
-      </ol>
+      <>
+        <div className="messagepad__header">
+          { this.props.item
+          && (
+            <a className="messagepad__content__header__title" href={`/user/${this.props.item.udoc._id}`}>
+              {`${this.props.item.udoc.uname}(UID: ${this.props.item.udoc._id})`}
+            </a>
+          )}
+        </div>
+        <ol className="messagepad__content" ref="list">
+          {this.renderInner()}
+        </ol>
+      </>
     );
   }
 });