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;

client/js/components/pages/Connect.js

@@ -0,0 +1,190 @@
+import React, { Component } from 'react';
+import { createSelector } from 'reselect';
+import { Form, withFormik } from 'formik';
+import Navicon from 'containers/Navicon';
+import Button from 'components/ui/Button';
+import Checkbox from 'components/ui/formik/Checkbox';
+import TextInput from 'components/ui/TextInput';
+import Error from 'components/ui/formik/Error';
+import { isValidNick, isValidChannel, isValidUsername, isInt } from 'utils';
+
+const getSortedDefaultChannels = createSelector(
+  defaults => defaults.channels,
+  channels => channels.split(',').sort()
+);
+
+class Connect extends Component {
+  state = {
+    showOptionals: false
+  };
+
+  handleSSLChange = e => {
+    const { values, setFieldValue } = this.props;
+    if (e.target.checked && values.port === 6667) {
+      setFieldValue('port', 6697, false);
+    } else if (!e.target.checked && values.port === 6697) {
+      setFieldValue('port', 6667, false);
+    }
+  };
+
+  handleShowClick = () => {
+    this.setState(prevState => ({ showOptionals: !prevState.showOptionals }));
+  };
+
+  renderOptionals = () => {
+    const { hexIP } = this.props;
+
+    return (
+      <div>
+        {!hexIP && <TextInput name="username" />}
+        <TextInput name="password" type="password" />
+        <TextInput name="realname" />
+      </div>
+    );
+  };
+
+  render() {
+    const { defaults, values } = this.props;
+    const { readOnly, showDetails } = defaults;
+    let form;
+
+    if (readOnly) {
+      form = (
+        <Form className="connect-form">
+          <h1>Connect</h1>
+          {showDetails && (
+            <div className="connect-details">
+              <h2>
+                {values.host}:{values.port}
+              </h2>
+              {getSortedDefaultChannels(values).map(channel => (
+                <p>{channel}</p>
+              ))}
+            </div>
+          )}
+          <TextInput name="nick" />
+          <Button type="submit">Connect</Button>
+        </Form>
+      );
+    } else {
+      form = (
+        <Form className="connect-form">
+          <h1>Connect</h1>
+          <TextInput name="name" autoCapitalize="words" />
+          <div className="connect-form-address">
+            <TextInput name="host" noError />
+            <TextInput name="port" type="number" noError />
+            <Checkbox
+              name="tls"
+              label="SSL"
+              topLabel
+              onChange={this.handleSSLChange}
+            />
+          </div>
+          <Error name="host" />
+          <Error name="port" />
+          <TextInput name="nick" />
+          <TextInput name="channels" />
+          {this.state.showOptionals && this.renderOptionals()}
+          <i className="icon-ellipsis" onClick={this.handleShowClick} />
+          <Button type="submit">Connect</Button>
+        </Form>
+      );
+    }
+
+    return (
+      <div className="connect">
+        <Navicon />
+        {form}
+      </div>
+    );
+  }
+}
+
+export default withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({ defaults }) => {
+    let port = 6667;
+    if (defaults.port) {
+      ({ port } = defaults);
+    } else if (defaults.ssl) {
+      port = 6697;
+    }
+
+    return {
+      name: defaults.name,
+      host: defaults.host,
+      port,
+      nick: '',
+      channels: defaults.channels.join(','),
+      username: '',
+      password: defaults.password ? '      ' : '',
+      realname: '',
+      tls: defaults.ssl
+    };
+  },
+  validate: values => {
+    Object.keys(values).forEach(k => {
+      if (typeof values[k] === 'string') {
+        values[k] = values[k].trim();
+      }
+    });
+
+    const errors = {};
+
+    if (!values.host) {
+      errors.host = 'Host is required';
+    } else if (values.host.indexOf('.') < 1) {
+      errors.host = 'Invalid host';
+    }
+
+    if (!values.port) {
+      values.port = values.tls ? 6697 : 6667;
+    } else if (!isInt(values.port, 1, 65535)) {
+      errors.port = 'Invalid port';
+    }
+
+    if (!values.nick) {
+      errors.nick = 'Nick is required';
+    } else if (!isValidNick(values.nick)) {
+      errors.nick = 'Invalid nick';
+    }
+
+    if (values.username && !isValidUsername(values.username)) {
+      errors.username = 'Invalid username';
+    }
+
+    values.channels = values.channels
+      .split(',')
+      .map(channel => {
+        channel = channel.trim();
+        if (channel) {
+          if (isValidChannel(channel, false)) {
+            if (channel[0] !== '#') {
+              channel = `#${channel}`;
+            }
+          } else {
+            errors.channels = 'Invalid channel(s)';
+          }
+        }
+        return channel;
+      })
+      .filter(s => s)
+      .join(',');
+
+    return errors;
+  },
+  handleSubmit: (values, { props }) => {
+    const { connect, select, join } = props;
+    const channels = values.channels.split(',');
+    delete values.channels;
+
+    values.port = `${values.port}`;
+    connect(values);
+    select(values.host);
+
+    if (channels.length > 0) {
+      join(channels, values.host);
+    }
+  }
+})(Connect);

client/js/components/pages/Settings.js

@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import Navicon from 'containers/Navicon';
+import Button from 'components/ui/Button';
+import Checkbox from 'components/ui/Checkbox';
+import FileInput from 'components/ui/FileInput';
+
+const Settings = ({
+  settings,
+  installable,
+  setSetting,
+  onCertChange,
+  onKeyChange,
+  onInstall,
+  uploadCert
+}) => {
+  const status = settings.uploadingCert ? 'Uploading...' : 'Upload';
+  const error = settings.certError;
+
+  const handleInstallClick = useCallback(
+    async () => {
+      installable.prompt();
+      await installable.userChoice;
+      onInstall();
+    },
+    [installable]
+  );
+
+  return (
+    <div className="settings-container">
+      <div className="settings">
+        <Navicon />
+        <h1>Settings</h1>
+        {installable && (
+          <Button className="button-install" onClick={handleInstallClick}>
+            <h2>Install</h2>
+          </Button>
+        )}
+        <div className="settings-section">
+          <h2>Visuals</h2>
+          <Checkbox
+            name="coloredNicks"
+            label="Colored nicks"
+            checked={settings.coloredNicks}
+            onChange={e => setSetting('coloredNicks', e.target.checked)}
+          />
+        </div>
+        <div className="settings-section">
+          <h2>Client Certificate</h2>
+          <div className="settings-cert">
+            <div className="settings-file">
+              <p>Certificate</p>
+              <FileInput
+                name={settings.certFile || 'Select Certificate'}
+                onChange={onCertChange}
+              />
+            </div>
+            <div className="settings-file">
+              <p>Private Key</p>
+              <FileInput
+                name={settings.keyFile || 'Select Key'}
+                onChange={onKeyChange}
+              />
+            </div>
+            <Button
+              type="submit"
+              className="settings-button"
+              onClick={uploadCert}
+            >
+              {status}
+            </Button>
+            {error ? <p className="error">{error}</p> : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;