web: Fix theme resetting to first theme in list (#156)

* examples: Add CoreDNS for *.local domain resolution

Adds a CoreDNS example that resolves *.local to the Traefik host,
making the .local routes in all examples work out of the box.

Also removes the redundant Multi-Container Stacks section from
README since paperless-ngx already demonstrates this pattern.

* examples: Add coredns .env file

examples/README.md

@@ -7,9 +7,10 @@ Real-world examples demonstrating compose-farm patterns for multi-host Docker de
 | Stack | Type | Demonstrates |
 |---------|------|--------------|
 | [traefik](traefik/) | Infrastructure | Reverse proxy, Let's Encrypt, file-provider |
+| [coredns](coredns/) | Infrastructure | Wildcard DNS for `*.local` domains |
 | [mealie](mealie/) | Single container | Traefik labels, resource limits, environment vars |
 | [uptime-kuma](uptime-kuma/) | Single container | Docker socket, user mapping, custom DNS |
-| [paperless-ngx](paperless-ngx/) | Multi-container | Redis + App stack (SQLite) |
+| [paperless-ngx](paperless-ngx/) | Multi-container | Redis + PostgreSQL + App stack |
 | [autokuma](autokuma/) | Multi-host | Demonstrates `all` keyword (runs on every host) |
 
 ## Key Patterns
@@ -53,7 +54,8 @@ labels:
   - traefik.http.routers.myapp-local.entrypoints=web
 ```
 
-> **Note:** `.local` domains require local DNS (e.g., Pi-hole, Technitium) to resolve to your Traefik host.
+> **Note:** `.local` domains require local DNS to resolve to your Traefik host.
+> The [coredns](coredns/) example provides this - edit `Corefile` to set your Traefik IP.
 
 ### Environment Variables
 
@@ -88,23 +90,6 @@ stacks:
   autokuma: all  # Runs on every configured host
 ```
 
-### Multi-Container Stacks
-
-Database-backed apps with multiple services:
-
-```yaml
-services:
-  redis:
-    image: redis:7
-  app:
-    depends_on:
-      - redis
-```
-
-> **NFS + PostgreSQL Warning:** PostgreSQL should NOT run on NFS storage due to
-> fsync and file locking issues. Use SQLite (safe for single-writer on NFS) or
-> keep PostgreSQL data on local volumes (non-migratable).
-
 ### AutoKuma Labels (Optional)
 
 The autokuma example demonstrates compose-farm's **multi-host feature** - running the same stack on all hosts using the `all` keyword. AutoKuma itself is not part of compose-farm; it's just a good example because it needs to run on every host to monitor local Docker containers.
@@ -125,8 +110,8 @@ cd examples
 # 1. Create the shared network on all hosts
 compose-farm init-network
 
-# 2. Start Traefik first (the reverse proxy)
-compose-farm up traefik
+# 2. Start infrastructure (reverse proxy + DNS)
+compose-farm up traefik coredns
 
 # 3. Start other stacks
 compose-farm up mealie uptime-kuma

examples/compose-farm-state.yaml

@@ -3,6 +3,7 @@ deployed:
   - primary
   - secondary
   - local
+  coredns: primary
   mealie: secondary
   paperless-ngx: primary
   traefik: primary

examples/compose-farm.yaml

@@ -27,6 +27,7 @@ hosts:
 stacks:
   # Infrastructure (runs on primary where Traefik is)
   traefik: primary
+  coredns: primary  # DNS for *.local resolution
 
   # Multi-host stacks (runs on ALL hosts)
   # AutoKuma monitors Docker containers on each host

examples/coredns/.env

@@ -0,0 +1,2 @@
+# CoreDNS doesn't need environment variables
+# The Traefik IP is configured in the Corefile

examples/coredns/Corefile

@@ -0,0 +1,22 @@
+# CoreDNS configuration for .local domain resolution
+#
+# Resolves *.local to the Traefik host IP (where your reverse proxy runs).
+# All other queries are forwarded to upstream DNS.
+
+# Handle .local domains - resolve everything to Traefik's host
+local {
+    template IN A {
+        answer "{{ .Name }} 60 IN A 192.168.1.10"
+    }
+    template IN AAAA {
+        # Return empty for AAAA to avoid delays on IPv4-only networks
+        rcode NOERROR
+    }
+}
+
+# Forward everything else to upstream DNS
+. {
+    forward . 1.1.1.1 8.8.8.8
+    cache 300
+    errors
+}

examples/coredns/compose.yaml

@@ -0,0 +1,27 @@
+# CoreDNS - DNS server for .local domain resolution
+#
+# Demonstrates:
+# - Wildcard DNS for *.local domains
+# - Config file mounting from stack directory
+# - UDP/TCP port exposure
+#
+# This enables all the .local routes in the examples to work.
+# Point your devices/router DNS to this server's IP.
+name: coredns
+services:
+  coredns:
+    image: coredns/coredns:latest
+    container_name: coredns
+    restart: unless-stopped
+    networks:
+      - mynetwork
+    ports:
+      - "53:53/udp"
+      - "53:53/tcp"
+    volumes:
+      - ./Corefile:/root/Corefile:ro
+    command: -conf /root/Corefile
+
+networks:
+  mynetwork:
+    external: true

examples/paperless-ngx/.env

@@ -1,3 +1,4 @@
 # Copy to .env and fill in your values
 DOMAIN=example.com
-PAPERLESS_SECRET_KEY=change-me-to-a-random-string
+POSTGRES_PASSWORD=change-me-to-a-secure-password
+PAPERLESS_SECRET_KEY=change-me-to-a-long-random-string

examples/paperless-ngx/compose.yaml

@@ -1,44 +1,57 @@
 # Paperless-ngx - Document management system
 #
 # Demonstrates:
-# - HTTPS route: paperless.${DOMAIN} (e.g., paperless.example.com) with Let's Encrypt
-# - HTTP route: paperless.local for LAN access without TLS
-# - Multi-container stack (Redis + App with SQLite)
-#
-# NOTE: This example uses SQLite (the default) instead of PostgreSQL.
-# PostgreSQL should NOT be used with NFS storage due to fsync/locking issues.
-# If you need PostgreSQL, use local volumes for the database.
+# - HTTPS route: paperless.${DOMAIN} with Let's Encrypt
+# - HTTP route: paperless.local for LAN access
+# - Multi-container stack (Redis + PostgreSQL + App)
+# - Separate env_file for app-specific settings
 name: paperless-ngx
 services:
-  redis:
-    image: redis:8
+  broker:
+    image: redis:7
     container_name: paperless-redis
     restart: unless-stopped
     networks:
       - mynetwork
     volumes:
-      - /mnt/data/paperless/redis:/data
+      - /mnt/data/paperless/redisdata:/data
+
+  db:
+    image: postgres:16
+    container_name: paperless-db
+    restart: unless-stopped
+    networks:
+      - mynetwork
+    volumes:
+      - /mnt/data/paperless/pgdata:/var/lib/postgresql/data
+    environment:
+      POSTGRES_DB: paperless
+      POSTGRES_USER: paperless
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
 
   paperless:
     image: ghcr.io/paperless-ngx/paperless-ngx:latest
     container_name: paperless
     restart: unless-stopped
     depends_on:
-      - redis
+      - db
+      - broker
     networks:
       - mynetwork
     ports:
       - "8000:8000"
     volumes:
-      # SQLite database stored here (safe on NFS for single-writer)
       - /mnt/data/paperless/data:/usr/src/paperless/data
       - /mnt/data/paperless/media:/usr/src/paperless/media
       - /mnt/data/paperless/export:/usr/src/paperless/export
       - /mnt/data/paperless/consume:/usr/src/paperless/consume
     environment:
-      PAPERLESS_REDIS: redis://redis:6379
+      PAPERLESS_REDIS: redis://broker:6379
+      PAPERLESS_DBHOST: db
       PAPERLESS_URL: https://paperless.${DOMAIN}
       PAPERLESS_SECRET_KEY: ${PAPERLESS_SECRET_KEY}
+      PAPERLESS_TIME_ZONE: America/Los_Angeles
+      PAPERLESS_OCR_LANGUAGE: eng
       USERMAP_UID: 1000
       USERMAP_GID: 1000
     labels:

src/compose_farm/web/static/app.js

@@ -551,7 +551,6 @@ function playFabIntro() {
     let commands = [];
     let filtered = [];
     let selected = 0;
-    let originalTheme = null; // Store theme when palette opens for preview/restore
 
     const post = (url) => () => htmx.ajax('POST', url, {swap: 'none'});
     const nav = (url, afterNav) => () => {
@@ -575,20 +574,21 @@ function playFabIntro() {
         }
         htmx.ajax('POST', `/api/${endpoint}`, {swap: 'none'});
     };
+    // Get saved theme from localStorage (source of truth)
+    const getSavedTheme = () => localStorage.getItem(THEME_KEY) || 'dark';
+
     // Apply theme and save to localStorage
     const setTheme = (theme) => () => {
         document.documentElement.setAttribute('data-theme', theme);
         localStorage.setItem(THEME_KEY, theme);
     };
-    // Preview theme without saving (for hover)
+    // Preview theme without saving (for hover). Guards against undefined/invalid themes.
     const previewTheme = (theme) => {
-        document.documentElement.setAttribute('data-theme', theme);
+        if (theme) document.documentElement.setAttribute('data-theme', theme);
     };
-    // Restore original theme (when closing without selection)
+    // Restore theme from localStorage (source of truth)
     const restoreTheme = () => {
-        if (originalTheme) {
-            document.documentElement.setAttribute('data-theme', originalTheme);
-        }
+        document.documentElement.setAttribute('data-theme', getSavedTheme());
     };
     // Generate color swatch HTML for a theme
     const themeSwatch = (theme) => `<span class="flex gap-0.5" data-theme="${theme}"><span class="w-2 h-4 rounded-l bg-primary"></span><span class="w-2 h-4 bg-secondary"></span><span class="w-2 h-4 bg-accent"></span><span class="w-2 h-4 rounded-r bg-neutral"></span></span>`;
@@ -721,26 +721,24 @@ function playFabIntro() {
         // Scroll selected item into view
         const sel = list.querySelector(`[data-idx="${selected}"]`);
         if (sel) sel.scrollIntoView({ block: 'nearest' });
-        // Preview theme if selected item is a theme command
+        // Preview theme if selected item is a theme command, otherwise restore saved
         const selectedCmd = filtered[selected];
         if (selectedCmd?.themeId) {
             previewTheme(selectedCmd.themeId);
-        } else if (originalTheme) {
-            // Restore original when navigating away from theme commands
-            previewTheme(originalTheme);
+        } else {
+            restoreTheme();
         }
     }
 
     function open(initialFilter = '') {
-        // Store original theme for preview/restore
-        originalTheme = document.documentElement.getAttribute('data-theme') || 'dark';
         buildCommands();
         selected = 0;
         input.value = initialFilter;
         filter();
         // If opening theme picker, select current theme
         if (initialFilter.startsWith('theme:')) {
-            const currentIdx = filtered.findIndex(c => c.themeId === originalTheme);
+            const savedTheme = getSavedTheme();
+            const currentIdx = filtered.findIndex(c => c.themeId === savedTheme);
             if (currentIdx >= 0) selected = currentIdx;
         }
         render();
@@ -751,10 +749,6 @@ function playFabIntro() {
     function exec() {
         const cmd = filtered[selected];
         if (cmd) {
-            if (cmd.themeId) {
-                // Theme command commits the previewed choice.
-                originalTheme = null;
-            }
             dialog.close();
             cmd.action();
         }
@@ -794,19 +788,14 @@ function playFabIntro() {
         if (a) previewTheme(a.dataset.themeId);
     });
 
-    // Mouse leaving list restores to selected item's theme (or original)
+    // Mouse leaving list restores to selected item's theme (or saved)
     list.addEventListener('mouseleave', () => {
         const cmd = filtered[selected];
-        previewTheme(cmd?.themeId || originalTheme);
+        previewTheme(cmd?.themeId || getSavedTheme());
     });
 
-    // Restore theme when dialog closes without selection (Escape, backdrop click)
-    dialog.addEventListener('close', () => {
-        if (originalTheme) {
-            restoreTheme();
-            originalTheme = null;
-        }
-    });
+    // Restore theme from localStorage when dialog closes
+    dialog.addEventListener('close', restoreTheme);
 
     // FAB click to open
     if (fab) fab.addEventListener('click', () => open());