From f490c01f8af02e4aa01bdc5c410e650145d9cc14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Wed, 15 Oct 2025 14:20:30 +0200
Subject: [PATCH 1/2] Add button to download file

---
 .../src/components/DocumentView/File.tsx      | 105 +++++++++---------
 .../src/components/DocumentView/FileIcon.tsx  |   2 +-
 .../components/primitives/DownloadButton.tsx  |  39 +++++++
 packages/gitbook/src/intl/translations/de.ts  |   2 +
 packages/gitbook/src/intl/translations/en.ts  |   2 +
 packages/gitbook/src/intl/translations/es.ts  |   2 +
 packages/gitbook/src/intl/translations/fr.ts  |   2 +
 packages/gitbook/src/intl/translations/it.ts  |   2 +
 packages/gitbook/src/intl/translations/ja.ts  |   2 +
 packages/gitbook/src/intl/translations/nl.ts  |   2 +
 packages/gitbook/src/intl/translations/no.ts  |   2 +
 .../gitbook/src/intl/translations/pt-br.ts    |   2 +
 packages/gitbook/src/intl/translations/ru.ts  |   2 +
 packages/gitbook/src/intl/translations/zh.ts  |   2 +
 packages/gitbook/src/lib/files.ts             |   4 +-
 15 files changed, 119 insertions(+), 53 deletions(-)
 create mode 100644 packages/gitbook/src/components/primitives/DownloadButton.tsx

diff --git a/packages/gitbook/src/components/DocumentView/File.tsx b/packages/gitbook/src/components/DocumentView/File.tsx
index fe72164fc6..71e03d810b 100644
--- a/packages/gitbook/src/components/DocumentView/File.tsx
+++ b/packages/gitbook/src/components/DocumentView/File.tsx
@@ -1,10 +1,12 @@
 import { type DocumentBlockFile, SiteInsightsLinkPosition } from '@gitbook/api';
 
+import { t } from '@/intl/translate';
 import { getSimplifiedContentType } from '@/lib/files';
 import { resolveContentRef } from '@/lib/references';
-import { tcls } from '@/lib/tailwind';
 
-import { Link } from '../primitives';
+import { getSpaceLanguage } from '@/intl/server';
+import { Button, Link } from '../primitives';
+import { DownloadButton } from '../primitives/DownloadButton';
 import type { BlockProps } from './Block';
 import { Caption } from './Caption';
 import { FileIcon } from './FileIcon';
