TT-7035 Enhance OrgHead and related components for offline and mobile view

src/renderer/src/components/App/OrgHead.cy.tsx

@@ -966,4 +966,36 @@ describe('OrgHead', () => {
     // Sort Projects should be visible
     cy.contains('Sort Projects').should('be.visible');
   });
+
+  it('should not show Team Settings or Edit Workflow when mobile view is on at desktop width', () => {
+    cy.viewport(1024, 768);
+    cy.window().then((win) => {
+      win.localStorage.setItem(
+        localUserKey(LocalKey.mobileView),
+        'true'
+      );
+    });
+    const orgId = 'test-org-id';
+    const orgName = 'Test Organization';
+    const orgData = createMockOrganization(orgId, orgName);
+    const project1 = createMockProject('project-1', 'Project 1');
+    const project2 = createMockProject('project-2', 'Project 2');
+    const projectData = [project1, project2];
+
+    mountOrgHead(
+      createInitialState({ mobileView: true, offlineOnly: true }, orgData, projectData),
+      ['/team'],
+      orgId,
+      orgData,
+      true,
+      undefined,
+      projectData
+    );
+
+    cy.get('button').first().click();
+    cy.get('[role="menu"]').should('be.visible');
+    cy.contains('Team Settings').should('not.exist');
+    cy.contains('Edit Workflow').should('not.exist');
+    cy.contains('Sort Projects').should('be.visible');
+  });
 });

src/renderer/src/components/App/OrgHead.tsx

@@ -2,13 +2,7 @@ import { useContext, useEffect, useMemo, useState } from 'react';
 import { LocalKey, localUserKey } from '../../utils/localUserKey';
 import { useMobile } from '../../utils';
 import { useGlobal } from '../../context/useGlobal';
-import {
-  IconButton,
-  Menu,
-  MenuItem,
-  Stack,
-  Typography,
-} from '@mui/material';
+import { IconButton, Menu, MenuItem, Stack, Typography } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import UsersIcon from '@mui/icons-material/People';
 import { API_CONFIG } from '../../../api-variable';
@@ -44,7 +38,7 @@ export const OrgHead = () => {
   );
   const [sortVisible, setSortVisible] = useState(false);
   const [workflowVisible, setWorkflowVisible] = useState(false);
-  const { isMobileWidth } = useMobile();
+  const { isMobile } = useMobile();
   const commitTeamSettings = useCommitTeamSettings();
   const { pathname } = useLocation();
   const isTeamScreen = pathname.includes('/team');
@@ -56,6 +50,7 @@ export const OrgHead = () => {
   const [project] = useGlobal('project');
   const [offlineOnly] = useGlobal('offlineOnly');
   const [isOffline] = useGlobal('offline');
+  const [connected] = useGlobal('connected');
   const [width, setWidth] = useState(window.innerWidth);
 
   // keep track of screen width
@@ -73,12 +68,10 @@ export const OrgHead = () => {
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); //do this once to get the default;
 
   const orgId = useMemo(
     () => localStorage.getItem(localUserKey(LocalKey.team)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [user]
   );
 
@@ -107,8 +100,8 @@ export const OrgHead = () => {
   }, [orgId, teamProjects]);
 
   const canModify = useMemo(() => {
-    return (!isOffline && isAdmin) || offlineOnly;
-  }, [isAdmin, isOffline, offlineOnly]);
+    return (!isOffline && connected && isAdmin) || offlineOnly;
+  }, [isAdmin, isOffline, offlineOnly, connected]);
 
   const showSort = hasMoreThanOneProject && canModify;
 
