From 65b69784825ed73fcad12b28da7d42c15081f945 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Thu, 22 Aug 2024 17:03:10 +0200
Subject: [PATCH] Updated layout switch

---
 .../src/components/Activities.tsx             |  2 +-
 .../src/components/Inbox.tsx                  | 40 +++--------------
 .../src/components/Profile.tsx                |  2 +-
 .../src/components/Search.tsx                 |  8 ++--
 .../components/navigation/MainNavigation.tsx  | 44 ++++++++++++++++---
 .../src/assets/icons/card-list.svg            |  1 +
 .../src/assets/icons/column-layout.svg        |  1 +
 7 files changed, 52 insertions(+), 46 deletions(-)
 create mode 100644 apps/admin-x-design-system/src/assets/icons/card-list.svg
 create mode 100644 apps/admin-x-design-system/src/assets/icons/column-layout.svg

diff --git a/apps/admin-x-activitypub/src/components/Activities.tsx b/apps/admin-x-activitypub/src/components/Activities.tsx
index 14363cea24..bbca25e7e7 100644
--- a/apps/admin-x-activitypub/src/components/Activities.tsx
+++ b/apps/admin-x-activitypub/src/components/Activities.tsx
@@ -9,7 +9,7 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
     // const fakeAuthor =
     return (
         <>
-            <MainNavigation />
+            <MainNavigation title='Activities' />
             <div className='z-0 flex w-full flex-col items-center'>
                 <div className='mt-8 flex w-full max-w-[560px] flex-col'>
                     <ActivityItem>
diff --git a/apps/admin-x-activitypub/src/components/Inbox.tsx b/apps/admin-x-activitypub/src/components/Inbox.tsx
index e49eab6545..879b162b9f 100644
--- a/apps/admin-x-activitypub/src/components/Inbox.tsx
+++ b/apps/admin-x-activitypub/src/components/Inbox.tsx
@@ -6,7 +6,7 @@ import NiceModal from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import {Activity} from './activities/ActivityItem';
 import {ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub';
-import {Button, Heading, Select, SelectOption, Tooltip} from '@tryghost/admin-x-design-system';
+import {Button, Heading} from '@tryghost/admin-x-design-system';
 import {useBrowseInboxForUser} from '../MainContent';
 
 interface InboxProps {}
@@ -33,44 +33,14 @@ const Inbox: React.FC<InboxProps> = ({}) => {
         });
     };
 
