leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2
3import { ActionButton } from "components/ActionBar/ActionButton";
4import { SettingsSmall } from "components/Icons/SettingsSmall";
5import { Toggle } from "components/Toggle";
6import { Popover } from "components/Popover";
7import { useLeafletPublicationData } from "components/PageSWRDataProvider";
8import { useReplicache } from "src/replicache";
9import { useSubscribe } from "src/replicache/useSubscribe";
10
11type PostPreferences = {
12 showComments?: boolean;
13 showMentions?: boolean;
14 showRecommends?: boolean;
15};
16
17export function PostSettings() {
18 let { data: pub, normalizedPublication } = useLeafletPublicationData();
19 let { rep } = useReplicache();
20
21 let postPreferences = useSubscribe(rep, (tx) =>
22 tx.get<PostPreferences | null>("post_preferences"),
23 );
24
25 if (!pub || !pub.publications) return null;
26
27 let pubPrefs = normalizedPublication?.preferences;
28
29 let showComments =
30 postPreferences?.showComments ?? pubPrefs?.showComments ?? true;
31 let showMentions =
32 postPreferences?.showMentions ?? pubPrefs?.showMentions ?? true;
33 let showRecommends =
34 postPreferences?.showRecommends ?? pubPrefs?.showRecommends ?? true;
35
36 const updatePreference = (
37 field: keyof PostPreferences,
38 value: boolean,
39 ) => {
40 let current: PostPreferences = postPreferences || {};
41 rep?.mutate.updatePublicationDraft({
42 preferences: { ...current, [field]: value },
43 });
44 };
45
46 return (
47 <Popover
48 asChild
49 side="right"
50 align="start"
51 className="max-w-xs w-[1000px]"
52 trigger={
53 <ActionButton
54 icon={<SettingsSmall />}
55 label="Settings"
56 />
57 }
58 >
59 <div className="text-primary flex flex-col">
60 <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1">
61 This Post Settings
62 </div>
63 <div className="flex flex-col gap-2">
64 <Toggle
65 toggle={showComments}
66 onToggle={() => updatePreference("showComments", !showComments)}
67 >
68 <div className="font-bold">Show Comments</div>
69 </Toggle>
70 <Toggle
71 toggle={showMentions}
72 onToggle={() => updatePreference("showMentions", !showMentions)}
73 >
74 <div className="flex flex-col justify-start">
75 <div className="font-bold">Show Mentions</div>
76 <div className="text-tertiary text-sm leading-tight">
77 Display a list of Bluesky mentions about your post
78 </div>
79 </div>
80 </Toggle>
81 <Toggle
82 toggle={showRecommends}
83 onToggle={() => updatePreference("showRecommends", !showRecommends)}
84 >
85 <div className="flex flex-col justify-start">
86 <div className="font-bold">Show Recommends</div>
87 <div className="text-tertiary text-sm leading-tight">
88 Allow readers to recommend/like your post
89 </div>
90 </div>
91 </Toggle>
92 </div>
93 </div>
94 </Popover>
95 );
96}