Refactor moderation handling and introduce labels feature (#1)

* feat: labels wip

* refactor: replace BoardsProvider with StoresProvider and update moderation handling

* fix: remove unused code

bun.lock

···
         "@radix-ui/react-progress": "^1.1.7",
         "@radix-ui/react-scroll-area": "^1.2.9",
         "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.5",
         "@radix-ui/react-tabs": "^1.1.12",
         "@radix-ui/react-tooltip": "^1.2.7",
         "class-variance-authority": "^0.7.1",
···
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.5", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ=="],
+
     "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.10", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw=="],
 
     "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.7", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw=="],
···
     "@radix-ui/react-use-is-hydrated": ["@radix-ui/react-use-is-hydrated@0.1.0", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA=="],
 
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
+
+    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
 
     "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
 

package.json

···
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
     "class-variance-authority": "^0.7.1",

src/app/layout.tsx

···
 import { AuthProvider } from "@/lib/hooks/useAuth";
 import { ProfileProvider } from "@/lib/useProfile";
 import { Toaster } from "sonner";
-import { BoardsProvider } from "@/lib/hooks/useBoards";
+import { StoresProvider } from "@/lib/stores/storesProvider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
···
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <AuthProvider>
             <ProfileProvider>
-              <BoardsProvider>
+              <StoresProvider>
                 <div className="min-h-screen flex flex-col">
                   <Navbar />
                   <main className="flex-1 py-6">{children}</main>
                 </div>
-              </BoardsProvider>
+              </StoresProvider>
             </ProfileProvider>
           </AuthProvider>
         </ThemeProvider>

src/components/ContentWarning.tsx

···
+"use client";
+
+import { useState, useEffect } from "react";
+import { AlertTriangle, Eye } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
+import { type ModerationOpts } from "@atproto/api/dist/moderation/types";
+import { useModerationStore } from "@/lib/stores/moderation";
+import { useAuth } from "@/lib/hooks/useAuth";
+import { ModerationDecision } from "@atproto/api";
+
+interface ContentWarningProps {
+  mod: ModerationDecision;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ContentWarning({
+  mod,
+  children,
+  className,
+}: ContentWarningProps) {
+  const modUi = mod.ui("contentMedia");
+
+  if (modUi.filter) return;
+
+  if (modUi.blur) {
+    return (
+      <div className={className}>
+        <div className="relative overflow-hidden rounded-2xl">
+          <div className="blur-3xl">{children}</div>
+          <div className="absolute inset-0 flex items-center justify-center"></div>
+          <div className="absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+            <div className="space-y-3 text-center">
+              <div className="flex items-center justify-center gap-3">
+                <AlertTriangle className="h-5 w-5 text-orange-500 flex-shrink-0" />
+                <h4 className="font-medium text-orange-100">Content Warning</h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <div className={className}>{children}</div>;
+}

src/components/Feed.tsx

···
 "use client";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { AppBskyEmbedImages, AppBskyFeedPost, AtUri } from "@atproto/api";
+import {
+  Agent,
+  AppBskyEmbedImages,
+  AppBskyFeedPost,
+  AtUri,
+  moderatePost,
+  ModerationPrefs,
+} from "@atproto/api";
 import { LoaderCircle } from "lucide-react";
 import { motion } from "motion/react";
 import Image from "next/image";
···
 import { UnsaveButton } from "./UnsaveButton";
 import { LikeButton } from "./LikeButton";
 import { useState, useEffect } from "react";
+import {
+  DEFAULT_LOGGED_OUT_LABEL_PREFERENCES,
+  useModerationOpts,
+} from "@/lib/hooks/useModerationOpts";
+import { useAuth } from "@/lib/hooks/useAuth";
+import { ContentWarning } from "./ContentWarning";
+import clsx from "clsx";
 
 export type FeedItem = {
   id: string;
···
 }) {
   const image = getImageFromItem(item, index);
   const [isDropdownOpen, setDropdownOpen] = useState(false);
+  const modOpts = useModerationOpts();
+  const { session, agent } = useAuth();
 
   if (!image) return;
 
   const ActionButton = showUnsaveButton ? UnsaveButton : SaveButton;
   const txt = getText(item);
+  const opts: ModerationPrefs = modOpts.moderationPrefs ?? {
+    adultContentEnabled: false,
+    labelers: agent.appLabelers.map((did) => ({
+      did,
+      labels: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES,
+    })),
+    hiddenPosts: [],
+    mutedWords: [],
+    labels: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES,
+  };
+  const mod = moderatePost(item, {
+    prefs: opts,
+    labelDefs: modOpts.labelDefs,
+    userDid: session?.did,
+  });
+
+  // Debug code removed for production
 
   return (
-    <div className={`relative group ${isDropdownOpen ? "hover-active" : ""}`}>
-      {/* Save/Unsave button – top-left */}
-      <div className="absolute top-3 left-3 z-30 opacity-0 group-hover:opacity-100 group-[.hover-active]:opacity-100 transition-opacity">
-        {ActionButton && (
-          <ActionButton
-            image={index}
-            post={item}
-            onDropdownOpenChange={setDropdownOpen}
-          />
-        )}
-      </div>
+    <ContentWarning mod={mod}>
+      <div className={`relative group ${isDropdownOpen ? "hover-active" : ""}`}>
+        {/* Save/Unsave button – top-left */}
+        <div className="absolute top-3 left-3 z-30 opacity-0 group-hover:opacity-100 group-[.hover-active]:opacity-100 transition-opacity">
+          {ActionButton && (
+            <ActionButton
+              image={index}
+              post={item}
+              onDropdownOpenChange={setDropdownOpen}
+            />
+          )}
+        </div>
 
-      {/* Like button – top-right */}
-      <div className="absolute top-3 right-3 z-30 opacity-0 group-hover:opacity-100 group-[.hover-active]:opacity-100 transition-opacity">
-        <LikeButton post={item} />
-      </div>
+        {/* Like button – top-right */}
+        <div className="absolute top-3 right-3 z-30 opacity-0 group-hover:opacity-100 group-[.hover-active]:opacity-100 transition-opacity">
+          <LikeButton post={item} />
+        </div>
 
-      {/* Link wraps image only */}
-      <Link
-        href={`/${item.author.did}/${AtUri.make(item.uri).rkey}`}
-        className="block"
-      >
-        <motion.div
-          initial={{ opacity: 0, y: 5 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, ease: "easeOut" }}
-          whileTap={{ scale: 0.95 }}
-          className="group relative w-full min-h-[120px] min-w-[120px] overflow-hidden rounded-xl bg-gray-900"
+        {/* Link wraps image only */}
+        <Link
+          href={`/${item.author.did}/${AtUri.make(item.uri).rkey}`}
+          className="block"
         >
-          {/* Blurred background */}
-          <Image
-            src={image.fullsize}
-            alt=""
-            fill
-            placeholder={image.thumb ? "blur" : "empty"}
-            blurDataURL={image.thumb}
-            className="object-cover filter blur-xl scale-110 opacity-30"
-          />
-
-          {/* Foreground image */}
-          <div className="relative z-10 flex items-center justify-center w-full min-h-[120px]">
+          <motion.div
+            initial={{ opacity: 0, y: 5 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, ease: "easeOut" }}
+            whileTap={{ scale: 0.95 }}
+            className="group relative w-full min-h-[120px] min-w-[120px] overflow-hidden rounded-xl bg-gray-900"
+          >
+            {/* Blurred background */}
             <Image
               src={image.fullsize}
-              alt={image.alt || ""}
+              alt=""
+              fill
               placeholder={image.thumb ? "blur" : "empty"}
               blurDataURL={image.thumb}
-              width={image.aspectRatio?.width ?? 400}
-              height={image.aspectRatio?.height ?? 400}
-              className="object-contain max-w-full max-h-full rounded-lg"
-              priority
+              className="object-cover filter blur-xl scale-110 opacity-30"
             />
-          </div>
 
-          {/* Author info */}
-          {item.author && (
-            <div className="absolute inset-0 z-20 bg-black/40 text-white opacity-0 group-hover:opacity-100 group-[.hover-active]:opacity-100 transition-opacity duration-300 flex flex-col justify-between p-3">
-              <div className="w-fit self-start" />
+            {/* Foreground image */}
+            <div className="relative z-10 flex items-center justify-center w-full min-h-[120px]">
+              <Image
+                src={image.fullsize}
+                alt={image.alt || ""}
+                placeholder={image.thumb ? "blur" : "empty"}
+                blurDataURL={image.thumb}
+                width={image.aspectRatio?.width ?? 400}
+                height={image.aspectRatio?.height ?? 400}
+                className="object-contain max-w-full max-h-full rounded-lg"
+                priority
+              />
+            </div>
 
-              <div className="flex flex-col gap-2">
-                <div className="flex items-center gap-2">
-                  <Avatar>
-                    <AvatarImage src={item.author.avatar} />
-                    <AvatarFallback>
-                      {item.author.displayName || item.author.handle}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div className="flex flex-col leading-tight">
-                    <span>{item.author.displayName || item.author.handle}</span>
-                    <span className="text-white/70 text-[0.75rem]">
-                      @{item.author.handle}
-                    </span>
-                  </div>
-                </div>
+            {/* Author info */}
+            {item.author && (
+              <div className="absolute inset-0 z-20 bg-black/40 text-white opacity-0 group-hover:opacity-100 group-[.hover-active]:opacity-100 transition-opacity duration-300 flex flex-col justify-between p-3">
+                <div className="w-fit self-start" />
 
-                {txt && (
-                  <div className="text-sm">
-                    {txt.length > 100 ? txt.slice(0, 100) + "…" : txt}
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-2">
+                    <Avatar>
+                      <AvatarImage
+                        className={clsx(
+                          mod.ui("avatar").blur ? "blur-3xl" : ""
+                        )}
+                        src={item.author.avatar}
+                      />
+                      <AvatarFallback>
+                        {item.author.displayName || item.author.handle}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="flex flex-col leading-tight">
+                      <span>
+                        {item.author.displayName || item.author.handle}
+                      </span>
+                      <span className="text-white/70 text-[0.75rem]">
+                        @{item.author.handle}
+                      </span>
+                    </div>
                   </div>
-                )}
+
+                  {txt && (
+                    <div className="text-sm">
+                      {txt.length > 100 ? txt.slice(0, 100) + "…" : txt}
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          )}
-        </motion.div>
-      </Link>
-    </div>
+            )}
+          </motion.div>
+        </Link>
+      </div>
+    </ContentWarning>
   );
 }
 

src/components/ui/switch.tsx

···
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

src/lib/hooks/useAuth.tsx

···
 
 type AuthContextType = {
   session: OAuthSession | null;
-  agent: Agent | null;
+  agent: Agent;
   loading: boolean;
   login: (handle: string) => Promise<void>;
   logout: () => void;
···
 const AuthContext = createContext<AuthContextType | null>(null);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
+  const defaultAgent = new Agent({ service: "https://bsky.social" });
   const [session, setSession] = useState<OAuthSession | null>(null);
-  const [agent, setAgent] = useState<Agent | null>(
-    new Agent({ service: "https://bsky.social" })
-  );
+  const [agent, setAgent] = useState<Agent>(defaultAgent);
   const [loading, setLoading] = useState(true);
   const [client, setClient] = useState<BrowserOAuthClient | null>(null);
 
···
           const ag = new Agent(result.session);
           setSession(result.session);
           setAgent(ag);
+          const prefs = await ag.getPreferences();
+          if (!prefs) return;
         } else {
           const did = localStorage.getItem("did");
 
···
       c.addEventListener("deleted", (event: CustomEvent) => {
         console.warn("Session invalidated", event.detail);
         setSession(null);
-        setAgent(null);
+        setAgent(defaultAgent);
       });
     };
 
···
     if (client && session) {
       client.revoke(session.sub);
       setSession(null);
-      setAgent(null);
+      setAgent(defaultAgent);
       // refresh page
       window.location.reload();
     }

src/lib/hooks/useBoards.tsx

···
 
   return { isLoading };
 }
-
-export function BoardsProvider({ children }: PropsWithChildren) {
-  useBoards();
-  useBoardItems();
-  return children;
-}

src/lib/hooks/useModerationOpts.tsx

···
+"use client";
+import { useEffect } from "react";
+import { useAuth } from "./useAuth";
+import { useModerationOptsStore } from "../stores/moderationOpts";
+import { DEFAULT_LABEL_SETTINGS } from "@atproto/api";
+
+/**
+ * From {@link https://github.com/bluesky-social/social-app/blob/2a6172cbaf2db0eda2a7cd2afaeef4b60aadf3ba/src/state/queries/preferences/moderation.ts#L15}
+ */
+export const DEFAULT_LOGGED_OUT_LABEL_PREFERENCES: typeof DEFAULT_LABEL_SETTINGS =
+  Object.fromEntries(
+    Object.entries(DEFAULT_LABEL_SETTINGS).map(([key, _pref]) => [key, "hide"])
+  );
+
+export function useModerationOpts() {
+  const { agent } = useAuth();
+  const {
+    moderationPrefs,
+    labelDefs,
+    isLoading,
+    error,
+    setModerationOpts,
+    setLoading,
+    setError,
+    isStale,
+    shouldRefetch,
+  } = useModerationOptsStore();
+
+  useEffect(() => {
+    if (!agent || agent?.did == null) return;
+
+    const fetchModerationOpts = async () => {
+      try {
+        setLoading(true);
+        const prefs = await agent.getPreferences();
+        const labelDefs = await agent.getLabelDefinitions(prefs);
+        setModerationOpts(prefs.moderationPrefs, labelDefs);
+      } catch (err) {
+        console.error("Error fetching moderation opts:", err);
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    // If we have stale data, return it immediately but fetch fresh data in background
+    if (moderationPrefs && labelDefs && isStale()) {
+      fetchModerationOpts(); // Background refresh
+    }
+    // If we have no data or data is expired, fetch immediately
+    else if (!moderationPrefs || !labelDefs || shouldRefetch()) {
+      fetchModerationOpts();
+    }
+  }, [
+    agent,
+    moderationPrefs,
+    labelDefs,
+    isStale,
+    shouldRefetch,
+    setModerationOpts,
+    setLoading,
+    setError,
+  ]);
+
+  return {
+    moderationPrefs,
+    labelDefs,
+    isLoading,
+    error,
+  };
+}

src/lib/stores/moderation.tsx

···
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { moderatePost, ModerationDecision } from "@atproto/api/dist/moderation";
+import { type ModerationOpts } from "@atproto/api/dist/moderation/types";
+import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
+
+export interface ModerationState {
+  // Simple content warning preferences
+  showContentWarnings: boolean;
+
+  // Actions
+  setShowContentWarnings: (show: boolean) => void;
+
+  // Helper to get moderation decision using AT Protocol's built-in moderation
+  getModerationDecision: (
+    post: PostView,
+    opts: ModerationOpts
+  ) => ModerationDecision;
+  shouldShowWarning: (post: PostView, opts: ModerationOpts) => boolean;
+}
+
+export const useModerationStore = create<ModerationState>()(
+  persist(
+    (set, get) => ({
+      showContentWarnings: true,
+
+      setShowContentWarnings: (show) => set({ showContentWarnings: show }),
+
+      getModerationDecision: (post: PostView, opts: ModerationOpts) => {
+        return moderatePost(post, opts);
+      },
+
+      shouldShowWarning: (post: PostView, opts: ModerationOpts) => {
+        const state = get();
+        if (!state.showContentWarnings) return false;
+
+        const decision = state.getModerationDecision(post, opts);
+        const ui = decision.ui("contentView");
+
+        // Show warning if content has alerts or informs
+        return ui.alert || ui.inform;
+      },
+    }),
+    {
+      name: "moderation-store",
+      partialize: (state) => ({
+        showContentWarnings: state.showContentWarnings,
+      }),
+    }
+  )
+);

src/lib/stores/moderationOpts.ts

···
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { InterpretedLabelValueDefinition, ModerationPrefs } from "@atproto/api";
+
+interface ModerationOptsData {
+  moderationPrefs: ModerationPrefs | undefined;
+  labelDefs: Record<string, InterpretedLabelValueDefinition[]> | undefined;
+  lastFetched: number | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+interface ModerationOptsState extends ModerationOptsData {
+  setModerationOpts: (
+    moderationPrefs: ModerationPrefs,
+    labelDefs: Record<string, InterpretedLabelValueDefinition[]>
+  ) => void;
+  setLoading: (isLoading: boolean) => void;
+  setError: (error: string | null) => void;
+  isStale: () => boolean;
+  shouldRefetch: () => boolean;
+  clear: () => void;
+}
+
+const STALE_TIME = 15 * 60 * 1000; // 15 minutes in milliseconds
+const CACHE_TIME = 30 * 60 * 1000; // 30 minutes in milliseconds
+
+export const useModerationOptsStore = create<ModerationOptsState>()(
+  persist(
+    (set, get) => ({
+      moderationPrefs: undefined,
+      labelDefs: undefined,
+      lastFetched: null,
+      isLoading: false,
+      error: null,
+
+      setModerationOpts: (moderationPrefs, labelDefs) => {
+        set({
+          moderationPrefs,
+          labelDefs,
+          lastFetched: Date.now(),
+          error: null,
+        });
+      },
+
+      setLoading: (isLoading) => set({ isLoading }),
+
+      setError: (error) => set({ error, isLoading: false }),
+
+      isStale: () => {
+        const { lastFetched } = get();
+        if (!lastFetched) return true;
+        return Date.now() - lastFetched > STALE_TIME;
+      },
+
+      shouldRefetch: () => {
+        const { lastFetched, isLoading } = get();
+        if (isLoading) return false;
+        if (!lastFetched) return true;
+        return Date.now() - lastFetched > CACHE_TIME;
+      },
+
+      clear: () =>
+        set({
+          moderationPrefs: undefined,
+          labelDefs: undefined,
+          lastFetched: null,
+          error: null,
+        }),
+    }),
+    {
+      name: "moderation-opts-storage",
+      partialize: (state) => ({
+        moderationPrefs: state.moderationPrefs,
+        labelDefs: state.labelDefs,
+        lastFetched: state.lastFetched,
+      }),
+      // Add storage configuration to handle complex objects
+      storage: {
+        getItem: (name) => {
+          const str = localStorage.getItem(name);
+          if (!str) return null;
+          try {
+            const parsed = JSON.parse(str);
+            return parsed;
+          } catch (error) {
+            console.error(
+              "Failed to parse moderation opts from localStorage:",
+              error
+            );
+            return null;
+          }
+        },
+        setItem: (name, value) => {
+          try {
+            localStorage.setItem(name, JSON.stringify(value));
+          } catch (error) {
+            console.error(
+              "Failed to serialize moderation opts to localStorage:",
+              error
+            );
+          }
+        },
+        removeItem: (name) => localStorage.removeItem(name),
+      },
+    }
+  )
+);
+
+// Utility function to clear moderation options cache (useful for logout)
+export const clearModerationOptsCache = () => {
+  useModerationOptsStore.getState().clear();
+};

src/lib/stores/storesProvider.tsx

···
+"use client";
+import { PropsWithChildren } from "react";
+import { useBoards } from "../hooks/useBoards";
+import { useBoardItems } from "../hooks/useBoardItems";
+import { useModerationOpts } from "../hooks/useModerationOpts";
+
+export function StoresProvider({ children }: PropsWithChildren) {
+  useBoards();
+  useBoardItems();
+  useModerationOpts();
+  return children;
+}

src/nav/navbar.tsx

···
                     My Boards
                   </DropdownMenuItem>
                 </Link>
+                <Link href={"/moderation"}>
+                  <DropdownMenuItem className="cursor-pointer">
+                    Content Settings
+                  </DropdownMenuItem>
+                </Link>
+                <DropdownMenuSeparator />
                 <DropdownMenuItem className="cursor-pointer" onClick={logout}>
                   Logout
                 </DropdownMenuItem>