Persisted activitypub layout to localstorage

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

We're releasing this change immediately with v0.3.0
Also cleans up some props for the MainNavigation component.

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",

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

@@ -168,7 +168,7 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
 
     return (
         <>
-            <MainNavigation title='Activities' />
+            <MainNavigation page='activities'/>
             <div className='z-0 flex w-full flex-col items-center'>
                 {
                     isLoading && (<div className='mt-8 flex flex-col items-center justify-center space-y-4 text-center'>

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<InboxProps> = ({}) => {
     const [, setArticleContent] = useState<ObjectProperties | null>(null);
     const [, setArticleActor] = useState<ActorProperties | null>(null);
-    const [layout, setLayout] = useState('inbox');
+    const {layout} = useLayout();
 
     const {
         data,
@@ -74,10 +75,6 @@ const Inbox: React.FC<InboxProps> = ({}) => {
         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<IntersectionObserver | null>(null);
@@ -107,7 +104,7 @@ const Inbox: React.FC<InboxProps> = ({}) => {
 
     return (
         <>
-            <MainNavigation page='home' title="Home" onLayoutChange={handleLayoutChange} />
+            <MainNavigation page='home'/>
             <div className='z-0 my-5 flex w-full flex-col'>
                 <div className='w-full px-8'>
                     {isLoading ? (

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

@@ -285,7 +285,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
 
     return (
         <>
-            <MainNavigation title='Profile' />
+            <MainNavigation page='profile' />
             <div className='z-0 mx-auto mt-8 flex w-full max-w-[580px] flex-col items-center pb-16'>
                 <div className='mx-auto w-full'>
                     {userProfile?.image && (<div className='h-[200px] w-full overflow-hidden rounded-lg bg-gradient-to-tr from-grey-200 to-grey-100'>

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

@@ -106,7 +106,7 @@ const Search: React.FC<SearchProps> = ({}) => {
 
     return (
         <>
-            <MainNavigation title='Search' />
+            <MainNavigation page='search' />
             <div className='z-0 flex w-full flex-col items-center pt-8'>
                 <div className='relative flex w-full max-w-[560px] items-center '>
                     <Icon className='absolute left-3 top-3 z-10' colorClass='text-grey-500' name='magnifying-glass' size='sm' />

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<MainNavigationProps> = ({
-    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 (
         <MainHeader>
@@ -35,14 +27,10 @@ const MainNavigation: React.FC<MainNavigationProps> = ({
                 {page === 'home' &&
                 <div className='mr-3'>
                     <Tooltip content="Inbox">
-                        <Button className='!px-2' icon='listview' iconColorClass={layout === 'inbox' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
-                            setLayout('inbox');
-                        }} />
+                        <Button className='!px-2' icon='listview' iconColorClass={layout === 'inbox' ? 'text-black' : 'text-grey-400'} size='sm' onClick={setInbox} />
                     </Tooltip>
                     <Tooltip content="Feed">
-                        <Button className='!px-2' icon='card-list' iconColorClass={layout === 'feed' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
-                            setLayout('feed');
-                        }} />
+                        <Button className='!px-2' icon='card-list' iconColorClass={layout === 'feed' ? 'text-black' : 'text-grey-400'} size='sm' onClick={setFeed} />
                     </Tooltip>
                 </div>
                 }
@@ -51,4 +39,4 @@ const MainNavigation: React.FC<MainNavigationProps> = ({
     );
 };
 
-export default MainNavigation;
+export default MainNavigation;

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};
+}