@radioactive-labs/plutonium 0.48.0 → 0.49.1

package/src/js/controllers/color_mode_controller.js

@@ -1,66 +1,73 @@
 import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="color-mode"
+//
+// Shared theme state across the app. localStorage key 'theme' holds one of:
+//   'auto'  — follow prefers-color-scheme (default when unset)
+//   'light' — force light
+//   'dark'  — force dark
+const ORDER = ['auto', 'light', 'dark'];
+
 export default class extends Controller {
   static values = { current: String };
 
   connect() {
-    // Set initial mode from localStorage or default
-    const mode = localStorage.getItem('theme') || "light";
-    this.setMode(mode);
+    this.applyMode(this.readMode());
 
-    // Listen for cross-tab theme changes
     this.handleStorageChange = (e) => {
-      console.log('Storage event received in color-mode controller:', e.key, e.newValue, e.oldValue)
-      if (e.key === 'theme' && e.newValue) {
-        console.log('Updating color-mode theme to:', e.newValue)
-        this.setMode(e.newValue);
-      }
+      if (e.key === 'theme') this.applyMode(this.readMode());
     };
     window.addEventListener('storage', this.handleStorageChange);
+
+    this.mq = window.matchMedia('(prefers-color-scheme: dark)');
+    this.handleMqChange = () => {
+      if (this.readMode() === 'auto') this.applyMode('auto');
+    };
+    this.mq.addEventListener('change', this.handleMqChange);
   }
 
   disconnect() {
-    // Clean up event listener
     window.removeEventListener('storage', this.handleStorageChange);
+    if (this.mq) this.mq.removeEventListener('change', this.handleMqChange);
   }
 
   toggleMode() {
-    const current = this.currentValue || "light";
-    const next = current === "light" ? "dark" : "light";
+    const current = this.readMode();
+    const next = ORDER[(ORDER.indexOf(current) + 1) % ORDER.length];
     this.setMode(next);
   }
 
   setMode(mode) {
-    // Update html class
-    if (mode === "dark") {
-      document.documentElement.classList.add("dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
+    localStorage.setItem('theme', mode);
+    this.applyMode(mode);
+  }
 
-    // Update button state
+  applyMode(mode) {
+    const effective = this.effectiveMode(mode);
+    document.documentElement.classList.toggle('dark', effective === 'dark');
     this.currentValue = mode;
-
-    // Show/hide icons
     this.toggleIcons(mode);
+  }
 
-    // Store in localStorage to trigger storage events in other tabs
-    localStorage.setItem('theme', mode);
+  readMode() {
+    const saved = localStorage.getItem('theme');
+    return ORDER.includes(saved) ? saved : 'auto';
   }
 
-  toggleIcons(mode) {
-    const sun = this.element.querySelector(".color-mode-icon-light");
-    const moon = this.element.querySelector(".color-mode-icon-dark");
+  effectiveMode(mode) {
+    if (mode === 'light' || mode === 'dark') return mode;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
 
-    if (sun && moon) {
-      if (mode === "light") {
-        sun.classList.remove("hidden");
-        moon.classList.add("hidden");
-      } else {
-        sun.classList.add("hidden");
-        moon.classList.remove("hidden");
-      }
+  toggleIcons(mode) {
+    const icons = {
+      auto: this.element.querySelector(".color-mode-icon-auto"),
+      light: this.element.querySelector(".color-mode-icon-light"),
+      dark: this.element.querySelector(".color-mode-icon-dark"),
+    };
+    for (const [key, el] of Object.entries(icons)) {
+      if (!el) continue;
+      el.classList.toggle("hidden", key !== mode);
     }
   }
 }

package/src/js/controllers/flatpickr_controller.js

@@ -54,7 +54,30 @@ export default class extends Controller {
     }
 
     if (this.modal) {
+      // Inside a <dialog> opened via showModal(), the dialog establishes its
+      // own containing block in the top layer. flatpickr's default positioning
+      // computes document coordinates but the calendar (appended to the
+      // dialog) interprets them relative to the dialog's box, placing the
+      // calendar far from the input. Append to the modal and reposition
+      // manually relative to the modal's bounding rect.
       options.appendTo = this.modal;
+      options.position = (instance) => {
+        const input = instance.altInput || instance.input;
+        const inputRect = input.getBoundingClientRect();
+        const modalRect = this.modal.getBoundingClientRect();
+        const cal = instance.calendarContainer;
+        const calHeight = cal.offsetHeight;
+        const spaceBelow = window.innerHeight - inputRect.bottom;
+        const showAbove = spaceBelow < calHeight && inputRect.top > calHeight;
+        const top = showAbove
+          ? inputRect.top - modalRect.top - calHeight - 2
+          : inputRect.bottom - modalRect.top + 2;
+        cal.style.top = `${top}px`;
+        cal.style.left = `${inputRect.left - modalRect.left}px`;
+        cal.style.right = "auto";
+        cal.classList.toggle("arrowTop", !showAbove);
+        cal.classList.toggle("arrowBottom", showAbove);
+      };
     }
 
     return options;

package/src/js/controllers/sidebar_controller.js

@@ -1,3 +1,30 @@
 import { Controller } from "@hotwired/stimulus";
 
-export default class extends Controller {}
+// Persists across controller reconnects so the value saved on
+// turbo:before-render is still available on turbo:render, even though
+// the <aside> hosting this controller is replaced during navigation.
+let savedScrollTop = 0;
+
+export default class extends Controller {
+  static targets = ["scroll"];
+
+  connect() {
+    this.beforeRender = this.beforeRender.bind(this);
+    this.afterRender = this.afterRender.bind(this);
+    document.addEventListener("turbo:before-render", this.beforeRender);
+    document.addEventListener("turbo:render", this.afterRender);
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-render", this.beforeRender);
+    document.removeEventListener("turbo:render", this.afterRender);
+  }
+
+  beforeRender() {
+    if (this.hasScrollTarget) savedScrollTop = this.scrollTarget.scrollTop;
+  }
+
+  afterRender() {
+    if (this.hasScrollTarget) this.scrollTarget.scrollTop = savedScrollTop;
+  }
+}