GAL-4339 add settings back to moweb (#1972)

* add settings back to moweb

* change order of icons and only show if own profile

apps/web/src/components/Settings/Settings.tsx

@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import breakpoints from '~/components/core/breakpoints';
 import { Button } from '~/components/core/Button/Button';
 import { HStack, VStack } from '~/components/core/Spacer/Stack';
-import DrawerHeader from '~/contexts/globalLayout/GlobalSidebar/DrawerHeader';
 import { SettingsFragment$key } from '~/generated/SettingsFragment.graphql';
 import { useLogout } from '~/hooks/useLogout';
 import colors from '~/shared/theme/colors';
@@ -19,9 +18,11 @@ import MobileAuthManagerSection from './MobileAuthManagerSection/MobileAuthManag
 
 type Props = {
   queryRef: SettingsFragment$key;
+  onLogout?: () => void;
+  header?: React.ReactNode;
 };
 
-function Settings({ queryRef }: Props) {
+function Settings({ queryRef, onLogout, header }: Props) {
   const query = useFragment(
     graphql`
       fragment SettingsFragment on Query {
@@ -36,15 +37,15 @@ function Settings({ queryRef }: Props) {
 
   useClearURLQueryParams('settings');
 
-  const logout = useLogout();
+  const logout = useLogout({ onLogout });
 
   const handleSignOutClick = useCallback(() => {
     logout();
   }, [logout]);
 
   return (
     <>
-      <DrawerHeader headerText="Settings" />
+      {header}
       <StyledContentWrapper>
         <StyledSettings gap={12}>
           <SettingsContents gap={24}>

apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx

@@ -10,18 +10,22 @@ import { Dropdown } from '~/components/core/Dropdown/Dropdown';
 import { DropdownItem } from '~/components/core/Dropdown/DropdownItem';
 import { DropdownLink } from '~/components/core/Dropdown/DropdownLink';
 import { DropdownSection } from '~/components/core/Dropdown/DropdownSection';
+import IconContainer from '~/components/core/IconContainer';
 import { HStack, VStack } from '~/components/core/Spacer/Stack';
 import FollowButton from '~/components/Follow/FollowButton';
 import useCreateGallery from '~/components/MultiGallery/useCreateGallery';
+import Settings from '~/components/Settings/Settings';
 import { EditLink } from '~/contexts/globalLayout/GlobalNavbar/CollectionNavbar/EditLink';
 import { SignInButton } from '~/contexts/globalLayout/GlobalNavbar/SignInButton';
 import { useModalActions } from '~/contexts/modal/ModalContext';
 import { useToastActions } from '~/contexts/toast/ToastContext';
 import { GalleryRightContentFragment$key } from '~/generated/GalleryRightContentFragment.graphql';
 import { GalleryRightContentGalleryFragment$key } from '~/generated/GalleryRightContentGalleryFragment.graphql';
 import { useIsMobileOrMobileLargeWindowWidth } from '~/hooks/useWindowSize';
+import CogIcon from '~/icons/CogIcon';
 import EditUserInfoModal from '~/scenes/UserGalleryPage/EditUserInfoModal';
 import LinkButton from '~/scenes/UserGalleryPage/LinkButton';
+import { useTrack } from '~/shared/contexts/AnalyticsContext';
 
 import { SignUpButton } from '../SignUpButton';
 import QRCodeButton from './QRCodeButton';
@@ -57,6 +61,8 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR
             ...FollowButtonUserFragment
           }
         }
+
+        ...SettingsFragment
       }
     `,
     queryRef
@@ -98,7 +104,7 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR
     });
   }, [query, showModal]);
 
