From b01c290f0d64828ac444588504f5b9c13e4e6406 Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Wed, 31 Jul 2019 15:00:01 -0700
Subject: [PATCH] Added changes from landing page and @pkova's previous PR to
 urbit/interface

---
 pkg/interface/chat/src/js/components/chat.js  | 20 +++++-
 .../chat/src/js/components/landing.js         | 30 ++++++++-
 .../chat/src/js/components/lib/message.js     | 62 ++++++++++++-------
 3 files changed, 85 insertions(+), 27 deletions(-)

diff --git a/pkg/interface/chat/src/js/components/chat.js b/pkg/interface/chat/src/js/components/chat.js
index 4fb15236e..03757d921 100644
--- a/pkg/interface/chat/src/js/components/chat.js
+++ b/pkg/interface/chat/src/js/components/chat.js
@@ -191,13 +191,29 @@ export class ChatScreen extends Component {
         .slice(messages.length - (50 * state.numPages), messages.length);
     }
 
-    let chatMessages = messages.reverse().map((msg) => {
+    let reversedMessages = messages.reverse();
+    let chatMessages = reversedMessages.map((msg, i) => {
+      // Render sigil if previous message is not by the same sender
+      let gamAut = ['gam', 'aut'];      
+      let renderSigil =
+        _.get(reversedMessages[i + 1], gamAut) !== _.get(msg, gamAut);
+
+      // More padding top if previous message is not by the same sender
+      let paddingTop = renderSigil;
+      // More padding bot if next message is not by the same sender
+      let paddingBot =
+        _.get(reversedMessages[i - 1], gamAut) !== _.get(msg, gamAut);
+
       return (
         <Message
           key={msg.gam.uid}
-          msg={msg.gam} />
+          msg={msg.gam}
+          renderSigil={renderSigil}
+          paddingTop={paddingTop}
+          paddingBot={paddingBot} />
       );
     });
+
     let peers = props.peers[state.station] || [window.ship];
 
     return (
diff --git a/pkg/interface/chat/src/js/components/landing.js b/pkg/interface/chat/src/js/components/landing.js
index 6acc26662..0378c7497 100644
--- a/pkg/interface/chat/src/js/components/landing.js
+++ b/pkg/interface/chat/src/js/components/landing.js
@@ -27,8 +27,34 @@ export class LandingScreen extends Component {
   }
 
   onClickSubscribe() {
+    const { props } = this;
+    
     let station = props.match.params.ship + '/' + props.match.params.station;
-    this.props.api.source(station, true);
+    let  actions = [
+        {
+          create: {
+            nom: 'hall-internal-' + props.match.params.station,
+            des: "chatroom",
+            sec: "channel"
+          }
+        },
+        {
+          source: {
+            nom: "inbox",
+            sub: true,
+            srs: [station]
+          }
+        },
+        {
+          source: {
+            nom: "inbox",
+            sub: true,
+            srs: [`~${window.ship}/hall-internal-${circleName}`]
+          }
+        }
+    ];
+
+    this.props.chat(actions);
     this.props.history.push('/~chat');
   }
 
@@ -50,7 +76,7 @@ export class LandingScreen extends Component {
         <br />
         <button
           onClick={this.onClickSubscribe.bind(this)}
-          className="label-r"
+          className="label-regular fw-bold pointer"
         >Subscribe</button>
         </div>
       </div>
diff --git a/pkg/interface/chat/src/js/components/lib/message.js b/pkg/interface/chat/src/js/components/lib/message.js
index 50d34c189..75d020d6f 100644
--- a/pkg/interface/chat/src/js/components/lib/message.js
+++ b/pkg/interface/chat/src/js/components/lib/message.js
@@ -66,32 +66,48 @@ export class Message extends Component {
   render() {
     const { props } = this;
     let pending = !!props.msg.pending ? ' o-80' : '';
-    let timestamp = moment.unix(props.msg.wen / 1000).format('hh:mm');
+    let timestamp = moment.unix(props.msg.wen / 1000).format('hh:mm a');
     let datestamp = moment.unix(props.msg.wen / 1000).format('LL');
-    
-    return (
-      <div className={"w-100 pl3 pr3 pt2 pb2 cf flex" + pending}
-        style={{
-          minHeight: 'min-content'
-        }}>
-        <div className="fl mr2">
-          <Sigil ship={props.msg.aut} size={36} />
-        </div>
-        <div className="fr" style={{ flexGrow: 1, marginTop: -8 }}>
-          <div className="hide-child">
-            <p className="v-top label-small-mono gray dib mr3">
-              ~{props.msg.aut}
-            </p>
-            <p className="v-top label-small-mono gray dib">{timestamp}</p>
-            <p className="v-top label-small-mono ml2 gray dib child">
-              {datestamp}
-            </p>
+
+    let paddingTop = props.paddingTop ? 'pt2' : '';
+    let paddingBot = props.paddingBot ? 'pb2' : 'pb1';
+
+    if (props.renderSigil) {
+      return (
+        <div className={"w-100 pl3 pr3 cf flex " + paddingTop + " " + paddingBot + pending}
+             style={{
+               minHeight: 'min-content'
+             }}>
+          <div className="fl mr2">
+            <Sigil ship={props.msg.aut} size={36} />
+          </div>
+          <div className="fr" style={{ flexGrow: 1, marginTop: -8 }}>
+            <div className="hide-child">
+              <p className="v-top label-small-mono gray dib mr3">
+                ~{props.msg.aut}
+              </p>
+              <p className="v-top label-small-mono gray dib">{timestamp}</p>
+              <p className="v-top label-small-mono ml2 gray dib child">
+                {datestamp}
+              </p>
+            </div>
+            {this.renderContent()}
           </div>
-          {this.renderContent()}
         </div>
-      </div>
-    );
+      );
+    } else {
+      return (
+        <div className={"w-100 pr3 pb1 cf hide-child flex" + pending}
+             style={{
+               minHeight: 'min-content'
+             }}>
+          <p className="child pl3 pr2 label-small-mono gray dib">{timestamp}</p>
+          <div className="fr" style={{ flexGrow: 1 }}>
+            {this.renderContent()}
+          </div>
+        </div>
+      )
+    }
   }
 
 }
-