leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2import { useUIState } from "src/useUIState";
3import { Media } from "./Media";
4import { Toolbar } from "./Toolbar";
5import { FootnoteToolbar } from "./Toolbar/FootnoteToolbarWrapper";
6import { useEntitySetContext } from "./EntitySetProvider";
7import { focusBlock } from "src/utils/focusBlock";
8import { hasBlockToolbar } from "app/[leaflet_id]/Footer";
9import { useEntity } from "src/replicache";
10
11export function DesktopPageFooter(props: { pageID: string }) {
12 let focusedEntity = useUIState((s) => s.focusedEntity);
13 let focusedBlockParentID =
14 focusedEntity?.entityType === "page"
15 ? focusedEntity.entityID
16 : focusedEntity?.parent;
17 let entity_set = useEntitySetContext();
18
19 let blockType = useEntity(focusedEntity?.entityID || null, "block/type")?.data
20 .value;
21
22 let isFootnoteFocused =
23 focusedEntity?.entityType === "footnote" &&
24 focusedEntity.parent === props.pageID;
25
26 return (
27 <Media
28 mobile={false}
29 className="absolute bottom-[40px] w-full z-10 pointer-events-none"
30 >
31 {focusedEntity &&
32 focusedEntity.entityType === "block" &&
33 hasBlockToolbar(blockType) &&
34 entity_set.permissions.write &&
35 focusedBlockParentID === props.pageID && (
36 <div
37 className="pointer-events-auto w-fit mx-auto py-1 px-3 h-9 bg-bg-page border border-border rounded-full shadow-sm"
38 onMouseDown={(e) => {
39 if (e.currentTarget === e.target) e.preventDefault();
40 }}
41 >
42 <Toolbar
43 blockType={blockType}
44 pageID={focusedBlockParentID}
45 blockID={focusedEntity.entityID}
46 />
47 </div>
48 )}
49 {isFootnoteFocused && entity_set.permissions.write && (
50 <div
51 className="pointer-events-auto w-fit mx-auto py-1 px-3 h-9 bg-bg-page border border-border rounded-full shadow-sm"
52 onMouseDown={(e) => {
53 if (e.currentTarget === e.target) e.preventDefault();
54 }}
55 >
56 <FootnoteToolbar pageID={props.pageID} />
57 </div>
58 )}
59 </Media>
60 );
61}