From d3ca608ef4e477ccd77b2ac7f97b40c85218ac8d Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Wed, 10 Sep 2025 17:13:22 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(front)=20add=20standalone=20file=20pr?=
 =?UTF-8?q?eview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We were tired of using the raw default previewer of the browser, that
was also triggering downloads instead of preview sometimes.
---
 .../drive/src/features/i18n/translations.json | 10 +++
 .../src/pages/explorer/items/files/[id].tsx   | 66 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 src/frontend/apps/drive/src/pages/explorer/items/files/[id].tsx

diff --git a/src/frontend/apps/drive/src/features/i18n/translations.json b/src/frontend/apps/drive/src/features/i18n/translations.json
index 6bc4dd96..117e4465 100644
--- a/src/frontend/apps/drive/src/features/i18n/translations.json
+++ b/src/frontend/apps/drive/src/features/i18n/translations.json
@@ -274,6 +274,11 @@
             "submit": "Edit"
           }
         },
+        "files": {
+          "not_found": {
+            "description": "The file you are looking for does not exist."
+          }
+        },
         "workspaces": {
           "mainWorkspace": "My workspace",
           "form": {
@@ -647,6 +652,11 @@
             "submit": "Mettre à jour"
           }
         },
+        "files": {
+          "not_found": {
+            "description": "Le fichier que vous recherchez n'existe pas."
+          }
+        },
         "workspaces": {
           "mainWorkspace": "Mon espace",
           "form": {
diff --git a/src/frontend/apps/drive/src/pages/explorer/items/files/[id].tsx b/src/frontend/apps/drive/src/pages/explorer/items/files/[id].tsx
new file mode 100644
index 00000000..7215e580
--- /dev/null
+++ b/src/frontend/apps/drive/src/pages/explorer/items/files/[id].tsx
@@ -0,0 +1,66 @@
+import { APIError } from "@/features/api/APIError";
+import { getDriver } from "@/features/config/Config";
+import { Item } from "@/features/drivers/types";
+import { itemToPreviewFile } from "@/features/explorer/utils/utils";
+import { ItemInfo } from "@/features/items/components/ItemInfo";
+import { useDownloadItem } from "@/features/items/hooks/useDownloadItem";
+import { GenericDisclaimer } from "@/features/ui/components/generic-disclaimer/GenericDisclaimer";
+import { SpinnerPage } from "@/features/ui/components/spinner/SpinnerPage";
+import { FilePreview } from "@/features/ui/preview/files-preview/FilesPreview";
+import { Icon } from "@gouvfr-lasuite/ui-kit";
+import { Button } from "@openfun/cunningham-react";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/router";
+import { useTranslation } from "react-i18next";
+
+export default function FilePage() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const itemId = router.query.id as string;
+  const { handleDownloadItem } = useDownloadItem();
+  // On 403, 401, the user is automatically redirected to the 401/403 page.
+  const {
+    data: item,
+    isLoading,
+    error,
+  } = useQuery<Item, APIError>({
+    queryKey: ["items", itemId],
+    queryFn: async () => {
+      return getDriver().getItem(itemId);
+    },
+  });
+  // If the error is a 401 or 403, we want to show the spinner page because an auto redirect is happening.
+  if (isLoading || (error && [401, 403].includes(error.code))) {
+    return <SpinnerPage />;
+  }
+
+  // Can happen if the file is deleted.
+  if (!item) {
+    return (
+      <GenericDisclaimer
+        message={t("explorer.files.not_found.description")}
+        imageSrc="/assets/403-background.png"
+      >
+        <Button href="/" icon={<Icon name="home" />}>
+          {t("403.button")}
+        </Button>
+      </GenericDisclaimer>
+    );
+  }
+
+  return (
+    <div>
+      <FilePreview
+        isOpen={true}
+        hideCloseButton={true}
+        hideNav={true}
+        title={t("file_preview.title")}
+        files={[itemToPreviewFile(item)]}
+        onChangeFile={() => void 0}
+        handleDownloadFile={() => handleDownloadItem(item)}
+        openedFileId={item.id}
+        sidebarContent={item && <ItemInfo item={item} />}
+      />
+    </div>
+  );
+}