a tool for shared writing and social publishing
leaflet.pub
1"use client";
2import { useIdentityData } from "components/IdentityProvider";
3import { getBasePublicationURL } from "app/lish/createPub/getPublicationURL";
4import {
5 normalizePublicationRecord,
6 type NormalizedPublication,
7} from "src/utils/normalizeRecords";
8import { SpeedyLink } from "components/SpeedyLink";
9import { Popover } from "components/Popover";
10import { ButtonPrimary } from "components/Buttons";
11import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
12import { HomeButton, type navPages } from "./NavigationButtons";
13import { HomeSmall } from "components/Icons/HomeSmall";
14import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
15import { PubIcon, PublicationButtons } from "./Publications";
16import { HomeTiny } from "components/Icons/HomeTiny";
17import { LooseleafTiny } from "components/Icons/LooseleafTiny";
18import { Separator } from "components/Layout";
19import { Menu, MenuItem } from "components/Menu";
20import { AddTiny } from "components/Icons/AddTiny";
21
22export const PublicationNavigation = (props: {
23 currentPage: navPages;
24 currentPubUri?: string;
25}) => {
26 let { identity } = useIdentityData();
27
28 if (!identity) return;
29
30 let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
31 (f) =>
32 f.permission_tokens.leaflets_to_documents &&
33 f.permission_tokens.leaflets_to_documents[0]?.document,
34 );
35
36 let pubCount = identity?.publications.length ?? 0;
37 let onlyOnePub = pubCount === 1 && hasLooseleafs;
38 let onlyLooseleafs = pubCount === 0 && hasLooseleafs;
39 let className =
40 "font-bold text-secondary flex gap-2 items-center grow min-w-0 text-sm h-[34px] px-2 accent-container";
41
42 // if not publications or looseleafs
43 if (!identity.publications && !hasLooseleafs) {
44 return (
45 <SpeedyLink href="/lish/createPub">
46 <ButtonPrimary compact className="text-sm!">
47 Create a Publication!
48 </ButtonPrimary>
49 </SpeedyLink>
50 );
51 }
52
53 switch (props.currentPage) {
54 case "looseleafs":
55 case "pub":
56 if (onlyLooseleafs || onlyOnePub)
57 return (
58 <>
59 <SpeedyLink href={`/home`} className={className}>
60 <HomeTiny className="shrink-0" />
61 Home
62 </SpeedyLink>
63 </>
64 );
65 break;
66 case "home": {
67 if (onlyLooseleafs || onlyOnePub) {
68 let pub = identity.publications[0];
69 return (
70 <div className={className}>
71 <Menu trigger={<MoreOptionsVerticalTiny className="shrink-0" />}>
72 <SpeedyLink href="/createPub">
73 <MenuItem className="items-center! text-sm" onSelect={() => {}}>
74 <AddTiny />
75 Create New Publication
76 </MenuItem>
77 </SpeedyLink>
78 </Menu>
79 <Separator classname="h-6!" />
80 {onlyLooseleafs ? (
81 <SpeedyLink
82 href="/looseleafs"
83 className="hover:no-underline! text-inherit flex gap-2 items-center pr-2 w-full min-w-0"
84 >
85 <LooseleafTiny className="shrink-0" /> Looseleafs
86 </SpeedyLink>
87 ) : (
88 <SpeedyLink
89 href={`${getBasePublicationURL(pub)}/dashboard`}
90 className="hover:no-underline! text-inherit flex gap-2 items-center pr-2 w0ull min-w-0"
91 >
92 <PubIcon
93 small
94 record={normalizePublicationRecord(pub.record)}
95 uri={pub.uri}
96 />
97 <div className="truncate min-w-0">{pub.name}</div>
98 </SpeedyLink>
99 )}
100 </div>
101 );
102 }
103 break;
104 }
105 }
106
107 return (
108 <Popover
109 trigger={
110 <div className={className}>
111 <PubIcons
112 publications={identity.publications.map((pub) => ({
113 record: normalizePublicationRecord(pub.record),
114 uri: pub.uri,
115 }))}
116 />{" "}
117 Publications
118 </div>
119 }
120 className="pt-1 px-2!"
121 >
122 <HomeButton current={props.currentPage === "home"} />
123 <hr className="my-1 border-border-light" />
124 <PublicationButtons
125 currentPage={props.currentPage}
126 currentPubUri={props.currentPubUri}
127 />
128 </Popover>
129 );
130};
131
132function PubIcons(props: {
133 publications: { record: NormalizedPublication | null; uri: string }[];
134}) {
135 if (props.publications.length < 1) return null;
136 return (
137 <div className="flex">
138 {props.publications.map((pub, index) => {
139 if (index <= 2)
140 return (
141 <div className="-ml-[6px] first:ml-0" key={pub.uri}>
142 <PubIcon small record={pub.record} uri={pub.uri} />
143 </div>
144 );
145 })}
146 </div>
147 );
148}