-  const shouldShowEditButton = useMemo(() => {
+  const isViewingSignedInUser = useMemo(() => {
     return Boolean(
       query.viewer &&
         'user' in query.viewer &&
@@ -120,6 +126,8 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR
   const isMobile = useIsMobileOrMobileLargeWindowWidth();
   const [showDropdown, setShowDropdown] = useState(false);
 
+  const track = useTrack();
+
   const handleEditClick = useCallback(() => {
     setShowDropdown((previous) => !previous);
   }, []);
@@ -128,6 +136,15 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR
     setShowDropdown(false);
   }, []);
 
+  const handleSettingsClick = useCallback(() => {
+    track('Sidebar Settings Click');
+    showModal({
+      content: <Settings queryRef={query} />,
+      headerText: 'Settings',
+      isFullPage: true,
+    });
+  }, [query, showModal, track]);
+
   const editGalleryUrl: Route | null = useMemo(() => {
     if (!gallery?.dbid) {
       return null;
@@ -155,7 +172,7 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR
       <HStack gap={8} align="center">
         <QRCodeButton username={username} />
         <LinkButton textToCopy={`https://gallery.so/${username}`} />
-        {shouldShowEditButton && (
+        {isViewingSignedInUser && (
           <EditLinkWrapper>
             <EditLink role="button" onClick={handleEditClick} />
 
@@ -167,6 +184,9 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR
             <FollowButton queryRef={query} userRef={query.userByUsername} source="navbar mobile" />
           </Suspense>
         )}
+        {isViewingSignedInUser && (
+          <IconContainer onClick={handleSettingsClick} variant="default" icon={<CogIcon />} />
+        )}
       </HStack>
     );
   }

apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx

@@ -29,6 +29,7 @@ import UserIcon from '~/icons/UserIcon';
 import { useTrack } from '~/shared/contexts/AnalyticsContext';
 import useExperience from '~/utils/graphql/experiences/useExperience';
 
+import DrawerHeader from './DrawerHeader';
 import { useDrawerActions, useDrawerState } from './SidebarDrawerContext';
 import SidebarIcon from './SidebarIcon';
 import SidebarPfp from './SidebarPfp';
@@ -103,9 +104,15 @@ export function StandardSidebar({ queryRef }: Props) {
   const handleSettingsClick = useCallback(() => {
     track('Sidebar Settings Click');
     showDrawer({
-      content: <Settings queryRef={query} />,
+      content: (
+        <Settings
+          queryRef={query}
+          header={<DrawerHeader headerText="Settings" />}
+          onLogout={hideDrawer}
+        />
+      ),
     });
-  }, [query, showDrawer, track]);
+  }, [hideDrawer, query, showDrawer, track]);
 
   const handleNotificationsClick = useCallback(() => {
     track('Sidebar Notifications Click');

apps/web/src/hooks/useLogout.ts

@@ -1,12 +1,15 @@
 import { startTransition, useCallback, useContext } from 'react';
 import { graphql } from 'react-relay';
 
-import { useDrawerActions } from '~/contexts/globalLayout/GlobalSidebar/SidebarDrawerContext';
 import { RelayResetContext } from '~/contexts/RelayResetContext';
 import { useLogoutMutation } from '~/generated/useLogoutMutation.graphql';
 import { usePromisifiedMutation } from '~/shared/relay/usePromisifiedMutation';
 
-export const useLogout = () => {
+type Props = {
+  onLogout?: () => void;
+};
+
+export const useLogout = ({ onLogout }: Props) => {
   const [logout] = usePromisifiedMutation<useLogoutMutation>(
     graphql`
       mutation useLogoutMutation {
@@ -19,8 +22,6 @@ export const useLogout = () => {
 
   const reset = useContext(RelayResetContext);
 
-  const { hideDrawer } = useDrawerActions();
-
   return useCallback(async () => {
     await logout({
       variables: {},
@@ -29,8 +30,11 @@ export const useLogout = () => {
     // Wipe the relay cache and show the old content while
     // the new content is loading in the background.
     startTransition(() => {
-      hideDrawer();
+      if (onLogout) {
+        onLogout();
+      }
+
       reset?.();
     });
-  }, [hideDrawer, logout, reset]);
+  }, [logout, onLogout, reset]);
 };

apps/web/src/scenes/Nuke/Nuke.tsx

@@ -8,7 +8,7 @@ import { useLogout } from '~/hooks/useLogout';
 
 // Suggest a user visit this page if they're in a seriously broken state
 function Nuke() {
-  const logout = useLogout();
+  const logout = useLogout({});
 
   useEffect(() => {
     logout();