fix

Author: acharneski

webapp/chat-app/package.json

@@ -25,22 +25,35 @@
     "@types/react-redux": "^7.1.34",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
+    "cross-env": "^7.0.3",
     "eslint": "^8.0.0",
     "typescript": "^4.9.5"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "cross-env GENERATE_SOURCEMAP=true react-scripts start",
+    "build": "cross-env GENERATE_SOURCEMAP=true INLINE_RUNTIME_CHUNK=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix",
+    "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix --max-warnings=0",
     "type-check": "tsc --noEmit"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "rules": {
+      "no-console": [
+        "warn",
+        {
+          "allow": [
+            "warn",
+            "error"
+          ]
+        }
+      ],
+      "no-debugger": "warn"
+    }
   },
   "browserslist": {
     "production": [

webapp/chat-app/src/App.tsx

@@ -6,6 +6,7 @@ import {GlobalStyles} from './styles/GlobalStyles';
 import ChatInterface from './components/ChatInterface';
 import ThemeProvider from './themes/ThemeProvider';
 import {Menu} from "./components/Menu/Menu";
+import {Modal} from "./components/Modal/Modal";
 
 const App: React.FC = () => {
     console.log('[App] Component rendering');
@@ -41,6 +42,7 @@ const App: React.FC = () => {
                                             websocket={websocket}
                                             isConnected={isConnected}
                                         />
+                                        <Modal/>
                                     </div>
                                 </>
                             );

webapp/chat-app/src/components/Menu/Menu.tsx

@@ -27,14 +27,12 @@ const Dropdown = styled.div`
     padding: ${({theme}) => theme.sizing.spacing.sm};
     text-decoration: none;
     cursor: pointer;
+    position: relative;
 
     &:hover {
         background-color: ${({theme}) => theme.colors.primary};
         color: white;
-    }
 
-    &:hover .div {
-        display: block;
     }
 `;
 
@@ -57,6 +55,12 @@ const DropdownContent = styled.div`
     min-width: 160px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     z-index: 1;
+    top: 100%;
+    left: 0;
+
+    ${Dropdown}:hover & {
+        display: block;
+    }
 `;
 
 const DropdownItem = styled.a`
@@ -84,6 +88,11 @@ export const Menu: React.FC = () => {
     const handleModalOpen = (modalType: string) => {
         console.log(`Opening modal: ${modalType}`);
         dispatch(showModal(modalType));
+        // Verify the action was dispatched
+        console.log('[Menu] Modal action dispatched:', {
+            type: 'showModal',
+            modalType
+        });
     };
 
     const handleLogout = () => {

webapp/chat-app/src/components/Modal/Modal.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../../store';
+import { hideModal } from '../../store/slices/uiSlice';
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+
+const ModalContent = styled.div`
+  background-color: ${({theme}) => theme.colors.surface};
+  padding: ${({theme}) => theme.sizing.spacing.lg};
+  border-radius: 4px;
+  min-width: 300px;
+`;
+
+export const Modal: React.FC = () => {
+  const dispatch = useDispatch();
+  const { modalOpen, modalType } = useSelector((state: RootState) => state.ui);
+
+  if (!modalOpen) return null;
+
+  console.log('[Modal] Rendering modal:', { modalType });
+
+  return (
+    <ModalOverlay onClick={() => dispatch(hideModal())}>
+      <ModalContent onClick={e => e.stopPropagation()}>
+        <h2>{modalType}</h2>
+        {/* Add your modal content here based on modalType */}
+      </ModalContent>
+    </ModalOverlay>
+  );
+};

webapp/chat-app/src/components/Tabs/index.tsx

@@ -29,7 +29,6 @@ interface TabsProps {
 }
 
 const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, onTabChange, children }) => {
-  // Log when component mounts or updates
   useEffect(() => {
     console.log('Tabs component mounted/updated with:', {
       tabsCount: tabs.length,
@@ -65,7 +64,7 @@ const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, onTabChange, children }) =
     </TabContainer>
   );
 };
-// Add component display name for better debugging
+
 Tabs.displayName = 'Tabs';
 
 

webapp/chat-app/src/store/slices/uiSlice.ts

@@ -24,12 +24,23 @@ const uiSlice = createSlice({
       state.theme = action.payload;
     },
     showModal: (state, action: PayloadAction<string>) => {
-      console.log('[UI Slice] Showing modal:', action.payload);
+      console.log('[UI Slice] Showing modal:', {
+        modalType: action.payload,
+        previousState: {
+          modalOpen: state.modalOpen,
+          modalType: state.modalType
+        }
+      });
       state.modalOpen = true;
       state.modalType = action.payload;
     },
     hideModal: (state) => {
-      console.log('[UI Slice] Hiding modal');
+      console.log('[UI Slice] Hiding modal', {
+        previousState: {
+          modalOpen: state.modalOpen,
+          modalType: state.modalType
+        }
+      });
       state.modalOpen = false;
       state.modalType = null;
     },