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 />

src/lib/markdown.ts

@@ -0,0 +1,57 @@
+import { marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+import DOMPurify from "dompurify";
+import hljs from "highlight.js/lib/core";
+import "highlight.js/styles/atom-one-dark.min.css";
+
+// Register commonly used languages (keeps bundle small)
+import javascript from "highlight.js/lib/languages/javascript";
+import typescript from "highlight.js/lib/languages/typescript";
+import python from "highlight.js/lib/languages/python";
+import rust from "highlight.js/lib/languages/rust";
+import json from "highlight.js/lib/languages/json";
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import xml from "highlight.js/lib/languages/xml";
+import markdown from "highlight.js/lib/languages/markdown";
+import go from "highlight.js/lib/languages/go";
+import sql from "highlight.js/lib/languages/sql";
+import yaml from "highlight.js/lib/languages/yaml";
+
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("js", javascript);
+hljs.registerLanguage("typescript", typescript);
+hljs.registerLanguage("ts", typescript);
+hljs.registerLanguage("python", python);
+hljs.registerLanguage("rust", rust);
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("sh", bash);
+hljs.registerLanguage("shell", bash);
+hljs.registerLanguage("css", css);
+hljs.registerLanguage("html", xml);
+hljs.registerLanguage("xml", xml);
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("md", markdown);
+hljs.registerLanguage("go", go);
+hljs.registerLanguage("sql", sql);
+hljs.registerLanguage("yaml", yaml);
+hljs.registerLanguage("yml", yaml);
+
+// Configure marked with highlight.js via marked-highlight extension
+marked.use(
+  markedHighlight({
+    highlight(code: string, lang: string) {
+      if (lang && hljs.getLanguage(lang)) {
+        return hljs.highlight(code, { language: lang }).value;
+      }
+      return hljs.highlightAuto(code).value;
+    },
+  }),
+  { breaks: true },
+);
+
+export function renderMarkdown(md: string): string {
+  const html = marked(md) as string;
+  return DOMPurify.sanitize(html, { ADD_ATTR: ["id", "class"] });
+}

src/lib/notifications.ts

@@ -0,0 +1,67 @@
+import {
+  isPermissionGranted,
+  requestPermission,
+  sendNotification,
+} from "@tauri-apps/plugin-notification";
+
+const SETTINGS_KEY = "wrystr_notification_settings";
+
+interface NotificationSettings {
+  mentions: boolean;
+  dms: boolean;
+  zaps: boolean;
+}
+
+const defaults: NotificationSettings = { mentions: true, dms: true, zaps: true };
+
+export function getNotificationSettings(): NotificationSettings {
+  try {
+    const stored = localStorage.getItem(SETTINGS_KEY);
+    return stored ? { ...defaults, ...JSON.parse(stored) } : defaults;
+  } catch {
+    return defaults;
+  }
+}
+
+export function saveNotificationSettings(settings: NotificationSettings): void {
+  localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+}
+
+export async function ensurePermission(): Promise<boolean> {
+  let granted = await isPermissionGranted();
+  if (!granted) {
+    const result = await requestPermission();
+    granted = result === "granted";
+  }
+  return granted;
+}
+
+export async function notifyMention(authorName: string, preview: string): Promise<void> {
+  const settings = getNotificationSettings();
+  if (!settings.mentions) return;
+  if (!(await ensurePermission())) return;
+  sendNotification({
+    title: `${authorName} mentioned you`,
+    body: preview.slice(0, 120),
+  });
+}
+
+export async function notifyDM(authorName: string, preview: string): Promise<void> {
+  const settings = getNotificationSettings();
+  if (!settings.dms) return;
+  if (!(await ensurePermission())) return;
+  sendNotification({
+    title: `DM from ${authorName}`,
+    body: preview.slice(0, 120),
+  });
+}
+
+export async function notifyZap(senderName: string, amount: number): Promise<void> {
+  const settings = getNotificationSettings();
+  if (!settings.zaps) return;
+  if (!(await ensurePermission())) return;
+  sendNotification({
+    title: `${senderName} zapped you`,
+    body: `${amount.toLocaleString()} sats`,
+  });
+}

src/stores/notifications.ts

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { fetchMentions } from "../lib/nostr";
+import { notifyMention, notifyDM } from "../lib/notifications";
 
 const NOTIF_SEEN_KEY = "wrystr_notif_last_seen";
 const DM_SEEN_KEY = "wrystr_dm_last_seen";
@@ -52,7 +53,16 @@ export const useNotificationsStore = create<NotificationsState>((set, get) => ({
     try {
       const lastSeenAt = isNewAccount ? loadLastSeen() : get().lastSeenAt;
       const events = await fetchMentions(pubkey, lastSeenAt);
-      const unreadCount = events.filter((e) => (e.created_at ?? 0) > lastSeenAt).length;
+      const newEvents = events.filter((e) => (e.created_at ?? 0) > lastSeenAt);
+      const unreadCount = newEvents.length;
+      // Fire OS notification for new mentions (only truly new ones since last fetch)
+      const prevCount = get().unreadCount;
+      if (unreadCount > prevCount && newEvents.length > 0) {
+        const latest = newEvents[0];
+        const authorName = latest.pubkey.slice(0, 8) + "…";
+        const preview = latest.content?.slice(0, 120) || "mentioned you";
+        notifyMention(authorName, preview).catch(() => {});
+      }
       set({ notifications: events, unreadCount, lastSeenAt });
     } catch {
       // Non-critical
@@ -76,10 +86,17 @@ export const useNotificationsStore = create<NotificationsState>((set, get) => ({
   },
 
   computeDMUnread: (conversations: Array<{ partnerPubkey: string; lastAt: number }>) => {
-    const { dmLastSeen } = get();
-    const dmUnreadCount = conversations.filter(
+    const { dmLastSeen, dmUnreadCount: prevCount } = get();
+    const unreadConvos = conversations.filter(
       (c) => c.lastAt > (dmLastSeen[c.partnerPubkey] ?? 0)
-    ).length;
+    );
+    const dmUnreadCount = unreadConvos.length;
+    // Fire OS notification if new unread DMs appeared
+    if (dmUnreadCount > prevCount && unreadConvos.length > 0) {
+      const latest = unreadConvos[0];
+      const name = latest.partnerPubkey.slice(0, 8) + "…";
+      notifyDM(name, "New message").catch(() => {});
+    }
     set({ dmUnreadCount });
   },
 }));