mirror of
https://github.com/docmost/docmost.git
synced 2026-08-28 17:27:06 +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 { useParams } from "react-router-dom";
|
||||||
import { usePageQuery } from "@/features/page/queries/page-query";
|
import { usePageQuery } from "@/features/page/queries/page-query";
|
||||||
import { FullEditor } from "@/features/editor/full-editor";
|
import { FullEditor } from "@/features/editor/full-editor";
|
||||||
|
import { TitleEditor } from "@/features/editor/title-editor";
|
||||||
import HistoryModal from "@/features/page-history/components/history-modal";
|
import HistoryModal from "@/features/page-history/components/history-modal";
|
||||||
import { Helmet } from "react-helmet-async";
|
import { Helmet } from "react-helmet-async";
|
||||||
import PageHeader from "@/features/page/components/header/page-header.tsx";
|
import PageHeader from "@/features/page/components/header/page-header.tsx";
|
||||||
@@ -10,11 +11,12 @@ import { useTranslation } from "react-i18next";
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { EmptyState } from "@/components/ui/empty-state.tsx";
|
import { EmptyState } from "@/components/ui/empty-state.tsx";
|
||||||
import { IconAlertTriangle, IconFileOff } from "@tabler/icons-react";
|
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 { Link } from "react-router-dom";
|
||||||
import { ErrorBoundary } from "react-error-boundary";
|
import { ErrorBoundary } from "react-error-boundary";
|
||||||
import { BaseTable } from "@/features/base/components/base-table";
|
import { BaseTable } from "@/features/base/components/base-table";
|
||||||
const MemoizedFullEditor = React.memo(FullEditor);
|
const MemoizedFullEditor = React.memo(FullEditor);
|
||||||
|
const MemoizedTitleEditor = React.memo(TitleEditor);
|
||||||
const MemoizedPageHeader = React.memo(PageHeader);
|
const MemoizedPageHeader = React.memo(PageHeader);
|
||||||
const MemoizedHistoryModal = React.memo(HistoryModal);
|
const MemoizedHistoryModal = React.memo(HistoryModal);
|
||||||
|
|
||||||
@@ -93,12 +95,39 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
|
|||||||
|
|
||||||
if (page?.isBase) {
|
if (page?.isBase) {
|
||||||
return (
|
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>
|
<Helmet>
|
||||||
<title>{`${page?.icon || ""} ${page?.title || t("untitled")}`}</title>
|
<title>{`${page?.icon || ""} ${page?.title || t("untitled")}`}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<MemoizedPageHeader readOnly={!canEdit} />
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user