Merge branch 'main' into fix/25020-tag-disappears-dropdown

Author: abdultalha0862

.claude/commands/commit.md

@@ -0,0 +1,26 @@
+---
+allowed-tools: Bash(git add:*), Bash(git status:*), Bash(git diff:*), Bash(git commit:*)
+description: Generate a Ghost-style commit message and optionally commit changes
+---
+
+## Context
+- Current git status: !`git status`
+- Current git diff (staged and unstaged changes): !`git diff HEAD`
+- Stage modified files: !`git add`
+
+## Your task
+
+Create a commit message following Ghost's commit conventions:
+
+1. Based on the uncommitted changes shown above, draft a commit message following the format and style described in @.github/CONTRIBUTING.md
+2. Show the commit message to the user
+3. Ask: "Would you like me to commit these changes? (yes/no)"
+4. If the user says yes:
+   - Stage all modified files 
+   - Commit using the generated message
+   - Run current git status to confirm
+5. If a user says no, just stop
+
+Important:
+- DO NOT push to remote unless explicitly asked
+- Follow the exact Ghost commit format 

.github/workflows/ci.yml

@@ -1203,3 +1203,47 @@ jobs:
           token: ${{ secrets.TINYBIRD_TOKEN }}
           workspace: 'Production'
           slack-webhook: ${{ secrets.ANALYTICS_SLACK_WEBHOOK_URL }}
+
+  deploy_admin:
+    needs: [
+      job_setup,
+      job_required_tests
+    ]
+    name: Deploy Admin
+    runs-on: ubuntu-latest
+    if: |
+      always()
+      && needs.job_setup.result == 'success'
+      && needs.job_setup.outputs.is_main == 'true'
+      && needs.job_required_tests.result == 'success'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        env:
+          FORCE_COLOR: 0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Restore caches
+        uses: ./.github/actions/restore-cache
+        env:
+          DEPENDENCY_CACHE_KEY: ${{ needs.job_setup.outputs.dependency_cache_key }}
+      - name: Build Admin
+        env:
+          GHOST_CDN_URL: https://assets.ghost.io/admin-forward/
+        run: yarn nx run admin:build
+      - name: Upload build artifact
+        id: upload-artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: admin-build
+          path: apps/admin/dist
+      - name: Deploy Admin
+        uses: aurelien-baudet/workflow-dispatch@v4
+        with:
+          token: ${{ secrets.CANARY_DOCKER_BUILD }}
+          workflow: .github/workflows/deploy-admin.yml
+          ref: 'refs/heads/main' # this is the ref of Ghost-Moya
+          repo: TryGhost/Ghost-Moya
+          inputs: '{"admin_build_artifact_id":"${{ steps.upload-artifacts.outputs.artifact-id }}", "admin_build_artifact_run_id":"${{ github.run_id }}"}'
+          wait-for-completion-timeout: 25m
+          wait-for-completion-interval: 30s

