wip: bunch of small random changes

core/components/WebServer/middlewares/topLevelMw.ts

@@ -7,7 +7,7 @@ import { RawKoaCtx } from '../ctxTypes';
 
 
 //Consts
-const timeoutLimit = 35 * 1000; //REQ_TIMEOUT_REALLY_REALLY_LONG is 30s
+const timeoutLimit = 47 * 1000; //REQ_TIMEOUT_REALLY_REALLY_LONG is 45s
 
 /**
  * Middleware responsible for timeout/error/no-output/413

core/components/WebServer/webSocket.ts

@@ -78,7 +78,7 @@ export default class WebSocket {
      */
     handleConnection(socket: SocketWithSession) {
         //Check the UI version
-        if (socket.handshake.query.uiVersion !== txEnv.txAdminVersion) {
+        if (socket.handshake.query.uiVersion && socket.handshake.query.uiVersion !== txEnv.txAdminVersion) {
             return forceUiReload(socket);
         }
 

docs/dev_notes.md

@@ -79,6 +79,12 @@ Processo:
     - [x][2d] useBackendApi hook - wrapper around fetch with optional toast management
     - [ ][2h] server controls
     - [ ][1h] server scheduled restarts (legacy style)
+    - [ ][3d] "my account" modal
+        - if isTempPassword change message and disallows closing before changing the password
+        - give the chance to change modifiers
+        - remove legacy header + change password code
+        - admin manager should open "my account" when trying to edit self
+        - maybe separate the backend routes
     - [ ][3d] playerlist
     - [ ][1d] add the new logos to shell+auth pages
 - [ ][3h] playerlist click opens legacy player modal (`iframe.contentWindow.postMessage("openModal", ???);`)

panel/src/components/MainPageLink.tsx

@@ -1,4 +1,4 @@
-import { useSheets } from "@/hooks/sheets";
+import { useCloseAllSheets } from "@/hooks/sheets";
 import { pageErrorStatusAtom, useContentRefresh } from "@/hooks/pages";
 import { useAtomValue } from "jotai";
 import { forwardRef } from "react";
@@ -17,7 +17,7 @@ function MainPageLinkInner(
 ) {
     const isPageInError = useAtomValue(pageErrorStatusAtom);
     const refreshContent = useContentRefresh();
-    const { closeAllSheets } = useSheets();
+    const closeAllSheets = useCloseAllSheets();
     const checkOnClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         closeAllSheets();
         if (props.isActive || isPageInError) {

panel/src/components/MarkdownProse.tsx

@@ -1,7 +1,7 @@
 import { cn, openExternalLink, stripIndent } from '@/lib/utils';
 import Markdown, { Components } from 'react-markdown';
 import InlineCode from './InlineCode';
-import { ExternalLink } from 'lucide-react';
+import { ExternalLinkIcon } from 'lucide-react';
 import { useLocation } from 'wouter';
 
 function CustomAnchor({ href, children }: { href?: string, children: React.ReactNode }) {
@@ -17,7 +17,7 @@ function CustomAnchor({ href, children }: { href?: string, children: React.React
     }
     return <button onClick={onClick} className="text-accent no-underline hover:underline m-0">
         {children}
-        {isExternal && <ExternalLink className="inline ml-1 mb-1 h-5 [.prose-sm_&]:h-4 [.prose-sm_&]:ml-0" />}
+        {isExternal && <ExternalLinkIcon className="inline ml-1 mb-1 h-5 [.prose-sm_&]:h-4 [.prose-sm_&]:ml-0" />}
     </button>
 }
 

panel/src/hooks/sheets.ts

@@ -27,16 +27,14 @@ export const usePlayerlistSheet = () => {
     return { isSheetOpen, setIsSheetOpen };
 };
 
-export const useSheets = () => {
+export const useCloseAllSheets = () => {
     const setIsGlobalMenuSheetOpen = useSetAtom(isGlobalMenuSheetOpenAtom);
     const setIsServerSheetOpen = useSetAtom(isServerSheetOpenAtom);
     const setIsPlayerlistSheetOpen = useSetAtom(isPlayerlistSheetOpenAtom);
 
-    const closeAllSheets = () => {
+    return () => {
         setIsGlobalMenuSheetOpen(false);
         setIsServerSheetOpen(false);
         setIsPlayerlistSheetOpen(false);
     }
-
-    return { closeAllSheets }
 }

panel/src/layout/MainShell.tsx

@@ -16,7 +16,7 @@ import { getSocket } from '@/lib/utils';
 import { useProcessPlayerlistEvents } from '@/hooks/playerlist';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import PromptDialog from '@/components/PromptDialog';
-import TxToaster from '../components/TxToaster';
+import TxToaster, { txToast } from '../components/TxToaster';
 
 
 export default function MainShell() {
@@ -34,7 +34,11 @@ export default function MainShell() {
     const processPlayerlistEvents = useProcessPlayerlistEvents();
     const processUpdateAvailableEvent = useProcessUpdateAvailableEvent();
 
+    //Runing on mount only
     useEffect(() => {
+        txToast.dismiss(); //making sure we don't have any pending toasts
+
+        //SocketIO
         const rooms = window.txConsts.isWebInterface ? ['status', 'playerlist'] : ['status'];
         const socket = getSocket(rooms);
         socket.on('connect', () => {

panel/src/layout/serverSidebar/ServerSidebar.tsx

@@ -14,7 +14,7 @@ export function ServerSidebar({ isSheet }: ServerSidebarProps) {
             className={cn(
                 'flex flex-col gap-4',
                 isSheet
-                    ? 'mr-4'
+                    ? 'mr-4 pl-2'
                     : "self-start sticky top-[calc(4.5rem+1px)] z-0 w-sidebar shrink-0 hidden lg:flex",
             )}
         >

panel/src/main.tsx

@@ -65,7 +65,7 @@ export function AuthContextSwitch() {
 }
 
 //Creating a global query client
-const queryClient = new QueryClient()
+const queryClient = new QueryClient();
 
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

panel/src/pages/testing/TmpAuthState.tsx

@@ -11,7 +11,14 @@ export default function TmpAuthState() {
         setAuthData({
             ...authData,
             isMaster: !authData.isMaster,
-        })
+        });
+    }
+    const changeCsrfToken = () => {
+        if(!authData) return;
+        setAuthData({
+            ...authData,
+            csrfToken: Math.random().toString(36).substring(2),
+        });
     }
 
     return (
@@ -28,6 +35,9 @@ export default function TmpAuthState() {
                 <Button size="sm" onClick={() => toggleIsMaster()}>
                     Toggle isMaster
                 </Button>
+                <Button size="sm" onClick={() => changeCsrfToken()}>
+                    Change CSRF Token
+                </Button>
                 <Button size="sm" onClick={() => setAuthData(false)}>
                     Erase Auth
                 </Button>