leaflet.pub
a tool for shared writing and social publishing
oops a bunch of stuff
cozylittle.house
+37
-6
app/lish/[handle]/[publication]/DraftList.tsx
+37
-6
app/lish/[handle]/[publication]/DraftList.tsx
···
5
5
import { usePublicationContext } from "components/Providers/PublicationContext";
6
6
import Link from "next/link";
7
7
import { NewDraftSecondaryButton } from "./NewDraftButton";
8
+
import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny";
9
+
import { Menu, MenuItem } from "components/Layout";
10
+
import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
11
+
import { DeleteSmall } from "components/Icons/DeleteSmall";
8
12
9
13
export function DraftList(props: {
10
14
publication: string;
···
19
23
if (!publication) return null;
20
24
if (!rel?.isAuthor) return null;
21
25
return (
22
-
<div className="flex flex-col gap-2">
26
+
<div className="flex flex-col gap-4">
23
27
<NewDraftSecondaryButton publication={props.publication} />
24
28
{props.drafts.map((d) => {
25
-
return <Draft id={d.leaflet} key={d.leaflet} {...d} />;
29
+
return (
30
+
<>
31
+
<Draft id={d.leaflet} key={d.leaflet} {...d} />
32
+
<hr className="last:hidden border-border-light" />
33
+
</>
34
+
);
26
35
})}
27
36
</div>
28
37
);
29
38
}
30
39
31
-
function Draft(props: { id: string; title: string }) {
40
+
function Draft(props: { id: string; title: string; description: string }) {
32
41
return (
33
-
<Link key={props.id} href={`/${props.id}`}>
34
-
<h3>{props.title}</h3>
35
-
</Link>
42
+
<div className="flex flex-row gap-2 items-start">
43
+
<Link
44
+
key={props.id}
45
+
href={`/${props.id}`}
46
+
className="flex flex-col gap-0 hover:!no-underline grow"
47
+
>
48
+
{props.title ? (
49
+
<h3 className="text-primary">{props.title}</h3>
50
+
) : (
51
+
<h3 className="text-tertiary italic">Untitled</h3>
52
+
)}
53
+
<div className="text-secondary italic">{props.description}</div>
54
+
</Link>
55
+
<DraftOptionsMenu />
56
+
</div>
36
57
);
37
58
}
59
+
60
+
const DraftOptionsMenu = () => {
61
+
return (
62
+
<Menu trigger={<MoreOptionsVerticalTiny />}>
63
+
<MenuItem onSelect={() => {}}>
64
+
<DeleteSmall /> Delete Draft
65
+
</MenuItem>
66
+
</Menu>
67
+
);
68
+
};
+1
-1
app/lish/[handle]/[publication]/NewDraftButton.tsx
+1
-1
app/lish/[handle]/[publication]/NewDraftButton.tsx
+3
-3
app/lish/[handle]/[publication]/PublicationDashboard.tsx
+3
-3
app/lish/[handle]/[publication]/PublicationDashboard.tsx
···
11
11
let content = props.tabs[tab];
12
12
return (
13
13
<div className="w-full flex flex-col items-stretch">
14
-
<div className="flex flex-row w-full justify-between border-b border-border text-secondary">
15
-
<div>{props.name}</div>
14
+
<div className="flex flex-row w-full justify-between border-b border-border text-secondary items-center">
15
+
<div className="font-bold text-tertiary">{props.name}</div>
16
16
<div className="flex flex-row gap-2">
17
17
{Object.keys(props.tabs).map((t) => (
18
18
<Tab
···
32
32
function Tab(props: { name: string; selected: boolean; onSelect: () => void }) {
33
33
return (
34
34
<div
35
-
className={`border bg-bg-page border-b-0 px-2 pt-1 rounded-t-md border-border ${props.selected ? "text-accent-1 font-bold -mb-[1px]" : ""}`}
35
+
className={`border bg-bg-page border-b-0 px-2 pt-1 pb-0.5 rounded-t-md border-border ${props.selected ? "text-accent-1 font-bold -mb-[1px]" : ""}`}
36
36
onClick={() => props.onSelect()}
37
37
>
38
38
{props.name}
+9
-5
app/lish/[handle]/[publication]/page.tsx
+9
-5
app/lish/[handle]/[publication]/page.tsx
···
61
61
62
62
try {
63
63
return (
64
-
<div className="relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6">
65
-
<Sidebar className="mt-6 p-2">
66
-
<Actions publication={publication.uri} />
67
-
</Sidebar>
68
-
<div className={`h-full overflow-y-scroll pl-8 pt-8 w-full`}>
64
+
<div className="relative max-w-prose w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6">
65
+
<div className="w-12 relative">
66
+
<Sidebar className="mt-6 p-2">
67
+
<Actions publication={publication.uri} />
68
+
</Sidebar>
69
+
</div>
70
+
<div
71
+
className={`h-full overflow-y-scroll pt-4 px-3 sm:pl-8 sm:pr-1 sm:pt-9 w-full`}
72
+
>
69
73
<PublicationDashboard
70
74
name={publication.name}
71
75
tabs={{
+18
components/Icons/MoreOptionsVerticalTiny.tsx
+18
components/Icons/MoreOptionsVerticalTiny.tsx
···
1
+
import { Props } from "./Props";
2
+
3
+
export const MoreOptionsVerticalTiny = (props: Props) => {
4
+
return (
5
+
<svg
6
+
width="12"
7
+
height="24"
8
+
viewBox="0 0 12 24"
9
+
fill="none"
10
+
xmlns="http://www.w3.org/2000/svg"
11
+
>
12
+
<path
13
+
d="M6 15.5C6.82843 15.5 7.5 16.1716 7.5 17C7.5 17.8284 6.82843 18.5 6 18.5C5.17157 18.5 4.5 17.8284 4.5 17C4.5 16.1716 5.17157 15.5 6 15.5ZM6 10.5C6.82843 10.5 7.5 11.1716 7.5 12C7.5 12.8284 6.82843 13.5 6 13.5C5.17157 13.5 4.5 12.8284 4.5 12C4.5 11.1716 5.17157 10.5 6 10.5ZM6 5.5C6.82843 5.5 7.5 6.17157 7.5 7C7.5 7.82843 6.82843 8.5 6 8.5C5.17157 8.5 4.5 7.82843 4.5 7C4.5 6.17157 5.17157 5.5 6 5.5Z"
14
+
fill="currentColor"
15
+
/>
16
+
</svg>
17
+
);
18
+
};
+3
-3
components/Pages/PublicationMetadata.tsx
+3
-3
components/Pages/PublicationMetadata.tsx
···
43
43
44
44
return (
45
45
<div
46
-
className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-6 ${cardBorderHidden ? "sm:pt-6 pt-0" : "sm:pt-4 pt-2"}`}
46
+
className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-4 ${cardBorderHidden ? "sm:pt-6 pt-0" : "sm:pt-4 pt-2"}`}
47
47
>
48
48
<Link
49
49
href={`/lish/${identity?.resolved_did?.alsoKnownAs?.[0].slice(5)}/${pub.publications.name}`}
···
61
61
/>
62
62
<AutosizeTextarea
63
63
placeholder="add an optional description..."
64
-
className="italic text-secondary outline-none bg-transparent"
64
+
className="italic text-secondary outline-none bg-transparent pt-1"
65
65
value={descriptionState}
66
66
onChange={(e) => {
67
67
setDescriptionState(e.currentTarget.value);
···
70
70
{pub.doc ? (
71
71
<p>Published</p>
72
72
) : (
73
-
<p className="text-sm text-tertiary p-1">Draft</p>
73
+
<p className="text-sm text-tertiary pt-1">Draft</p>
74
74
)}
75
75
</div>
76
76
);