From d476d0b8ba4ff7ad8c6f02e925d9b6576cff39b9 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 27 Apr 2026 05:02:13 +0100
Subject: [PATCH] feat(base): add editable page title above the full-page base
 view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirror the doc-page layout — the base name is editable via the same
TitleEditor used on document pages, sitting in a centered Container
above the table. The base table fills the remaining space below via
flex: 1, so the toolbar and grid stay anchored to the bottom of the
viewport instead of fighting the page header.
---
 apps/client/src/pages/page/page.tsx | 35 ++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/pages/page/page.tsx b/apps/client/src/pages/page/page.tsx
index b6b7da3ce..f5e161e9f 100644
--- a/apps/client/src/pages/page/page.tsx
+++ b/apps/client/src/pages/page/page.tsx
@@ -1,6 +1,7 @@
 import { useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query";
 import { FullEditor } from "@/features/editor/full-editor";
+import { TitleEditor } from "@/features/editor/title-editor";
 import HistoryModal from "@/features/page-history/components/history-modal";
 import { Helmet } from "react-helmet-async";
 import PageHeader from "@/features/page/components/header/page-header.tsx";
@@ -10,11 +11,12 @@ import { useTranslation } from "react-i18next";
 import React from "react";
 import { EmptyState } from "@/components/ui/empty-state.tsx";
 import { IconAlertTriangle, IconFileOff } from "@tabler/icons-react";
-import { Button } from "@mantine/core";
+import { Button, Container } from "@mantine/core";
 import { Link } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
 import { BaseTable } from "@/features/base/components/base-table";
 const MemoizedFullEditor = React.memo(FullEditor);
+const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageHeader = React.memo(PageHeader);
 const MemoizedHistoryModal = React.memo(HistoryModal);
 
@@ -93,12 +95,39 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
 
   if (page?.isBase) {
     return (
-      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          // PageHeader is position: fixed (45px tall) — without this
+          // padding the BaseToolbar would render under it.
+          paddingTop: 45,
+        }}
+      >
         <Helmet>
           <title>{`${page?.icon || ""}  ${page?.title || t("untitled")}`}</title>
         </Helmet>
         <MemoizedPageHeader readOnly={!canEdit} />
-        <BaseTable pageId={page.id} />
+        <Container size={900} pt={32} pb="sm" w="100%">
+          <MemoizedTitleEditor
+            pageId={page.id}
+            slugId={page.slugId}
+            title={page.title}
+            spaceSlug={page.space?.slug ?? ""}
+            editable={canEdit}
+          />
+        </Container>
+        <div
+          style={{
+            flex: 1,
+            minHeight: 0,
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <BaseTable pageId={page.id} />
+        </div>
       </div>
     );
   }