leaflet.pub
a tool for shared writing and social publishing
new doc button update
cozylittle.house
+90
-29
+72
-7
app/(home-pages)/home/Actions/CreateNewButton.tsx
+72
-7
app/(home-pages)/home/Actions/CreateNewButton.tsx
···
1
1
"use client";
2
2
3
+
import { Action } from "@vercel/sdk/esm/models/userevent";
3
4
import { createNewLeaflet } from "actions/createNewLeaflet";
4
5
import { ActionButton } from "components/ActionBar/ActionButton";
5
6
import { AddTiny } from "components/Icons/AddTiny";
7
+
import { ArrowDownTiny } from "components/Icons/ArrowDownTiny";
6
8
import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall";
7
9
import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall";
8
-
import { Menu, MenuItem } from "components/Layout";
10
+
import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
11
+
import { Menu, MenuItem, Separator } from "components/Layout";
9
12
import { useIsMobile } from "src/hooks/isMobile";
13
+
import { useIdentityData } from "components/IdentityProvider";
14
+
import { PubIcon } from "components/ActionBar/Publications";
15
+
import { PubLeafletPublication } from "lexicons/api";
16
+
import { createPublicationDraft } from "actions/createPublicationDraft";
17
+
import { useRouter } from "next/navigation";
18
+
import Link from "next/link";
10
19
11
20
export const CreateNewLeafletButton = (props: {}) => {
12
21
let isMobile = useIsMobile();
···
18
27
}
19
28
};
20
29
return (
30
+
<div className="flex gap-0 flex-row w-full">
31
+
<ActionButton
32
+
id="new-leaflet-button"
33
+
primary
34
+
icon=<AddTiny className="m-1 shrink-0" />
35
+
label="New"
36
+
className="grow rounded-r-none sm:ml-0! sm:mr-0! ml-1! mr-0!"
37
+
/>
38
+
<Separator />
39
+
<CreateNewMoreOptionsButton />
40
+
</div>
41
+
);
42
+
};
43
+
44
+
export const CreateNewMoreOptionsButton = (props: {}) => {
45
+
let { identity } = useIdentityData();
46
+
47
+
let isMobile = useIsMobile();
48
+
let openNewLeaflet = (id: string) => {
49
+
if (isMobile) {
50
+
window.location.href = `/${id}?focusFirstBlock`;
51
+
} else {
52
+
window.open(`/${id}?focusFirstBlock`, "_blank");
53
+
}
54
+
};
55
+
56
+
return (
21
57
<Menu
22
58
asChild
23
59
side={isMobile ? "top" : "right"}
24
60
align={isMobile ? "center" : "start"}
61
+
className="py-2"
25
62
trigger={
26
63
<ActionButton
27
-
id="new-leaflet-button"
64
+
id="new-leaflet-more-options"
28
65
primary
29
-
icon=<AddTiny className="m-1 shrink-0" />
30
-
label="New"
66
+
icon=<ArrowDownTiny className="m-1 shrink-0 sm:-rotate-90 rotate-180" />
67
+
className="shrink-0 rounded-l-none w-[34px]! sm:mr-0! sm:ml-0! mr-1! ml-0!"
31
68
/>
32
69
}
33
70
>
71
+
<div className="mx-2 text-sm text-tertiary ">New Leaflet</div>
34
72
<MenuItem
73
+
className="pt-0.5!"
35
74
onSelect={async () => {
36
75
let id = await createNewLeaflet({
37
76
pageType: "doc",
···
40
79
openNewLeaflet(id);
41
80
}}
42
81
>
43
-
<BlockDocPageSmall />{" "}
82
+
<BlockDocPageSmall />
44
83
<div className="flex flex-col">
45
-
<div>New Doc</div>
84
+
<div>Doc</div>
46
85
<div className="text-tertiary text-sm font-normal">
47
86
A good ol' text document
48
87
</div>
49
88
</div>
50
89
</MenuItem>
51
90
<MenuItem
91
+
className="pt-0.5!"
52
92
onSelect={async () => {
53
93
let id = await createNewLeaflet({
54
94
pageType: "canvas",
···
59
99
>
60
100
<BlockCanvasPageSmall />
61
101
<div className="flex flex-col">
62
-
New Canvas
102
+
Canvas
63
103
<div className="text-tertiary text-sm font-normal">
64
104
A digital whiteboard
65
105
</div>
66
106
</div>
107
+
</MenuItem>
108
+
<div className="mx-2 text-sm text-tertiary mt-2">New Draft</div>
109
+
110
+
{identity?.publications.map((pub) => {
111
+
let router = useRouter();
112
+
return (
113
+
<MenuItem
114
+
onSelect={async () => {
115
+
let newLeaflet = await createPublicationDraft(pub.uri);
116
+
router.push(`/${newLeaflet}`);
117
+
}}
118
+
>
119
+
<PubIcon
120
+
record={pub.record as PubLeafletPublication.Record}
121
+
uri={pub.uri}
122
+
/>
123
+
{pub.name}
124
+
</MenuItem>
125
+
);
126
+
})}
127
+
128
+
<hr className="border-border-light border-dashed mx-2 my-0.5" />
129
+
<MenuItem onSelect={async () => {}}>
130
+
<LooseLeafSmall />
131
+
Looseleaf
67
132
</MenuItem>
68
133
</Menu>
69
134
);
+2
-6
app/(home-pages)/looseleafs/LooseleafsLayout.tsx
+2
-6
app/(home-pages)/looseleafs/LooseleafsLayout.tsx
···
75
75
if (props.empty)
76
76
return (
77
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>
78
+
<div className="italic">You don't have any looseleaf drafts yet…</div>
79
+
<ButtonPrimary className="mx-auto">New Draft</ButtonPrimary>
84
80
</EmptyState>
85
81
);
86
82
return (
+13
-11
components/ActionBar/ActionButton.tsx
+13
-11
components/ActionBar/ActionButton.tsx
···
11
11
_props: ButtonProps & {
12
12
id?: string;
13
13
icon: React.ReactNode;
14
-
label: React.ReactNode;
14
+
label?: React.ReactNode;
15
15
primary?: boolean;
16
16
secondary?: boolean;
17
17
nav?: boolean;
···
69
69
`}
70
70
>
71
71
<div className="shrink-0">{icon}</div>
72
-
<div
73
-
className={`flex flex-col pr-1 leading-snug max-w-full min-w-0 ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
74
-
>
75
-
<div className="truncate text-left pt-[1px]">{label}</div>
76
-
{subtext && (
77
-
<div className="text-xs text-tertiary font-normal text-left">
78
-
{subtext}
79
-
</div>
80
-
)}
81
-
</div>
72
+
{label && (
73
+
<div
74
+
className={`flex flex-col pr-1 leading-snug max-w-full min-w-0 ${sidebar.open ? "block" : showLabelOnMobile ? "sm:hidden block" : "hidden"}`}
75
+
>
76
+
<div className="truncate text-left pt-[1px]">{label}</div>
77
+
{subtext && (
78
+
<div className="text-xs text-tertiary font-normal text-left">
79
+
{subtext}
80
+
</div>
81
+
)}
82
+
</div>
83
+
)}
82
84
</button>
83
85
);
84
86
};
+1
components/ActionBar/Publications.tsx
+1
components/ActionBar/Publications.tsx
+2
-5
components/PageLayouts/DashboardLayout.tsx
+2
-5
components/PageLayouts/DashboardLayout.tsx
···
372
372
);
373
373
}
374
374
375
-
const FilterOptions = (props: {
376
-
hasPubs: boolean;
377
-
hasArchived: boolean;
378
-
}) => {
375
+
const FilterOptions = (props: { hasPubs: boolean; hasArchived: boolean }) => {
379
376
let { filter } = useDashboardState();
380
377
let setState = useSetDashboardState();
381
378
let filterCount = Object.values(filter).filter(Boolean).length;
···
472
469
type="text"
473
470
id="pubName"
474
471
size={1}
475
-
placeholder="search..."
472
+
placeholder="search…"
476
473
value={props.searchValue}
477
474
onChange={(e) => {
478
475
props.setSearchValue(e.currentTarget.value);