diff --git a/apps/web/src/components/Settings/Settings.tsx b/apps/web/src/components/Settings/Settings.tsx
index 240e06d70a..bde547bffb 100644
--- a/apps/web/src/components/Settings/Settings.tsx
+++ b/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,7 +37,7 @@ function Settings({ queryRef }: Props) {
useClearURLQueryParams('settings');
- const logout = useLogout();
+ const logout = useLogout({ onLogout });
const handleSignOutClick = useCallback(() => {
logout();
@@ -44,7 +45,7 @@ function Settings({ queryRef }: Props) {
return (
<>
-
+ {header}
diff --git a/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx b/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx
index 5124d8786d..d23bcbcff6 100644
--- a/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx
+++ b/apps/web/src/contexts/globalLayout/GlobalNavbar/GalleryNavbar/GalleryRightContent.tsx
@@ -10,9 +10,11 @@ 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';
@@ -20,8 +22,10 @@ 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: ,
+ 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
- {shouldShowEditButton && (
+ {isViewingSignedInUser && (
@@ -167,6 +184,9 @@ export function GalleryRightContent({ queryRef, galleryRef, username }: GalleryR
)}
+ {isViewingSignedInUser && (
+ } />
+ )}
);
}
diff --git a/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx b/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx
index 566011e804..ddeb562ab0 100644
--- a/apps/web/src/contexts/globalLayout/GlobalSidebar/StandardSidebar.tsx
+++ b/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: ,
+ content: (
+ }
+ onLogout={hideDrawer}
+ />
+ ),
});
- }, [query, showDrawer, track]);
+ }, [hideDrawer, query, showDrawer, track]);
const handleNotificationsClick = useCallback(() => {
track('Sidebar Notifications Click');
diff --git a/apps/web/src/hooks/useLogout.ts b/apps/web/src/hooks/useLogout.ts
index 5958327412..f890f963b7 100644
--- a/apps/web/src/hooks/useLogout.ts
+++ b/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(
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]);
};
diff --git a/apps/web/src/scenes/Nuke/Nuke.tsx b/apps/web/src/scenes/Nuke/Nuke.tsx
index 8e78f0c686..96a3fd14a2 100644
--- a/apps/web/src/scenes/Nuke/Nuke.tsx
+++ b/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();