chat: style fixes

Changes to the structure stylistically during code review.

Using fake API calls instead of directly calling store;
fixing a 'delete' crash';
making common code a component;
autofocusing responsively.

pkg/interface/chat/src/js/api.js

@@ -190,6 +190,10 @@ class UrbitApi {
     });
   }
 
+  storeState(state) {
+    store.setState(state);
+  }
+
 }
 
 export let api = new UrbitApi();

pkg/interface/chat/src/js/components/chat.js

@@ -7,6 +7,7 @@ import { store } from "/store";
 
 
 import { Message } from '/components/lib/message';
+import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
 import { ChatTabBar } from '/components/lib/chat-tabbar';
 import { ChatInput } from '/components/lib/chat-input';
 import { deSig } from '/lib/util';
@@ -217,35 +218,25 @@ export class ChatScreen extends Component {
 
            let group = Array.from(props.group.values());
 
-           let popoutSwitcher = this.props.popout ? "dn-m dn-l dn-xl" : "dib-m dib-l dib-xl";
            let isinPopout = this.props.popout ? "popout/" : "";
 
+
            return (
              <div
                key={state.station}
                className="h-100 w-100 overflow-hidden flex flex-column">
-               <div className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
+               <div
+                 className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
                  style={{ height: "1rem" }}>
                  <Link to="/~chat/">{"⟵ All Chats"}</Link>
                </div>
-               <div className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll flex-shrink-0"
+               <div
+                 className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
                  style={{ height: 48 }}>
-                 <a className="pointer flex-shrink-0"
-                    onClick={() => {
-                     store.setState(previousState => ({
-                       sidebarShown: !previousState.sidebarShown
-                     }));
-                   }}>
-                   <img className={`v-btm pr3 dn ` + popoutSwitcher}
-                     src={
-                       this.props.sidebarShown
-                         ? "/~chat/img/ChatSwitcherLink.png"
-                         : "/~chat/img/ChatSwitcherClosed.png"
-                     }
-                     height="16"
-                     width="16"
-                   />
-                 </a>
+                 <SidebarSwitcher
+                   sidebarShown={this.props.sidebarShown}
+                   popout={this.props.popout}
+                 />
                  <Link to={`/~chat/` + isinPopout + `room` + state.station}>
                    <h2
                      className="mono dib f7 fw4 v-top"
@@ -261,10 +252,12 @@ export class ChatScreen extends Component {
                    popout={this.props.popout}
                  />
                </div>
-               <div className="overflow-y-scroll pt3 pb2 flex flex-column-reverse"
+               <div
+                 className="overflow-y-scroll pt3 pb2 flex flex-column-reverse"
                  style={{ height: "100%", resize: "vertical" }}
                  onScroll={this.onScroll}>
-                 <div ref={el => {
+                 <div
+                   ref={el => {
                      this.scrollElement = el;
                    }}></div>
                  {reversedMessages}

pkg/interface/chat/src/js/components/lib/chat-input.js

@@ -182,8 +182,7 @@ export class ChatInput extends Component {
             marginTop: 4,
             flexBasis: 24,
             height: 24
-          }}
-        >
+          }}>
           <Sigil ship={window.ship} size={24} color="#4330FC" />
         </div>
         <div className="fr h-100 flex" style={{ flexGrow: 1 }}>
@@ -191,6 +190,10 @@ export class ChatInput extends Component {
             className={"pl3 bn"}
             style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}
             autoCapitalize="none"
+            autoFocus={(
+              /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
+              navigator.userAgent
+            )) ? false : true}
             ref={this.textareaRef}
             placeholder={props.placeholder}
             value={state.message}

pkg/interface/chat/src/js/components/lib/chat-tabbar.js

@@ -33,7 +33,7 @@ export class ChatTabBar extends Component {
 
 
     return (
-      <div className="dib flex-shrink-0-m flex-grow-1">
+      <div className="dib flex-shrink-0 flex-grow-1">
         {!!props.isOwner ? (
           <div className={"dib f8 pl6"}>
             <Link

pkg/interface/chat/src/js/components/lib/icons/icon-sidebar-switch.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { api } from '../../../api'
+
+export class SidebarSwitcher extends Component {
+  render() {
+
+    let popoutSwitcher = this.props.popout
+      ? "dn-m dn-l dn-xl"
+      : "dib-m dib-l dib-xl";
+    
+    return (
+      <div>
+        <a
+          className="pointer flex-shrink-0"
+          onClick={() => {
+            api.storeState(previousState => ({
+              sidebarShown: !previousState.sidebarShown
+            }));
+          }}>
+          <img
+            className={`v-btm pr3 dn ` + popoutSwitcher}
+            src={
+              this.props.sidebarShown
+                ? "/~chat/img/ChatSwitcherLink.png"
+                : "/~chat/img/ChatSwitcherClosed.png"
+            }
+            height="16"
+            width="16"
+          />
+        </a>
+      </div>
+    );
+  }
+}
+
+export default SidebarSwitcher

pkg/interface/chat/src/js/components/member.js

@@ -9,6 +9,7 @@ import { deSig } from '/lib/util';
 import { ChatTabBar } from '/components/lib/chat-tabbar';
 import { MemberElement } from '/components/lib/member-element';
 import { InviteElement } from '/components/lib/invite-element';
+import { SidebarSwitcher } from '/components/lib/icons/icon-sidebar-switch.js';
 
 
 export class MemberScreen extends Component {
@@ -72,34 +73,22 @@ export class MemberScreen extends Component {
       );
     });
 
-      let popoutSwitcher = this.props.popout
-        ? "dn-m dn-l dn-xl"
-        : "dib-m dib-l dib-xl";
       let isinPopout = this.props.popout ? "popout/" : "";
 
     return (
       <div className="h-100 w-100 overflow-x-hidden flex flex-column">
-        <div className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
-             style={{ height: "1rem" }}>
+        <div
+          className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
+          style={{ height: "1rem" }}>
           <Link to="/~chat/">{"⟵ All Chats"}</Link>
         </div>
-        <div className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll flex-shrink-0"
-             style={{ height: 48 }}>
-          <a className="pointer"
-            onClick={() => {
-              store.setState(previousState => ({
-                sidebarShown: !previousState.sidebarShown
-              }));
-            }}>
-            <img className={`v-btm pr3 dn ` + popoutSwitcher}
-              src={
-                this.props.sidebarShown
-                  ? "/~chat/img/ChatSwitcherLink.png"
-                  : "/~chat/img/ChatSwitcherClosed.png"
-              }
-              height="16"
-              width="16"/>
-          </a>
+        <div
+          className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+          style={{ height: 48 }}>
+          <SidebarSwitcher
+            sidebarShown={this.props.sidebarShown}
+            popout={this.props.popout}
+          />
           <Link to={`/~chat/` + isinPopout + `room` + state.station}>
             <h2
               className="mono dib f7 fw4 v-top"

pkg/interface/chat/src/js/components/new.js

@@ -49,9 +49,9 @@ export class NewScreen extends Component {
         case 'journal':
           securityText = 'Similar to a blog. Publicly readable/subscribable, invited members can write to journal.'
           break;
-        case 'mailbox':
-          securityText = 'Similar to email. Anyone can write to the mailbox, invited members can read messages.'
-          break;
+        // case 'mailbox':
+        //   securityText = 'Similar to email. Anyone can write to the mailbox, invited members can read messages.'
+        //   break;
       }
       this.setState({ securityDescription: securityText });
     }
@@ -214,7 +214,7 @@ export class NewScreen extends Component {
               <option value="village">Village</option>
               <option value="channel">Channel</option>
               <option value="journal">Journal</option>
-              <option value="mailbox">Mailbox</option>
+              {/* <option value="mailbox">Mailbox</option> */}
             </select>
           </div>
           <p className="f9 gray2 db lh-copy pt2 mb4">{this.state.securityDescription}</p>

pkg/interface/chat/src/js/components/settings.js

@@ -6,6 +6,7 @@ import { store } from "/store";
 
 
 import { ChatTabBar } from '/components/lib/chat-tabbar';
+import SidebarSwitcher from './lib/icons/icon-sidebar-switch';
 
 
 export class SettingsScreen extends Component {
@@ -71,6 +72,7 @@ export class SettingsScreen extends Component {
 
   render() {
     const { props, state } = this;
+    const isinPopout = this.props.popout ? "popout/" : "";
 
     let writeGroup = Array.from(props.group.values());
 
@@ -84,45 +86,28 @@ export class SettingsScreen extends Component {
         <div className="h-100 w-100 overflow-x-hidden flex flex-column">
           <div
             className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
-            style={{ height: "1rem" }}
-          >
+            style={{ height: "1rem" }}>
             <Link to="/~chat/">{"⟵ All Chats"}</Link>
           </div>
           <div
-            className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll flex-shrink-0"
-            style={{ height: 48 }}
-          >
-            <a
-              className="pointer"
-              onClick={() => {
-                store.setState(previousState => ({
-                  sidebarShown: !previousState.sidebarShown
-                }));
-              }}
-            >
-              <img
-                className={`v-btm pr3 dn ` + popoutSwitcher}
-                src={
-                  this.props.sidebarShown
-                    ? "/~chat/img/ChatSwitcherLink.png"
-                    : "/~chat/img/ChatSwitcherClosed.png"
-                }
-                height="16"
-                width="16"
-              />
-            </a>
+            className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+            style={{ height: 48 }}>
+            <SidebarSwitcher
+              sidebarShown={this.props.sidebarShown}
+              popout={this.props.popout}
+            />
             <Link to={`/~chat/` + isinPopout + `room` + state.station}>
               <h2
                 className="mono dib f7 fw4 v-top"
-                style={{ width: "max-content" }}
-              >
+                style={{ width: "max-content" }}>
                 {state.station.substr(1)}
               </h2>
             </Link>
             <ChatTabBar
               {...props}
               station={state.station}
-              numPeers={writeGroup.length} />
+              numPeers={writeGroup.length}
+            />
           </div>
           <div className="w-100 pl3 mt4 cf">
             <h2 className="f8 pb2">{text}</h2>
@@ -131,47 +116,24 @@ export class SettingsScreen extends Component {
       );
     }
 
-      let popoutSwitcher = this.props.popout
-        ? "dn-m dn-l dn-xl"
-        : "dib-m dib-l dib-xl";
-      let isinPopout = this.props.popout ? "popout/" : "";
-
     return (
       <div className="h-100 w-100 overflow-x-hidden flex flex-column">
         <div
           className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
-          style={{ height: "1rem" }}
-        >
+          style={{ height: "1rem" }}>
           <Link to="/~chat/">{"⟵ All Chats"}</Link>
         </div>
         <div
-          className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll flex-shrink-0"
-          style={{ height: 48 }}
-        >
-          <a
-            className="pointer"
-            onClick={() => {
-              store.setState(previousState => ({
-                sidebarShown: !previousState.sidebarShown
-              }));
-            }}
-          >
-            <img
-              className={`v-btm pr3 dn ` + popoutSwitcher}
-              src={
-                this.props.sidebarShown
-                  ? "/~chat/img/ChatSwitcherLink.png"
-                  : "/~chat/img/ChatSwitcherClosed.png"
-              }
-              height="16"
-              width="16"
-            />
-          </a>
+          className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+          style={{ height: 48 }}>
+          <SidebarSwitcher
+            sidebarShown={this.props.sidebarShown}
+            popout={this.props.popout}
+          />
           <Link to={`/~chat/` + isinPopout + `room` + state.station}>
             <h2
               className="mono dib f7 fw4 v-top"
-              style={{ width: "max-content" }}
-            >
+              style={{ width: "max-content" }}>
               {state.station.substr(1)}
             </h2>
           </Link>