Add syntax highlighting in code blocks and OS push notifications

Syntax highlighting: shared markdown renderer with highlight.js
(atom-one-dark theme), 12 language grammars registered (JS, TS,
Python, Rust, Go, Bash, JSON, YAML, SQL, CSS, HTML, Markdown).
Applied to both article reader and editor preview.

OS notifications: Tauri notification plugin for mentions, DMs, and
zaps. Per-type toggles in Settings with custom toggle switches.
Fires on new unread mentions/DMs; requests OS permission on first
enable. Notification utility at src/lib/notifications.ts.

src/components/article/ArticleEditor.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from "react";
-import { marked } from "marked";
+import { renderMarkdown } from "../../lib/markdown";
 import { publishArticle } from "../../lib/nostr";
 import { useUIStore } from "../../stores/ui";
 import { MarkdownToolbar, handleEditorKeyDown } from "./MarkdownToolbar";
@@ -100,7 +100,7 @@ export function ArticleEditor() {
     return () => clearInterval(iv);
   }, [lastSaved]);
 
-  const renderedHtml = marked(content || "*Nothing to preview yet.*") as string;
+  const renderedHtml = renderMarkdown(content || "*Nothing to preview yet.*");
   const wordCount = content.trim() ? content.trim().split(/\s+/).length : 0;
   const canPublish = title.trim().length > 0 && content.trim().length > 0;
 

src/components/article/ArticleView.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef, useCallback } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
-import { marked } from "marked";
-import DOMPurify from "dompurify";
+import { renderMarkdown } from "../../lib/markdown";
 import { useUIStore } from "../../stores/ui";
 import { useUserStore } from "../../stores/user";
 import { useBookmarkStore } from "../../stores/bookmark";
@@ -27,11 +26,6 @@ function getTags(event: NDKEvent, name: string): string[] {
   return event.tags.filter((t) => t[0] === name).map((t) => t[1]).filter(Boolean);
 }
 
-function renderMarkdown(md: string): string {
-  const html = marked(md, { breaks: true }) as string;
-  return DOMPurify.sanitize(html, { ADD_ATTR: ["id"] });
-}
-
 // ── Author row ────────────────────────────────────────────────────────────────
 
 function AuthorRow({ pubkey, publishedAt, readingTime }: { pubkey: string; publishedAt: number | null; readingTime?: number }) {

src/components/shared/SettingsView.tsx

@@ -7,6 +7,7 @@ import { useBookmarkStore } from "../../stores/bookmark";
 import { getNDK, getStoredRelayUrls, addRelay, removeRelay, publishRelayList } from "../../lib/nostr";
 import { useProfile } from "../../hooks/useProfile";
 import { NWCWizard } from "./NWCWizard";
+import { getNotificationSettings, saveNotificationSettings, ensurePermission } from "../../lib/notifications";
 
 function MutedRow({ pubkey, onUnmute }: { pubkey: string; onUnmute: () => void }) {
   const profile = useProfile(pubkey);
@@ -263,6 +264,54 @@ function ExportSection() {
   );
 }
 
+function NotificationSection() {
+  const [settings, setSettings] = useState(getNotificationSettings);
+
+  const toggle = (key: "mentions" | "dms" | "zaps") => {
+    const next = { ...settings, [key]: !settings[key] };
+    setSettings(next);
+    saveNotificationSettings(next);
+    // Request permission on first enable
+    if (next[key]) ensurePermission().catch(() => {});
+  };
+
+  const items: Array<{ key: "mentions" | "dms" | "zaps"; label: string }> = [
+    { key: "mentions", label: "Mentions" },
+    { key: "dms", label: "Direct messages" },
+    { key: "zaps", label: "Zaps received" },
+  ];
+
+  return (
+    <section>
+      <h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-2 text-text-dim">
+        Notifications
+      </h2>
+      <p className="text-text-dim text-[11px] mb-3">
+        OS-level push notifications. Requires system permission.
+      </p>
+      <div className="space-y-2">
+        {items.map(({ key, label }) => (
+          <label key={key} className="flex items-center gap-2 cursor-pointer group">
+            <button
+              onClick={() => toggle(key)}
+              className={`w-8 h-4 rounded-full transition-colors relative ${
+                settings[key] ? "bg-accent" : "bg-border"
+              }`}
+            >
+              <span
+                className={`absolute top-0.5 w-3 h-3 rounded-full bg-white transition-transform ${
+                  settings[key] ? "translate-x-4" : "translate-x-0.5"
+                }`}
+              />
+            </button>
+            <span className="text-text text-[12px]">{label}</span>
+          </label>
+        ))}
+      </div>
+    </section>
+  );
+}
+
 export function SettingsView() {
   return (
     <div className="h-full flex flex-col">
@@ -272,6 +321,7 @@ export function SettingsView() {
 
       <div className="flex-1 overflow-y-auto p-4 space-y-8">
         <WalletSection />
+        <NotificationSection />
         <RelaySection />
         <ExportSection />
         <IdentitySection />