Add manifest.json, icons and install button, flatten client/src

client/js/components/pages/Chat/Chat.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import { isChannel } from 'utils';
+import ChatTitle from './ChatTitle';
+import Search from './Search';
+import MessageBox from './MessageBox';
+import MessageInput from './MessageInput';
+import UserList from './UserList';
+
+export default class Chat extends Component {
+  handleCloseClick = () => {
+    const { tab, part, closePrivateChat, disconnect } = this.props;
+
+    if (isChannel(tab)) {
+      part([tab.name], tab.server);
+    } else if (tab.name) {
+      closePrivateChat(tab.server, tab.name);
+    } else {
+      disconnect(tab.server);
+    }
+  };
+
+  handleSearch = phrase => {
+    const { tab, searchMessages } = this.props;
+    if (isChannel(tab)) {
+      searchMessages(tab.server, tab.name, phrase);
+    }
+  };
+
+  handleNickClick = nick => {
+    const { tab, openPrivateChat, select } = this.props;
+    openPrivateChat(tab.server, nick);
+    select(tab.server, nick);
+  };
+
+  handleTitleChange = title => {
+    const { setServerName, tab } = this.props;
+    setServerName(title, tab.server);
+  };
+
+  handleNickChange = nick => {
+    const { setNick, tab } = this.props;
+    setNick(nick, tab.server, true);
+  };
+
+  handleNickEditDone = nick => {
+    const { setNick, tab } = this.props;
+    setNick(nick, tab.server);
+  };
+
+  render() {
+    const {
+      channel,
+      coloredNicks,
+      currentInputHistoryEntry,
+      hasMoreMessages,
+      messages,
+      nick,
+      search,
+      showUserList,
+      status,
+      tab,
+      title,
+      users,
+
+      addFetchedMessages,
+      fetchMessages,
+      inputActions,
+      runCommand,
+      sendMessage,
+      toggleSearch,
+      toggleUserList
+    } = this.props;
+    let chatClass;
+    if (isChannel(tab)) {
+      chatClass = 'chat-channel';
+    } else if (tab.name) {
+      chatClass = 'chat-private';
+    } else {
+      chatClass = 'chat-server';
+    }
+
+    return (
+      <div className={chatClass}>
+        <ChatTitle
+          channel={channel}
+          status={status}
+          tab={tab}
+          title={title}
+          onCloseClick={this.handleCloseClick}
+          onTitleChange={this.handleTitleChange}
+          onToggleSearch={toggleSearch}
+          onToggleUserList={toggleUserList}
+        />
+        <Search search={search} onSearch={this.handleSearch} />
+        <MessageBox
+          coloredNicks={coloredNicks}
+          hasMoreMessages={hasMoreMessages}
+          messages={messages}
+          tab={tab}
+          onAddMore={addFetchedMessages}
+          onFetchMore={fetchMessages}
+          onNickClick={this.handleNickClick}
+        />
+        <MessageInput
+          currentHistoryEntry={currentInputHistoryEntry}
+          nick={nick}
+          tab={tab}
+          onCommand={runCommand}
+          onMessage={sendMessage}
+          onNickChange={this.handleNickChange}
+          onNickEditDone={this.handleNickEditDone}
+          {...inputActions}
+        />
+        <UserList
+          coloredNicks={coloredNicks}
+          showUserList={showUserList}
+          users={users}
+          onNickClick={this.handleNickClick}
+        />
+      </div>
+    );
+  }
+}

client/js/components/pages/Chat/ChatTitle.js