@@ -179,9 +172,7 @@ export const OrgHead = () => {
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
-          maxWidth: isMobileWidth
-            ? width - MOBILE_HEADER_COMPONENTS_WIDTH
-            : '800px',
+          maxWidth: isMobile ? width - MOBILE_HEADER_COMPONENTS_WIDTH : '800px',
           alignItems: 'center',
           display: 'flex',
           mx: 1,
@@ -195,7 +186,7 @@ export const OrgHead = () => {
       </Typography>
       {isTeamScreen && (
         <>
-          {isAdmin && (!isMobileWidth || showSort) && (
+          {isAdmin && (!isMobile || showSort) && (
             <>
               <IconButton
                 onClick={handleSettingsMenuOpen}
@@ -208,12 +199,12 @@ export const OrgHead = () => {
                 open={Boolean(settingsMenuEl)}
                 onClose={handleSettingsMenuClose}
               >
-                {!isMobileWidth && (
+                {!isMobile && (
                   <MenuItem onClick={handleSettings}>
                     {cardStrings?.teamSettings || 'Team Settings'}
                   </MenuItem>
                 )}
-                {!isMobileWidth && canModify && (
+                {!isMobile && canModify && (
                   <MenuItem onClick={handleWorkflow}>
                     {cardStrings?.editWorkflow?.replace('{0}', '') ||
                       'Edit Workflow'}
@@ -258,7 +249,7 @@ export const OrgHead = () => {
         )}
         isOpen={openMember}
         onOpen={setOpenMember}
-        bp={isMobileWidth ? BigDialogBp.mobile : BigDialogBp.md}
+        bp={isMobile ? BigDialogBp.mobile : BigDialogBp.md}
       >
         <GroupTabs />
       </BigDialog>
@@ -277,7 +268,7 @@ export const OrgHead = () => {
           }
           isOpen={workflowVisible}
           onOpen={setWorkflowVisible}
-          bp={isMobileWidth ? BigDialogBp.mobile : BigDialogBp.md}
+          bp={isMobile ? BigDialogBp.mobile : BigDialogBp.md}
         >
           <StepEditor
             process={defaultWorkflow}
@@ -290,7 +281,7 @@ export const OrgHead = () => {
           title={cardStrings?.sortProjects}
           isOpen={sortVisible}
           onOpen={setSortVisible}
-          bp={isMobileWidth ? BigDialogBp.mobile : BigDialogBp.md}
+          bp={isMobile ? BigDialogBp.mobile : BigDialogBp.md}
         >
           <ProjectSort teamId={orgId} onClose={() => setSortVisible(false)} />
         </BigDialog>

src/renderer/src/components/Team/PersonalItem.tsx

@@ -21,6 +21,7 @@ export const PersonalItem = () => {
   const t = cardStrings;
   const [offlineOnly] = useGlobal('offlineOnly'); //will be constant here
   const [isOffline] = useGlobal('offline'); //verified this is not used in a function 2/18/25
+  const [connected] = useGlobal('connected');
   const [busy] = useGlobal('remoteBusy'); //verified this is not used in a function 2/18/25
   const orgs = useOrbitData<OrganizationD[]>('organization');
   const getGlobal = useGetGlobal();
@@ -36,7 +37,6 @@ export const PersonalItem = () => {
 
   const team = React.useMemo(
     () => orgs.find((o) => o.id === personalTeam),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [personalTeam, orgs]
   );
 
@@ -76,8 +76,8 @@ export const PersonalItem = () => {
   const handleEditWorkflow = () => {
     setShowWorkflow(true);
   };
-  const canModify = (offline: boolean, offlineOnly: boolean) =>
-    !offline || offlineOnly;
+  const canModify = (offline: boolean, offlineOnly: boolean, online: boolean) =>
+    (!offline && online) || offlineOnly;
 
   return (
     <TeamPaper id="PersonalItem">
@@ -94,17 +94,17 @@ export const PersonalItem = () => {
             sx={{ display: 'flex', justifyContent: 'flex-end' }}
           >
             {personalProjects.length > 1 &&
-              canModify(isOffline, offlineOnly) && (
+              canModify(isOffline, offlineOnly, connected) && (
                 <IconButton onClick={() => setSortVisible(true)}>
                   <SortIcon />
                 </IconButton>
               )}
-            {canModify(isOffline, offlineOnly) && (
+            {canModify(isOffline, offlineOnly, connected) && (
               <AltButton id="editWorkflow" onClick={handleEditWorkflow}>
                 {t.editWorkflow.replace('{0}', '')}
               </AltButton>
             )}
-            {canModify(isOffline, offlineOnly) && (
+            {canModify(isOffline, offlineOnly, connected) && (
               <AltButton
                 id="teamSettings"
                 onClick={handleSettings}

src/renderer/src/components/Team/ProjectMenu.tsx

@@ -61,7 +61,7 @@ export function ProjectMenu(props: IProps) {
   const offlineProjectRead = useOfflnProjRead();
   const [projType, setProjType] = useState('');
   const t: ICardsStrings = useSelector(cardsSelector, shallowEqual);
-  const { isMobileWidth } = useMobile();
+  const { isMobile } = useMobile();
   const tpb: IProjButtonsStrings = useSelector(
     projButtonsSelector,
     shallowEqual
@@ -108,18 +108,15 @@ export function ProjectMenu(props: IProps) {
         open={Boolean(anchorEl)}
         onClose={handle('Close')}
       >
-        {!isMobileWidth &&
-          !inProject &&
-          isAdmin &&
-          (!isOffline || offlineOnly) && (
-            <StyledMenuItem id="projMenuSettings" onClick={handle('settings')}>
-              <ListItemIcon>
-                <SettingsIcon />
-              </ListItemIcon>
-              <ListItemText primary={t.settings} />
-            </StyledMenuItem>
-          )}
-        {!isMobileWidth && !inProject && isAdmin && !isOffline && (
+        {!isMobile && !inProject && isAdmin && (!isOffline || offlineOnly) && (
+          <StyledMenuItem id="projMenuSettings" onClick={handle('settings')}>
+            <ListItemIcon>
+              <SettingsIcon />
+            </ListItemIcon>
+            <ListItemText primary={t.settings} />
+          </StyledMenuItem>
+        )}
+        {!isMobile && !inProject && isAdmin && !isOffline && (
           <StyledMenuItem id="projMenuCopy" onClick={handle('copyproject')}>
             <ListItemIcon>
               <ContentCopyIcon />
@@ -148,7 +145,7 @@ export function ProjectMenu(props: IProps) {
           </StyledMenuItem>
         )} */}
         {!justFilter &&
-          !isMobileWidth &&
+          !isMobile &&
           pathname &&
           projType.toLowerCase() === 'scripture' &&
           pathname.indexOf(ArtifactTypeSlug.Retell) === -1 &&
@@ -160,20 +157,17 @@ export function ProjectMenu(props: IProps) {
               <ListItemText primary={addPt(tpb.integrations)} />
             </StyledMenuItem>
           )}
-        {!isMobileWidth &&
-          !inProject &&
-          (!isOffline || offlineOnly) &&
-          isAdmin && (
-            <StyledMenuItem id="projMenuCat" onClick={handle('category')}>
-              <ListItemIcon>
-                <EditIcon />
-              </ListItemIcon>
-              <ListItemText
-                primary={!isPersonal ? t.editCategory : t.editPersonalCategory}
-              />
-            </StyledMenuItem>
-          )}
-        {!isMobileWidth && !justFilter && isAdmin && !inProject && (
+        {!isMobile && !inProject && (!isOffline || offlineOnly) && isAdmin && (
+          <StyledMenuItem id="projMenuCat" onClick={handle('category')}>
+            <ListItemIcon>
+              <EditIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary={!isPersonal ? t.editCategory : t.editPersonalCategory}
+            />
+          </StyledMenuItem>
+        )}
+        {!isMobile && !justFilter && isAdmin && !inProject && (
           <StyledMenuItem id="projMenuImp" onClick={handle('import')}>
             <ListItemIcon>
               <ImportIcon />
@@ -199,7 +193,7 @@ export function ProjectMenu(props: IProps) {
         ) : (
           (!isOffline || offlineOnly) &&
           isAdmin &&
-          !isMobileWidth && (
+          !isMobile && (
             <StyledMenuItem id="projMenuDel" onClick={handle('delete')}>
               <ListItemIcon>
                 <DeleteIcon />

src/renderer/src/components/Team/TeamItem.tsx

@@ -28,6 +28,7 @@ export const TeamItem = (props: IProps) => {
   const { team } = props;
   const [offline] = useGlobal('offline'); //verified this is not used in a function 2/18/25
   const [offlineOnly] = useGlobal('offlineOnly'); //will be constant here
+  const [connected] = useGlobal('connected');
   const [, setOrganization] = useGlobal('organization');
   const [busy] = useGlobal('remoteBusy'); //verified this is not used in a function 2/18/25
   const [editOpen, setEditOpen] = useState(false);
@@ -93,8 +94,8 @@ export const TeamItem = (props: IProps) => {
   };
 
   const canModify = useMemo(() => {
-    return (!offline && isAdmin(team)) || offlineOnly;
-  }, [offline, team, offlineOnly, isAdmin]);
+    return (!offline && connected && isAdmin(team)) || offlineOnly;
+  }, [offline, team, offlineOnly, isAdmin, connected]);
 
   return (
     <TeamPaper id="TeamItem">

src/renderer/src/routes/ProjectsScreen.tsx

@@ -52,10 +52,13 @@ export const ProjectsScreenInner: React.FC = () => {
   const [plan] = useGlobal('plan');
   const [memory] = useGlobal('memory');
   const [home, setHome] = useGlobal('home');
+  const [connected] = useGlobal('connected');
+  const [isOffline] = useGlobal('offline');
+  const [offlineOnly] = useGlobal('offlineOnly');
   const unsavedCtx = React.useContext(UnsavedContext);
   const { startClear, startSave, waitForSave } = unsavedCtx.state;
   const getGlobal = useGetGlobal();
-  const { isMobileWidth } = useMobile();
+  const { isMobile } = useMobile();
 
   const handleSwitchTeams = React.useCallback(() => {
     localStorage.removeItem(LocalKey.plan);
@@ -193,8 +196,12 @@ export const ProjectsScreenInner: React.FC = () => {
   }, [plan, pathname, home]);
 
   const showAddButton = React.useMemo(() => {
-    return thisTeam && isAdmin(thisTeam);
-  }, [thisTeam, isAdmin]);
+    const canAdd =
+      ((!isOffline && connected) || offlineOnly) &&
+      thisTeam &&
+      isAdmin(thisTeam);
+    return Boolean(canAdd);
+  }, [thisTeam, isAdmin, connected, isOffline, offlineOnly]);
 
   // Early return when teamId is missing to prevent errors in derived values
   if (!teamId) {
@@ -206,7 +213,7 @@ export const ProjectsScreenInner: React.FC = () => {
       <AppHead />
       <ProjectsBox
         id="ProjectsScreen"
-        isMobile={isMobileWidth}
+        isMobile={isMobile}
         sx={{
           paddingTop: '80px',
           px: 2,

src/renderer/src/routes/SwitchTeams.tsx

@@ -32,7 +32,7 @@ const SettingsButton = ({ label, onOpenSettings }: ISettingsButtonProps) => {
   const theme = useTheme();
   const bgColor = theme.palette.primary.light;
   const contrastColor = theme.palette.getContrastText(bgColor);
-  const { isMobileWidth } = useMobile();
+  const { isMobile } = useMobile();
 
   return (
     <IconButton
@@ -43,7 +43,7 @@ const SettingsButton = ({ label, onOpenSettings }: ISettingsButtonProps) => {
         onOpenSettings();
       }}
       sx={(theme) => ({
-        color: isMobileWidth ? 'inherit' : theme.palette.primary.light,
+        color: isMobile ? 'inherit' : theme.palette.primary.light,
         transition: 'background-color .2s, color .2s',
         '&:hover': {
           color: contrastColor,
@@ -75,7 +75,7 @@ const TeamCard = ({ label, teamId, name, onOpenSettings }: ITeamCardProps) => {
   const ctx = React.useContext(TeamContext);
   const { isAdmin, teams, personalTeam } = ctx.state;
   const teamRec = teams.find((t) => t.id === teamId);
-  const { isMobileWidth: mobileWidth } = useMobile();
+  const { isMobile } = useMobile();
   // For personal team, always show settings button (user owns it)
   // For other teams, show settings button only if user is admin
   const isPersonalTeam = teamId === personalTeam;
@@ -112,7 +112,7 @@ const TeamCard = ({ label, teamId, name, onOpenSettings }: ITeamCardProps) => {
         >
           {name}
         </Typography>
-        {showSettings && !mobileWidth && (
+        {showSettings && !isMobile && (
           <SettingsButton label={label} onOpenSettings={onOpenSettings} />
         )}
       </Box>