fix: restore mobile layout and step details view - Fix mobile layout CSS constraints - Add step details view to mobile layout - Add print and note functionality to mobile layout

client/src/App.css

@@ -1,8 +1,15 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+.app {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
 }
 
 .logo {

client/src/App.tsx

@@ -1,87 +1,99 @@
-import { CssBaseline, ThemeProvider, createTheme, CircularProgress, Box } from '@mui/material'
-import { useDeviceType } from './hooks/useDeviceType'
-import { useTaskData } from './hooks/useTaskData'
-import { DesktopLayout } from './layouts/DesktopLayout'
-import { MobileLayout } from './layouts/MobileLayout'
-import { StepDetails } from './components/StepDetails'
-import type { GroupWithTasks, TaskWithSteps, StepWithNotes } from './types'
-
-const theme = createTheme()
+import React, { useCallback } from 'react';
+import { ApolloProvider } from '@apollo/client';
+import { client } from './graphql/client';
+import { DesktopLayout } from './layouts/DesktopLayout';
+import { MobileLayout } from './layouts/MobileLayout';
+import { UserSelection } from './components/UserSelection';
+import { useTaskData } from './hooks/useTaskData';
+import { useDeviceType } from './hooks/useDeviceType';
+import { useUserSelection } from './hooks/useUserSelection';
+import './App.css';
 
 export function App() {
-  const deviceType = useDeviceType()
+  const { selectedUser, users, selectUser } = useUserSelection();
+  const deviceType = useDeviceType();
   const {
+    loading,
     groups,
     step,
-    loading,
     selectedGroup,
     selectedTask,
     selectedStep,
     setSelectedGroup,
     setSelectedTask,
     setSelectedStep,
-    handlePrintStep,
     handlePrintTask,
-    handleAddNote,
-  } = useTaskData()
+    handlePrintStep,
+    handleAddNote
+  } = useTaskData();
 
-  const handleBack = () => {
+  const handleBack = useCallback(() => {
     if (selectedStep) {
-      setSelectedStep(undefined)
+      setSelectedStep(undefined);
     } else if (selectedTask) {
-      setSelectedTask(undefined)
+      setSelectedTask(undefined);
     } else if (selectedGroup) {
-      setSelectedGroup(undefined)
+      setSelectedGroup(undefined);
     }
-  }
+  }, [selectedStep, selectedTask, selectedGroup, setSelectedStep, setSelectedTask, setSelectedGroup]);
 
-  if (loading) {
+  console.log('App render:', {
+    selectedUser,
+    deviceType,
+    loading,
+    groups,
+    step,
+    selectedGroup,
+    selectedTask,
+    selectedStep
+  });
+
+  console.log('App rendering main content, conditions:', {
+    hasUser: selectedUser !== null,
+    deviceType,
+    hasGroups: groups.length > 0,
+    hasStep: step !== null
+  });
+
+  if (!selectedUser) {
     return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-        <CircularProgress />
-      </Box>
-    )
+      <div className="app">
+        <UserSelection users={users} onSelectUser={selectUser} />
+      </div>
+    );
   }
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      {deviceType === 'desktop' ? (
-        <DesktopLayout
-          groups={groups}
-          selectedGroup={selectedGroup}
-          selectedTask={selectedTask}
-          selectedStep={selectedStep}
-          onGroupSelect={setSelectedGroup}
-          onTaskSelect={setSelectedTask}
-          onStepSelect={setSelectedStep}
-          onPrintTask={handlePrintTask}
-          onPrintStep={handlePrintStep}
-          onAddNote={handleAddNote}
-        />
-      ) : (
-        <>
-          {selectedStep ? (
-            <StepDetails
-              step={step!}
-              onPrint={() => handlePrintStep(String(selectedStep.id), '1')} // TODO: Get real user ID
-              onAddNote={(content) => handleAddNote(content, '1')} // TODO: Get real user ID
-              onBack={handleBack}
-            />
-          ) : (
-            <MobileLayout
-              groups={groups}
-              selectedGroup={selectedGroup}
-              selectedTask={selectedTask}
-              selectedStep={selectedStep}
-              onGroupSelect={setSelectedGroup}
-              onTaskSelect={setSelectedTask}
-              onStepSelect={setSelectedStep}
-              onBack={handleBack}
-            />
-          )}
-        </>
-      )}
-    </ThemeProvider>
-  )
+    <ApolloProvider client={client}>
+      <div className="app">
+        {deviceType === 'desktop' ? (
+          <DesktopLayout
+            groups={groups}
+            selectedGroup={selectedGroup}
+            selectedTask={selectedTask}
+            selectedStep={selectedStep}
+            onGroupSelect={setSelectedGroup}
+            onTaskSelect={setSelectedTask}
+            onStepSelect={setSelectedStep}
+            onPrintTask={handlePrintTask}
+            onPrintStep={handlePrintStep}
+            onAddNote={handleAddNote}
+          />
+        ) : (
+          <MobileLayout
+            groups={groups}
+            selectedGroup={selectedGroup}
+            selectedTask={selectedTask}
+            selectedStep={selectedStep}
+            onGroupSelect={setSelectedGroup}
+            onTaskSelect={setSelectedTask}
+            onStepSelect={setSelectedStep}
+            onBack={handleBack}
+            onPrintStep={handlePrintStep}
+            onAddNote={handleAddNote}
+          />
+        )}
+      </div>
+    </ApolloProvider>
+  );
 }

