Something went wrong. Try again.
leaflet fork for copy edit / bug fixes forked from leaflet.pub/leaflet
Something went wrong. Try again.
3.1 kB · 96 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697"use client";
import { ActionButton } from "components/ActionBar/ActionButton";import { SettingsSmall } from "components/Icons/SettingsSmall";import { Toggle } from "components/Toggle";import { Popover } from "components/Popover";import { useLeafletPublicationData } from "components/PageSWRDataProvider";import { useReplicache } from "src/replicache";import { useSubscribe } from "src/replicache/useSubscribe";
type PostPreferences = { showComments?: boolean; showMentions?: boolean; showRecommends?: boolean;};
export function PostSettings() { let { data: pub, normalizedPublication } = useLeafletPublicationData(); let { rep } = useReplicache();
let postPreferences = useSubscribe(rep, (tx) => tx.get<PostPreferences | null>("post_preferences"), );
if (!pub || !pub.publications) return null;
let pubPrefs = normalizedPublication?.preferences;
let showComments = postPreferences?.showComments ?? pubPrefs?.showComments ?? true; let showMentions = postPreferences?.showMentions ?? pubPrefs?.showMentions ?? true; let showRecommends = postPreferences?.showRecommends ?? pubPrefs?.showRecommends ?? true;
const updatePreference = ( field: keyof PostPreferences, value: boolean, ) => { let current: PostPreferences = postPreferences || {}; rep?.mutate.updatePublicationDraft({ preferences: { ...current, [field]: value }, }); };
return ( <Popover asChild side="right" align="start" className="max-w-xs w-[1000px]" trigger={ <ActionButton icon={<SettingsSmall />} label="Settings" /> } > <div className="text-primary flex flex-col"> <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1"> This Post Settings </div> <div className="flex flex-col gap-2"> <Toggle toggle={showComments} onToggle={() => updatePreference("showComments", !showComments)} > <div className="font-bold">Show Comments</div> </Toggle> <Toggle toggle={showMentions} onToggle={() => updatePreference("showMentions", !showMentions)} > <div className="flex flex-col justify-start"> <div className="font-bold">Show Mentions</div> <div className="text-tertiary text-sm leading-tight"> Display a list of Bluesky mentions about your post </div> </div> </Toggle> <Toggle toggle={showRecommends} onToggle={() => updatePreference("showRecommends", !showRecommends)} > <div className="flex flex-col justify-start"> <div className="font-bold">Show Recommends</div> <div className="text-tertiary text-sm leading-tight"> Allow readers to recommend/like your post </div> </div> </Toggle> </div> </div> </Popover> );}