leaflet.pub
a tool for shared writing and social publishing
reorg leaflet layout components, add basic sidebar
awarm.space
+22
-9
app/[leaflet_id]/Leaflet.tsx
+22
-9
app/[leaflet_id]/Leaflet.tsx
···
1
+
"use client";
1
2
import { Fact, PermissionToken, ReplicacheProvider } from "src/replicache";
2
-
import { Database } from "../../supabase/database.types";
3
3
import { Attributes } from "src/replicache/attributes";
4
-
import { createServerClient } from "@supabase/ssr";
5
4
import { SelectionManager } from "components/SelectionManager";
6
5
import { Pages } from "components/Pages";
7
6
import {
···
9
8
ThemeProvider,
10
9
} from "components/ThemeManager/ThemeProvider";
11
10
import { MobileFooter } from "components/MobileFooter";
12
-
import { PopUpProvider } from "components/Toast";
13
-
import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment";
14
-
import {
15
-
EntitySetContext,
16
-
EntitySetProvider,
17
-
} from "components/EntitySetProvider";
11
+
import { EntitySetProvider } from "components/EntitySetProvider";
18
12
import { AddLeafletToHomepage } from "components/utils/AddLeafletToHomepage";
19
13
import { UpdateLeafletTitle } from "components/utils/UpdateLeafletTitle";
14
+
import { useUIState } from "src/useUIState";
15
+
import { LeafletSidebar } from "./Sidebar";
16
+
20
17
export function Leaflet(props: {
21
18
token: PermissionToken;
22
19
initialFacts: Fact<keyof typeof Attributes>[];
···
43
40
className="leafletContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full pb-4 pwa-padding"
44
41
id="page-carousel"
45
42
>
46
-
<Pages rootPage={props.leaflet_id} />
43
+
<div
44
+
id="pages"
45
+
className="pages flex pt-2 pb-1 sm:pb-8 sm:py-6"
46
+
onClick={(e) => {
47
+
e.currentTarget === e.target && blurPage();
48
+
}}
49
+
>
50
+
<LeafletSidebar leaflet_id={props.leaflet_id} />
51
+
<Pages rootPage={props.leaflet_id} />
52
+
</div>
47
53
</div>
48
54
<MobileFooter entityID={props.leaflet_id} />
49
55
</ThemeBackgroundProvider>
···
52
58
</ReplicacheProvider>
53
59
);
54
60
}
61
+
62
+
const blurPage = () => {
63
+
useUIState.setState(() => ({
64
+
focusedEntity: null,
65
+
selectedBlocks: [],
66
+
}));
67
+
};
+56
app/[leaflet_id]/Sidebar.tsx
+56
app/[leaflet_id]/Sidebar.tsx
···
1
+
"use client";
2
+
import { Sidebar } from "components/ActionBar/Sidebar";
3
+
import { useEntitySetContext } from "components/EntitySetProvider";
4
+
import { HelpPopover } from "components/HelpPopover";
5
+
import { HomeButton } from "components/HomeButton";
6
+
import { usePublicationContext } from "components/Providers/PublicationContext";
7
+
import { ShareOptions } from "components/ShareOptions";
8
+
import { PublishToPublication } from "components/ShareOptions/PublicationOptions";
9
+
import { ThemePopover } from "components/ThemeManager/ThemeSetter";
10
+
import { Watermark } from "components/Watermark";
11
+
import { useUIState } from "src/useUIState";
12
+
13
+
export function LeafletSidebar(props: { leaflet_id: string }) {
14
+
let entity_set = useEntitySetContext();
15
+
let publication = usePublicationContext();
16
+
return (
17
+
<div
18
+
className="spacer flex justify-end items-start"
19
+
style={{ width: `calc(50vw - ((var(--page-width-units)/2))` }}
20
+
onClick={(e) => {
21
+
e.currentTarget === e.target && blurPage();
22
+
}}
23
+
>
24
+
<Sidebar>
25
+
{entity_set.permissions.write ? (
26
+
<div className=" flex flex-col justify-center gap-2 mr-4">
27
+
{publication.publication && (
28
+
<div className="relative w-[30px] h-[76px]">
29
+
<div className="origin-top-left -rotate-90 absolute translate-y-[76px]">
30
+
<PublishToPublication />
31
+
</div>
32
+
</div>
33
+
)}
34
+
<ShareOptions />
35
+
<ThemePopover entityID={props.leaflet_id} />
36
+
<HelpPopover />
37
+
<hr className="text-border my-3" />
38
+
<HomeButton />
39
+
</div>
40
+
) : (
41
+
<div>
42
+
<HomeButton />
43
+
</div>
44
+
)}
45
+
<Watermark />
46
+
</Sidebar>
47
+
</div>
48
+
);
49
+
}
50
+
51
+
const blurPage = () => {
52
+
useUIState.setState(() => ({
53
+
focusedEntity: null,
54
+
selectedBlocks: [],
55
+
}));
56
+
};
+11
components/ActionBar/Sidebar.tsx
+11
components/ActionBar/Sidebar.tsx
···
1
+
import { Media } from "components/Media";
2
+
3
+
export function Sidebar(props: { children?: React.ReactNode }) {
4
+
return (
5
+
<Media mobile={false} className="h-full">
6
+
<div className="flex flex-col h-full justify-between mt-1">
7
+
{props.children}
8
+
</div>
9
+
</Media>
10
+
);
11
+
}
+2
-41
components/Pages/index.tsx
+2
-41
components/Pages/index.tsx
···
60
60
let publication = usePublicationContext();
61
61
62
62
return (
63
-
<div
64
-
id="pages"
65
-
className="pages flex pt-2 pb-1 sm:pb-8 sm:py-6"
66
-
onClick={(e) => {
67
-
e.currentTarget === e.target && blurPage();
68
-
}}
69
-
>
70
-
<div
71
-
className="spacer flex justify-end items-start"
72
-
style={{ width: `calc(50vw - ((var(--page-width-units)/2))` }}
73
-
onClick={(e) => {
74
-
e.currentTarget === e.target && blurPage();
75
-
}}
76
-
>
77
-
<Media mobile={false} className="h-full">
78
-
<div className="flex flex-col h-full justify-between mt-1">
79
-
{entity_set.permissions.write ? (
80
-
<div className=" flex flex-col justify-center gap-2 mr-4">
81
-
{publication.publication && (
82
-
<div className="relative w-[30px] h-[76px]">
83
-
<div className="origin-top-left -rotate-90 absolute translate-y-[76px]">
84
-
<PublishToPublication />
85
-
</div>
86
-
</div>
87
-
)}
88
-
<ShareOptions />
89
-
<ThemePopover entityID={props.rootPage} />
90
-
<HelpPopover />
91
-
<hr className="text-border my-3" />
92
-
<HomeButton />
93
-
</div>
94
-
) : (
95
-
<div>
96
-
<HomeButton />
97
-
</div>
98
-
)}
99
-
<Watermark />
100
-
</div>
101
-
</Media>
102
-
</div>
63
+
<>
103
64
<div className="flex items-stretch">
104
65
<CardThemeProvider entityID={firstPage}>
105
66
<Page entityID={firstPage} first />
···
119
80
e.currentTarget === e.target && blurPage();
120
81
}}
121
82
/>
122
-
</div>
83
+
</>
123
84
);
124
85
}
125
86