Support changing the server name by clicking it in the status tab

client/src/js/components/ChatTitle.js

@@ -1,11 +1,14 @@
 import React, { PureComponent } from 'react';
 import { List } from 'immutable';
 import Navicon from '../containers/Navicon';
+import Editable from './ui/Editable';
+import { isValidServerName } from '../state/servers';
 import { linkify } from '../util';
 
 export default class ChatTitle extends PureComponent {
   render() {
-    const { title, tab, channel, onToggleSearch, onToggleUserList, onCloseClick } = this.props;
+    const { title, tab, channel, onTitleChange,
+      onToggleSearch, onToggleUserList, onCloseClick } = this.props;
 
     let closeTitle;
     if (tab.isChannel()) {
@@ -20,7 +23,15 @@ export default class ChatTitle extends PureComponent {
       <div>
         <div className="chat-title-bar">
           <Navicon />
-          <span className="chat-title">{title}</span>
+          <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">{linkify(channel.get('topic')) || null}</span>
           </div>

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

@@ -31,6 +31,11 @@ export default class Chat extends Component {
     select(tab.server, nick);
   };
 
+  handleTitleChange = title => {
+    const { setServerName, tab } = this.props;
+    setServerName(title, tab.server);
+  };
+
   render() {
     const {
       channel,
@@ -69,6 +74,7 @@ export default class Chat extends Component {
           tab={tab}
           title={title}
           onCloseClick={this.handleCloseClick}
+          onTitleChange={this.handleTitleChange}
           onToggleSearch={toggleSearch}
           onToggleUserList={toggleUserList}
         />

client/src/js/components/ui/Editable.js

@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react';
+
+const style = {
+  background: 'none',
+  font: 'inherit'
+};
+
+export default class Editable extends PureComponent {
+  state = { editing: false };
+
+  startEditing = () => {
+    if (this.props.editable) {
+      this.initialValue = this.props.value;
+      this.setState({ editing: true });
+    }
+  };
+
+  stopEditing = () => {
+    const { validate, value, onChange } = this.props;
+    if (validate && !validate(value)) {
+      onChange(this.initialValue);
+    }
+    this.setState({ editing: false });
+  };
+
+  handleKey = e => {
+    if (e.key === 'Enter') {
+      this.stopEditing();
+    }
+  };
+
+  handleChange = e => this.props.onChange(e.target.value);
+
+  render() {
+    const { children, className, value } = this.props;
+    return (
+      <div onClick={this.startEditing}>
+        {this.state.editing ?
+          <input
+            autoFocus
+            className={className}
+            style={style}
+            type="text"
+            value={value}
+            onBlur={this.stopEditing}
+            onChange={this.handleChange}
+            onKeyDown={this.handleKey}
+          /> :
+          children
+        }
+      </div>
+    );
+  }
+}