Move "Edit on Git" and "Export PDF" actions into page actions dropdown (#3574)

Author: zenoachtig

packages/gitbook/src/components/AIActions/AIActions.tsx renamed to packages/gitbook/src/components/PageActions/PageActions.tsx

@@ -2,31 +2,32 @@
 
 import { useAIChatState } from '@/components/AI';
 import type { Assistant } from '@/components/AI';
-import { ChatGPTIcon } from '@/components/AIActions/assets/ChatGPTIcon';
-import { ClaudeIcon } from '@/components/AIActions/assets/ClaudeIcon';
-import { MarkdownIcon } from '@/components/AIActions/assets/MarkdownIcon';
+import { ChatGPTIcon } from '@/components/PageActions/assets/ChatGPTIcon';
+import { ClaudeIcon } from '@/components/PageActions/assets/ClaudeIcon';
+import { MarkdownIcon } from '@/components/PageActions/assets/MarkdownIcon';
 import { Button } from '@/components/primitives/Button';
 import { DropdownMenuItem, useDropdownMenuClose } from '@/components/primitives/DropdownMenu';
 import { tString, useLanguage } from '@/intl/client';
 import type { TranslationLanguage } from '@/intl/translations';
+import type { GitSyncState } from '@gitbook/api';
 import { Icon, type IconName, IconStyle } from '@gitbook/icons';
 import assertNever from 'assert-never';
 import QuickLRU from 'quick-lru';
 import type React from 'react';
 import { create } from 'zustand';
 
-type AIActionType = 'button' | 'dropdown-menu-item';
+type PageActionType = 'button' | 'dropdown-menu-item';
 
 /**
  * Opens our AI Docs Assistant.
  */
-export function OpenAIAssistant(props: { assistant: Assistant; type: AIActionType }) {
+export function OpenAIAssistant(props: { assistant: Assistant; type: PageActionType }) {
     const { assistant, type } = props;
     const chat = useAIChatState();
     const language = useLanguage();
 
     return (
-        <AIActionWrapper
+        <PageActionWrapper
             type={type}
             icon={assistant.icon}
             label={assistant.label}
@@ -90,7 +91,7 @@ const markdownCache = new QuickLRU<string, string>({ maxSize: 10 });
  */
 export function CopyMarkdown(props: {
     markdownPageUrl: string;
-    type: AIActionType;
+    type: PageActionType;
     isDefaultAction?: boolean;
 }) {
     const { markdownPageUrl, type, isDefaultAction } = props;
@@ -130,7 +131,7 @@ export function CopyMarkdown(props: {
     };
 
     return (
-        <AIActionWrapper
+        <PageActionWrapper
             type={type}
             icon={copied ? 'check' : 'copy'}
             label={copied ? tString(language, 'code_copied') : tString(language, 'copy_page')}
@@ -145,12 +146,12 @@ export function CopyMarkdown(props: {
 /**
  * Redirects to the markdown version of the page.
  */
-export function ViewAsMarkdown(props: { markdownPageUrl: string; type: AIActionType }) {
+export function ViewAsMarkdown(props: { markdownPageUrl: string; type: PageActionType }) {
     const { markdownPageUrl, type } = props;
     const language = useLanguage();
 
     return (
-        <AIActionWrapper
+        <PageActionWrapper
             type={type}
             icon={<MarkdownIcon className="size-4 fill-current" />}
             label={tString(language, 'view_page_markdown')}
@@ -166,15 +167,15 @@ export function ViewAsMarkdown(props: { markdownPageUrl: string; type: AIActionT
 export function OpenInLLM(props: {
     provider: 'chatgpt' | 'claude';
     url: string;
-    type: AIActionType;
+    type: PageActionType;
 }) {
     const { provider, url, type } = props;
     const language = useLanguage();
 
     const providerLabel = provider === 'chatgpt' ? 'ChatGPT' : 'Claude';
 
     return (
-        <AIActionWrapper
+        <PageActionWrapper
             type={type}
             icon={
                 provider === 'chatgpt' ? (
@@ -191,11 +192,48 @@ export function OpenInLLM(props: {
     );
 }
 
+export function GitEditLink(props: {
+    type: PageActionType;
+    provider: GitSyncState['installationProvider'];
+    url: string;
+}) {
+    const { type, provider, url } = props;
+    const language = useLanguage();
+
+    const providerName =
+        provider === 'github' ? 'GitHub' : provider === 'gitlab' ? 'GitLab' : 'Git';
+
+    return (
+        <PageActionWrapper
+            type={type}
+            icon={provider === 'gitlab' ? 'gitlab' : 'github'}
+            label={tString(language, 'edit_on_git', providerName)}
+            shortLabel={tString(language, 'edit')}
+            href={url}
+        />
+    );
+}
+
+export function ViewAsPDF(props: { url: string; type: PageActionType }) {
+    const { url, type } = props;
+    const language = useLanguage();
+
+    return (
+        <PageActionWrapper
+            type={type}
+            icon="file-pdf"
+            label={tString(language, 'pdf_download')}
+            href={url}
+            target="_self"
+        />
+    );
+}
+
 /**
  * Wraps an action in a button (for the default action) or dropdown menu item.
  */
-function AIActionWrapper(props: {
-    type: AIActionType;
+function PageActionWrapper(props: {
+    type: PageActionType;
     icon: IconName | React.ReactNode;
     label: string;
     /**
@@ -205,10 +243,22 @@ function AIActionWrapper(props: {
     onClick?: (e: React.MouseEvent) => void;
     description?: string;
     href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
     disabled?: boolean;
     loading?: boolean;
 }) {
-    const { type, icon, label, shortLabel, onClick, href, description, disabled, loading } = props;
+    const {
+        type,
+        icon,
+        label,
+        shortLabel,
+        onClick,
+        href,
+        target = '_blank',
+        description,
+        disabled,
+        loading,
+    } = props;
 
     if (type === 'button') {
         return (
@@ -222,7 +272,7 @@ function AIActionWrapper(props: {
                 className="bg-tint-base text-sm"
                 onClick={onClick}
                 href={href}
-                target={href ? '_blank' : undefined}
+                target={href ? target : undefined}
                 disabled={disabled || loading}
             >
                 {shortLabel}
@@ -234,7 +284,7 @@ function AIActionWrapper(props: {
         <DropdownMenuItem
             className="flex items-stretch gap-2.5 p-2"
             href={href}
-            target="_blank"
+            target={target}
             onClick={onClick}
             disabled={disabled || loading}
         >
@@ -255,9 +305,11 @@ function AIActionWrapper(props: {
             </div>
 
             <div className="flex flex-1 flex-col gap-0.5">
-                <span className="flex items-center gap-2 text-tint-strong">
+                <span className="flex items-center gap-1 text-tint-strong">
                     <span className="truncate font-medium text-sm">{label}</span>
-                    {href ? <Icon icon="arrow-up-right" className="size-3 shrink-0" /> : null}
+                    {href && target === '_blank' ? (
+                        <Icon icon="arrow-up-right" className="size-3 shrink-0 text-tint-subtle" />
+                    ) : null}
                 </span>
                 {description && <span className="text-tint text-xs">{description}</span>}
             </div>

packages/gitbook/src/components/AIActions/AIActionsDropdown.tsx renamed to packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx

@@ -2,38 +2,50 @@
 
 import {
     CopyMarkdown,
+    GitEditLink,
     OpenAIAssistant,
     OpenInLLM,
     ViewAsMarkdown,
-} from '@/components/AIActions/AIActions';
+    ViewAsPDF,
+} from '@/components/PageActions/PageActions';
 import { Button, ButtonGroup } from '@/components/primitives/Button';
 import { DropdownMenu, DropdownMenuSeparator } from '@/components/primitives/DropdownMenu';
 import { tString, useLanguage } from '@/intl/client';
-import type { SiteCustomizationSettings } from '@gitbook/api';
+import type { GitSyncState, SiteCustomizationSettings } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
 import { useRef } from 'react';
 import { useAI } from '../AI';
 
-interface AIActionsDropdownProps {
+interface PageActionsDropdownProps {
     markdownPageUrl: string;
     className?: string;
     actions: SiteCustomizationSettings['pageActions'];
+    editOnGit?: {
+        provider: GitSyncState['installationProvider'];
+        url: string;
+    };
+    pdfUrl?: string;
 }
 
 /**
  * Dropdown menu for the AI Actions (Ask Docs Assistant, Copy page, View as Markdown, Open in LLM).
  */
-export function AIActionsDropdown(props: AIActionsDropdownProps) {
+export function PageActionsDropdown(props: PageActionsDropdownProps) {
     const ref = useRef<HTMLDivElement>(null);
     const assistants = useAI().assistants.filter(
         (assistant) => assistant.ui === true && assistant.pageAction
     );
     const language = useLanguage();
 
-    return assistants.length > 0 || props.actions.markdown || props.actions.externalAI ? (
+    const defaultActions = [assistants.length > 0, props.actions.markdown, props.editOnGit].filter(
+        Boolean
+    );
+    const dropdownActions = [props.actions.externalAI, props.pdfUrl].filter(Boolean);
+
+    return [...defaultActions, ...dropdownActions].length > 0 ? (
         <ButtonGroup ref={ref} className={props.className}>
-            <DefaultAction {...props} />
-            {props.actions.markdown || props.actions.externalAI ? (
+            {defaultActions.length > 0 ? <DefaultAction {...props} /> : null}
+            {dropdownActions.length > 0 ? (
                 <DropdownMenu
                     align="end"
                     className="!min-w-60 max-w-max"
@@ -45,15 +57,18 @@ export function AIActionsDropdown(props: AIActionsDropdownProps) {
                                     className="size-3 transition-transform group-data-[state=open]/button:rotate-180"
                                 />
                             }
-                            label={tString(language, 'more')}
-                            iconOnly
+                            label={tString(
+                                language,
+                                defaultActions.some(Boolean) ? 'more' : 'actions'
+                            )}
+                            iconOnly={defaultActions.some(Boolean)}
                             size="xsmall"
                             variant="secondary"
                             className="bg-tint-base text-sm"
                         />
                     }
                 >
-                    <AIActionsDropdownMenuContent {...props} />
+                    <PageActionsDropdownMenuContent {...props} />
                 </DropdownMenu>
             ) : null}
         </ButtonGroup>
@@ -63,7 +78,7 @@ export function AIActionsDropdown(props: AIActionsDropdownProps) {
 /**
  * The content of the dropdown menu.
  */
-function AIActionsDropdownMenuContent(props: AIActionsDropdownProps) {
+function PageActionsDropdownMenuContent(props: PageActionsDropdownProps) {
     const { markdownPageUrl, actions } = props;
     const assistants = useAI().assistants.filter(
         (assistant) => assistant.ui === true && assistant.pageAction
@@ -98,14 +113,30 @@ function AIActionsDropdownMenuContent(props: AIActionsDropdownProps) {
                     <OpenInLLM provider="claude" url={markdownPageUrl} type="dropdown-menu-item" />
                 </>
             ) : null}
+
+            {props.editOnGit || props.pdfUrl ? (
+                <>
+                    <DropdownMenuSeparator className="first:hidden" />
+                    {props.editOnGit ? (
+                        <GitEditLink
+                            type="dropdown-menu-item"
+                            provider={props.editOnGit.provider}
+                            url={props.editOnGit.url}
+                        />
+                    ) : null}
+                    {props.pdfUrl ? (
+                        <ViewAsPDF url={props.pdfUrl} type="dropdown-menu-item" />
+                    ) : null}
+                </>
+            ) : null}
         </>
     );
 }
 
 /**
  * A default action shown as a quick-access button beside the dropdown menu
  */
-function DefaultAction(props: AIActionsDropdownProps) {
+function DefaultAction(props: PageActionsDropdownProps) {
     const { markdownPageUrl, actions } = props;
     const assistants = useAI().assistants.filter(
         (assistant) => assistant.ui === true && assistant.pageAction
@@ -116,21 +147,23 @@ function DefaultAction(props: AIActionsDropdownProps) {
         return <OpenAIAssistant assistant={assistant} type="button" />;
     }
 
-    if (actions.markdown) {
+    if (props.editOnGit) {
         return (
-            <CopyMarkdown
-                isDefaultAction={!assistant}
-                markdownPageUrl={markdownPageUrl}
+            <GitEditLink
                 type="button"
+                provider={props.editOnGit.provider}
+                url={props.editOnGit.url}
             />
         );
     }
 
-    if (actions.externalAI) {
+    if (actions.markdown) {
         return (
-            <>
-                <OpenInLLM provider="chatgpt" url={markdownPageUrl} type="button" />
-            </>
+            <CopyMarkdown
+                isDefaultAction={!assistant}
+                markdownPageUrl={markdownPageUrl}
+                type="button"
+            />
         );
     }
 }