diff --git a/apps/admin-x-activitypub/package.json b/apps/admin-x-activitypub/package.json index ae4a007c86..2e432a0c3a 100644 --- a/apps/admin-x-activitypub/package.json +++ b/apps/admin-x-activitypub/package.json @@ -1,6 +1,6 @@ { "name": "@tryghost/admin-x-activitypub", - "version": "0.2.0", + "version": "0.3.0", "license": "MIT", "repository": { "type": "git", diff --git a/apps/admin-x-activitypub/src/components/Activities.tsx b/apps/admin-x-activitypub/src/components/Activities.tsx index f822569100..66b45f7de5 100644 --- a/apps/admin-x-activitypub/src/components/Activities.tsx +++ b/apps/admin-x-activitypub/src/components/Activities.tsx @@ -168,7 +168,7 @@ const Activities: React.FC = ({}) => { return ( <> - +
{ isLoading && (
diff --git a/apps/admin-x-activitypub/src/components/Inbox.tsx b/apps/admin-x-activitypub/src/components/Inbox.tsx index f234b9467c..3a359e6075 100644 --- a/apps/admin-x-activitypub/src/components/Inbox.tsx +++ b/apps/admin-x-activitypub/src/components/Inbox.tsx @@ -11,6 +11,7 @@ import getUsername from '../utils/get-username'; import {ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub'; import {Button, Heading, LoadingIndicator} from '@tryghost/admin-x-design-system'; import {useActivitiesForUser, useSuggestedProfiles} from '../hooks/useActivityPubQueries'; +import {useLayout} from '../hooks/layout'; import {useRouting} from '@tryghost/admin-x-framework/routing'; interface InboxProps {} @@ -18,7 +19,7 @@ interface InboxProps {} const Inbox: React.FC = ({}) => { const [, setArticleContent] = useState(null); const [, setArticleActor] = useState(null); - const [layout, setLayout] = useState('inbox'); + const {layout} = useLayout(); const { data, @@ -74,10 +75,6 @@ const Inbox: React.FC = ({}) => { return attributedTo; } - const handleLayoutChange = (newLayout: string) => { - setLayout(newLayout); - }; - // Intersection observer to fetch more activities when the user scrolls // to the bottom of the page const observerRef = useRef(null); @@ -107,7 +104,7 @@ const Inbox: React.FC = ({}) => { return ( <> - +
{isLoading ? ( diff --git a/apps/admin-x-activitypub/src/components/Profile.tsx b/apps/admin-x-activitypub/src/components/Profile.tsx index b13e58184e..7edad06225 100644 --- a/apps/admin-x-activitypub/src/components/Profile.tsx +++ b/apps/admin-x-activitypub/src/components/Profile.tsx @@ -285,7 +285,7 @@ const Profile: React.FC = ({}) => { return ( <> - +
{userProfile?.image && (
diff --git a/apps/admin-x-activitypub/src/components/Search.tsx b/apps/admin-x-activitypub/src/components/Search.tsx index 90938d52d4..0985397f48 100644 --- a/apps/admin-x-activitypub/src/components/Search.tsx +++ b/apps/admin-x-activitypub/src/components/Search.tsx @@ -106,7 +106,7 @@ const Search: React.FC = ({}) => { return ( <> - +
diff --git a/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx b/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx index 58b2cc787a..8828ae1045 100644 --- a/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx +++ b/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx @@ -1,27 +1,19 @@ import MainHeader from './MainHeader'; -import React, {useEffect, useState} from 'react'; +import React from 'react'; import {Button, Tooltip} from '@tryghost/admin-x-design-system'; +import {useLayout} from '../../hooks/layout'; import {useRouting} from '@tryghost/admin-x-framework/routing'; interface MainNavigationProps { - title?: string; - page?: string; - onLayoutChange?: (layout: string) => void; + page: string; } const MainNavigation: React.FC = ({ - page = '', - onLayoutChange + page = '' }) => { const {route, updateRoute} = useRouting(); const mainRoute = route.split('/')[0]; - const [layout, setLayout] = useState('inbox'); - - useEffect(() => { - if (onLayoutChange) { - onLayoutChange(layout); - } - }, [layout, onLayoutChange]); + const {layout, setFeed, setInbox} = useLayout(); return ( @@ -35,14 +27,10 @@ const MainNavigation: React.FC = ({ {page === 'home' &&
-
} @@ -51,4 +39,4 @@ const MainNavigation: React.FC = ({ ); }; -export default MainNavigation; \ No newline at end of file +export default MainNavigation; diff --git a/apps/admin-x-activitypub/src/hooks/layout.ts b/apps/admin-x-activitypub/src/hooks/layout.ts new file mode 100644 index 0000000000..b65b44327c --- /dev/null +++ b/apps/admin-x-activitypub/src/hooks/layout.ts @@ -0,0 +1,18 @@ +import {useEffect, useState} from 'react'; + +export type Layout = 'feed' | 'inbox'; + +export function useLayout() { + const [layout, setLayout] = useState(() => { + return localStorage.getItem('AP:currentLayout') || 'inbox'; + }); + + useEffect(() => { + localStorage.setItem('AP:currentLayout', layout); + }, [layout]); + + const setFeed = () => setLayout('feed'); + const setInbox = () => setLayout('inbox'); + + return {layout, setInbox, setFeed}; +}