💄 LoggedInHeader styling + functionality

Move "manage folder" from 'folder area' to 'admin bar' so it's clearer that it's an admin action and it's more consistent between admin view and user view
IsaacInsoll · Nov 27, 2024 · 921b3fa · 921b3fa
1 parent 173edfa
commit 921b3fa
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 81 deletions.
diff --git a/frontend/src/components/FolderHeader/FolderHeader.tsx b/frontend/src/components/FolderHeader/FolderHeader.tsx
@@ -92,10 +92,10 @@ const HeaderWrapper = ({
           <Text>{subtitle}</Text>
         </Grid.Col>
         <Grid.Col span={{ xs: 12, sm: 6 }}>
-          <Flex hiddenFrom="md" justify="space-evenly" pb="md">
+          <Flex hiddenFrom="sm" justify="space-evenly" pb="md">
             {actions}
           </Flex>
-          <Flex visibleFrom="md" justify="flex-end">
+          <Flex visibleFrom="sm" justify="flex-end">
             {actions}
           </Flex>
         </Grid.Col>

diff --git a/frontend/src/components/Header/LoggedInHeader.tsx b/frontend/src/components/Header/LoggedInHeader.tsx
@@ -7,60 +7,120 @@ import { PicrLogo } from '../../pages/LoginForm';
 import { PicrAvatar } from '../PicrAvatar';
 import { useSetFolder } from '../../hooks/useSetFolder';
 import { useQuickFind } from '../QuickFind/useQuickFind';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { LogOutIcon, SearchIcon, UserSettingsIcon } from '../../PicrIcons';
 import { useSetAtom } from 'jotai/index';
 import { authKeyAtom } from '../../atoms/authAtom';
+import { TbFolder, TbFolderStar, TbFolderUp, TbHome } from 'react-icons/tb';
+import { MinimalFolder } from '../../../types';
+import { useBaseViewFolderURL } from '../../hooks/useBaseViewFolderURL';
+import { useQuery } from 'urql';
+import { viewFolderQuery } from '../../urql/queries/viewFolderQuery';
+import { useRequery } from '../../hooks/useRequery';
+import { useCallback } from 'react';
+import { useIsMobile } from '../../hooks/useIsMobile';
 
-export const LoggedInHeader = () => {
+export const LoggedInHeader = ({
+  folder,
+  managing,
+}: {
+  folder?: MinimalFolder;
+  managing?: boolean;
+}) => {
   const me = useMe();
   return (
     <header className={classes.header}>
       <Page>
         <Group>
-          <LeftSide me={me} />
+          <LeftSide me={me} folder={folder} managing={managing} />
           <RightSide me={me} />
         </Group>
       </Page>
     </header>
   );
 };
 
-const LeftSide = ({ me }) => {
+const LeftSide = ({
+  me,
+  folder,
+  managing,
+}: {
+  me: User;
+  folder?: MinimalFolder;
+  managing?: boolean;
+}) => {
+  const isMobile = useIsMobile();
   const setFolder = useSetFolder();
   const [, setOpened] = useQuickFind();
-  const navigate = useNavigate();
   return (
     <Box style={{ flexGrow: 1 }}>
       <Group gap="md">
-        <Button
-          onClick={() => {
-            setFolder(me.folder);
-          }}
-          leftSection={<PicrLogo style={{ maxWidth: 16 }} />}
-          variant="subtle"
-          color="gray"
-          size="xs"
-        >
-          {me.folder?.name ?? 'Home'}
-        </Button>
-
-        <ActionIcon
-          variant="subtle"
-          color="gray"
-          onClick={() => {
-            setOpened(true);
-          }}
-        >
-          <SearchIcon />
-        </ActionIcon>
+        {folder ? (
+          <ManageFolderButton folder={folder} managing={managing} />
+        ) : null}
+        {!isMobile ? (
+          <>
+            <Button
+              onClick={() => {
+                setFolder(me.folder);
+              }}
+              leftSection={<PicrLogo style={{ maxWidth: 16 }} />}
+              variant="subtle"
+              color="gray"
+              size="xs"
+            >
+              {me.folder?.name ?? 'Home'}
+            </Button>{' '}
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              onClick={() => {
+                setOpened(true);
+              }}
+            >
+              <SearchIcon />
+            </ActionIcon>
+          </>
+        ) : null}
       </Group>
     </Box>
   );
 };
 
+const ManageFolderButton = ({
+  folder,
+  managing,
+}: {
+  folder: MinimalFolder;
+  managing: boollean;
+}) => {
+  const navigate = useNavigate();
+  const baseUrl = useBaseViewFolderURL();
+  // const setFolder = useSetFolder();
+
+  const toggleManaging = useCallback(() => {
+    navigate(baseUrl + folder.id + (managing ? '' : '/manage'));
+  }, [navigate, baseUrl, folder.id, managing]);
+
+  const icon = managing ? <TbFolder /> : <TbFolderStar />;
+
+  return (
+    <Button
+      variant="outline"
+      onClick={toggleManaging}
+      leftSection={icon}
+      size="xs"
+    >
+      {managing ? 'View' : 'Manage'} folder
+    </Button>
+  );
+};
+
 const RightSide = ({ me }) => {
   const navigate = useNavigate();
+  const setFolder = useSetFolder();
+  const [, setOpened] = useQuickFind();
+
   const logOut = useLogout();
   return (
     <Menu
@@ -82,6 +142,16 @@ const RightSide = ({ me }) => {
       </Menu.Target>
 
       <Menu.Dropdown>
+        <Menu.Label>Files & Folders</Menu.Label>
+        <Menu.Item
+          leftSection={<TbHome />}
+          onClick={() => setFolder(me.folder)}
+        >
+          {me.folder?.name ?? 'Home'}
+        </Menu.Item>
+        <Menu.Item leftSection={<SearchIcon />} onClick={() => setOpened(true)}>
+          Search
+        </Menu.Item>
         <Menu.Label>PICR</Menu.Label>
         <Menu.Item
           leftSection={<UserSettingsIcon />}
@@ -91,7 +161,7 @@ const RightSide = ({ me }) => {
         </Menu.Item>
         <Menu.Item leftSection={<LogOutIcon />} onClick={logOut}>
           Log out
-        </Menu.Item>{' '}
+        </Menu.Item>
       </Menu.Dropdown>
     </Menu>
   );

diff --git a/frontend/src/components/UserProvider.tsx b/frontend/src/components/UserProvider.tsx
@@ -7,7 +7,6 @@ export const UserProvider = () => {
   const me = useMe();
   return (
     <>
-      {me?.isUser ? <LoggedInHeader /> : null}
       <Router loggedIn={!!me} />
     </>
   );

diff --git a/frontend/src/pages/ViewFolder.tsx b/frontend/src/pages/ViewFolder.tsx
@@ -23,6 +23,8 @@ import { Page } from '../components/Page';
 import { useBaseViewFolderURL } from '../hooks/useBaseViewFolderURL';
 import { QuickFind } from '../components/QuickFind/QuickFind';
 import { useRequery } from '../hooks/useRequery';
+import { LoggedInHeader } from '../components/Header/LoggedInHeader';
+import { useIsMobile } from '../hooks/useIsMobile';
 
 export const ViewFolder = () => {
   const { folderId } = useParams();
@@ -71,19 +73,19 @@ export const ViewFolderBody = () => {
   }, [folderId, fileId, managing]);
 
   const actions = [];
-  if (folder?.permissions === 'Admin') {
-    actions.push(
-      <Button
-        key="manage"
-        variant={managing ? 'filled' : 'default'}
-        title={managing ? 'View Folder' : 'Manage'}
-        onClick={toggleManaging}
-        leftSection={<TbSettings />}
-      >
-        Manage
-      </Button>,
-    );
-  }
+  // if (folder?.permissions === 'Admin') {
+  //   actions.push(
+  //     <Button
+  //       key="manage"
+  //       variant={managing ? 'filled' : 'default'}
+  //       title={managing ? 'View Folder' : 'Manage'}
+  //       onClick={toggleManaging}
+  //       leftSection={<TbSettings />}
+  //     >
+  //       Manage
+  //     </Button>,
+  //   );
+  // }
   if (hasFiles) {
     actions.push(<FilterToggle disabled={managing} key="filtertoggle" />);
   }
@@ -98,6 +100,7 @@ export const ViewFolderBody = () => {
 
   return (
     <>
+      <LoggedInHeader folder={folder} managing={managing} />
       <QuickFind folder={folder} />
       <QueryFeedback result={data} reQuery={reQuery} />
       {!folder ? (

diff --git a/frontend/src/pages/management/Settings.tsx b/frontend/src/pages/management/Settings.tsx
@@ -13,6 +13,7 @@ import { Tips } from '../../components/Tips';
 import { TaskSummary } from '../../components/TaskSummary';
 import { PicrTitle } from '../../components/PicrTitle';
 import { QuickFind } from '../../components/QuickFind/QuickFind';
+import { LoggedInHeader } from '../../components/Header/LoggedInHeader';
 
 export const Settings = () => {
   const { tab } = useParams();
@@ -26,44 +27,47 @@ export const Settings = () => {
   const title = 'PICR Settings';
 
   return (
-    <Page>
-      <QuickFind folder={me.folder} />
-      <TopBar title={title} />
-      <TaskSummary folderId={me?.folderId} />
-      <Tabs value={tab ?? 'users'} onChange={onTabChange} keepMounted={false}>
-        <Tabs.List>
-          {tabList.map(({ title, slug, icon }) => (
-            <Tabs.Tab value={slug} leftSection={icon} key={slug}>
-              {title}
-            </Tabs.Tab>
-          ))}
-        </Tabs.List>
-        <Tabs.Panel value="users">
-          <Tips type="Users" />
-          <Suspense fallback={<LoadingIndicator />}>
-            <PicrTitle title={['Users', title]} />
-            <ManageUsers />
-          </Suspense>
-        </Tabs.Panel>
-        <Tabs.Panel value="links">
-          <Tips type="PublicLink" />
-          <Suspense fallback={<LoadingIndicator />}>
-            <PicrTitle title={['Links', title]} />
-            <ManagePublicLinks
-              folder={me.folder}
-              disableAddingLinks={true}
-              relations="children"
-            />
-          </Suspense>
-        </Tabs.Panel>
-        <Tabs.Panel value="info">
-          <Suspense fallback={<LoadingIndicator />}>
-            <PicrTitle title={['Server Info', title]} />
-            <ServerInfo />
-          </Suspense>
-        </Tabs.Panel>
-      </Tabs>
-    </Page>
+    <>
+      <LoggedInHeader />
+      <Page>
+        <QuickFind folder={me.folder} />
+        <TopBar title={title} />
+        <TaskSummary folderId={me?.folderId} />
+        <Tabs value={tab ?? 'users'} onChange={onTabChange} keepMounted={false}>
+          <Tabs.List>
+            {tabList.map(({ title, slug, icon }) => (
+              <Tabs.Tab value={slug} leftSection={icon} key={slug}>
+                {title}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          <Tabs.Panel value="users">
+            <Tips type="Users" />
+            <Suspense fallback={<LoadingIndicator />}>
+              <PicrTitle title={['Users', title]} />
+              <ManageUsers />
+            </Suspense>
+          </Tabs.Panel>
+          <Tabs.Panel value="links">
+            <Tips type="PublicLink" />
+            <Suspense fallback={<LoadingIndicator />}>
+              <PicrTitle title={['Links', title]} />
+              <ManagePublicLinks
+                folder={me.folder}
+                disableAddingLinks={true}
+                relations="children"
+              />
+            </Suspense>
+          </Tabs.Panel>
+          <Tabs.Panel value="info">
+            <Suspense fallback={<LoadingIndicator />}>
+              <PicrTitle title={['Server Info', title]} />
+              <ServerInfo />
+            </Suspense>
+          </Tabs.Panel>
+        </Tabs>
+      </Page>
+    </>
   );
 };