@@ -12,67 +14,70 @@ import { FileIcon } from './FileIcon';
 export async function File(props: BlockProps<DocumentBlockFile>) {
     const { block, context } = props;
 
-    const contentRef = context.contentContext
-        ? await resolveContentRef(block.data.ref, context.contentContext)
-        : null;
+    if (!context.contentContext) {
+        return null;
+    }
+
+    const contentRef = await resolveContentRef(block.data.ref, context.contentContext);
     const file = contentRef?.file;
 
     if (!file) {
         return null;
     }
 
+    const language = getSpaceLanguage(context.contentContext);
     const contentType = getSimplifiedContentType(file.contentType);
+    const insights = {
+        type: 'link_click' as const,
+        link: {
+            target: block.data.ref,
+            position: SiteInsightsLinkPosition.Content,
+        },
+    };
 
     return (
         <Caption {...props} withBorder>
-            <Link
-                href={file.downloadURL}
-                download={file.name}
-                insights={{
-                    type: 'link_click',
-                    link: {
-                        target: block.data.ref,
-                        position: SiteInsightsLinkPosition.Content,
-                    },
-                }}
-                className={tcls('group/file', 'flex', 'flex-row', 'items-center', 'px-5', 'py-3')}
-            >
-                <div
-                    className={tcls(
-                        'min-w-14',
-                        'mr-5',
-                        'pr-5',
-                        'flex',
-                        'flex-col',
-                        'items-center',
-                        'gap-1',
-                        'border-r',
-                        'border-tint-subtle'
-                    )}
-                >
-                    <div>
-                        <FileIcon
-                            contentType={contentType}
-                            className={tcls('size-5', 'text-primary')}
-                        />
-                    </div>
-                    <div
-                        className={tcls(
-                            'text-xs',
-                            'text-tint',
-                            'group-hover/file:text-tint-strong'
-                        )}
-                    >
-                        {getHumanFileSize(file.size)}
-                    </div>
+            <div className="flex flex-wrap items-center gap-5 px-5 py-3">
+                <div className="flex min-w-14 flex-col items-center gap-1 border-tint-subtle border-r pr-5">
+                    <FileIcon contentType={contentType} className="size-5 text-primary" />
+                    <div className="text-hint text-xs">{getHumanFileSize(file.size)}</div>
                 </div>
-                <div>
-                    <div className={tcls('text-base')}>{file.name}</div>
-                    <div className={tcls('text-sm', 'opacity-9', 'dark:opacity-8')}>
-                        {contentType}
+                <div className="min-w-24 flex-1 overflow-hidden">
+                    <div className="truncate text-base">
+                        <Link
+                            href={file.downloadURL}
+                            target="_blank"
+                            insights={insights}
+                            className="hover:underline"
+                        >
+                            {file.name}
+                        </Link>
                     </div>
+                    <div className="truncate text-sm opacity-9 dark:opacity-8">{contentType}</div>
+                </div>
+                <div className="flex shrink-0 flex-wrap gap-2">
+                    <DownloadButton
+                        icon="download"
+                        size="xsmall"
+                        variant="secondary"
+                        downloadUrl={file.downloadURL}
+                        filename={file.name}
+                        insights={insights}
+                    >
+                        {t(language, 'download')}
+                    </DownloadButton>
+                    <Button
+                        icon="arrow-up-right-from-square"
+                        size="xsmall"
+                        variant="secondary"
+                        href={file.downloadURL}
+                        target="_blank"
+                        insights={insights}
+                    >
+                        {t(language, 'open')}
+                    </Button>
                 </div>
-            </Link>
+            </div>
         </Caption>
     );
 }
