[moderation] initial display of prefs

src/auto-imports.d.ts

···
   const IconMdiClose: typeof import('~icons/mdi/close.jsx').default
   const IconMdiMessageReplyTextOutline: typeof import('~icons/mdi/message-reply-text-outline.jsx').default
   const IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default
+  const IconMdiShield: typeof import('~icons/mdi/shield.jsx').default
+  const IconMdiShieldOutline: typeof import('~icons/mdi/shield-outline.jsx').default
 }

src/routeTree.gen.ts

···
 import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as SearchRouteImport } from './routes/search'
 import { Route as NotificationsRouteImport } from './routes/notifications'
+import { Route as ModerationRouteImport } from './routes/moderation'
 import { Route as FeedsRouteImport } from './routes/feeds'
 import { Route as PathlessLayoutRouteImport } from './routes/_pathlessLayout'
 import { Route as IndexRouteImport } from './routes/index'
···
 const NotificationsRoute = NotificationsRouteImport.update({
   id: '/notifications',
   path: '/notifications',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ModerationRoute = ModerationRouteImport.update({
+  id: '/moderation',
+  path: '/moderation',
   getParentRoute: () => rootRouteImport,
 } as any)
 const FeedsRoute = FeedsRouteImport.update({
···
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/feeds': typeof FeedsRoute
+  '/moderation': typeof ModerationRoute
   '/notifications': typeof NotificationsRoute
   '/search': typeof SearchRoute
   '/settings': typeof SettingsRoute
···
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/feeds': typeof FeedsRoute
+  '/moderation': typeof ModerationRoute
   '/notifications': typeof NotificationsRoute
   '/search': typeof SearchRoute
   '/settings': typeof SettingsRoute
···
   '/': typeof IndexRoute
   '/_pathlessLayout': typeof PathlessLayoutRouteWithChildren
   '/feeds': typeof FeedsRoute
+  '/moderation': typeof ModerationRoute
   '/notifications': typeof NotificationsRoute
   '/search': typeof SearchRoute
   '/settings': typeof SettingsRoute
···
   fullPaths:
     | '/'
     | '/feeds'
+    | '/moderation'
     | '/notifications'
     | '/search'
     | '/settings'
···
   to:
     | '/'
     | '/feeds'
+    | '/moderation'
     | '/notifications'
     | '/search'
     | '/settings'
···
     | '/'
     | '/_pathlessLayout'
     | '/feeds'
+    | '/moderation'
     | '/notifications'
     | '/search'
     | '/settings'
···
   IndexRoute: typeof IndexRoute
   PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren
   FeedsRoute: typeof FeedsRoute
+  ModerationRoute: typeof ModerationRoute
   NotificationsRoute: typeof NotificationsRoute
   SearchRoute: typeof SearchRoute
   SettingsRoute: typeof SettingsRoute
···
       path: '/notifications'
       fullPath: '/notifications'
       preLoaderRoute: typeof NotificationsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/moderation': {
+      id: '/moderation'
+      path: '/moderation'
+      fullPath: '/moderation'
+      preLoaderRoute: typeof ModerationRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/feeds': {
···
   IndexRoute: IndexRoute,
   PathlessLayoutRoute: PathlessLayoutRouteWithChildren,
   FeedsRoute: FeedsRoute,
+  ModerationRoute: ModerationRoute,
   NotificationsRoute: NotificationsRoute,
   SearchRoute: SearchRoute,
   SettingsRoute: SettingsRoute,

src/routes/__root.tsx

···
   const isSettings = location.pathname.startsWith("/settings");
   const isSearch = location.pathname.startsWith("/search");
   const isFeeds = location.pathname.startsWith("/feeds");
+  const isModeration = location.pathname.startsWith("/moderation");
 
   const locationEnum:
     | "feeds"
···
     | "settings"
     | "notifications"
     | "profile"
+    | "moderation"
     | "home" = isFeeds
     ? "feeds"
     : isSearch
···
           ? "notifications"
           : isProfile
             ? "profile"
-            : "home";
+            : isModeration 
+              ? "moderation"
+              : "home";
 
   const [, setComposerPost] = useAtom(composerAtom);
 
···
               })
             }
             text="Feeds"
+          />
+          <MaterialNavItem
+            InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />}
+            ActiveIcon={<IconMdiShield className="w-6 h-6" />}
+            active={locationEnum === "moderation"}
+            onClickCallbback={() =>
+              navigate({
+                to: "/moderation",
+                //params: { did: agent.assertDid },
+              })
+            }
+            text="Moderation"
           />
           <MaterialNavItem
             InactiveIcon={
···
           />
           <MaterialNavItem
             small
+            InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />}
+            ActiveIcon={<IconMdiShield className="w-6 h-6" />}
+            active={locationEnum === "moderation"}
+            onClickCallbback={() =>
+              navigate({
+                to: "/moderation",
+                //params: { did: agent.assertDid },
+              })
+            }
+            text="Moderation"
+          />
+          <MaterialNavItem
+            small
             InactiveIcon={
               <IconMaterialSymbolsAccountCircleOutline className="w-6 h-6" />
             }
