UI redesign: Linear-inspired design system with light/dark mode

package.json

@@ -66,6 +66,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "^7.18.9",
+    "@capacitor/core": "^8.4.0",
     "@playwright/test": "^1.30.0",
     "@webpack-cli/generators": "^3.0.1",
     "babel-plugin-system-import-transformer": "^4.0.0",

src/components/App.js

@@ -7,50 +7,48 @@ import {
 } from '../store/actions/chatActions';
 
 import Header from './layout/Header';
-
 import ChatContainer from './chat/ChatContainer';
-
 import PincodeModal from './modals/PincodeModal';
 import UsernameModal from './modals/Username';
 
-// evaluate on initial render only, not on every re-render.
 const isNewRoom = Boolean(!document.location.hash);
 
 class App extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       modals: {
-        username: {
-          isVisible: false
-        },
-        pincode: {
-          isVisible: false
-        }
+        username: { isVisible: false },
+        pincode:  { isVisible: false },
       }
     };
-
   }
 
   componentDidMount() {
+    this.applyTheme(this.props.theme);
     this.props.initChat();
     this.connectIfNeeded();
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
+    if (prevProps.theme !== this.props.theme) {
+      this.applyTheme(this.props.theme);
+    }
     this.connectIfNeeded();
   }
 
+  applyTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'dark' : '');
+  }
+
   connectIfNeeded() {
-    if (!this.props.pincodeRequired && this.props.shouldConnect){
+    if (!this.props.pincodeRequired && this.props.shouldConnect) {
       this.onInitConnection();
     }
   }
 
-  onSetPincode = (pincode = "") => {
-    if (!pincode || pincode.endsWith("--")) {
-      this.onError('Invalid pincode!');
+  onSetPincode = (pincode = '') => {
+    if (!pincode || pincode.endsWith('--')) {
       return;
     }
     this.onInitConnection(pincode);
@@ -60,31 +58,22 @@ class App extends Component {
     document.location.hash = '#' + passphrase;
   }
 
-  onInitConnection(pincode='') {
+  onInitConnection(pincode = '') {
     const urlHash = document.location.hash + pincode;
     this.props.initConnection(this.createDeviceSession, urlHash);
   }
 
   onToggleModalVisibility = (modalName, isVisible) => {
-    let modalsState = {...this.state.modals};
+    const modalsState = { ...this.state.modals };
     modalsState[modalName].isVisible = isVisible;
-    this.setState({
-      modals: modalsState
-    });
-  };
-
-  onClosePincodeModal = () => {
-    this.setState({
-      showPincodeModal: false
-    });
+    this.setState({ modals: modalsState });
   };
 
   render() {
     const {
       username,
       pincodeRequired,
       previousUsername,
-      authenticating,
       connecting,
       connected,
     } = this.props;
@@ -115,38 +104,32 @@ class App extends Component {
           connected={connected}
           onToggleModalVisibility={this.onToggleModalVisibility} />}
 
-        <main className="encloser">
-
+        <main>
           <ChatContainer
             messageInputFocus={chatInputFocus}
             onToggleModalVisibility={this.onToggleModalVisibility} />
-
         </main>
-
       </div>
     );
   }
 }
 
 App.propTypes = {};
 
-const mapStateToProps = (reduxState) => {
-  return {
-    username: reduxState.chat.username,
-    previousUsername: reduxState.chat.previousUsername,
-    pincodeRequired: reduxState.chat.pincodeRequired,
-    shouldConnect: reduxState.chat.shouldConnect,
-    connecting: reduxState.chat.connecting,
-    connected: reduxState.chat.connected,
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    initChat: () => dispatch(initChat()),
-    initConnection: (createDeviceSession, urlHash) => dispatch(initConnection(createDeviceSession, urlHash)),
-    setUsername: (username) => dispatch(setUsername(username)),
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+const mapStateToProps = (reduxState) => ({
+  username:         reduxState.chat.username,
+  previousUsername: reduxState.chat.previousUsername,
+  pincodeRequired:  reduxState.chat.pincodeRequired,
+  shouldConnect:    reduxState.chat.shouldConnect,
+  connecting:       reduxState.chat.connecting,
+  connected:        reduxState.chat.connected,
+  theme:            reduxState.settings.theme,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  initChat:        () => dispatch(initChat()),
+  initConnection:  (createDeviceSession, urlHash) => dispatch(initConnection(createDeviceSession, urlHash)),
+  setUsername:     (username) => dispatch(setUsername(username)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/components/chat/ChatContainer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { PropTypes } from 'prop-types';
 import { connect } from 'react-redux';
 
@@ -7,38 +7,29 @@ import MessageForm from './MessageForm';
 import AutoSuggest from './AutoSuggest';
 import AlertContainer from '../general/AlertContainer';
 
-const ChatContainer = ({
-  suggestions,
-  messageInputFocus,
-  onToggleModalVisibility
-}) => {
-
-  return (
-    <div className="content">
+const ChatContainer = ({ suggestions, messageInputFocus, onToggleModalVisibility }) => (
+  <div className="content">
+    <div className="chat-room-header">
+      <span className="room-title">Room</span>
+      <span className="room-badge">Encrypted</span>
+    </div>
 
-      <AlertContainer />
+    <AlertContainer />
 
-      <MessageBox />
+    <MessageBox />
 
-      {suggestions.length > 0 && <AutoSuggest />}
+    {suggestions.length > 0 && <AutoSuggest />}
 
-      <MessageForm
-        shouldHaveFocus={messageInputFocus}
-        onToggleModalVisibility={onToggleModalVisibility} />
-
-    </div>
-  );
-};
+    <MessageForm
+      shouldHaveFocus={messageInputFocus}
+      onToggleModalVisibility={onToggleModalVisibility} />
+  </div>
+);
 
 ChatContainer.propTypes = {
   messageInputFocus: PropTypes.bool.isRequired,
   onToggleModalVisibility: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = (reduxState) => {
-  return {
-    suggestions: reduxState.chat.suggestions,
-  };
-};
-
+const mapStateToProps = (state) => ({ suggestions: state.chat.suggestions });
 export default connect(mapStateToProps)(ChatContainer);

src/components/chat/Message.js

@@ -1,62 +1,57 @@
-import React, { Component } from 'react';
+import React from 'react';
 import emoji from '../../utils/emoji_convertor';
 import md from '../../utils/link_attr_blank';
-
-class Message extends Component {
-
-  render() {
-    let { message, username } = this.props;
-    let fromMe = message.from === username;
-    let messageClass = fromMe ? 'chat-outgoing' : 'chat-incoming';
-
-    let emojified = emoji.replace_colons(message.msg);
-
-    // Convert `emoji.replace_colons`-generated <span> tags to Markdown
-    let emojiMD = emojified.replace(
-      /<span class="emoji emoji-sizer" style="background-image:url\((\/static\/img\/emoji\/apple\/64\/)(.*?)(\.png)\)" data-codepoints="(?:.*?)"><\/span>/g,
-      (match, $1, $2, $3) => {
-        // Example:
-        //
-        // $1 == /static/img/emoji/apple/64/
-        // $2 == 1f604
-        // $3 == .png
-        // emoji.data[$2][3][0] == smile
-        // return '![:smile:](/static/img/emoji/apple/64/1f604.png)'
-        let emojiName = 'emoji';
-        let emojiNameArray = null;
-
-        // Sometimes $2 looks something like 1f604-1f604-1f604-1f604
-        const parts = ($2).split('-');
-        const partsLength = parts.length;
-        for (let i = partsLength; i > 0; i--) {
-          emojiNameArray = emoji.data[parts.slice(0, i).join('-')];
-          if (emojiNameArray) {
-            break;
-          }
-        }
-
-        if (emojiNameArray &&
-            emojiNameArray.length >= 4 &&
-            emojiNameArray[3].length >= 1) {
-
-          emojiName = emojiNameArray[3][0];
-        }
-
-        return '![:' + emojiName + ':](' + $1 + $2 + $3 + ')';
+import { getAvatarColor } from './UserStatusIcons';
+
+const formatTime = (ts) => {
+  if (!ts) return '';
+  const d = new Date(ts);
+  const h = d.getHours();
+  const m = String(d.getMinutes()).padStart(2, '0');
+  const ampm = h >= 12 ? 'PM' : 'AM';
+  return `${h % 12 || 12}:${m} ${ampm}`;
+};
+
+const renderContent = (msg) => {
+  const emojified = emoji.replace_colons(msg);
+  const emojiMD = emojified.replace(
+    /<span class="emoji emoji-sizer" style="background-image:url\((\/static\/img\/emoji\/apple\/64\/)(.*?)(\.png)\)" data-codepoints="(?:.*?)"><\/span>/g,
+    (match, $1, $2, $3) => {
+      let emojiName = 'emoji';
+      const parts = $2.split('-');
+      for (let i = parts.length; i > 0; i--) {
+        const arr = emoji.data[parts.slice(0, i).join('-')];
+        if (arr) { emojiName = (arr[3] || [emojiName])[0]; break; }
       }
-    );
-
-    // Render escaped HTML/Markdown
-    let linked = md.render(emojiMD);
-
-    return (
-      <li className={'chat-message ' + messageClass} key={message.key}>
-        <span className="username">{message.from}</span>
-        <div dangerouslySetInnerHTML={{__html: linked}}>
-        </div>
-      </li>
-    );
-  }
-}
+      return `![:${emojiName}:](${$1}${$2}${$3})`;
+    }
+  );
+  return md.render(emojiMD);
+};
+
+const Message = ({ message, username, isGroupStart }) => {
+  const isMe = message.from === username;
+  const initial = (message.from || '?')[0].toUpperCase();
+  const color = getAvatarColor(message.from);
+  const html = renderContent(message.msg);
+
+  return (
+    <div className={`message-item${isGroupStart ? ' group-start' : ''}`}>
+      {isGroupStart
+        ? <div className="msg-avatar" style={{ backgroundColor: color }}>{initial}</div>
+        : <div className="msg-avatar-spacer" />
+      }
+      <div className="msg-content">
+        {isGroupStart && (
+          <div className="msg-header">
+            <span className={`msg-username${isMe ? ' is-me' : ''}`}>{message.from}</span>
+            {message.ts && <span className="msg-timestamp">{formatTime(message.ts)}</span>}
+          </div>
+        )}
+        <div className="msg-body" dangerouslySetInnerHTML={{ __html: html }} />
+      </div>
+    </div>
+  );
+};
 
 export default Message;