Add topic modal

client/js/components/modals/AddChannel.js

@@ -114,7 +114,10 @@ const AddChannel = ({ search, payload: { server }, onClose, ...props }) => {
           onKeyDown={handleKey}
           onChange={handleSearch}
         />
-        <i className="icon-cancel modal-channel-close" onClick={onClose} />
+        <i
+          className="icon-cancel modal-close modal-channel-close"
+          onClick={onClose}
+        />
       </div>
       <div ref={resultsEl} className="modal-channel-results">
         {search.results.map(channel => (

client/js/components/modals/Topic.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import withModal from 'components/modals/withModal';
+import { linkify } from 'utils';
+
+const Topic = ({ payload: { topic, channel }, onClose }) => {
+  return (
+    <>
+      <div className="modal-header">
+        <h2>Topic in {channel}</h2>
+        <i className="icon-cancel modal-close" onClick={onClose} />
+      </div>
+      <p className="modal-content">{linkify(topic)}</p>
+    </>
+  );
+};
+
+export default withModal({
+  name: 'topic'
+})(Topic);

client/js/components/modals/index.js

@@ -1,11 +1,13 @@
 import React, { memo } from 'react';
 import AddChannel from 'components/modals/AddChannel';
 import Confirm from 'components/modals/Confirm';
+import Topic from 'components/modals/Topic';
 
 const Modals = () => (
   <>
     <AddChannel />
     <Confirm />
+    <Topic />
   </>
 );
 

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

@@ -65,6 +65,7 @@ export default class Chat extends Component {
       addFetchedMessages,
       fetchMessages,
       inputActions,
+      openModal,
       runCommand,
       sendMessage,
       toggleSearch,
@@ -86,6 +87,7 @@ export default class Chat extends Component {
           status={status}
           tab={tab}
           title={title}
+          openModal={openModal}
           onCloseClick={this.handleCloseClick}
           onTitleChange={this.handleTitleChange}
           onToggleSearch={toggleSearch}

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

@@ -2,13 +2,14 @@ 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';
+import { isChannel } from 'utils';
 
 const ChatTitle = ({
   status,
   title,
   tab,
   channel,
+  openModal,
   onTitleChange,
   onToggleSearch,
   onToggleUserList,
@@ -44,9 +45,19 @@ const ChatTitle = ({
           <span className="chat-title">{title}</span>
         </Editable>
         <div className="chat-topic-wrap">
-          <span className="chat-topic">
-            {channel && linkify(channel.topic)}
-          </span>
+          {channel && channel.topic && (
+            <span
+              className="chat-topic"
+              onClick={() =>
+                openModal('topic', {
+                  topic: channel.topic,
+                  channel: channel.name
+                })
+              }
+            >
+              {channel.topic}
+            </span>
+          )}
           {serverError}
         </div>
         <i className="icon-search" title="Search" onClick={onToggleSearch} />

client/js/components/ui/Editable.js

@@ -1,4 +1,5 @@
 import React, { PureComponent, createRef } from 'react';
+import cn from 'classnames';
 import { stringWidth } from 'utils';
 
 export default class Editable extends PureComponent {
@@ -75,7 +76,7 @@ export default class Editable extends PureComponent {
   };
 
   render() {
-    const { children, className, value } = this.props;
+    const { children, className, editable, value } = this.props;
 
     const style = {
       width: this.state.width,
@@ -86,7 +87,7 @@ export default class Editable extends PureComponent {
     return this.state.editing ? (
       <input
         ref={this.inputEl}
-        className={className}
+        className={`editable-wrap ${className}`}
         type="text"
         value={value}
         onBlur={this.handleBlur}
@@ -97,7 +98,14 @@ export default class Editable extends PureComponent {
         spellCheck={false}
       />
     ) : (
-      <div onClick={this.startEditing}>{children}</div>
+      <div
+        className={cn('editable-wrap', {
+          'editable-wrap-editable': editable
+        })}
+        onClick={this.startEditing}
+      >
+        {children}
+      </div>
     );
   }
 }

client/js/containers/Chat.js

@@ -22,6 +22,7 @@ import {
   fetchMessages,
   addFetchedMessages
 } from 'state/messages';
+import { openModal } from 'state/modals';
 import { openPrivateChat, closePrivateChat } from 'state/privateChats';
 import { getSearch, searchMessages, toggleSearch } from 'state/search';
 import {
@@ -58,6 +59,7 @@ const mapDispatch = dispatch => ({
       closePrivateChat,
       disconnect,
       fetchMessages,
+      openModal,
       openPrivateChat,
       part,
       runCommand,

client/js/state/channels.js

@@ -61,7 +61,7 @@ function init(state, server, channel) {
     state[server] = {};
   }
   if (channel && !state[server][channel]) {
-    state[server][channel] = { users: [], joined: false };
+    state[server][channel] = { name: channel, users: [], joined: false };
   }
 }
 
@@ -135,6 +135,7 @@ export default createReducer(
     [actions.socket.JOIN](state, { server, channels, user }) {
       const channel = channels[0];
       init(state, server, channel);
+      state[server][channel].name = channel;
       state[server][channel].joined = true;
       state[server][channel].users.push(createUser(user));
     },