client/src/layouts/MobileLayout.tsx

@@ -1,5 +1,6 @@
-import { Box, Paper, Typography, IconButton } from '@mui/material';
+import { Box, Paper, Typography, IconButton, TextField, Button } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import PrintIcon from '@mui/icons-material/Print';
 import type { GroupWithTasks, TaskWithSteps, StepWithNotes } from '../types';
 import { CreateButtons } from '../components/CreateButtons';
 
@@ -24,6 +25,8 @@ export function MobileLayout({
   onTaskSelect,
   onStepSelect,
   onBack,
+  onPrintStep,
+  onAddNote
 }: {
   groups: GroupWithTasks[];
   selectedGroup?: GroupWithTasks;
@@ -33,6 +36,8 @@ export function MobileLayout({
   onTaskSelect: (task: TaskWithSteps | undefined) => void;
   onStepSelect: (step: StepWithNotes | undefined) => void;
   onBack: () => void;
+  onPrintStep?: (stepId: string, userId: string) => void;
+  onAddNote?: (content: string) => void;
 }) {
   const groupList: GroupWithTasks[] = groups;
   const taskList: TaskWithSteps[] = (selectedGroup?.tasks as TaskWithSteps[]) ?? [];
@@ -41,7 +46,7 @@ export function MobileLayout({
   return (
     <Box sx={{ height: '100vh', p: 2 }}>
       {/* Header with back button */}
-      {selectedGroup && (
+      {selectedGroup && !selectedTask && (
         <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
           <IconButton onClick={onBack} sx={{ mr: 1 }}>
             <ArrowBackIcon />
@@ -65,6 +70,14 @@ export function MobileLayout({
             <ArrowBackIcon />
           </IconButton>
           <Typography variant="h6">{selectedStep.name}</Typography>
+          {onPrintStep && (
+            <IconButton
+              onClick={() => onPrintStep(String(selectedStep.id), '1')} // TODO: Get real user ID
+              sx={{ ml: 'auto' }}
+            >
+              <PrintIcon />
+            </IconButton>
+          )}
         </Box>
       )}
 
@@ -142,6 +155,39 @@ export function MobileLayout({
             </Box>
           </>
         )}
+
+        {selectedStep && (
+          <>
+            <Typography sx={{ mb: 4 }}>{selectedStep.instructions}</Typography>
+
+            <Box sx={{ mb: 4 }}>
+              <Typography variant="h6" sx={{ mb: 2 }}>
+                Notes ({selectedStep.notes.length})
+              </Typography>
+              {selectedStep.notes.map((note) => (
+                <Box key={note.id} sx={{ mb: 2 }}>
+                  <Typography variant="subtitle2">{note.user?.name}</Typography>
+                  <Typography>{note.content}</Typography>
+                </Box>
+              ))}
+            </Box>
+
+            <Box sx={{ mb: 4 }}>
+              <TextField
+                fullWidth
+                multiline
+                rows={4}
+                placeholder="Add a note..."
+                sx={{ mb: 2 }}
+              />
+              {onAddNote && (
+                <Button variant="contained" onClick={() => onAddNote('New note')}>
+                  Add Note
+                </Button>
+              )}
+            </Box>
+          </>
+        )}
       </Paper>
     </Box>
   );