feat: add comprehensive settings UI with Post and Appearance sections

Created a minimal MVP settings system accessible via command palette and user menu.
Settings are organized in a clean tabbed interface with two initial sections.

UI Features:
- SettingsViewer component with sidebar navigation
- Post section: Toggle to include Grimoire client tag in published events
- Appearance section:
  - Theme selector (light/dark/system)
  - Toggle to show/hide client tags in event UI ("via Grimoire" etc)

Integration:
- Added "settings" command to command palette
- Added "Settings" option to user menu (before Support Grimoire)
- Registered "settings" as new AppId in window system

Display Logic:
- BaseEventRenderer now honors settings.appearance.showClientTags
- When disabled, "via Grimoire" and other client tags are hidden from events
- Setting applies instantly across all event renderers

Technical Details:
- SettingsViewer uses existing UI components (Checkbox, Button, Label)
- Leverages useSettings hook for reactive updates
- Settings persist to localStorage via settingsManager
- Simple button group for theme selection instead of dropdown
- Clean two-column layout with icons for each section

This provides a solid foundation for adding more settings sections later
(relay config, privacy, database, notifications, developer options).

src/components/SettingsViewer.tsx

@@ -0,0 +1,153 @@
+import { useState } from "react";
+import { Settings, Palette } from "lucide-react";
+import { Label } from "./ui/label";
+import { Checkbox } from "./ui/checkbox";
+import { Button } from "./ui/button";
+import { useSettings } from "@/hooks/useSettings";
+import { cn } from "@/lib/utils";
+
+type SettingsTab = "post" | "appearance";
+
+interface TabConfig {
+  id: SettingsTab;
+  label: string;
+  icon: React.ReactNode;
+}
+
+const TABS: TabConfig[] = [
+  {
+    id: "post",
+    label: "Post",
+    icon: <Settings className="h-4 w-4" />,
+  },
+  {
+    id: "appearance",
+    label: "Appearance",
+    icon: <Palette className="h-4 w-4" />,
+  },
+];
+
+export function SettingsViewer() {
+  const { settings, updateSetting } = useSettings();
+  const [activeTab, setActiveTab] = useState<SettingsTab>("post");
+
+  return (
+    <div className="h-full flex">
+      {/* Sidebar */}
+      <div className="w-48 border-r border-border bg-muted/20">
+        <div className="p-4">
+          <h2 className="text-lg font-semibold mb-4">Settings</h2>
+          <div className="space-y-1">
+            {TABS.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "w-full flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
+                  activeTab === tab.id
+                    ? "bg-accent text-accent-foreground"
+                    : "hover:bg-accent/50 text-muted-foreground",
+                )}
+              >
+                {tab.icon}
+                <span>{tab.label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="p-6 max-w-2xl">
+          {activeTab === "post" && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold mb-4">Post Settings</h3>
+                <p className="text-sm text-muted-foreground mb-6">
+                  Configure how your posts are published
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                <div className="flex items-start gap-3">
+                  <Checkbox
+                    id="client-tag"
+                    checked={settings?.post?.includeClientTag ?? true}
+                    onCheckedChange={(checked: boolean) =>
+                      updateSetting("post", "includeClientTag", checked)
+                    }
+                  />
+                  <div className="space-y-0.5">
+                    <Label className="cursor-pointer">Include Client Tag</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Add Grimoire client tag to your published events (kind 1
+                      posts, spells, deletions)
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "appearance" && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold mb-4">
+                  Appearance Settings
+                </h3>
+                <p className="text-sm text-muted-foreground mb-6">
+                  Customize how Grimoire looks
+                </p>
+              </div>
+
+              <div className="space-y-6">
+                <div className="space-y-3">
+                  <Label>Theme</Label>
+                  <div className="flex gap-2">
+                    {(["light", "dark", "system"] as const).map((theme) => (
+                      <Button
+                        key={theme}
+                        variant={
+                          (settings?.appearance?.theme ?? "dark") === theme
+                            ? "default"
+                            : "outline"
+                        }
+                        size="sm"
+                        onClick={() =>
+                          updateSetting("appearance", "theme", theme)
+                        }
+                        className="capitalize"
+                      >
+                        {theme}
+                      </Button>
+                    ))}
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    Choose your preferred color scheme
+                  </p>
+                </div>
+
+                <div className="flex items-start gap-3">
+                  <Checkbox
+                    id="show-client-tags"
+                    checked={settings?.appearance?.showClientTags ?? true}
+                    onCheckedChange={(checked: boolean) =>
+                      updateSetting("appearance", "showClientTags", checked)
+                    }
+                  />
+                  <div className="space-y-0.5">
+                    <Label className="cursor-pointer">Show Client Tags</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Display "via Grimoire" and other client tags in event UI
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/WindowRenderer.tsx

@@ -50,6 +50,9 @@ const CountViewer = lazy(() => import("./CountViewer"));
 const PostViewer = lazy(() =>
   import("./PostViewer").then((m) => ({ default: m.PostViewer })),
 );
+const SettingsViewer = lazy(() =>
+  import("./SettingsViewer").then((m) => ({ default: m.SettingsViewer })),
+);
 
 // Loading fallback component
 function ViewerLoading() {
@@ -247,6 +250,9 @@ export function WindowRenderer({ window, onClose }: WindowRendererProps) {
       case "post":
         content = <PostViewer windowId={window.id} />;
         break;
+      case "settings":
+        content = <SettingsViewer />;
+        break;
       default:
         content = (
           <div className="p-4 text-muted-foreground">

src/components/nostr/kinds/BaseEventRenderer.tsx

@@ -28,6 +28,7 @@ import {
 import { useGrimoire } from "@/core/state";
 import { useCopy } from "@/hooks/useCopy";
 import { useAccount } from "@/hooks/useAccount";
+import { useSettings } from "@/hooks/useSettings";
 import { JsonViewer } from "@/components/JsonViewer";
 import { EmojiPickerDialog } from "@/components/chat/EmojiPickerDialog";
 import { formatTimestamp } from "@/hooks/useLocale";
@@ -531,6 +532,7 @@ export function BaseEventContainer({
 }) {
   const { locale, addWindow } = useGrimoire();
   const { canSign, signer, pubkey } = useAccount();
+  const { settings } = useSettings();
   const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
 
   const handleReactClick = () => {
@@ -612,7 +614,7 @@ export function BaseEventContainer({
               >
                 {relativeTime}
               </span>
-              {clientName && (
+              {settings?.appearance?.showClientTags && clientName && (
                 <span className="text-[10px] text-muted-foreground/70">
                   via{" "}
                   {clientAppPointer ? (

src/components/nostr/user-menu.tsx

@@ -9,6 +9,7 @@ import {
   Zap,
   LogIn,
   LogOut,
+  Settings,
 } from "lucide-react";
 import accounts from "@/services/accounts";
 import { useProfile } from "@/hooks/useProfile";
@@ -515,6 +516,15 @@ export default function UserMenu() {
             </DropdownMenuSubContent>
           </DropdownMenuSub>
 
+          {/* Settings */}
+          <DropdownMenuItem
+            className="cursor-crosshair"
+            onClick={() => addWindow("settings", {}, "Settings")}
+          >
+            <Settings className="size-4 text-muted-foreground mr-2" />
+            <span className="text-sm">Settings</span>
+          </DropdownMenuItem>
+
           {/* Support Grimoire */}
           <DropdownMenuSeparator />
           <DropdownMenuItem

src/services/settings.ts

@@ -27,6 +27,8 @@ export interface PostSettings {
 export interface AppearanceSettings {
   /** Theme mode (light, dark, or system) */
   theme: "light" | "dark" | "system";
+  /** Show client tags in event UI */
+  showClientTags: boolean;
   /** Event kinds to render in compact mode */
   compactModeKinds: number[];
   /** Font size multiplier (0.8 = 80%, 1.0 = 100%, 1.2 = 120%) */
@@ -146,6 +148,7 @@ const DEFAULT_POST_SETTINGS: PostSettings = {
 
 const DEFAULT_APPEARANCE_SETTINGS: AppearanceSettings = {
   theme: "dark",
+  showClientTags: true,
   compactModeKinds: [6, 7, 16, 9735], // reactions, reposts, zaps
   fontSizeMultiplier: 1.0,
   animationsEnabled: true,

src/types/app.ts

@@ -24,6 +24,7 @@ export type AppId =
   | "wallet"
   | "zap"
   | "post"
+  | "settings"
   | "win";
 
 export interface WindowInstance {

src/types/man.ts

@@ -855,4 +855,16 @@ export const manPages: Record<string, ManPageEntry> = {
     category: "Nostr",
     defaultProps: {},
   },
+  settings: {
+    name: "settings",
+    section: "1",
+    synopsis: "settings",
+    description:
+      "Configure Grimoire application settings. Includes post composition settings (client tag), appearance settings (theme, show client tags), and more. Settings are persisted to localStorage and synchronized across all windows.",
+    examples: ["settings    Open settings panel"],
+    seeAlso: ["post", "help"],
+    appId: "settings",
+    category: "System",
+    defaultProps: {},
+  },
 };