···
                 <IconMaterialSymbolsSettingsOutline className="w-6 h-6" />
               }
               ActiveIcon={<IconMaterialSymbolsSettings className="w-6 h-6" />}
-              active={locationEnum === "settings"}
+              active={locationEnum === "settings" || locationEnum === "feeds" || locationEnum === "moderation"}
               onClickCallbback={() =>
                 navigate({
                   to: "/settings",
···
   );
 }
 
-function MaterialNavItem({
+export function MaterialNavItem({
   InactiveIcon,
   ActiveIcon,
   text,

src/routes/feeds.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
 
+import { Header } from "~/components/Header";
+
 export const Route = createFileRoute("/feeds")({
   component: Feeds,
 });
 
 export function Feeds() {
-  return <div className="p-6">Feeds page (coming soon)</div>;
+  return (
+    <div className="">
+      <Header
+        title={`Feeds`}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+        bottomBorderDisabled={true}
+      />
+      Feeds page (coming soon)
+    </div>
+  );
 }

src/routes/moderation.tsx

···
+import * as ATPAPI from "@atproto/api";
+import {
+  isAdultContentPref,
+  isBskyAppStatePref,
+  isContentLabelPref,
+  isFeedViewPref,
+  isLabelersPref,
+  isMutedWordsPref,
+  isSavedFeedsPref,
+} from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { createFileRoute } from "@tanstack/react-router";
+import { useAtom } from "jotai";
+import { Switch } from "radix-ui";
+
+import { Header } from "~/components/Header";
+import { useAuth } from "~/providers/UnifiedAuthProvider";
+import { quickAuthAtom } from "~/utils/atoms";
+import { useQueryIdentity, useQueryPreferences } from "~/utils/useQuery";
+
+import { renderSnack } from "./__root";
+import { NotificationItem } from "./notifications";
+import { SettingHeading } from "./settings";
+
+export const Route = createFileRoute("/moderation")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { agent } = useAuth();
+
+  const [quickAuth, setQuickAuth] = useAtom(quickAuthAtom);
+  const isAuthRestoring = quickAuth ? status === "loading" : false;
+
+  const identityresultmaybe = useQueryIdentity(
+    !isAuthRestoring ? agent?.did : undefined
+  );
+  const identity = identityresultmaybe?.data;
+
+  const prefsresultmaybe = useQueryPreferences({
+    agent: !isAuthRestoring ? (agent ?? undefined) : undefined,
+    pdsUrl: !isAuthRestoring ? identity?.pds : undefined,
+  });
+  const rawprefs = prefsresultmaybe?.data?.preferences as
+    | ATPAPI.AppBskyActorGetPreferences.OutputSchema["preferences"]
+    | undefined;
+
+  //console.log(JSON.stringify(prefs, null, 2))
+
+  const parsedPref = parsePreferences(rawprefs);
+
+  return (
+    <div>
+      <Header
+        title={`Moderation`}
+        backButtonCallback={() => {
+          if (window.history.length > 1) {
+            window.history.back();
+          } else {
+            window.location.assign("/");
+          }
+        }}
+        bottomBorderDisabled={true}
+      />
+      {/* <SettingHeading title="Moderation Tools" />
+      <p>
+        todo: add all these:
+        <br />
+        - Interaction settings
+        <br />
+        - Muted words & tags
+        <br />
+        - Moderation lists
+        <br />
+        - Muted accounts
+        <br />
+        - Blocked accounts
+        <br />
+        - Verification settings
+        <br />
+      </p> */}
+      <SettingHeading title="Content Filters" />
+      <div>
+        <div className="flex items-center gap-4 px-4 py-2 border-b">
+          <label
+            htmlFor={`switch-${"hardcoded"}`}
+            className="flex flex-row flex-1"
+          >
+            <div className="flex flex-col">
+              <span className="text-md">{"Adult Content"}</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">
+                {"Enable adult content"}
+              </span>
+            </div>
+          </label>
+
+          <Switch.Root
+            id={`switch-${"hardcoded"}`}
+            checked={parsedPref?.adultContentEnabled}
+            onCheckedChange={(v) => {
+              renderSnack({
+                title: "Sorry... Modifying preferences is not implemented yet",
+                description: "You can use another app to change preferences",
+                //button: { label: 'Try Again', onClick: () => console.log('whatever') },
+              });
+            }}
+            className="m3switch root"
+          >
+            <Switch.Thumb className="m3switch thumb " />
+          </Switch.Root>
+        </div>
+        <div className="">
+          {Object.entries(parsedPref?.contentLabelPrefs ?? {}).map(
+            ([label, visibility]) => (
+              <div
+                key={label}
+                className="flex justify-between border-b py-2 px-4"
+              >
+                <label
+                  htmlFor={`switch-${"hardcoded"}`}
+                  className="flex flex-row flex-1"
+                >
+                  <div className="flex flex-col">
+                    <span className="text-md">{label}</span>
+                    <span className="text-sm text-gray-500 dark:text-gray-400">
+                      {"uknown labeler"}
+                    </span>
+                  </div>
+                </label>
+                {/* <span className="text-md text-gray-500 dark:text-gray-400">
+                  {visibility}
+                </span> */}
+                <TripleToggle
+                  value={visibility as "ignore" | "warn" | "hide"}
+                />
+              </div>
+            )
+          )}
+        </div>
+      </div>
+      <SettingHeading title="Advanced" />
+      {parsedPref?.labelers.map((labeler) => {
+        return (
+          <NotificationItem
+            key={labeler}
+            notification={labeler}
+            labeler={true}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export function TripleToggle({
+  value,
+  onChange,
+}: {
+  value: "ignore" | "warn" | "hide";
+  onChange?: (newValue: "ignore" | "warn" | "hide") => void;
+}) {
+  const options: Array<"ignore" | "warn" | "hide"> = ["ignore", "warn", "hide"];
+  return (
+    <div className="flex rounded-full bg-gray-200 dark:bg-gray-800 p-1 text-sm">
+      {options.map((opt) => {
+        const isActive = opt === value;
+        return (
+          <button
+            key={opt}
+            onClick={() => {
+              renderSnack({
+                title: "Sorry... Modifying preferences is not implemented yet",
+                description: "You can use another app to change preferences",
+                //button: { label: 'Try Again', onClick: () => console.log('whatever') },
+              });
+              onChange?.(opt);
+            }}
+            className={`flex-1 px-3 py-1.5 rounded-full transition-colors ${
+              isActive
+                ? "bg-gray-400 dark:bg-gray-600 text-white"
+                : "text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700"
+            }`}
+          >
+            {" "}
+            {opt.charAt(0).toUpperCase() + opt.slice(1)}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+type PrefItem =
+  ATPAPI.AppBskyActorGetPreferences.OutputSchema["preferences"][number];
+
+export interface NormalizedPreferences {
+  contentLabelPrefs: Record<string, string>;
+  mutedWords: string[];
+  feedViewPrefs: Record<string, any>;
+  labelers: string[];
+  adultContentEnabled: boolean;
+  savedFeeds: {
+    pinned: string[];
+    saved: string[];
+  };
+  nuxs: string[];
+}
+
+export function parsePreferences(
+  prefs?: PrefItem[]
+): NormalizedPreferences | undefined {
+  if (!prefs) return undefined;
+  const normalized: NormalizedPreferences = {
+    contentLabelPrefs: {},
+    mutedWords: [],
+    feedViewPrefs: {},
+    labelers: [],
+    adultContentEnabled: false,
+    savedFeeds: { pinned: [], saved: [] },
+    nuxs: [],
+  };
+
+  for (const pref of prefs) {
+    switch (pref.$type) {
+      case "app.bsky.actor.defs#contentLabelPref":
+        if (!isContentLabelPref(pref)) break;
+        normalized.contentLabelPrefs[pref.label] = pref.visibility;
+        break;
+
+      case "app.bsky.actor.defs#mutedWordsPref":
+        if (!isMutedWordsPref(pref)) break;
+        for (const item of pref.items ?? []) {
+          normalized.mutedWords.push(item.value);
+        }
+        break;
+
+      case "app.bsky.actor.defs#feedViewPref":
+        if (!isFeedViewPref(pref)) break;
+        normalized.feedViewPrefs[pref.feed] = pref;
+        break;
+
+      case "app.bsky.actor.defs#labelersPref":
+        if (!isLabelersPref(pref)) break;
+        normalized.labelers.push(...(pref.labelers?.map((l) => l.did) ?? []));
+        break;
+
+      case "app.bsky.actor.defs#adultContentPref":
+        if (!isAdultContentPref(pref)) break;
+        normalized.adultContentEnabled = !!pref.enabled;
+        break;
+
+      case "app.bsky.actor.defs#savedFeedsPref":
+        if (!isSavedFeedsPref(pref)) break;
+        normalized.savedFeeds.pinned.push(...(pref.pinned ?? []));
+        normalized.savedFeeds.saved.push(...(pref.saved ?? []));
+        break;
+
+      case "app.bsky.actor.defs#bskyAppStatePref":
+        if (!isBskyAppStatePref(pref)) break;
+        normalized.nuxs.push(...(pref.nuxs?.map((n) => n.id) ?? []));
+        break;
+
+      default:
+        // unknown pref type — just ignore for now
+        break;
+    }
+  }
+
+  return normalized;
+}

src/routes/notifications.tsx

···
   );
 }
 
-export function NotificationItem({ notification }: { notification: string }) {
+export function NotificationItem({ notification, labeler }: { notification: string, labeler?: boolean }) {
   const aturi = new AtUri(notification);
   const bite = aturi.collection === "net.wafrn.feed.bite";
   const navigate = useNavigate();
···
         <img
           src={avatar || defaultpfp}
           alt={identity?.handle}
-          className="w-10 h-10 rounded-full"
+          className={`w-10 h-10 ${labeler ? "rounded-md" : "rounded-full"}`}
         />
       ) : (
         <div className="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700" />

src/routes/profile.$did/index.tsx

···
   useQueryIdentity,
   useQueryProfile,
 } from "~/utils/useQuery";
+import IconMdiShieldOutline from "~icons/mdi/shield-outline.jsx";
 
 import { renderSnack } from "../__root";
 import { Chip } from "../notifications";
···
     isLoading: isIdentityLoading,
     error: identityError,
   } = useQueryIdentity(did);
+
+  // i was gonna check the did doc but useQueryIdentity doesnt return that info (slingshot minidoc)
+  // so instead we should query the labeler profile
+
+  const { data: labelerProfile } = useQueryArbitrary(
+    identity?.did
+      ? `at://${identity?.did}/app.bsky.labeler.service/self`
+      : undefined
+  );
+
+  const isLabeler = !!labelerProfile?.cid;
+  const labelerRecord = isLabeler
+    ? (labelerProfile?.value as ATPAPI.AppBskyLabelerService.Record)
+    : undefined;
 
   const resolvedDid = did.startsWith("did:") ? did : identity?.did;
   const resolvedHandle = did.startsWith("did:") ? identity?.handle : did;
···
 
         {/* Avatar (PFP) */}
         <div className="absolute left-[16px] top-[100px] ">
-          <img
-            src={getAvatarUrl(profile) || "/favicon.png"}
-            alt="avatar"
-            className="w-28 h-28 rounded-full object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700"
-          />
+          {!getAvatarUrl(profile) && isLabeler ? (
+            <div
+              className={`w-28 h-28 ${isLabeler ? "rounded-md" : "rounded-full"} items-center justify-center flex object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700`}
+            >
+              <IconMdiShieldOutline className="w-20 h-20" />
+            </div>
+          ) : (
+            <img
+              src={getAvatarUrl(profile) || "/favicon.png"}
+              alt="avatar"
+              className={`w-28 h-28 ${isLabeler ? "rounded-md" : "rounded-full"} object-cover border-4 border-white dark:border-gray-950 bg-gray-300 dark:bg-gray-700`}
+            />
+          )}
         </div>
 
         <div className="absolute right-[16px] top-[170px] flex flex-row gap-2.5">
···
         <ReusableTabRoute
           route={`Profile` + did}
           tabs={{
-            Posts: <PostsTab did={did} />,
-            Reposts: <RepostsTab did={did} />,
-            Feeds: <FeedsTab did={did} />,
-            Lists: <ListsTab did={did} />,
+            ...(isLabeler
+              ? {
+                  Labels: <LabelsTab did={did} labelerRecord={labelerRecord} />,
+                }
+              : {}),
+            ...{
+              Posts: <PostsTab did={did} />,
+              Reposts: <RepostsTab did={did} />,
+              Feeds: <FeedsTab did={did} />,
+              Lists: <ListsTab did={did} />,
+            },
             ...(identity?.did === agent?.did
               ? { Likes: <SelfLikesTab did={did} /> }
               : {}),
···
       {feeds.length === 0 && !arePostsLoading && (
         <div className="p-4 text-center text-gray-500">No feeds found.</div>
       )}
+    </>
+  );
+}
+
+function LabelsTab({
+  did,
+  labelerRecord,
+}: {
+  did: string;
+  labelerRecord?: ATPAPI.AppBskyLabelerService.Record;
+}) {
+  useReusableTabScrollRestore(`Profile` + did);
+  const { agent } = useAuth();
+  // const {
+  //   data: identity,
+  //   isLoading: isIdentityLoading,
+  //   error: identityError,
+  // } = useQueryIdentity(did);
+
+  // const resolvedDid = did.startsWith("did:") ? did : identity?.did;
+
+  const labelMap = new Map(
+    labelerRecord?.policies?.labelValueDefinitions?.map((def) => {
+      const locale = def.locales.find((l) => l.lang === "en") ?? def.locales[0];
+      return [
+        def.identifier,
+        {
+          name: locale?.name,
+          description: locale?.description,
+          blur: def.blurs,
+          severity: def.severity,
+          adultOnly: def.adultOnly,
+          defaultSetting: def.defaultSetting,
+        },
+      ];
+    })
+  );
+
+  return (
+    <>
+      <div className="text-gray-500 dark:text-gray-400 text-lg font-semibold my-3 mx-4">
+        Labels
+      </div>
+      <div>
+        {[...labelMap.entries()].map(([key, item]) => (
+          <div
+            key={key}
+            className="border-gray-300 dark:border-gray-700 border-b px-4 py-4"
+          >
+            <div className="font-semibold text-lg">{item.name}</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              {item.description}
+            </div>
+            <div className="mt-1 text-xs text-gray-400">
+              {item.blur && <span>Blur: {item.blur} </span>}
+              {item.severity && <span>• Severity: {item.severity} </span>}
+              {item.adultOnly && <span>• 18+ only</span>}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Loading and "Load More" states */}
+      {!labelerRecord && (
+        <div className="p-4 text-center text-gray-500">Loading labels...</div>
+      )}
+      {/* {!labelerRecord && (
+        <div className="p-4 text-center text-gray-500">Loading more...</div>
+      )} */}
+      {/* {hasNextPage && !isFetchingNextPage && (
+        <button
+          onClick={() => fetchNextPage()}
+          className="w-[calc(100%-2rem)] mx-4 my-4 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 font-semibold"
+        >
+          Load More Feeds
+        </button>
+      )}
+      {feeds.length === 0 && !arePostsLoading && (
+        <div className="p-4 text-center text-gray-500">No feeds found.</div>
+      )} */}
     </>
   );
 }

src/routes/settings.tsx

···
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { Slider, Switch } from "radix-ui";
 import { useEffect, useState } from "react";
···
   videoCDNAtom,
 } from "~/utils/atoms";
 
+import { MaterialNavItem } from "./__root";
+
 export const Route = createFileRoute("/settings")({
   component: Settings,
 });
 
 export function Settings() {
+  const navigate = useNavigate();
   return (
     <>
       <Header
···
       <div className="lg:hidden">
         <Login />
       </div>
+      <div className="sm:hidden flex flex-col justify-around mt-4">
+        <SettingHeading title="Other Pages" top />
+        <MaterialNavItem
+          InactiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />}
+          ActiveIcon={<IconMaterialSymbolsTag className="w-6 h-6" />}
+          active={false}
+          onClickCallbback={() =>
+            navigate({
+              to: "/feeds",
+              //params: { did: agent.assertDid },
+            })
+          }
+          text="Feeds"
+        />
+        <MaterialNavItem
+          InactiveIcon={<IconMdiShieldOutline className="w-6 h-6" />}
+          ActiveIcon={<IconMdiShield className="w-6 h-6" />}
+          active={false}
+          onClickCallbback={() =>
+            navigate({
+              to: "/moderation",
+              //params: { did: agent.assertDid },
+            })
+          }
+          text="Moderation"
+        />
+      </div>
       <div className="h-4" />
 
       <SettingHeading title="Personalization" top />
···
       <SwitchSetting
         atom={enableWafrnTextAtom}
         title={"Wafrn Text"}
-        description={
-          "Show the original text of posts from Wafrn instances"
-        }
+        description={"Show the original text of posts from Wafrn instances"}
         //init={false}
       />
       <p className="text-gray-500 dark:text-gray-400 py-4 px-4 text-sm border rounded-xl mx-4 mt-8 mb-4">