diff --git a/apps/admin-x-activitypub/src/App.tsx b/apps/admin-x-activitypub/src/App.tsx index cf6fe532f8..8f9fabd496 100644 --- a/apps/admin-x-activitypub/src/App.tsx +++ b/apps/admin-x-activitypub/src/App.tsx @@ -20,4 +20,4 @@ const App: React.FC = ({framework, designSystem}) => { ); }; -export default App; \ No newline at end of file +export default App; diff --git a/apps/admin-x-activitypub/src/components/Inbox.tsx b/apps/admin-x-activitypub/src/components/Inbox.tsx index a01d3d03fc..4437af8233 100644 --- a/apps/admin-x-activitypub/src/components/Inbox.tsx +++ b/apps/admin-x-activitypub/src/components/Inbox.tsx @@ -3,6 +3,7 @@ import ActivityItem from './activities/ActivityItem'; import ActivityPubWelcomeImage from '../assets/images/ap-welcome.png'; import FeedItem from './feed/FeedItem'; import MainNavigation from './navigation/MainNavigation'; +import NewPostModal from './modals/NewPostModal'; import NiceModal from '@ebay/nice-modal-react'; import React, {useEffect, useRef} from 'react'; import Separator from './global/Separator'; @@ -10,9 +11,10 @@ import ViewProfileModal from './global/ViewProfileModal'; import getName from '../utils/get-name'; import getUsername from '../utils/get-username'; import useSuggestedProfiles from '../hooks/useSuggestedProfiles'; +import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub'; import {Button, Heading, LoadingIndicator} from '@tryghost/admin-x-design-system'; import {handleViewContent} from '../utils/content-handlers'; -import {useActivitiesForUser} from '../hooks/useActivityPubQueries'; +import {useActivitiesForUser, useUserDataForUser} from '../hooks/useActivityPubQueries'; import {useRouting} from '@tryghost/admin-x-framework/routing'; type Layout = 'inbox' | 'feed'; @@ -71,10 +73,12 @@ const Inbox: React.FC = ({layout}) => { }; }, [hasNextPage, isFetchingNextPage, fetchNextPage]); + const {data: user} = useUserDataForUser('index'); + return ( <> -
+
{isLoading ? (
@@ -83,36 +87,45 @@ const Inbox: React.FC = ({layout}) => { ) : activities.length > 0 ? ( <>
-
-
    - {activities.map((activity, index) => ( -
  • - handleViewContent(activity, false, updateActivity)} - onCommentClick={() => handleViewContent(activity, true, updateActivity)} - /> - {index < activities.length - 1 && ( - - )} -
    • - ))} -
    - {isFetchingNextPage && ( -
    - +
    +
    + {layout === 'feed' &&
    +
    +
    - )} -
+
} +
    + {activities.map((activity, index) => ( +
  • + handleViewContent(activity, false, updateActivity)} + onCommentClick={() => handleViewContent(activity, true, updateActivity)} + /> + {index < activities.length - 1 && ( + + )} +
    • + ))} +
    + {isFetchingNextPage && ( +
    + +
    + )} +
+
-
+
+ {/* */}

This is your {layout === 'inbox' ? 'inbox' : 'feed'}

You'll find {layout === 'inbox' ? 'long-form content' : 'short posts and updates'} from the accounts you follow here.

You might also like

diff --git a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx index beac7458a2..f5adf514b0 100644 --- a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx +++ b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx @@ -220,7 +220,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment className={`relative z-[9998] ml-auto flex h-5 w-5 items-center justify-center self-start hover:opacity-60 ${isCopied ? 'bump' : ''}`} hideLabel={true} icon='dotdotdot' - iconColorClass={`(${layout === 'inbox' ? 'text-grey-900' : 'text-grey-600'}`} + iconColorClass={`${layout === 'inbox' ? 'text-grey-900' : 'text-grey-500'}`} id='more' size='sm' unstyled={true} @@ -237,7 +237,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment {actor.name} reposted
}
-
+
{author.name} diff --git a/apps/admin-x-activitypub/src/components/global/APAvatar.tsx b/apps/admin-x-activitypub/src/components/global/APAvatar.tsx index 0fa4325b3c..c29634bf60 100644 --- a/apps/admin-x-activitypub/src/components/global/APAvatar.tsx +++ b/apps/admin-x-activitypub/src/components/global/APAvatar.tsx @@ -15,7 +15,7 @@ interface APAvatarProps { const APAvatar: React.FC = ({author, size, badge}) => { let iconSize = 18; let containerClass = 'shrink-0 items-center justify-center relative z-10 flex'; - let imageClass = 'z-10 rounded w-10 h-10 object-cover'; + let imageClass = 'z-10 rounded-md w-10 h-10 object-cover'; const badgeClass = `w-6 h-6 z-20 rounded-full absolute -bottom-2 -right-[0.6rem] border-2 border-white content-box flex items-center justify-center`; let badgeColor = ''; const [iconUrl, setIconUrl] = useState(author?.icon?.url); @@ -39,23 +39,23 @@ const APAvatar: React.FC = ({author, size, badge}) => { switch (size) { case '2xs': iconSize = 10; - containerClass = clsx('h-4 w-4 rounded ', containerClass); - imageClass = 'z-10 rounded w-4 h-4 object-cover'; + containerClass = clsx('h-4 w-4 rounded-md ', containerClass); + imageClass = 'z-10 rounded-md w-4 h-4 object-cover'; break; case 'xs': iconSize = 12; - containerClass = clsx('h-5 w-5 rounded ', containerClass); - imageClass = 'z-10 rounded w-5 h-5 object-cover'; + containerClass = clsx('h-5 w-5 rounded-md ', containerClass); + imageClass = 'z-10 rounded-md w-5 h-5 object-cover'; break; case 'sm': - containerClass = clsx('h-10 w-10 rounded', containerClass); + containerClass = clsx('h-10 w-10 rounded-md', containerClass); break; case 'lg': containerClass = clsx('h-22 w-22 rounded-xl', containerClass); imageClass = 'z-10 rounded-xl w-22 h-22 object-cover'; break; default: - containerClass = clsx('h-10 w-10 rounded', containerClass); + containerClass = clsx('h-10 w-10 rounded-md', containerClass); break; } diff --git a/apps/admin-x-activitypub/src/components/modals/NewPostModal.tsx b/apps/admin-x-activitypub/src/components/modals/NewPostModal.tsx new file mode 100644 index 0000000000..32ec2d8034 --- /dev/null +++ b/apps/admin-x-activitypub/src/components/modals/NewPostModal.tsx @@ -0,0 +1,51 @@ +import * as FormPrimitive from '@radix-ui/react-form'; +import APAvatar from '../global/APAvatar'; +import NiceModal, {useModal} from '@ebay/nice-modal-react'; +import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub'; +import {Modal, showToast} from '@tryghost/admin-x-design-system'; +import {useUserDataForUser} from '../../hooks/useActivityPubQueries'; + +const NewPostModal = NiceModal.create(() => { + const modal = useModal(); + const {data: user} = useUserDataForUser('index'); + + return ( + { + modal.remove(); + }} + onOk={() => { + showToast({ + message: 'Note sent', + type: 'success' + }); + modal.remove(); + }} + > +
+ + +
+ + + + + +
+ +
+ + ); +}); + +export default NewPostModal; diff --git a/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx b/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx index 48e5b1cc24..6b7643fbbc 100644 --- a/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx +++ b/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx @@ -16,24 +16,24 @@ const MainNavigation: React.FC = ({page}) => { queryClient.removeQueries({ queryKey: ['activities:index'] }); - + updateRoute(newRoute); }; return (
-