allows to reorder chat tabs & hides delete from main tab (#81455) (#3529

)

This pull request aims to hide the delete button from the main chat tab
as well as to allow reordering of the other chat tabs.
((Not to cause any issues with existing tabs, the variable has to be
true, so the hiding of the delete button only takes effect for new
players or when someone deleted all tabs once))

![grafik](https://github.com/tgstation/tgstation/assets/144968721/c1682cef-3e4f-4c4f-8394-bbf1345d4630)

![grafik](https://github.com/tgstation/tgstation/assets/144968721/ffe973a5-24eb-44ed-b8db-e3c1867935d1)
- I'm not quite sure, why the main tab has the delete button in the
first place, after all, it's not like the tab should be removed?
So, we can just hide the delete button on that tab and keep it always
there.
- Accidentally deleting a chat tab when one has multiple tabs set up
requires to change all tabs to the right to regain the previous order,
so why not simply allow to reorder all tabs except for the main tab.
(The main tab can neither be moved, nor can anything swapped with it)
:cl:
qol: hides the delete button on the main tab allows to reorder all other
chat tabs
/:cl:

Co-authored-by: Kashargul <[email protected]>

tgui/packages/tgui-panel/chat/ChatPageSettings.jsx

@@ -13,7 +13,14 @@ import {
   Section,
   Stack,
 } from 'tgui/components';
-import { removeChatPage, toggleAcceptedType, updateChatPage } from './actions';
+
+import {
+  moveChatPageLeft,
+  moveChatPageRight,
+  removeChatPage,
+  toggleAcceptedType,
+  updateChatPage,
+} from './actions';
 import { MESSAGE_TYPES } from './constants';
 import { selectCurrentChatPage } from './selectors';
 
@@ -53,20 +60,59 @@ export const ChatPageSettings = (props, context) => {
             }
           />
         </Stack.Item>
-        <Stack.Item>
-          <Button
-            content="Remove"
-            icon="times"
-            color="red"
-            onClick={() =>
-              dispatch(
-                removeChatPage({
-                  pageId: page.id,
-                }),
-              )
-            }
-          />
-        </Stack.Item>
+        {!page.isMain ? (
+          <Stack.Item>
+            <Button
+              icon="times"
+              color="red"
+              onClick={() =>
+                dispatch(
+                  removeChatPage({
+                    pageId: page.id,
+                  }),
+                )
+              }
+            >
+              Remove
+            </Button>
+          </Stack.Item>
+        ) : (
+          ''
+        )}
+      </Stack>
+      <Divider />
+      <Stack align="center">
+        {!page.isMain ? (
+          <Stack.Item>
+            Reorder Chat:&emsp;
+            <Button
+              color="blue"
+              onClick={() =>
+                dispatch(
+                  moveChatPageLeft({
+                    pageId: page.id,
+                  }),
+                )
+              }
+            >
+              &laquo;
+            </Button>
+            <Button
+              color="blue"
+              onClick={() =>
+                dispatch(
+                  moveChatPageRight({
+                    pageId: page.id,
+                  }),
+                )
+              }
+            >
+              &raquo;
+            </Button>
+          </Stack.Item>
+        ) : (
+          ''
+        )}
       </Stack>
       <Divider />
       <Section title="Messages to display" level={2}>

tgui/packages/tgui-panel/chat/actions.js

@@ -20,3 +20,5 @@ export const toggleAcceptedType = createAction('chat/toggleAcceptedType');
 export const removeChatPage = createAction('chat/removePage');
 export const changeScrollTracking = createAction('chat/changeScrollTracking');
 export const saveChatToDisk = createAction('chat/saveToDisk');
+export const moveChatPageLeft = createAction('chat/movePageLeft');
+export const moveChatPageRight = createAction('chat/movePageRight');

tgui/packages/tgui-panel/chat/middleware.js

@@ -20,6 +20,8 @@ import {
   changeScrollTracking,
   clearChat,
   loadChat,
+  moveChatPageLeft,
+  moveChatPageRight,
   rebuildChat,
   removeChatPage,
   saveChatToDisk,
@@ -153,7 +155,9 @@ export const chatMiddleware = (store) => {
       type === changeChatPage.type ||
       type === addChatPage.type ||
       type === removeChatPage.type ||
-      type === toggleAcceptedType.type
+      type === toggleAcceptedType.type ||
+      type === moveChatPageLeft.type ||
+      type === moveChatPageRight.type
     ) {
       next(action);
       const page = selectCurrentChatPage(store.getState());

tgui/packages/tgui-panel/chat/model.js

@@ -18,6 +18,7 @@ export const createPage = (obj) => {
   }
 
   return {
+    isMain: false,
     id: createUuid(),
     name: 'New Tab',
     acceptedTypes: acceptedTypes,
@@ -34,6 +35,7 @@ export const createMainPage = () => {
     acceptedTypes[typeDef.type] = true;
   }
   return createPage({
+    isMain: true,
     name: 'Main',
     acceptedTypes,
   });

tgui/packages/tgui-panel/chat/reducer.js

@@ -8,6 +8,8 @@ import {
   addChatPage,
   changeChatPage,
   loadChat,
+  moveChatPageLeft,
+  moveChatPageRight,
   removeChatPage,
   toggleAcceptedType,
   updateChatPage,
@@ -188,5 +190,52 @@ export const chatReducer = (state = initialState, action) => {
     }
     return nextState;
   }
+  if (type === moveChatPageLeft.type) {
+    const { pageId } = payload;
+    const nextState = {
+      ...state,
+      pages: [...state.pages],
+      pageById: {
+        ...state.pageById,
+      },
+    };
+    const tmpPage = nextState.pageById[pageId];
+    const fromIndex = nextState.pages.indexOf(tmpPage.id);
+    const toIndex = fromIndex - 1;
+    // don't ever move leftmost page
+    if (fromIndex > 0) {
+      // don't ever move anything to the leftmost page
+      if (toIndex > 0) {
+        const tmp = nextState.pages[fromIndex];
+        nextState.pages[fromIndex] = nextState.pages[toIndex];
+        nextState.pages[toIndex] = tmp;
+      }
+    }
+    return nextState;
+  }
+
+  if (type === moveChatPageRight.type) {
+    const { pageId } = payload;
+    const nextState = {
+      ...state,
+      pages: [...state.pages],
+      pageById: {
+        ...state.pageById,
+      },
+    };
+    const tmpPage = nextState.pageById[pageId];
+    const fromIndex = nextState.pages.indexOf(tmpPage.id);
+    const toIndex = fromIndex + 1;
+    // don't ever move leftmost page
+    if (fromIndex > 0) {
+      // don't ever move anything out of the array
+      if (toIndex < nextState.pages.length) {
+        const tmp = nextState.pages[fromIndex];
+        nextState.pages[fromIndex] = nextState.pages[toIndex];
+        nextState.pages[toIndex] = tmp;
+      }
+    }
+    return nextState;
+  }
   return state;
 };