mirror of
https://github.com/docmost/docmost.git
synced 2026-06-10 01:52:43 +08:00
feat(base): add editable page title above the full-page base view
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.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user