refactor: moderation as singleton service

src/api/queries/timeline.ts

···
 import { globalEvents } from '~/globals/events';
 
 import { useAgent } from '~/lib/states/agent';
-import { useModerationOptions } from '~/lib/states/moderation';
 import { useSession } from '~/lib/states/session';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 import { tinyhash } from '~/lib/utils/hash';
 import { assert } from '~/lib/utils/invariant';
 
···
 	const { rpc } = useAgent();
 	const { currentAccount } = useSession();
 	const queryClient = useQueryClient();
-	const moderationOptions = useModerationOptions();
+
+	const moderationOptions = inject(ModerationService);
 
 	const limit = MAX_TIMELINE_POSTS;
 

src/components/bookmarks/bookmark-feed-item.tsx

···
 
 import type { HydratedBookmarkItem } from '~/lib/aglais-bookmarks/db';
 import { isElementAltClicked, isElementClicked } from '~/lib/interaction';
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '../avatar';
 import Embed from '../embeds/embed';
···
 }
 
 const BookmarkFeedItem = ({ item }: BookmarkFeedItemProps) => {
-	const moderationOptions = useModerationOptions();
+	const moderationOptions = inject(ModerationService);
 
 	const { post, stale } = item;
 

src/components/composer/composer-reply-context.tsx

···
 import { createPostQuery } from '~/api/queries/post';
 import { formatQueryError } from '~/api/utils/error';
 
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '../avatar';
 import Button from '../button';
···
 }
 
 const ComposerReplyContext = (props: ComposerReplyContextProps) => {
-	const moderationOptions = useModerationOptions();
+	const moderationOptions = inject(ModerationService);
 
 	const query = createPostQuery(() => props.replyUri);
 

src/components/embeds/feed-embed.tsx

···
 import { precacheFeed } from '~/api/queries-cache/feed-precache';
 import { parseAtUri } from '~/api/utils/strings';
 
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar from '../avatar';
 
···
 
 const FeedEmbed = ({ feed, interactive }: FeedEmbedProps) => {
 	const queryClient = useQueryClient();
-	const moderationOptions = useModerationOptions();
+
+	const moderationOptions = inject(ModerationService);
 
 	const moderation = createMemo(() => moderateGeneric(feed, feed.creator.did, moderationOptions()));
 

src/components/embeds/list-embed.tsx

···
 
 import { moderateGeneric } from '~/api/moderation/entities/generic';
 
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar from '~/components/avatar';
 import { getListPurposeLabel, getListUrl } from '~/components/lists/lib/utils';
···
 }
 
 const ListEmbed = ({ list, interactive, onClick }: ListEmbedProps) => {
-	const moderationOptions = useModerationOptions();
+	const moderationOptions = inject(ModerationService);
+
 	const moderation = createMemo(() => moderateGeneric(list, list.creator.did, moderationOptions()));
 
 	const href = getListUrl(list);

src/components/embeds/quote-embed.tsx

···
 import { moderateQuote } from '~/api/moderation/entities/quote';
 import { parseAtUri } from '~/api/utils/strings';
 
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '../avatar';
 import TimeAgo from '../time-ago';
···
 }
 
 const QuoteEmbed = ({ quote, interactive, large }: QuoteEmbedProps) => {
+	const moderationOptions = inject(ModerationService);
+
 	const record = quote.value as AppBskyFeedPost.Record;
 	const embed = quote.embeds?.[0];
 	const author = quote.author;
···
 	const image = getPostImage(embed);
 	const video = getPostVideo(embed);
 
-	const moderationOptions = useModerationOptions();
 	const moderation = createMemo(() => moderateQuote(quote, moderationOptions()));
 
 	const shouldBlurMedia = () => getModerationUI(moderation(), ContextContentMedia).b.length !== 0;

src/components/feeds/feed-item.tsx

···
 
 import { isElementAltClicked, isElementClicked } from '~/lib/interaction';
 import { formatLong } from '~/lib/intl/number';
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar from '~/components/avatar';
 
···
 
 const FeedItem = ({ item }: FeedItemProps) => {
 	const queryClient = useQueryClient();
-	const moderationOptions = useModerationOptions();
+
+	const moderationOptions = inject(ModerationService);
 
 	const creator = item.creator;
 	const href = `/${creator.did}/feeds/${parseAtUri(item.uri).rkey}`;

src/components/lists/list-item.tsx

···
 import { history } from '~/globals/navigation';
 
 import { isElementAltClicked, isElementClicked } from '~/lib/interaction';
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar from '~/components/avatar';
 import BlockOutlinedIcon from '~/components/icons-central/block-outline';
···
 
 const ListItem = ({ item }: ListItemProps) => {
 	const queryClient = useQueryClient();
-	const moderationOptions = useModerationOptions();
+
+	const moderationOptions = inject(ModerationService);
 
 	const creator = item.creator;
 	const href = getListUrl(item);

src/components/notifications/notification-item.tsx

···
 import { history } from '~/globals/navigation';
 
 import { INTERACTION_TAGS, isElementAltClicked, isElementClicked } from '~/lib/interaction';
-import { useModerationOptions } from '~/lib/states/moderation';
 import { useSession } from '~/lib/states/session';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 import { assert } from '~/lib/utils/invariant';
 import { truncateMiddle } from '~/lib/utils/strings';
 
···
 
 const renderAvatars = (notifs: AppBskyNotificationListNotifications.Notification[]) => {
 	const queryClient = useQueryClient();
-	const moderationOptions = useModerationOptions();
+
+	const moderationOptions = inject(ModerationService);
 
 	const avatars = notifs.slice(0, MAX_AVATARS).map(({ author }) => {
 		const { did, avatar, displayName, handle } = author;

src/components/profiles/profile-item-pressable.tsx

···
 import { moderateProfile } from '~/api/moderation/entities/profile';
 
 import { isElementClicked } from '~/lib/interaction';
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '../avatar';
 
···
 }
 
 const ProfileItemPressable = (props: ProfileItemPressableProps) => {
-	const moderationOptions = useModerationOptions();
+	const moderationOptions = inject(ModerationService);
 
 	const profile = props.item;
 	const onClick = props.onClick;

src/components/profiles/profile-item.tsx

···
 import { history } from '~/globals/navigation';
 
 import { isElementAltClicked, isElementClicked } from '~/lib/interaction';
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '../avatar';
 
···
 
 const ProfileItem = (props: ProfileItemProps) => {
 	const queryClient = useQueryClient();
-	const moderationOptions = useModerationOptions();
+	const moderationOptions = inject(ModerationService);
 
 	const profile = props.item;
 

src/components/profiles/profile-view-header.tsx

···
 import { openModal } from '~/globals/modals';
 
 import { formatCompact } from '~/lib/intl/number';
-import { useModerationOptions } from '~/lib/states/moderation';
 import { useSession } from '~/lib/states/session';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 import { truncateMiddle } from '~/lib/utils/strings';
 
 import DefaultLabelerAvatar from '~/assets/default-labeler-avatar.svg?url';
···
 };
 
 const ProfileViewHeader = (props: ProfileViewHeader) => {
-	const moderationOptions = useModerationOptions();
 	const { currentAccount } = useSession();
+
+	const moderationOptions = inject(ModerationService);
 
 	const data = () => props.data;
 	const viewer = () => data().viewer;

src/components/threads/highlighted-post.tsx

···
 
 import { formatCompact } from '~/lib/intl/number';
 import type { ContentTranslationPreferences } from '~/lib/preferences/account';
-import { useModerationOptions } from '~/lib/states/moderation';
 import { useSession } from '~/lib/states/session';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '../avatar';
 import ComposerDialogLazy from '../composer/composer-dialog-lazy';
···
 const HighlightedPost = (props: HighlightedPostProps) => {
 	const post = () => props.post;
 
-	const moderationOptions = useModerationOptions();
 	const { currentAccount } = useSession();
+
+	const moderationOptions = inject(ModerationService);
 
 	const author = () => post().author;
 	const record = () => post().record as AppBskyFeedPost.Record;

src/components/threads/post-thread-item.tsx

···
 import { history } from '~/globals/navigation';
 
 import { isElementAltClicked, isElementClicked } from '~/lib/interaction';
-import { useModerationOptions } from '~/lib/states/moderation';
 import { useSession } from '~/lib/states/session';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '../avatar';
 import Embed from '../embeds/embed';
···
 	const item = () => props.item;
 
 	const queryClient = useQueryClient();
-	const moderationOptions = useModerationOptions();
 	const { currentAccount } = useSession();
+
+	const moderationOptions = inject(ModerationService);
 
 	const post = () => item().post;
 

src/components/timeline/post-feed-item.tsx

···
 import { history } from '~/globals/navigation';
 
 import { isElementAltClicked, isElementClicked } from '~/lib/interaction';
-import { useModerationOptions } from '~/lib/states/moderation';
 import { useSession } from '~/lib/states/session';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '../avatar';
 import Embed from '../embeds/embed';
···
 
 const PostFeedItem = ({ item, highlighted, timelineDid }: PostFeedItemProps) => {
 	const queryClient = useQueryClient();
-	const moderationOptions = useModerationOptions();
 	const { currentAccount } = useSession();
+
+	const moderationOptions = inject(ModerationService);
 
 	const { post, reason, next, prev } = item;
 

src/lib/states/moderation.tsx src/lib/states/singletons/moderation.ts

···
-import { type ParentProps, createContext, createMemo, useContext } from 'solid-js';
+import { createMemo } from 'solid-js';
 import { unwrap } from 'solid-js/store';
 
 import type { AppBskyLabelerDefs, At } from '@atcute/client/lexicons';
···
 import { interpretLabelerDefinition } from '~/api/moderation/labeler';
 
 import { createBatchedFetch } from '~/lib/utils/batch-fetch';
-import { assert } from '~/lib/utils/invariant';
 
-import { useAgent } from './agent';
-import { useSession } from './session';
+import { useAgent } from '../agent';
+import { useSession } from '../session';
 
 type Labeler = AppBskyLabelerDefs.LabelerViewDetailed;
 
-const DEFAULT_MODERATION_PREFERENCES: ModerationPreferences = {
-	hideReposts: [],
-	keywords: [],
-	labelers: {
-		[BLUESKY_MODERATION_DID]: {
-			redact: true,
-			privileged: true,
-			labels: {},
-		},
-	},
-	labels: {},
-};
-
-const Context = createContext<() => ModerationOptions>();
-
-export const ModerationProvider = (props: ParentProps) => {
+const ModerationService = () => {
 	const { rpc, persister } = useAgent();
 	const { currentAccount } = useSession();
 
-	const modPreferences = createMemo(() => {
+	const modPreferences = createMemo((): ModerationPreferences => {
 		if (!currentAccount) {
-			return DEFAULT_MODERATION_PREFERENCES;
+			return {
+				hideReposts: [],
+				keywords: [],
+				labelers: {
+					[BLUESKY_MODERATION_DID]: {
+						redact: true,
+						privileged: true,
+						labels: {},
+					},
+				},
+				labels: {},
+			};
 		}
 
 		return currentAccount.preferences.moderation;
···
 		};
 	});
 
-	return <Context.Provider value={modOptions}>{props.children}</Context.Provider>;
+	return modOptions;
 };
 
-export const useModerationOptions = (): (() => ModerationOptions) => {
-	const options = useContext(Context);
-	assert(options !== undefined, `Expected useModerationOptions to be used under <ModerationProvider>`);
-
-	return options;
-};
+export default ModerationService;

src/main.tsx

···
 
 import { configureRouter } from '~/lib/navigation/router';
 import { AgentProvider } from '~/lib/states/agent';
-import { ModerationProvider } from '~/lib/states/moderation';
 import { SessionProvider, useSession } from '~/lib/states/session';
 import { SingletonProvider } from '~/lib/states/singleton';
 import { ThemeProvider } from '~/lib/states/theme';
···
 		return (
 			<AgentProvider>
 				{/* Anything under <AgentProvider> gets remounted on account changes */}
-				<ModerationProvider>
-					<SingletonProvider>
-						<Shell />
-						<ModalRenderer />
-					</SingletonProvider>
-				</ModerationProvider>
+				<SingletonProvider>
+					<Shell />
+					<ModalRenderer />
+				</SingletonProvider>
 			</AgentProvider>
 		);
 	}) as unknown as JSX.Element;

src/views/moderation.tsx

···
 
 import { Key } from '~/lib/keyed';
 import { useTitle } from '~/lib/navigation/router';
-import { useModerationOptions } from '~/lib/states/moderation';
 import { useSession } from '~/lib/states/session';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar from '~/components/avatar';
 import * as Boxed from '~/components/boxed';
···
 const ModerationPage = () => {
 	const { currentAccount } = useSession();
 
-	const hydratedOptions = useModerationOptions();
+	const hydratedOptions = inject(ModerationService);
+
 	const moderation = currentAccount!.preferences.moderation;
 
 	useTitle(() => `Moderation — ${import.meta.env.VITE_APP_NAME}`);

src/views/post-thread.tsx

···
 import { createEventListener } from '~/lib/hooks/event-listener';
 import { Key } from '~/lib/keyed';
 import { useParams, useTitle } from '~/lib/navigation/router';
-import { useModerationOptions } from '~/lib/states/moderation';
 import { useSession } from '~/lib/states/session';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 import { truncateMiddle } from '~/lib/utils/strings';
 
 import Button from '~/components/button';
···
 	onMainPostDelete?: () => void;
 }) => {
 	const { currentAccount } = useSession();
-	const moderationOptions = useModerationOptions();
+
+	const moderationOptions = inject(ModerationService);
 
 	const [showTl, setShowTl] = createSignal(false);
 

src/views/profile-feed-info.tsx

···
 import { makeAtUri } from '~/api/utils/strings';
 
 import { useParams, useTitle } from '~/lib/navigation/router';
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '~/components/avatar';
 import * as Boxed from '~/components/boxed';
···
 export default FeedInfoPage;
 
 const InfoView = (props: { feed: AppBskyFeedDefs.GeneratorView }) => {
-	const moderationOptions = useModerationOptions();
 	const queryClient = useQueryClient();
+
+	const moderationOptions = inject(ModerationService);
 
 	const feed = () => props.feed;
 	const creator = () => feed().creator;

src/views/profile-moderation-list.tsx

···
 import { makeAtUri } from '~/api/utils/strings';
 
 import { useParams, useTitle } from '~/lib/navigation/router';
-import { useModerationOptions } from '~/lib/states/moderation';
+import { inject } from '~/lib/states/singleton';
+import ModerationService from '~/lib/states/singletons/moderation';
 
 import Avatar, { getUserAvatarType } from '~/components/avatar';
 import * as Boxed from '~/components/boxed';
···
 export default ProfileModerationListPage;
 
 const InfoView = (props: { list: AppBskyGraphDefs.ListView }) => {
-	const moderationOptions = useModerationOptions();
 	const queryClient = useQueryClient();
+
+	const moderationOptions = inject(ModerationService);
 
 	const list = () => props.list;
 	const creator = () => list().creator;