change window title to two parts, one changeable

package.json

@@ -13,7 +13,7 @@
     "build-en": "npm run extract && npm run minify-css",
     "webpack": "webpack --config ./webpack.config.web.babel.js && parallel-webpack --config ./webpack.config.client.babel.js",
     "minify-css": "babel-node scripts/minifyCss.js",
-    "extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --env debug --config ./webpack.config.client.babel.js",
+    "extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --config ./webpack.config.client.babel.js",
     "babel-node": "cd $INIT_CWD && babel-node",
     "lint": "cd $INIT_CWD && eslint --ext .jsx --ext .js",
     "lint:src": "eslint --ext .jsx --ext .js src",

src/actions/index.js

@@ -593,14 +593,14 @@ export function showModal(modalType: string, title: string): Action {
 export function showSettingsModal(): Action {
   return showModal(
     'SETTINGS',
-    t`Settings`,
+    '',
   );
 }
 
 export function showUserAreaModal(): Action {
   return showModal(
     'USERAREA',
-    t`User Area`,
+    '',
   );
 }
 
@@ -613,6 +613,14 @@ export function changeWindowType(windowId, windowType, args = null) {
   };
 }
 
+export function setWindowTitle(windowId, title) {
+  return {
+    type: 'SET_WINDOW_TITLE',
+    windowId,
+    title,
+  };
+}
+
 export function showRegisterModal(): Action {
   return showModal(
     'REGISTER',
@@ -636,14 +644,14 @@ export function showHelpModal(): Action {
 export function showArchiveModal(): Action {
   return showModal(
     'ARCHIVE',
-    t`Canvas Archive`,
+    t`Look at past Canvases`,
   );
 }
 
 export function showCanvasSelectionModal(): Action {
   return showModal(
     'CANVAS_SELECTION',
-    t`Canvas Selection`,
+    '',
   );
 }
 
@@ -831,7 +839,7 @@ export function hideAllWindowTypes(
 export function openChatWindow(): Action {
   return openWindow(
     'CHAT',
-    t`Chat`,
+    '',
     false,
     true,
     { chatChannel: 1, inputMessage: '' },

src/actions/types.js

@@ -99,6 +99,7 @@ export type Action =
     windowType: number,
     args: Object,
   }
+  | { type: 'SET_WINDOW_TITLE', windowId: number, title: string }
   | { type: 'BLOCK_USER', userId: number, userName: string }
   | { type: 'UNBLOCK_USER', userId: number, userName: string }
   | { type: 'SET_BLOCKING_DM', blockDm: boolean }

src/components/ModalRoot.jsx

@@ -44,7 +44,7 @@ const ModalRoot = () => {
     return null;
   }
 
-  const Content = COMPONENTS[windowType];
+  const [Content, name] = COMPONENTS[windowType];
 
   return (
     (render || open)
@@ -60,7 +60,7 @@ const ModalRoot = () => {
         <div
           className={(open && render) ? 'Modal show' : 'Modal'}
         >
-          <h2>{title}</h2>
+          <h2>{(title) ? `${name} - ${title}` : name}</h2>
           <div
             onClick={() => dispatch(closeWindow(0))}
             className="ModalClose"

src/components/Window.jsx

@@ -87,7 +87,7 @@ const Window = ({ id }) => {
     }, 10);
   }, [open, hidden]);
 
-  const Content = COMPONENTS[windowType];
+  const [Content, name] = COMPONENTS[windowType];
 
   if (!render && hidden) {
     return null;
@@ -123,7 +123,7 @@ const Window = ({ id }) => {
           ref={titleBarRef}
           title={t`Move`}
         >
-          {title}
+          {(title) ? `${name} - ${title}` : name}
         </span>
         <span
           className="win-topbtn"

src/components/hooks/drag.js

@@ -15,7 +15,7 @@ function useDrag(elRef, startHandler, diffHandler) {
   const startDrag = useCallback((event) => {
     event.preventDefault();
     event.stopPropagation();
-    startHandler && startHandler();
+    if (startHandler) startHandler();
 
     let {
       clientX: startX,

src/components/windows/Chat.jsx

@@ -19,6 +19,7 @@ import {
   setChatInputMessage,
   fetchChatMessages,
   showContextMenu,
+  setWindowTitle,
 } from '../../actions';
 import ProtocolClient from '../../socket/ProtocolClient';
 import splitChatMessage from '../../core/chatMessageFilter';
@@ -39,9 +40,9 @@ const Chat = ({
 
   const dispatch = useDispatch();
 
-  const setChannel = useCallback((cid) => dispatch(
-    setChatChannel(windowId, cid),
-  ), [dispatch]);
+  const setChannel = useCallback((cid) => {
+    dispatch(setChatChannel(windowId, cid));
+  }, [dispatch]);
 
   const ownName = useSelector((state) => state.user.name);
   // eslint-disable-next-line max-len
@@ -61,6 +62,13 @@ const Chat = ({
     dispatch(fetchChatMessages(chatChannel));
   }
 
+  useEffect(() => {
+    if (channels[chatChannel]) {
+      const channelName = channels[chatChannel][0];
+      dispatch(setWindowTitle(windowId, `Chan: ${channelName}`));
+    }
+  }, [chatChannel]);
+
   useLayoutEffect(() => {
     stayScrolled();
   }, [channelMessages.length]);

src/components/windows/index.js

@@ -0,0 +1,25 @@
+/*
+ * @flow
+ */
+import { t } from 'ttag';
+
+import Help from './Help';
+import Settings from './Settings';
+import UserArea from './UserArea';
+import Register from './Register';
+import CanvasSelect from './CanvasSelect';
+import Archive from './Archive';
+import Chat from './Chat';
+import ForgotPassword from './ForgotPassword';
+
+export default {
+  HELP: [Help, t`Help`],
+  SETTINGS: [Settings, t`Settings`],
+  USERAREA: [UserArea, t`User Area`],
+  REGISTER: [Register, t`Registration`],
+  FORGOT_PASSWORD: [ForgotPassword, t`Forgot Password`],
+  CHAT: [Chat, t`Chat`],
+  CANVAS_SELECTION: [CanvasSelect, t`Canvas Selection`],
+  ARCHIVE: [Archive, t`Canvas Archive`],
+  /* other windows */
+};

src/components/windows/index.jsx

@@ -1,24 +0,0 @@
-/*
- * @flow
- */
-import Help from './Help';
-import Settings from './Settings';
-import UserArea from './UserArea';
-import Register from './Register';
-import CanvasSelect from './CanvasSelect';
-import Archive from './Archive';
-import Chat from './Chat';
-import ForgotPassword from './ForgotPassword';
-
-export default {
-  NONE: null,
-  HELP: Help,
-  SETTINGS: Settings,
-  USERAREA: UserArea,
-  REGISTER: Register,
-  FORGOT_PASSWORD: ForgotPassword,
-  CHAT: Chat,
-  CANVAS_SELECTION: CanvasSelect,
-  ARCHIVE: Archive,
-  /* other windows */
-};

src/reducers/windows.js

@@ -199,7 +199,7 @@ export default function windows(
       }
       const windowId = generateWindowId(state);
       const newZMax = state.zMax + 1;
-      let newWindows = [
+      const newWindows = [
         ...state.windows,
         {
           windowId,
@@ -378,6 +378,7 @@ export default function windows(
           modal: {
             ...state.modal,
             windowType,
+            title: '',
           },
         };
       }
@@ -386,6 +387,7 @@ export default function windows(
         return {
           ...win,
           windowType,
+          title: '',
         };
       });
       return {
@@ -403,7 +405,7 @@ export default function windows(
         windows: oldWindows, zMax,
       } = state;
 
-      let newWindows = [];
+      const newWindows = [];
 
       for (let i = 0; i < oldWindows.length; i += 1) {
         const win = oldWindows[i];
@@ -628,6 +630,24 @@ export default function windows(
       };
     }
 
+    case 'SET_WINDOW_TITLE': {
+      const {
+        windowId,
+        title,
+      } = action;
+      const newWindows = state.windows.map((win) => {
+        if (win.windowId !== windowId) return win;
+        return {
+          ...win,
+          title,
+        };
+      });
+      return {
+        ...state,
+        windows: newWindows,
+      };
+    }
+
     /*
      * args specific actions
      */