@@ -0,0 +1,73 @@
+import React, { memo } from 'react';
+import Navicon from 'containers/Navicon';
+import Editable from 'components/ui/Editable';
+import { isValidServerName } from 'state/servers';
+import { isChannel, linkify } from 'utils';
+
+const ChatTitle = ({
+  status,
+  title,
+  tab,
+  channel,
+  onTitleChange,
+  onToggleSearch,
+  onToggleUserList,
+  onCloseClick
+}) => {
+  let closeTitle;
+  if (isChannel(tab)) {
+    closeTitle = 'Leave';
+  } else if (tab.name) {
+    closeTitle = 'Close';
+  } else {
+    closeTitle = 'Disconnect';
+  }
+
+  let serverError = null;
+  if (!tab.name && status.error) {
+    serverError = (
+      <span className="chat-topic error">
+        Error:
+        {status.error}
+      </span>
+    );
+  }
+
+  return (
+    <div>
+      <div className="chat-title-bar">
+        <Navicon />
+        <Editable
+          className="chat-title"
+          editable={!tab.name}
+          value={title}
+          validate={isValidServerName}
+          onChange={onTitleChange}
+        >
+          <span className="chat-title">{title}</span>
+        </Editable>
+        <div className="chat-topic-wrap">
+          <span className="chat-topic">
+            {channel && linkify(channel.topic)}
+          </span>
+          {serverError}
+        </div>
+        <i className="icon-search" title="Search" onClick={onToggleSearch} />
+        <i
+          className="icon-cancel button-leave"
+          title={closeTitle}
+          onClick={onCloseClick}
+        />
+        <i className="icon-user button-userlist" onClick={onToggleUserList} />
+      </div>
+      <div className="userlist-bar">
+        <i className="icon-user" />
+        <span className="chat-usercount">
+          {channel && channel.users.length}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default memo(ChatTitle);

client/js/components/pages/Chat/Message.js

@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+import classnames from 'classnames';
+import stringToRGB from 'utils/color';
+
+const Message = ({ message, coloredNick, style, onNickClick }) => {
+  const className = classnames('message', {
+    [`message-${message.type}`]: message.type
+  });
+
+  style = {
+    ...style,
+    paddingLeft: `${window.messageIndent + 15}px`,
+    textIndent: `-${window.messageIndent}px`
+  };
+
+  const senderStyle = {};
+  if (message.from && coloredNick) {
+    senderStyle.color = stringToRGB(message.from);
+  }
+
+  return (
+    <p className={className} style={style}>
+      <span className="message-time">{message.time} </span>
+      {message.from && (
+        <span
+          className="message-sender"
+          style={senderStyle}
+          onClick={() => onNickClick(message.from)}
+        >
+          {message.from}
+        </span>
+      )}
+      <span> {message.content}</span>
+    </p>
+  );
+};
+
+export default memo(Message);

client/js/components/pages/Chat/MessageBox.js

@@ -0,0 +1,250 @@
+import React, { PureComponent, createRef } from 'react';
+import { VariableSizeList as List } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import debounce from 'lodash/debounce';
+import { getScrollPos, saveScrollPos } from 'utils/scrollPosition';
+import Message from './Message';
+
+const fetchThreshold = 600;
+// The amount of time in ms that needs to pass without any
+// scroll events happening before adding messages to the top,
+// this is done to prevent the scroll from jumping all over the place
+const scrollbackDebounce = 100;
+
+export default class MessageBox extends PureComponent {
+  list = createRef();
+  outer = createRef();
+
+  addMore = debounce(() => {
+    const { tab, onAddMore } = this.props;
+    this.ready = true;
+    onAddMore(tab.server, tab.name);
+  }, scrollbackDebounce);
+
+  constructor(props) {
+    super(props);
+
+    this.loadScrollPos();
+  }
+
+  componentDidMount() {
+    const scrollToBottom = this.bottom;
+
+    window.requestAnimationFrame(() => {
+      const { messages } = this.props;
+
+      if (scrollToBottom && messages.length > 0) {
+        this.list.current.scrollToItem(messages.length + 1);
+      }
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.tab !== this.props.tab) {
+      this.loadScrollPos(true);
+    }
+
+    if (this.nextScrollTop > 0) {
+      this.list.current.scrollTo(this.nextScrollTop);
+      this.nextScrollTop = 0;
+    } else if (this.bottom) {
+      this.list.current.scrollToItem(this.props.messages.length + 1);
+    }
+  }
+
+  componentWillUnmount() {
+    this.saveScrollPos();
+  }
+
+  getSnapshotBeforeUpdate(prevProps) {
+    if (prevProps.messages !== this.props.messages) {
+      this.list.current.resetAfterIndex(0);
+    }
+
+    if (prevProps.tab !== this.props.tab) {
+      this.saveScrollPos();
+      this.bottom = false;
+    }
+
+    if (prevProps.messages[0] !== this.props.messages[0]) {
+      const { messages, hasMoreMessages } = this.props;
+
+      if (prevProps.tab === this.props.tab) {
+        const addedMessages = messages.length - prevProps.messages.length;
+        let addedHeight = 0;
+        for (let i = 0; i < addedMessages; i++) {
+          addedHeight += messages[i].height;
+        }
+
+        this.nextScrollTop = addedHeight + this.outer.current.scrollTop;
+
+        if (!hasMoreMessages) {
+          this.nextScrollTop -= 93;
+        }
+      }
+
+      this.loading = false;
+      this.ready = false;
+    }
+
+    return null;
+  }
+
+  getRowHeight = index => {
+    const { messages, hasMoreMessages } = this.props;
+
+    if (index === 0) {
+      if (hasMoreMessages) {
+        return 100;
+      }
+      return 7;
+    } else if (index === messages.length + 1) {
+      return 7;
+    }
+    return messages[index - 1].height;
+  };
+
+  getItemKey = index => {
+    const { messages } = this.props;
+
+    if (index === 0) {
+      return 'top';
+    } else if (index === messages.length + 1) {
+      return 'bottom';
+    }
+    return messages[index - 1].id;
+  };
+
+  updateScrollKey = () => {
+    const { tab } = this.props;
+    this.scrollKey = `msg:${tab.server}:${tab.name}`;
+    return this.scrollKey;
+  };
+
+  loadScrollPos = scroll => {
+    const pos = getScrollPos(this.updateScrollKey());
+    if (pos >= 0) {
+      this.bottom = false;
+      if (scroll) {
+        this.list.current.scrollTo(pos);
+      } else {
+        this.initialScrollTop = pos;
+      }
+    } else {
+      this.bottom = true;
+      if (scroll) {
+        this.list.current.scrollToItem(this.props.messages.length + 1);
+      }
+    }
+  };
+
+  saveScrollPos = () => {
+    if (this.bottom) {
+      saveScrollPos(this.scrollKey, -1);
+    } else {
+      saveScrollPos(this.scrollKey, this.outer.current.scrollTop);
+    }
+  };
+
+  fetchMore = () => {
+    this.loading = true;
+    this.props.onFetchMore();
+  };
+
+  handleScroll = ({ scrollOffset, scrollDirection }) => {
+    if (
+      !this.loading &&
+      this.props.hasMoreMessages &&
+      scrollOffset <= fetchThreshold &&
+      scrollDirection === 'backward'
+    ) {
+      this.fetchMore();
+    }
+
+    if (this.loading && !this.ready) {
+      if (this.mouseDown) {
+        this.ready = true;
+        this.shouldAdd = true;
+      } else {
+        this.addMore();
+      }
+    }
+
+    const { clientHeight, scrollHeight } = this.outer.current;
+
+    this.bottom = scrollOffset + clientHeight >= scrollHeight - 20;
+  };
+
+  handleMouseDown = () => {
+    this.mouseDown = true;
+  };
+
+  handleMouseUp = () => {
+    this.mouseDown = false;
+
+    if (this.shouldAdd) {
+      const { tab, onAddMore } = this.props;
+      this.shouldAdd = false;
+      onAddMore(tab.server, tab.name);
+    }
+  };
+
+  renderMessage = ({ index, style }) => {
+    const { messages } = this.props;
+
+    if (index === 0) {
+      if (this.props.hasMoreMessages) {
+        return (
+          <div className="messagebox-top-indicator" style={style}>
+            Loading messages...
+          </div>
+        );
+      }
+      return null;
+    } else if (index === messages.length + 1) {
+      return null;
+    }
+
+    const { coloredNicks, onNickClick } = this.props;
+    const message = messages[index - 1];
+
+    return (
+      <Message
+        message={message}
+        coloredNick={coloredNicks}
+        style={style}
+        onNickClick={onNickClick}
+      />
+    );
+  };
+
+  render() {
+    return (
+      <div
+        className="messagebox"
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+      >
+        <AutoSizer>
+          {({ width, height }) => (
+            <List
+              ref={this.list}
+              outerRef={this.outer}
+              width={width}
+              height={height}
+              itemCount={this.props.messages.length + 2}
+              itemKey={this.getItemKey}
+              itemSize={this.getRowHeight}
+              estimatedItemSize={32}
+              initialScrollOffset={this.initialScrollTop}
+              onScroll={this.handleScroll}
+              className="messagebox-window"
+            >
+              {this.renderMessage}
+            </List>
+          )}
+        </AutoSizer>
+      </div>
+    );
+  }
+}

client/js/components/pages/Chat/MessageInput.js

@@ -0,0 +1,68 @@
+import React, { memo, useState } from 'react';
+import classnames from 'classnames';
+import Editable from 'components/ui/Editable';
+import { isValidNick } from 'utils';
+
+const MessageInput = ({
+  nick,
+  currentHistoryEntry,
+  onNickChange,
+  onNickEditDone,
+  tab,
+  onCommand,
+  onMessage,
+  add,
+  reset,
+  increment,
+  decrement
+}) => {
+  const [value, setValue] = useState('');
+
+  const handleKey = e => {
+    if (e.key === 'Enter' && e.target.value) {
+      if (e.target.value[0] === '/') {
+        onCommand(e.target.value, tab.name, tab.server);
+      } else if (tab.name) {
+        onMessage(e.target.value, tab.name, tab.server);
+      }
+
+      add(e.target.value);
+      reset();
+      setValue('');
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      increment();
+    } else if (e.key === 'ArrowDown') {
+      decrement();
+    } else if (currentHistoryEntry) {
+      setValue(e.target.value);
+      reset();
+    }
+  };
+
+  const handleChange = e => setValue(e.target.value);
+
+  return (
+    <div className="message-input-wrap">
+      <Editable
+        className={classnames('message-input-nick', {
+          invalid: !isValidNick(nick)
+        })}
+        value={nick}
+        onBlur={onNickEditDone}
+        onChange={onNickChange}
+      >
+        <span className="message-input-nick">{nick}</span>
+      </Editable>
+      <input
+        className="message-input"
+        type="text"
+        value={currentHistoryEntry || value}
+        onKeyDown={handleKey}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+export default memo(MessageInput);

client/js/components/pages/Chat/Search.js

@@ -0,0 +1,41 @@
+import React, { memo, useRef, useEffect } from 'react';
+import SearchResult from './SearchResult';
+
+const Search = ({ search, onSearch }) => {
+  const inputEl = useRef();
+
+  useEffect(
+    () => {
+      if (search.show) {
+        inputEl.current.focus();
+      }
+    },
+    [search.show]
+  );
+
+  const style = {
+    display: search.show ? 'block' : 'none'
+  };
+
+  let i = 0;
+  const results = search.results.map(result => (
+    <SearchResult key={i++} result={result} />
+  ));
+
+  return (
+    <div className="search" style={style}>
+      <div className="search-input-wrap">
+        <i className="icon-search" />
+        <input
+          ref={inputEl}
+          className="search-input"
+          type="text"
+          onChange={e => onSearch(e.target.value)}
+        />
+      </div>
+      <div className="search-results">{results}</div>
+    </div>
+  );
+};
+
+export default memo(Search);

client/js/components/pages/Chat/SearchResult.js

@@ -0,0 +1,24 @@
+import React, { memo } from 'react';
+import { timestamp, linkify } from 'utils';
+
+const SearchResult = ({ result }) => {
+  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> {linkify(result.content)}</span>
+    </p>
+  );
+};
+
+export default memo(SearchResult);

client/js/components/pages/Chat/UserList.js

@@ -0,0 +1,92 @@
+import React, { PureComponent, createRef } from 'react';
+import { VariableSizeList as List } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import classnames from 'classnames';
+import UserListItem from './UserListItem';
+
+export default class UserList extends PureComponent {
+  list = createRef();
+
+  getSnapshotBeforeUpdate(prevProps) {
+    if (this.list.current) {
+      const { users } = this.props;
+
+      if (prevProps.users.length !== users.length) {
+        this.list.current.resetAfterIndex(
+          Math.min(prevProps.users.length, users.length) + 1
+        );
+      } else {
+        this.list.current.forceUpdate();
+      }
+    }
+
+    return null;
+  }
+
+  getItemHeight = index => {
+    const { users } = this.props;
+
+    if (index === 0) {
+      return 12;
+    } else if (index === users.length + 1) {
+      return 10;
+    }
+    return 24;
+  };
+
+  getItemKey = index => {
+    const { users } = this.props;
+
+    if (index === 0) {
+      return 'top';
+    } else if (index === users.length + 1) {
+      return 'bottom';
+    }
+    return index;
+  };
+
+  renderUser = ({ index, style }) => {
+    const { users, coloredNicks, onNickClick } = this.props;
+
+    if (index === 0 || index === users.length + 1) {
+      return null;
+    }
+
+    return (
+      <UserListItem
+        user={users[index - 1]}
+        coloredNick={coloredNicks}
+        style={style}
+        onClick={onNickClick}
+      />
+    );
+  };
+
+  render() {
+    const { users, showUserList } = this.props;
+
+    const className = classnames('userlist', {
+      'off-canvas': showUserList
+    });
+
+    return (
+      <div className={className}>
+        <AutoSizer disableWidth>
+          {({ height }) => (
+            <List
+              ref={this.list}
+              width={200}
+              height={height}
+              itemCount={users.length + 2}
+              itemKey={this.getItemKey}
+              itemSize={this.getItemHeight}
+              estimatedItemSize={24}
+            >
+              {this.renderUser}
+            </List>
+          )}
+        </AutoSizer>
+      </div>
+    );
+  }
+}

client/js/components/pages/Chat/UserListItem.js

@@ -0,0 +1,19 @@
+import React, { memo } from 'react';
+import stringToRGB from 'utils/color';
+
+const UserListItem = ({ user, coloredNick, style, onClick }) => {
+  if (coloredNick) {
+    style = {
+      ...style,
+      color: stringToRGB(user.nick)
+    };
+  }
+
+  return (
+    <p style={style} onClick={() => onClick(user.nick)}>
+      {user.renderName}
+    </p>
+  );
+};
+
+export default memo(UserListItem);

client/js/components/pages/Chat/index.js

@@ -0,0 +1,3 @@
+import Chat from './Chat';
+
+export default Chat;