apps/activitypub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/activitypub",
-  "version": "1.0.15",
+  "version": "1.0.18",
   "license": "MIT",
   "repository": {
     "type": "git",

apps/activitypub/src/api/activitypub.ts

@@ -450,6 +450,10 @@ export class ActivityPubAPI {
         return this.getPaginatedPosts('.ghost/activitypub/v1/feed/reader', next);
     }
 
+    async getGlobalFeed(next?: string): Promise<PaginatedPostsResponse> {
+        return this.getPaginatedPosts('.ghost/activitypub/v1/feed/global', next);
+    }
+
     async getPostsByAccount(handle: string, next?: string): Promise<PaginatedPostsResponse> {
         return this.getPaginatedPosts(`.ghost/activitypub/v1/posts/${handle}`, next);
     }

apps/activitypub/src/components/feed/TableOfContents.tsx

@@ -141,7 +141,7 @@ const HEADING_PADDINGS = {
 
 const TableOfContentsView: React.FC<TableOfContentsViewProps> = ({items, activeHeading, onItemClick, onOpenChange}) => {
     const [open, setOpen] = useState(false);
-    const timeoutRef = React.useRef<NodeJS.Timeout>();
+    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
 
     React.useEffect(() => {
         return () => {

apps/activitypub/src/components/layout/Header/FeedModeDropdown.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade';
+import {useFeatureFlags} from '@src/lib/feature-flags';
+import {useFeedMode} from '@src/hooks/use-feed-mode';
+
+const FeedModeDropdown: React.FC = () => {
+    const {isEnabled} = useFeatureFlags();
+    const {feedMode, setFeedMode} = useFeedMode(isEnabled('global-feed'));
+
+    return (
+        <Select value={feedMode} onValueChange={setFeedMode}>
+            <SelectTrigger className='w-[140px]'>
+                <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+                <SelectItem value='discover'>Discover</SelectItem>
+                <SelectItem value='following'>Following</SelectItem>
+            </SelectContent>
+        </Select>
+    );
+};
+
+export default FeedModeDropdown;

apps/activitypub/src/components/layout/Header/Header.tsx

@@ -1,12 +1,15 @@
 import BackButton from '@src/components/global/BackButton';
+import FeedModeDropdown from './FeedModeDropdown';
 import React from 'react';
 import useActiveRoute from '@src/hooks/use-active-route';
 import {Button, H1, LucideIcon} from '@tryghost/shade';
 import {useBaseRoute, useNavigationStack, useRouteHasParams} from '@tryghost/admin-x-framework';
+import {useFeatureFlags} from '@src/lib/feature-flags';
 
 interface HeaderTitleProps {
     title: string;
     backIcon: boolean;
+    showFeedModeDropdown?: boolean;
 }
 
 interface MobileMenuButtonProps {
@@ -17,10 +20,20 @@ interface HeaderProps {
     onToggleMobileSidebar: () => void;
 }
 
-const HeaderTitle: React.FC<HeaderTitleProps> = ({title, backIcon}) => {
+const HeaderTitle: React.FC<HeaderTitleProps> = ({title, backIcon, showFeedModeDropdown}) => {
     if (backIcon) {
         return <BackButton className='-ml-2' />;
     }
+
+    if (showFeedModeDropdown) {
+        return (
+            <div className='flex grow items-center justify-between'>
+                <H1 className='max-md:text-[2.4rem]'>{title}</H1>
+                <FeedModeDropdown />
+            </div>
+        );
+    }
+
     return (
         <H1 className='max-md:text-[2.4rem]'>{title}</H1>
     );
@@ -43,6 +56,7 @@ const Header: React.FC<HeaderProps> = ({onToggleMobileSidebar}) => {
     const baseRoute = useBaseRoute();
     const routeHasParams = useRouteHasParams();
     const activeRoute = useActiveRoute();
+    const {isEnabled} = useFeatureFlags();
 
     // Logic for special pages
     let onlyBackButton = false;
@@ -57,6 +71,9 @@ const Header: React.FC<HeaderProps> = ({onToggleMobileSidebar}) => {
     // Avoid back button on main routes
     const backActive = (canGoBack && routeHasParams) || activeRoute?.showBackButton === true;
 
+    // Show feed mode dropdown on reader route with global-feed flag enabled
+    const showFeedModeDropdown = baseRoute === 'reader' && isEnabled('global-feed');
+
     return (
         <>
             {onlyBackButton ?
@@ -69,6 +86,7 @@ const Header: React.FC<HeaderProps> = ({onToggleMobileSidebar}) => {
                     <div className='relative flex h-[102px] items-center justify-between gap-5 px-[min(4vw,32px)] before:absolute before:inset-x-[min(4vw,32px)] before:bottom-0 before:block before:border-b before:border-gray-200 before:content-[""] max-md:h-[68px] before:dark:border-gray-950'>
                         <HeaderTitle
                             backIcon={backActive}
+                            showFeedModeDropdown={showFeedModeDropdown}
                             title={activeRoute?.pageTitle || ''}
                         />
                         <MobileMenuButton onToggleMobileSidebar={onToggleMobileSidebar} />

apps/activitypub/src/components/layout/Sidebar/Sidebar.tsx

@@ -46,7 +46,7 @@ const Sidebar: React.FC<SidebarProps> = ({isMobileSidebarOpen}) => {
                 <div className='isolate flex w-full flex-col items-start gap-6 pl-6 pt-6'>
                     <div className='flex h-[52px] w-full items-center'>
                         <Dialog open={isSearchOpen} onOpenChange={setIsSearchOpen}>
-                            <DialogTrigger className='w-full'>
+                            <DialogTrigger className='mt-0.5 w-full'>
                                 <SearchInput />
                             </DialogTrigger>
                             <DialogContent>

apps/activitypub/src/hooks/use-activity-pub-queries.ts

@@ -85,6 +85,7 @@ const QUERY_KEYS = {
     },
     feed: ['feed'],
     inbox: ['inbox'],
+    globalFeed: ['global_feed'],
     postsByAccount: ['account_posts'],
     postsLikedByAccount: ['account_liked_posts'],
     notifications: (handle: string) => ['notifications', handle],
@@ -97,6 +98,7 @@ function updateLikeCache(queryClient: QueryClient, id: string, liked: boolean) {
     const queryKeys = [
         QUERY_KEYS.feed,
         QUERY_KEYS.inbox,
+        QUERY_KEYS.globalFeed,
         QUERY_KEYS.postsLikedByAccount,
         QUERY_KEYS.profilePosts(null)
     ];
@@ -166,6 +168,7 @@ function updateFollowCache(queryClient: QueryClient, handle: string, authorHandl
     const queryKeys = [
         QUERY_KEYS.feed,
         QUERY_KEYS.inbox,
+        QUERY_KEYS.globalFeed,
         QUERY_KEYS.profilePosts('index')
     ];
 
@@ -493,6 +496,7 @@ function updateReplyCache(queryClient: QueryClient, id: string, delta: number) {
     const queryKeys = [
         QUERY_KEYS.feed,
         QUERY_KEYS.inbox,
+        QUERY_KEYS.globalFeed,
         QUERY_KEYS.profilePosts('index'),
         QUERY_KEYS.postsLikedByAccount
     ];
@@ -744,6 +748,7 @@ export function useBlockMutationForUser(handle: string) {
             );
             queryClient.invalidateQueries({queryKey: QUERY_KEYS.feed});
             queryClient.invalidateQueries({queryKey: QUERY_KEYS.inbox});
+            queryClient.invalidateQueries({queryKey: QUERY_KEYS.globalFeed});
         },
         onError(error: {message: string, statusCode: number}) {
             if (error.statusCode === 429) {
@@ -789,6 +794,7 @@ function updateRepostCache(queryClient: QueryClient, id: string, reposted: boole
     const queryKeys = [
         QUERY_KEYS.feed,
         QUERY_KEYS.inbox,
+        QUERY_KEYS.globalFeed,
         QUERY_KEYS.profilePosts(null)
     ];
 
@@ -1718,6 +1724,42 @@ export function useInboxForUser(options: {enabled: boolean}) {
     return {inboxQuery, updateInboxActivity};
 }
 
+export function useGlobalFeedForUser(options: {enabled: boolean}) {
+    const queryKey = QUERY_KEYS.globalFeed;
+    const queryClient = useQueryClient();
+
+    const globalFeedQuery = useInfiniteQuery({
+        queryKey,
+        enabled: options.enabled,
+        staleTime: 20 * 1000, // 20s
+        async queryFn({pageParam}: {pageParam?: string}) {
+            const siteUrl = await getSiteUrl();
+            const api = createActivityPubAPI('index', siteUrl);
+            return api.getGlobalFeed(pageParam).then((response) => {
+                return {
+                    posts: response.posts.map(mapPostToActivity),
+                    next: response.next
+                };
+            });
+        },
+        getNextPageParam(prevPage) {
+            return prevPage.next;
+        }
+    });
+
+    const updateGlobalFeedActivity = (id: string, updated: Partial<Activity>) => {
+        updateActivityInPaginatedCollection(
+            queryClient,
+            queryKey,
+            'posts',
+            id,
+            activity => ({...activity, ...updated})
+        );
+    };
+
+    return {globalFeedQuery, updateGlobalFeedActivity};
+}
+
 export function usePostsByAccount(profileHandle: string, options: {enabled: boolean}) {
     const queryKey = QUERY_KEYS.profilePosts(profileHandle === 'me' ? 'index' : profileHandle);
     const queryClient = useQueryClient();

apps/activitypub/src/hooks/use-feed-mode.ts

@@ -0,0 +1,26 @@
+import {useState} from 'react';
+
+export type FeedMode = 'discover' | 'following';
+
+export const FEED_MODE_STORAGE_KEY = 'ghost-ap-reader-feed';
+
+export const useFeedMode = (enabled: boolean) => {
+    const [feedMode, setFeedModeState] = useState<FeedMode>(() => {
+        if (!enabled) {
+            return 'following';
+        }
+
+        if (typeof window !== 'undefined') {
+            const stored = localStorage.getItem(FEED_MODE_STORAGE_KEY);
+            return (stored === 'discover' ? 'discover' : 'following') as FeedMode;
+        }
+        return 'following';
+    });
+
+    const setFeedMode = (mode: FeedMode) => {
+        setFeedModeState(mode);
+        localStorage.setItem(FEED_MODE_STORAGE_KEY, mode);
+    };
+
+    return {feedMode, setFeedMode};
+};