✏️(frontend) child document with different wording

We want to have a different wording when the child
document has no title, so we can distinguish
between the two cases.
This commit is contained in:
Anthony LC
2025-07-01 15:24:32 +02:00
committed by Nathan Panchout
parent 6188427b58
commit c438d4f081
8 changed files with 18 additions and 28 deletions
@@ -54,11 +54,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
$padding={{ horizontal: isDesktop ? '54px' : 'base' }}
className="--docs--doc-editor-header"
>
{isVersion ? (
<DocVersionHeader title={doc.title} />
) : (
<DocHeader doc={doc} />
)}
{isVersion ? <DocVersionHeader /> : <DocHeader doc={doc} />}
</Box>
<Box
@@ -46,8 +46,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
const [format, setFormat] = useState<DocDownloadFormat>(
DocDownloadFormat.PDF,
);
const { untitledDocument } = useTrans();
const { untitledDocument } = useTrans(doc);
const templateOptions = useMemo(() => {
const templateOptions = (templates?.pages || [])
.map((page) =>
@@ -13,6 +13,7 @@ import {
KEY_DOC,
KEY_LIST_DOC,
KEY_SUB_PAGE,
useDocStore,
useTrans,
useUpdateDoc,
} from '@/docs/doc-management';
@@ -24,19 +25,16 @@ interface DocTitleProps {
export const DocTitle = ({ doc }: DocTitleProps) => {
if (!doc.abilities.partial_update) {
return <DocTitleText title={doc.title} />;
return <DocTitleText />;
}
return <DocTitleInput doc={doc} />;
};
interface DocTitleTextProps {
title?: string;
}
export const DocTitleText = ({ title }: DocTitleTextProps) => {
export const DocTitleText = () => {
const { isMobile } = useResponsiveStore();
const { untitledDocument } = useTrans();
const { currentDoc } = useDocStore();
const { untitledDocument } = useTrans(currentDoc);
return (
<Text
@@ -45,7 +43,7 @@ export const DocTitleText = ({ title }: DocTitleTextProps) => {
$size={isMobile ? 'h4' : 'h2'}
$variation="1000"
>
{title || untitledDocument}
{currentDoc?.title || untitledDocument}
</Text>
);
};
@@ -57,7 +55,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
const { colorsTokens } = useCunninghamTheme();
const [titleDisplay, setTitleDisplay] = useState(doc.title);
const { untitledDocument } = useTrans();
const { untitledDocument } = useTrans(doc);
const { broadcast } = useBroadcastStore();
@@ -5,11 +5,7 @@ import { useCunninghamTheme } from '@/cunningham';
import { DocTitleText } from './DocTitle';
interface DocVersionHeaderProps {
title?: string;
}
export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
export const DocVersionHeader = () => {
const { spacingsTokens } = useCunninghamTheme();
const { t } = useTranslation();
@@ -23,7 +19,7 @@ export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
aria-label={t('It is the document title')}
className="--docs--doc-version-header"
>
<DocTitleText title={title} />
<DocTitleText />
<HorizontalSeparator />
</Box>
</>
@@ -29,7 +29,7 @@ export const ModalRemoveDoc = ({
const { toast } = useToastProvider();
const { push } = useRouter();
const pathname = usePathname();
const { untitledDocument } = useTrans();
const { untitledDocument } = useTrans(doc);
const {
mutate: removeDoc,
@@ -1,9 +1,10 @@
import { useTranslation } from 'react-i18next';
import { Role } from '../types';
import { Doc, Role } from '../types';
export const useTrans = () => {
export const useTrans = (doc?: Doc) => {
const { t } = useTranslation();
const isChild = doc && doc.nb_accesses_ancestors > 1;
const translatedRoles = {
[Role.READER]: t('Reader'),
@@ -16,7 +17,7 @@ export const useTrans = () => {
transRole: (role: Role) => {
return translatedRoles[role];
},
untitledDocument: t('Untitled document'),
untitledDocument: isChild ? t('Untitled page') : t('Untitled document'),
translatedRoles,
};
};
@@ -34,7 +34,7 @@ type Props = TreeViewNodeProps<Doc>;
export const DocSubPageItem = (props: Props) => {
const doc = props.node.data.value as Doc;
const treeContext = useTreeContext<Doc>();
const { untitledDocument } = useTrans();
const { untitledDocument } = useTrans(doc);
const { node } = props;
const { spacingsTokens } = useCunninghamTheme();
const [isHover, setIsHover] = useState(false);
@@ -34,7 +34,7 @@ export const SimpleDocItem = ({
const { t } = useTranslation();
const { spacingsTokens, colorsTokens } = useCunninghamTheme();
const { isDesktop } = useResponsiveStore();
const { untitledDocument } = useTrans();
const { untitledDocument } = useTrans(doc);
return (
<Box