Fixed layout state sync issues (TryGhost#21443)

refs https://linear.app/ghost/issue/AP-544

useState was still called twice, we should have pulled that out - but
instead passing values down for now

apps/admin-x-activitypub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/admin-x-activitypub",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "MIT",
   "repository": {
     "type": "git",

apps/admin-x-activitypub/src/components/Inbox.tsx

@@ -19,7 +19,7 @@ interface InboxProps {}
 const Inbox: React.FC<InboxProps> = ({}) => {
     const [, setArticleContent] = useState<ObjectProperties | null>(null);
     const [, setArticleActor] = useState<ActorProperties | null>(null);
-    const {layout} = useLayout();
+    const {layout, setFeed, setInbox} = useLayout();
 
     const {
         data,
@@ -104,7 +104,7 @@ const Inbox: React.FC<InboxProps> = ({}) => {
 
     return (
         <>
-            <MainNavigation page='home'/>
+            <MainNavigation layout={layout} page='home' setFeed={setFeed} setInbox={setInbox}/>
             <div className='z-0 my-5 flex w-full flex-col'>
                 <div className='w-full px-8'>
                     {isLoading ? (

apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx

@@ -1,19 +1,23 @@
 import MainHeader from './MainHeader';
 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 {
     page: string;
+    layout?: 'feed' | 'inbox';
+    setFeed?: () => void;
+    setInbox?: () => void;
 }
 
 const MainNavigation: React.FC<MainNavigationProps> = ({
-    page = ''
+    page = '',
+    layout,
+    setFeed,
+    setInbox
 }) => {
     const {route, updateRoute} = useRouting();
     const mainRoute = route.split('/')[0];
-    const {layout, setFeed, setInbox} = useLayout();
 
     return (
         <MainHeader>

apps/admin-x-activitypub/src/hooks/layout.ts

@@ -14,5 +14,5 @@ export function useLayout() {
     const setFeed = () => setLayout('feed');
     const setInbox = () => setLayout('inbox');
 
-    return {layout, setInbox, setFeed};
+    return {layout, setInbox, setFeed} as {layout: Layout, setInbox: () => void, setFeed: () => void};
 }