leaflet.pub
a tool for shared writing and social publishing
add post options wip to the pub settings menu
cozylittle.house
+64
-19
+1
-1
app/lish/[did]/[publication]/dashboard/Actions.tsx
+1
-1
app/lish/[did]/[publication]/dashboard/Actions.tsx
···
1
1
"use client";
2
2
3
3
import { NewDraftActionButton } from "./NewDraftButton";
4
-
import { PublicationSettingsButton } from "./PublicationSettings";
4
+
import { PublicationSettingsButton } from "./settings/PublicationSettings";
5
5
import { ActionButton } from "components/ActionBar/ActionButton";
6
6
import { ShareSmall } from "components/Icons/ShareSmall";
7
7
import { Menu } from "components/Layout";
+28
-14
app/lish/[did]/[publication]/dashboard/PublicationSettings.tsx
app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
+28
-14
app/lish/[did]/[publication]/dashboard/PublicationSettings.tsx
app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
···
12
12
import { ButtonPrimary } from "components/Buttons";
13
13
import { DotLoader } from "components/utils/DotLoader";
14
14
import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
15
+
import { PostOptions } from "./PostOptions";
16
+
17
+
type menuState = "menu" | "general" | "theme" | "post-options";
15
18
16
19
export function PublicationSettingsButton(props: { publication: string }) {
17
20
let isMobile = useIsMobile();
18
-
let [state, setState] = useState<"menu" | "general" | "theme">("menu");
21
+
let [state, setState] = useState<menuState>("menu");
19
22
let [loading, setLoading] = useState(false);
20
23
21
24
return (
···
42
45
/>
43
46
) : state === "theme" ? (
44
47
<PubThemeSetter
48
+
backToMenu={() => setState("menu")}
49
+
loading={loading}
50
+
setLoading={setLoading}
51
+
/>
52
+
) : state === "post-options" ? (
53
+
<PostOptions
45
54
backToMenu={() => setState("menu")}
46
55
loading={loading}
47
56
setLoading={setLoading}
···
59
68
}
60
69
61
70
const PubSettingsMenu = (props: {
62
-
state: "menu" | "general" | "theme";
63
-
setState: (s: typeof props.state) => void;
71
+
state: menuState;
72
+
setState: (s: menuState) => void;
64
73
loading: boolean;
65
74
setLoading: (l: boolean) => void;
66
75
}) => {
···
73
82
loading={props.loading}
74
83
setLoadingAction={props.setLoading}
75
84
state={"menu"}
76
-
/>
85
+
>
86
+
Settings
87
+
</PubSettingsHeader>
77
88
<button
78
89
className={menuItemClassName}
79
90
type="button"
···
81
92
props.setState("general");
82
93
}}
83
94
>
84
-
Publication Settings
95
+
General Settings
85
96
<ArrowRightTiny />
86
97
</button>
87
98
<button
···
89
100
type="button"
90
101
onClick={() => props.setState("theme")}
91
102
>
92
-
Publication Theme
103
+
Theme
104
+
<ArrowRightTiny />
105
+
</button>
106
+
<button
107
+
className={menuItemClassName}
108
+
type="button"
109
+
onClick={() => props.setState("post-options")}
110
+
>
111
+
Post Layout
93
112
<ArrowRightTiny />
94
113
</button>
95
114
</div>
···
97
116
};
98
117
99
118
export const PubSettingsHeader = (props: {
100
-
state: "menu" | "general" | "theme";
119
+
state: menuState;
101
120
backToMenuAction?: () => void;
102
121
loading: boolean;
103
122
setLoadingAction: (l: boolean) => void;
123
+
children: React.ReactNode;
104
124
}) => {
105
125
return (
106
126
<div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1">
107
-
{props.state === "menu"
108
-
? "Settings"
109
-
: props.state === "general"
110
-
? "General"
111
-
: props.state === "theme"
112
-
? "Publication Theme"
113
-
: ""}
127
+
{props.children}
114
128
{props.state !== "menu" && (
115
129
<div className="flex gap-2">
116
130
<button
+27
app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
+27
app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
···
1
+
import { PubSettingsHeader } from "./PublicationSettings";
2
+
3
+
export const PostOptions = (props: {
4
+
backToMenu: () => void;
5
+
loading: boolean;
6
+
setLoading: (l: boolean) => void;
7
+
}) => {
8
+
return (
9
+
<div className="text-primary flex flex-col">
10
+
<PubSettingsHeader
11
+
loading={props.loading}
12
+
setLoadingAction={props.setLoading}
13
+
backToMenuAction={props.backToMenu}
14
+
state={"post-options"}
15
+
>
16
+
Post Options
17
+
</PubSettingsHeader>
18
+
<h4>Layout</h4>
19
+
<div>Post Width</div>
20
+
<div>Show Prev Next Buttons</div>
21
+
<hr />
22
+
<h4>Interactions</h4>
23
+
<div>Show Comments</div>
24
+
<div>Show Mentions</div>
25
+
</div>
26
+
);
27
+
};
+4
-2
app/lish/createPub/UpdatePubForm.tsx
+4
-2
app/lish/createPub/UpdatePubForm.tsx
···
20
20
import Link from "next/link";
21
21
import { Checkbox } from "components/Checkbox";
22
22
import type { GetDomainConfigResponseBody } from "@vercel/sdk/esm/models/getdomainconfigop";
23
-
import { PubSettingsHeader } from "../[did]/[publication]/dashboard/PublicationSettings";
23
+
import { PubSettingsHeader } from "../[did]/[publication]/dashboard/settings/PublicationSettings";
24
24
25
25
export const EditPubForm = (props: {
26
26
backToMenuAction: () => void;
···
86
86
setLoadingAction={props.setLoadingAction}
87
87
backToMenuAction={props.backToMenuAction}
88
88
state={"theme"}
89
-
/>
89
+
>
90
+
General Settings
91
+
</PubSettingsHeader>
90
92
<div className="flex flex-col gap-3 w-[1000px] max-w-full pb-2">
91
93
<div className="flex items-center justify-between gap-2 ">
92
94
<p className="pl-0.5 pb-0.5 text-tertiary italic text-sm font-bold">
+4
-2
components/ThemeManager/PubThemeSetter.tsx
+4
-2
components/ThemeManager/PubThemeSetter.tsx
···
15
15
import { BackgroundPicker } from "./PubPickers/PubBackgroundPickers";
16
16
import { PubAccentPickers } from "./PubPickers/PubAcccentPickers";
17
17
import { Separator } from "components/Layout";
18
-
import { PubSettingsHeader } from "app/lish/[did]/[publication]/dashboard/PublicationSettings";
18
+
import { PubSettingsHeader } from "app/lish/[did]/[publication]/dashboard/settings/PublicationSettings";
19
19
import { ColorToRGB, ColorToRGBA } from "./colorToLexicons";
20
20
import { useToaster } from "components/Toast";
21
21
import { OAuthErrorMessage, isOAuthSessionError } from "components/OAuthError";
···
116
116
setLoadingAction={props.setLoading}
117
117
backToMenuAction={props.backToMenu}
118
118
state={"theme"}
119
-
/>
119
+
>
120
+
Theme
121
+
</PubSettingsHeader>
120
122
</form>
121
123
122
124
<div className="themeSetterContent flex flex-col w-full overflow-y-scroll -mb-2 ">