leaflet.pub
a tool for shared writing and social publishing
added a drafts page to looseleaf, along with some empty states
cozylittle.house
+70
-6
+1
-1
app/(home-pages)/home/HomeLayout.tsx
+1
-1
app/(home-pages)/home/HomeLayout.tsx
···
211
211
className={`
212
212
leafletList
213
213
w-full
214
-
${display === "grid" ? "grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-x-6 sm:gap-y-5 grow" : "flex flex-col gap-2 pt-2"} `}
214
+
${display === "grid" ? "grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-x-6 sm:gap-y-5 grow" : "flex flex-col gap-2 "} `}
215
215
>
216
216
{props.leaflets.map(({ token: leaflet, added_at, archived }, index) => (
217
217
<ReplicacheProvider
+50
-3
app/(home-pages)/looseleafs/LooseleafsLayout.tsx
+50
-3
app/(home-pages)/looseleafs/LooseleafsLayout.tsx
···
1
1
"use client";
2
-
import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
2
+
import {
3
+
DashboardLayout,
4
+
PublicationDashboardControls,
5
+
} from "components/PageLayouts/DashboardLayout";
3
6
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
4
7
import { useState } from "react";
5
8
import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
···
11
14
import useSWR from "swr";
12
15
import { getHomeDocs } from "../home/storage";
13
16
import { Leaflet, LeafletList } from "../home/HomeLayout";
17
+
import { EmptyState } from "components/EmptyState";
18
+
import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
14
19
15
20
export const LooseleafsLayout = (props: {
16
21
entityID: string | null;
···
36
41
id="looseleafs"
37
42
cardBorderHidden={cardBorderHidden}
38
43
currentPage="looseleafs"
39
-
defaultTab="home"
44
+
defaultTab="Drafts"
40
45
actions={<Actions />}
41
46
tabs={{
42
-
home: {
47
+
Drafts: {
48
+
controls: (
49
+
<PublicationDashboardControls
50
+
defaultDisplay={"list"}
51
+
hasBackgroundImage={cardBorderHidden}
52
+
searchValue={searchValue}
53
+
setSearchValueAction={setSearchValue}
54
+
/>
55
+
),
56
+
content: <LooseleafDraftList empty={true} />,
57
+
},
58
+
Published: {
43
59
controls: null,
44
60
content: (
45
61
<LooseleafList
···
55
71
);
56
72
};
57
73
74
+
const LooseleafDraftList = (props: { empty: boolean }) => {
75
+
if (props.empty)
76
+
return (
77
+
<EmptyState className="pt-2">
78
+
<div className="italic">
79
+
You haven't written any looseleaf drafts yet.
80
+
</div>
81
+
<ButtonPrimary className="mx-auto">
82
+
Start a Looseleaf Draft
83
+
</ButtonPrimary>
84
+
</EmptyState>
85
+
);
86
+
return (
87
+
<div className="flex flex-col">
88
+
<ButtonSecondary fullWidth>New Looseleaf Draft</ButtonSecondary>
89
+
This is where the draft would go if we had them lol
90
+
</div>
91
+
);
92
+
};
93
+
58
94
export const LooseleafList = (props: {
59
95
titles: { [root_entity: string]: string };
60
96
initialFacts: {
···
102
138
token: ptoh.permission_tokens as PermissionToken,
103
139
}))
104
140
: [];
141
+
142
+
if (!leaflets || leaflets.length === 0)
143
+
return (
144
+
<EmptyState>
145
+
<div className="italic">You haven't published any looseleafs yet.</div>
146
+
<ButtonPrimary className="mx-auto">
147
+
Start a Looseleaf Draft
148
+
</ButtonPrimary>
149
+
</EmptyState>
150
+
);
151
+
105
152
return (
106
153
<LeafletList
107
154
defaultDisplay="list"
+2
-2
components/ActionBar/Publications.tsx
+2
-2
components/ActionBar/Publications.tsx
···
23
23
currentPubUri: string | undefined;
24
24
}) => {
25
25
let { identity } = useIdentityData();
26
-
let looseleaves = identity?.permission_token_on_homepage.find(
26
+
let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
27
27
(f) => f.permission_tokens.leaflets_to_documents,
28
28
);
29
29
···
34
34
35
35
return (
36
36
<div className="pubListWrapper w-full flex flex-col gap-1 sm:bg-transparent sm:border-0">
37
-
{looseleaves && (
37
+
{hasLooseleafs && (
38
38
<>
39
39
<SpeedyLink
40
40
href={`/looseleafs`}
+17
components/EmptyState.tsx
+17
components/EmptyState.tsx
···
1
+
export const EmptyState = (props: {
2
+
children: React.ReactNode;
3
+
className?: string;
4
+
}) => {
5
+
return (
6
+
<div
7
+
className={`
8
+
flex flex-col gap-2 justify-between
9
+
container bg-[rgba(var(--bg-page),.7)]
10
+
sm:p-4 p-3 mt-2
11
+
text-center text-tertiary
12
+
${props.className}`}
13
+
>
14
+
{props.children}
15
+
</div>
16
+
);
17
+
};