-    const selectOptions: SelectOption[] = [
-        {value: 'option-1', label: 'Home'},
-        {value: 'option-2', label: 'Posts'},
-        {value: 'option-3', label: 'Notes'},
-        {value: 'option-4', label: 'Media'}
-    ];
-
-    const defaultValue: SelectOption = {
-        value: 'option-1', label: 'Home'
-    };
-
-    const controlClasses = {
-        control: '!bg-transparent !hidden mr-2 !pl-0 text-xl font-bold',
-        menu: '!min-w-[120px]'
+    const handleLayoutChange = (newLayout: string) => {
+        setLayout(newLayout);
     };
 
     return (
         <>
-            <MainNavigation />
-            <div className='mx-auto mt-4 flex w-full max-w-[640px] items-center justify-between border-b border-grey-200 pb-4'>
-                <div>
-                    <Select controlClasses={controlClasses} defaultValue={defaultValue} options={selectOptions} unstyled onSelect={() => {}} />
-                    <h2 className='text-xl font-bold'>Home</h2>
-                </div>
-                <div className=''>
-                    <Tooltip content="Inbox">
-                        <Button className='!px-2' icon='listview' iconColorClass={layout === 'inbox' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
-                            setLayout('inbox');
-                        }} />
-                    </Tooltip>
-                    <Tooltip content="Feed">
-                        <Button className='!px-2' icon='cardview' iconColorClass={layout === 'feed' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
-                            setLayout('feed');
-                        }} />
-                    </Tooltip>
-                </div>
-            </div>
-            <div className='z-0 flex w-full flex-col'>
+            <MainNavigation page='home' title="Home" onLayoutChange={handleLayoutChange} />
+            <div className='z-0 my-5 flex w-full flex-col'>
                 <div className='w-full'>
                     {inboxTabActivities.length > 0 ? (
                         <ul className='mx-auto flex max-w-[640px] flex-col'>
diff --git a/apps/admin-x-activitypub/src/components/Profile.tsx b/apps/admin-x-activitypub/src/components/Profile.tsx
index a3e86d79bb..859df3e099 100644
--- a/apps/admin-x-activitypub/src/components/Profile.tsx
+++ b/apps/admin-x-activitypub/src/components/Profile.tsx
@@ -87,7 +87,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
 
     return (
         <>
-            <MainNavigation />
+            <MainNavigation title='Profile' />
             <div className='z-0 flex w-full flex-col items-center'>
                 <div className='mx-auto mt-8 w-full max-w-[560px]' id='ap-sidebar'>
                     <div className='h-[200px] w-full rounded-lg bg-gradient-to-tr from-grey-200 to-grey-100'>
diff --git a/apps/admin-x-activitypub/src/components/Search.tsx b/apps/admin-x-activitypub/src/components/Search.tsx
index 05dfa2a608..71956458c4 100644
--- a/apps/admin-x-activitypub/src/components/Search.tsx
+++ b/apps/admin-x-activitypub/src/components/Search.tsx
@@ -9,7 +9,7 @@ interface SearchProps {}
 const Search: React.FC<SearchProps> = ({}) => {
     return (
         <>
-            <MainNavigation />
+            <MainNavigation title='Search' />
             <div className='z-0 flex w-full flex-col items-center pt-8'>
                 <div className='mb-6 flex w-full max-w-[560px] items-center gap-2 rounded-full bg-grey-100 px-3 py-2 text-grey-500'><Icon name='magnifying-glass' size={18} />Search the Fediverse</div>
                 <ActivityItem>
@@ -27,7 +27,7 @@ const Search: React.FC<SearchProps> = ({}) => {
                         <div className='text-sm'>4,545 followers</div>
                     </div>
                     <Button className='ml-auto' label='Follow' link />
-                </ActivityItem> 
+                </ActivityItem>
                 <ActivityItem>
                     <APAvatar/>
                     <div>
@@ -35,7 +35,7 @@ const Search: React.FC<SearchProps> = ({}) => {
                         <div className='text-sm'>1,156 followers</div>
                     </div>
                     <Button className='ml-auto' label='Follow' link />
-                </ActivityItem> 
+                </ActivityItem>
                 <ActivityItem>
                     <APAvatar/>
                     <div>
@@ -43,7 +43,7 @@ const Search: React.FC<SearchProps> = ({}) => {
                         <div className='text-sm'>1,584 followers</div>
                     </div>
                     <Button className='ml-auto' label='Follow' link />
-                </ActivityItem> 
+                </ActivityItem>
             </div>
         </>
     );
diff --git a/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx b/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx
index a3e9736cf6..0d8f72abba 100644
--- a/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx
+++ b/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx
@@ -1,23 +1,57 @@
 import MainHeader from './MainHeader';
-import React from 'react';
-import {Button} from '@tryghost/admin-x-design-system';
+import React, {useEffect, useState} from 'react';
+import {Button, Tooltip} from '@tryghost/admin-x-design-system';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
-interface MainNavigationProps {}
+interface MainNavigationProps {
+    title?: string;
+    page?: string;
+    onLayoutChange?: (layout: string) => void;
+}
 
-const MainNavigation: React.FC<MainNavigationProps> = ({}) => {
+const MainNavigation: React.FC<MainNavigationProps> = ({
+    title = 'Home',
+    page = '',
+    onLayoutChange
+}) => {
     const {route, updateRoute} = useRouting();
     const mainRoute = route.split('/')[0];
+    const [layout, setLayout] = useState('inbox');
+
+    useEffect(() => {
+        if (onLayoutChange) {
+            onLayoutChange(layout);
+        }
+    }, [layout, onLayoutChange]);
 
     return (
         <MainHeader>
+            <div className='col-[1/2] px-8'>
+                <h2 className='mt-1 text-xl font-bold'>
+                    {title}
+                </h2>
+            </div>
             <div className='col-[2/3] flex items-center justify-center gap-9'>
                 <Button icon='home' iconColorClass={mainRoute === '' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('')} />
                 <Button icon='magnifying-glass' iconColorClass={mainRoute === 'search' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('search')} />
                 <Button icon='bell' iconColorClass={mainRoute === 'activity' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('activity')} />
                 <Button icon='user' iconColorClass={mainRoute === 'profile' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('profile')} />
             </div>
-            <div className='col-[3/4] flex items-center justify-end px-8'>
+            <div className='col-[3/4] flex items-center justify-end gap-2 px-8'>
+                {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');
+                        }} />
+                    </Tooltip>
+                    <Tooltip content="Feed">
+                        <Button className='!px-2' icon='card-list' iconColorClass={layout === 'feed' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
+                            setLayout('feed');
+                        }} />
+                    </Tooltip>
+                </div>
+                }
                 <Button color='black' icon='add' label="Follow" onClick={() => {
                     updateRoute('follow-site');
                 }} />
diff --git a/apps/admin-x-design-system/src/assets/icons/card-list.svg b/apps/admin-x-design-system/src/assets/icons/card-list.svg
new file mode 100644
index 0000000000..39c5de1830
--- /dev/null
+++ b/apps/admin-x-design-system/src/assets/icons/card-list.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Layout-Agenda--Streamline-Ultimate" height="24" width="24"><desc>Layout Agenda Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>layout-agenda</title><path d="M2.25 0.747h19.5s1.5 0 1.5 1.5v6s0 1.5 -1.5 1.5H2.25s-1.5 0 -1.5 -1.5v-6s0 -1.5 1.5 -1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.25 14.247h19.5s1.5 0 1.5 1.5v6s0 1.5 -1.5 1.5H2.25s-1.5 0 -1.5 -1.5v-6s0 -1.5 1.5 -1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
\ No newline at end of file
diff --git a/apps/admin-x-design-system/src/assets/icons/column-layout.svg b/apps/admin-x-design-system/src/assets/icons/column-layout.svg
new file mode 100644
index 0000000000..f56aaa7590
--- /dev/null
+++ b/apps/admin-x-design-system/src/assets/icons/column-layout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Layout--Streamline-Ultimate" height="24" width="24"><desc>Layout Streamline Icon: https://streamlinehq.com</desc><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m1.5 2.99707 0 18.00003c0 0.8284 0.67157 1.5 1.5 1.5l18 0c0.8284 0 1.5 -0.6716 1.5 -1.5l0 -18.00003c0 -0.82843 -0.6716 -1.5 -1.5 -1.5l-18 0c-0.82843 0 -1.5 0.67157 -1.5 1.5Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.0029 22.4971 0 -21.00003" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.0029 11.9971 10 0" stroke-width="1.5"></path></svg>
\ No newline at end of file