Add presenter notes feature

assets/css/app.css

@@ -1,5 +1,19 @@
 @import 'air-datepicker/air-datepicker.css';
 @import 'animate.css/animate.min.css';
+@import 'quill/dist/quill.snow.css';
+
+/* Presenter notes – make the Quill container fill its flex/grid pane */
+#presenter-notes-editor .ql-toolbar {
+  flex-shrink: 0;
+  border-left: none;
+  border-right: none;
+}
+#presenter-notes-editor .ql-container {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  font-size: 0.875rem;
+}
 
 @import 'tailwindcss';
 @import './theme.css' layer(theme);

assets/js/app.js

@@ -1,5 +1,6 @@
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
 import "phoenix_html";
+import PresenterNotes from "./presenter_notes";
 // Establish Phoenix Socket and LiveView configuration.
 import { Socket, Presence } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
@@ -568,17 +569,24 @@ Hooks.QRCode = {
         "/e/" +
         this.el.dataset.code
       : window.location.href;
-    this.el.style.width = document.documentElement.clientWidth * 0.27 + "px";
-    this.el.style.height = document.documentElement.clientWidth * 0.27 + "px";
+
+    var qrSize;
+    if (this.el.dataset.panel) {
+      // Top banner mode: fixed small QR code
+      qrSize = 80;
+    } else if (this.el.dataset.dynamic) {
+      qrSize = document.documentElement.clientWidth * 0.25;
+    } else {
+      qrSize = 240;
+    }
+
+    this.el.style.width = (qrSize * 1.08) + "px";
+    this.el.style.height = (qrSize * 1.08) + "px";
 
     if (this.qrCode == null) {
       this.qrCode = new QRCodeStyling({
-        width: this.el.dataset.dynamic
-          ? document.documentElement.clientWidth * 0.25
-          : 240,
-        height: this.el.dataset.dynamic
-          ? document.documentElement.clientWidth * 0.25
-          : 240,
+        width: qrSize,
+        height: qrSize,
         margin: 0,
         data: url,
         cornersSquareOptions: {
@@ -600,12 +608,8 @@ Hooks.QRCode = {
       this.qrCode.append(this.el);
     } else {
       this.qrCode.update({
-        width: this.el.dataset.dynamic
-          ? document.documentElement.clientWidth * 0.25
-          : 240,
-        height: this.el.dataset.dynamic
-          ? document.documentElement.clientWidth * 0.25
-          : 240,
+        width: qrSize,
+        height: qrSize,
       });
     }
   },
@@ -682,6 +686,103 @@ Hooks.CSVDownloader = {
   }
 };
 
+Hooks.PresenterNotes = PresenterNotes;
+
+Hooks.SortableSlides = {
+  beforeUpdate() {
+    // Preserve scroll position before LiveView patches the DOM
+    this._scrollLeft = this.el.scrollLeft;
+  },
+  updated() {
+    // Restore scroll position after LiveView patches the DOM
+    if (this._scrollLeft !== undefined) {
+      this.el.scrollLeft = this._scrollLeft;
+    }
+    // Re-bind drag events
+    this.mounted();
+  },
+  mounted() {
+    this.dragSrcIdx = null;
+    const container = this.el;
+
+    container.ondragstart = (e) => {
+      const item = e.target.closest("[data-slide-index]");
+      if (!item) return;
+      this.dragSrcIdx = parseInt(item.dataset.slideIndex);
+      item.style.opacity = "0.3";
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", item.dataset.slideIndex);
+    };
+
+    container.ondragover = (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      // Highlight drop target
+      const target = e.target.closest("[data-slide-index]");
+      container.querySelectorAll("[data-slide-index]").forEach(el => {
+        el.style.borderLeft = "";
+        el.style.borderRight = "";
+      });
+      if (target && parseInt(target.dataset.slideIndex) !== this.dragSrcIdx) {
+        const items = Array.from(container.querySelectorAll("[data-slide-index]"));
+        const srcPos = items.findIndex(el => parseInt(el.dataset.slideIndex) === this.dragSrcIdx);
+        const tgtPos = items.indexOf(target);
+        if (tgtPos > srcPos) {
+          target.style.borderRight = "3px solid #7c3aed";
+        } else {
+          target.style.borderLeft = "3px solid #7c3aed";
+        }
+      }
+    };
+
+    container.ondragleave = (e) => {
+      const target = e.target.closest("[data-slide-index]");
+      if (target) {
+        target.style.borderLeft = "";
+        target.style.borderRight = "";
+      }
+    };
+
+    container.ondragend = (e) => {
+      // Clear all visual indicators
+      container.querySelectorAll("[data-slide-index]").forEach(el => {
+        el.style.opacity = "";
+        el.style.borderLeft = "";
+        el.style.borderRight = "";
+      });
+      this.dragSrcIdx = null;
+    };
+
+    container.ondrop = (e) => {
+      e.preventDefault();
+      const target = e.target.closest("[data-slide-index]");
+      if (!target || this.dragSrcIdx === null) return;
+      const targetIdx = parseInt(target.dataset.slideIndex);
+      if (targetIdx === this.dragSrcIdx) return;
+
+      // Build new order: take current order, move dragSrc to target position
+      const items = Array.from(container.querySelectorAll("[data-slide-index]"));
+      const currentOrder = items.map(el => parseInt(el.dataset.slideIndex));
+      const fromPos = currentOrder.indexOf(this.dragSrcIdx);
+      const toPos = currentOrder.indexOf(targetIdx);
+
+      // Remove from old position, insert at new position
+      currentOrder.splice(fromPos, 1);
+      currentOrder.splice(toPos, 0, this.dragSrcIdx);
+
+      // Clear visuals
+      container.querySelectorAll("[data-slide-index]").forEach(el => {
+        el.style.opacity = "";
+        el.style.borderLeft = "";
+        el.style.borderRight = "";
+      });
+
+      this.dragSrcIdx = null;
+      this.pushEvent("reorder-slides", { order: currentOrder });
+    };
+  }
+};
+
 // Merge our custom hooks with the existing hooks
 Object.assign(Hooks, CustomHooks);
 

assets/js/manager.js

@@ -17,10 +17,11 @@ export class Manager {
         setTimeout(
           () => {
             const slidesLayout = document.getElementById("slides-layout");
+            if (!slidesLayout) return;
             const layoutWidth = slidesLayout.clientWidth;
-            const elementWidth = el.children[0].scrollWidth;
+            const elementWidth = el.offsetWidth;
             const scrollPosition =
-              el.children[0].offsetLeft - layoutWidth / 2 + elementWidth / 2;
+              el.offsetLeft - layoutWidth / 2 + elementWidth / 2;
 
             slidesLayout.scrollTo({
               left: scrollPosition,
@@ -32,18 +33,23 @@ export class Manager {
     });
 
     window.addEventListener("keydown", (e) => {
-      if ((e.target.tagName || "").toLowerCase() != "input") {
-
-        switch (e.key) {
-          case "ArrowLeft":
-            e.preventDefault();
-            this.prevPage();
-            break;
-          case "ArrowRight":
-            e.preventDefault();
-            this.nextPage();
-            break;
-        }
+      const tag = (e.target.tagName || "").toLowerCase();
+      // Don't navigate slides when focus is in an input, textarea,
+      // contenteditable element (e.g. Quill presenter notes), or select.
+      if (tag === "input" || tag === "textarea" || tag === "select" ||
+          e.target.isContentEditable || (e.target.closest && e.target.closest(".ql-editor"))) {
+        return;
+      }
+
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          this.prevPage();
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          this.nextPage();
+          break;
       }
     });
 
@@ -140,22 +146,29 @@ export class Manager {
   }
 
   update() {
+    const prevPage = this.currentPage;
     this.currentPage = parseInt(this.context.el.dataset.currentPage);
-    var el = document.getElementById("slide-preview-" + this.currentPage);
-
-    if (el) {
-      setTimeout(() => {
-        const slidesLayout = document.getElementById("slides-layout");
-        const layoutWidth = slidesLayout.clientWidth;
-        const elementWidth = el.children[0].scrollWidth;
-        const scrollPosition =
-          el.children[0].offsetLeft - layoutWidth / 2 + elementWidth / 2;
-
-        slidesLayout.scrollTo({
-          left: scrollPosition,
-          behavior: "smooth",
-        });
-      }, 50);
+
+    // Only scroll thumbnails when the slide actually changed,
+    // not on every LiveView re-render (e.g. opening a modal).
+    if (this.currentPage !== prevPage) {
+      var el = document.getElementById("slide-preview-" + this.currentPage);
+
+      if (el) {
+        setTimeout(() => {
+          const slidesLayout = document.getElementById("slides-layout");
+          if (!slidesLayout) return;
+          const layoutWidth = slidesLayout.clientWidth;
+          const elementWidth = el.offsetWidth;
+          const scrollPosition =
+            el.offsetLeft - layoutWidth / 2 + elementWidth / 2;
+
+          slidesLayout.scrollTo({
+            left: scrollPosition,
+            behavior: "smooth",
+          });
+        }, 50);
+      }
     }
 
     this.initPreview();