diff --git a/packages/gitbook/src/components/DocumentView/FileIcon.tsx b/packages/gitbook/src/components/DocumentView/FileIcon.tsx
index 45ec588845..61d38700e5 100644
--- a/packages/gitbook/src/components/DocumentView/FileIcon.tsx
+++ b/packages/gitbook/src/components/DocumentView/FileIcon.tsx
@@ -9,7 +9,7 @@ export function FileIcon(props: { contentType: SimplifiedFileType | null; classN
     const { contentType, className } = props;
 
     switch (contentType) {
-        case 'pdf':
+        case 'PDF':
             return <Icon icon="file-pdf" className={className} />;
         case 'image':
             return <Icon icon="file-image" className={className} />;
diff --git a/packages/gitbook/src/components/primitives/DownloadButton.tsx b/packages/gitbook/src/components/primitives/DownloadButton.tsx
new file mode 100644
index 0000000000..205d0bcf6f
--- /dev/null
+++ b/packages/gitbook/src/components/primitives/DownloadButton.tsx
@@ -0,0 +1,39 @@
+'use client';
+import { Button, type ButtonProps } from './Button';
+
+/**
+ * Button that triggers a file download when clicked.
+ */
+export function DownloadButton(
+    props: Omit<ButtonProps, 'onClick' | 'href'> & { downloadUrl: string; filename: string }
+) {
+    const { downloadUrl, filename, ...buttonProps } = props;
+
+    return (
+        <Button
+            {...buttonProps}
+            onClick={(e) => {
+                e.preventDefault();
+                void forceDownload(downloadUrl, filename);
+            }}
+        />
+    );
+}
+
+/**
+ * Force download a file from a given URL with a specified filename.
+ */
+async function forceDownload(url: string, filename: string) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    const objectUrl = URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = objectUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    URL.revokeObjectURL(objectUrl);
+}
diff --git a/packages/gitbook/src/intl/translations/de.ts b/packages/gitbook/src/intl/translations/de.ts
index 7d48becbc4..7a10c8d91d 100644
--- a/packages/gitbook/src/intl/translations/de.ts
+++ b/packages/gitbook/src/intl/translations/de.ts
@@ -130,4 +130,6 @@ export const de = {
     hint_warning: 'Warnung',
     hint_danger: 'Gefahr',
     hint_success: 'Erfolg',
+    download: 'Herunterladen',
+    open: 'Öffnen',
 };
diff --git a/packages/gitbook/src/intl/translations/en.ts b/packages/gitbook/src/intl/translations/en.ts
index 5ee7b426c9..143d27a5b8 100644
--- a/packages/gitbook/src/intl/translations/en.ts
+++ b/packages/gitbook/src/intl/translations/en.ts
@@ -127,4 +127,6 @@ export const en = {
     hint_warning: 'Warning',
     hint_danger: 'Danger',
     hint_success: 'Success',
+    download: 'Download',
+    open: 'Open',
 };
diff --git a/packages/gitbook/src/intl/translations/es.ts b/packages/gitbook/src/intl/translations/es.ts
index e3ffe1944e..406f209f1f 100644
--- a/packages/gitbook/src/intl/translations/es.ts
+++ b/packages/gitbook/src/intl/translations/es.ts
@@ -131,4 +131,6 @@ export const es: TranslationLanguage = {
     hint_warning: 'Advertencia',
     hint_danger: 'Peligro',
     hint_success: 'Éxito',
+    download: 'Descargar',
+    open: 'Abrir',
 };
diff --git a/packages/gitbook/src/intl/translations/fr.ts b/packages/gitbook/src/intl/translations/fr.ts
index c565a3f0ac..7bc255960e 100644
--- a/packages/gitbook/src/intl/translations/fr.ts
+++ b/packages/gitbook/src/intl/translations/fr.ts
@@ -126,4 +126,6 @@ export const fr = {
     hint_warning: 'Avertissement',
     hint_danger: 'Danger',
     hint_success: 'Succès',
+    download: 'Télécharger',
+    open: 'Ouvrir',
 };
diff --git a/packages/gitbook/src/intl/translations/it.ts b/packages/gitbook/src/intl/translations/it.ts
index 46cd2186c2..e22c8ff07e 100644
--- a/packages/gitbook/src/intl/translations/it.ts
+++ b/packages/gitbook/src/intl/translations/it.ts
@@ -130,4 +130,6 @@ export const it: TranslationLanguage = {
     hint_warning: 'Avviso',
     hint_danger: 'Pericolo',
     hint_success: 'Successo',
+    download: 'Scarica',
+    open: 'Apri',
 };
diff --git a/packages/gitbook/src/intl/translations/ja.ts b/packages/gitbook/src/intl/translations/ja.ts
index 72cf82f81b..0bcf32b68a 100644
--- a/packages/gitbook/src/intl/translations/ja.ts
+++ b/packages/gitbook/src/intl/translations/ja.ts
@@ -129,4 +129,6 @@ export const ja: TranslationLanguage = {
     hint_warning: '警告',
     hint_danger: '危険',
     hint_success: '成功',
+    download: 'ダウンロード',
+    open: '開く',
 };
diff --git a/packages/gitbook/src/intl/translations/nl.ts b/packages/gitbook/src/intl/translations/nl.ts
index 9d4e71fd00..0ec2fec4cb 100644
--- a/packages/gitbook/src/intl/translations/nl.ts
+++ b/packages/gitbook/src/intl/translations/nl.ts
@@ -129,4 +129,6 @@ export const nl: TranslationLanguage = {
     hint_warning: 'Waarschuwing',
     hint_danger: 'Gevaar',
     hint_success: 'Succes',
+    download: 'Downloaden',
+    open: 'Openen',
 };
diff --git a/packages/gitbook/src/intl/translations/no.ts b/packages/gitbook/src/intl/translations/no.ts
index db2a026e1c..441ef05a5e 100644
--- a/packages/gitbook/src/intl/translations/no.ts
+++ b/packages/gitbook/src/intl/translations/no.ts
@@ -130,4 +130,6 @@ export const no: TranslationLanguage = {
     hint_warning: 'Advarsel',
     hint_danger: 'Fare',
     hint_success: 'Suksess',
+    download: 'Last ned',
+    open: 'Åpne',
 };
diff --git a/packages/gitbook/src/intl/translations/pt-br.ts b/packages/gitbook/src/intl/translations/pt-br.ts
index 010476403c..5b13ddf0c9 100644
--- a/packages/gitbook/src/intl/translations/pt-br.ts
+++ b/packages/gitbook/src/intl/translations/pt-br.ts
@@ -129,4 +129,6 @@ export const pt_br = {
     hint_warning: 'Aviso',
     hint_danger: 'Perigo',
     hint_success: 'Sucesso',
+    download: 'Baixar',
+    open: 'Abrir',
 };
diff --git a/packages/gitbook/src/intl/translations/ru.ts b/packages/gitbook/src/intl/translations/ru.ts
index 4a85fda948..1246f19d2f 100644
--- a/packages/gitbook/src/intl/translations/ru.ts
+++ b/packages/gitbook/src/intl/translations/ru.ts
@@ -128,4 +128,6 @@ export const ru = {
     hint_warning: 'Предупреждение',
     hint_danger: 'Опасность',
     hint_success: 'Успех',
+    download: 'Скачать',
+    open: 'Открыть',
 };
diff --git a/packages/gitbook/src/intl/translations/zh.ts b/packages/gitbook/src/intl/translations/zh.ts
index fff45a844c..af572171bf 100644
--- a/packages/gitbook/src/intl/translations/zh.ts
+++ b/packages/gitbook/src/intl/translations/zh.ts
@@ -126,4 +126,6 @@ export const zh: TranslationLanguage = {
     hint_warning: '警告',
     hint_danger: '危险',
     hint_success: '成功',
+    download: '下载',
+    open: '打开',
 };
diff --git a/packages/gitbook/src/lib/files.ts b/packages/gitbook/src/lib/files.ts
index 5c9ea9d692..db92feea1e 100644
--- a/packages/gitbook/src/lib/files.ts
+++ b/packages/gitbook/src/lib/files.ts
@@ -1,4 +1,4 @@
-export type SimplifiedFileType = 'image' | 'pdf' | 'archive';
+export type SimplifiedFileType = 'image' | 'PDF' | 'archive';
 
 /**
  * Get a simplified content type for the given mime type.
@@ -11,7 +11,7 @@ export function getSimplifiedContentType(mimeType: string): SimplifiedFileType |
     switch (mimeType) {
         case 'application/pdf':
         case 'application/x-pdf':
-            return 'pdf';
+            return 'PDF';
         case 'application/zip':
         case 'application/x-7z-compressed':
         case 'application/x-zip-compressed':

From b3d120958974228ef840a3f9774cbbc56e013ef6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Wed, 15 Oct 2025 17:23:36 +0200
Subject: [PATCH 2/2] Remove truncate

---
 packages/gitbook/src/components/DocumentView/File.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/gitbook/src/components/DocumentView/File.tsx b/packages/gitbook/src/components/DocumentView/File.tsx
index 71e03d810b..7ddf6ecaf6 100644
--- a/packages/gitbook/src/components/DocumentView/File.tsx
+++ b/packages/gitbook/src/components/DocumentView/File.tsx
@@ -42,8 +42,8 @@ export async function File(props: BlockProps<DocumentBlockFile>) {
                     <FileIcon contentType={contentType} className="size-5 text-primary" />
                     <div className="text-hint text-xs">{getHumanFileSize(file.size)}</div>
                 </div>
-                <div className="min-w-24 flex-1 overflow-hidden">
-                    <div className="truncate text-base">
+                <div className="min-w-24 flex-1">
+                    <div className="text-base">
                         <Link
                             href={file.downloadURL}
                             target="_blank"
@@ -53,7 +53,7 @@ export async function File(props: BlockProps<DocumentBlockFile>) {
                             {file.name}
                         </Link>
                     </div>
-                    <div className="truncate text-sm opacity-9 dark:opacity-8">{contentType}</div>
+                    <div className="text-sm opacity-9 dark:opacity-8">{contentType}</div>
                 </div>
                 <div className="flex shrink-0 flex-wrap gap-2">
                     <DownloadButton