Use SheafDisplay fr composed sheaf view in discuss

assets/colors.js

@@ -0,0 +1,43 @@
+/*
+ * Convenience js module that defines the site-wide colours
+ */
+
+// Define individual HSLA colors as constants
+const chiliRed = "hsla(5, 100%, 55%, 1)"; // #e83a21
+const pearl = "hsla(39, 40%, 90%, 1)"; // #e3dabe
+const black = "hsla(0, 0%, 3%, 1)"; // #070302
+const dun = "hsla(39, 20%, 80%, 1)"; // #deb587
+const bloodRed = "hsla(0, 100%, 20%, 1)"; // #5b1208
+
+const whiteAlabaster = "hsla(40, 20%, 95%, 1)"; // #f3efe3
+const linen = "hsla(40, 30%, 97%, 1)"; // #faf1e6
+
+const aerospaceOrange = "hsla(30, 100%, 50%, 1)"; // #fd4f00
+const coralOrange = "hsla(15, 100%, 60%, 1)"; // #ff8349
+const atomicTangerine = "hsla(15, 100%, 70%, 1)"; // #ff9b6d
+
+const brown = "hsla(15, 80%, 30%, 1)"; // #922e00
+const sienna = "hsla(10, 80%, 25%, 1)"; // #7f2800
+const rust = "hsla(0, 85%, 40%, 1)"; // #ae3700
+
+// Define color variables using the constants without the 'color' prefix
+const colors = {
+  aerospaceOrange: "hsla(30, 100%, 50%, 1)",
+  brand: aerospaceOrange,
+  brandLight: atomicTangerine,
+  brandExtraLight: linen,
+  brandAccent: aerospaceOrange,
+  brandAccentLight: atomicTangerine,
+
+  brandDark: brown,
+  brandExtraDark: sienna,
+
+  primary: chiliRed,
+  primaryAccent: chiliRed,
+  primaryBackground: whiteAlabaster,
+  secondary: bloodRed,
+  secondaryBackground: dun,
+  text: black,
+};
+
+export default colors;

assets/css/app.css

@@ -13,22 +13,21 @@
  **/
 @layer base {
     :root {
-        --chili-red: #e83a21ff;
-        --pearl: #e3dabeff;
-        --black: #070302ff;
-        --dun: #deb587;
-        --blood-red: #5b1208ff;
-
-        --white-alabaster: #f3efe3;
-        --linen: #faf1e6;
-        --deep-saffron: #ff9933;
-        --coral-orange: #FF8349;
-        --atomic-tangerine: #FF9B6D;
-
-
-        --brown: #922e00;
-        --sienna: #7f2800;
-        --rust: #ae3700;
+        --chili-red: hsla(5, 100%, 55%, 1); /* #e83a21 */
+        --pearl: hsla(39, 40%, 90%, 1); /* #e3dabe */
+        --black: hsla(0, 0%, 3%, 1); /* #070302 */
+        --dun: hsla(39, 20%, 80%, 1); /* #deb587 */
+        --blood-red: hsla(0, 100%, 20%, 1); /* #5b1208 */
+
+        --white-alabaster: hsla(40, 20%, 95%, 1); /* #f3efe3 */
+        --linen: hsla(40, 30%, 97%, 1); /* #faf1e6 */
+        --deep-saffron: hsla(30, 100%, 60%, 1); /* #ff9933 */
+        --aerospace-orange: hsla(30, 100%, 50%, 1); /* #fd4f00 */
+        --coral-orange: hsla(15, 100%, 60%, 1); /* #ff8349 */
+        --atomic-tangerine: hsla(15, 100%, 70%, 1); /* #ff9b6d */
+        --brown: hsla(15, 80%, 30%, 1); /* #922e00 */
+        --sienna: hsla(10, 80%, 25%, 1); /* #7f2800 */
+        --rust: hsla(0, 85%, 40%, 1); /* #ae3700 */
 
         --color-brand: var(--deep-saffron);
         --color-brand-light: var(--atomic-tangerine);
@@ -162,3 +161,14 @@
     vertical-align: baseline;
     position: relative;
 }
+textarea {
+    /* Remove default outline on focus */
+    outline: none;
+    border: none; /* Ensure no default border */
+}
+
+textarea:focus {
+    /* Change border color on focus */
+    border-color: #ff6347; /* Change this to your desired focus color */
+    box-shadow: 0 0 5px rgba(255, 99, 71, 0.5); /* Optional shadow effect */
+}

assets/js/app.js

@@ -41,17 +41,17 @@ let liveSocket = new LiveSocket("/live", Socket, {
 
 function fetchSession() {
   try {
-    sess = JSON.parse(localStorage.getItem("session"))
-    if(sess && sess.id && typeof sess.id == 'string' ) return sess
-    new_sess = {id: genAnonId()}
-    localStorage.setItem("session", JSON.stringify(new_sess))
-    return  new_sess;
+    sess = JSON.parse(localStorage.getItem("session"));
+    if (sess && sess.id && typeof sess.id == "string") return sess;
+    new_sess = { id: genAnonId() };
+    localStorage.setItem("session", JSON.stringify(new_sess));
+    return new_sess;
   } catch (error) {
-    new_sess = {id: genAnonId()}
-    localStorage.setItem("session", JSON.stringify(new_sess))
-    return new_sess
+    new_sess = { id: genAnonId() };
+    localStorage.setItem("session", JSON.stringify(new_sess));
+    return new_sess;
   }
-};
+}
 
 function genAnonId(length = 18) {
   try {
@@ -67,13 +67,121 @@ function genAnonId(length = 18) {
 
     return base64String;
   } catch (error) {
-    console.error('Error generating random Base64 string:', error);
+    console.error("Error generating random Base64 string:", error);
     throw error;
   }
 }
 
+let Focus = {
+  focusMain() {
+    let target =
+      document.querySelector("main h1") || document.querySelector("main");
+    if (target) {
+      let origTabIndex = target.tabIndex;
+      target.tabIndex = -1;
+      target.focus();
+      target.tabIndex = origTabIndex;
+    }
+  },
+  // Subject to the W3C Software License at https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+  isFocusable(el) {
+    if (
+      el.tabIndex > 0 ||
+      (el.tabIndex === 0 && el.getAttribute("tabIndex") !== null)
+    ) {
+      return true;
+    }
+    if (el.disabled) {
+      return false;
+    }
+
+    switch (el.nodeName) {
+      case "A":
+        return !!el.href && el.rel !== "ignore";
+      case "INPUT":
+        return el.type != "hidden" && el.type !== "file";
+      case "BUTTON":
+      case "SELECT":
+      case "TEXTAREA":
+        return true;
+      default:
+        return false;
+    }
+  },
+  // Subject to the W3C Software License at https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+  attemptFocus(el) {
+    if (!el) {
+      return;
+    }
+    if (!this.isFocusable(el)) {
+      return false;
+    }
+    try {
+      el.focus();
+    } catch (e) {}
+
+    return document.activeElement === el;
+  },
+  // Subject to the W3C Software License at https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+  focusFirstDescendant(el) {
+    for (let i = 0; i < el.childNodes.length; i++) {
+      let child = el.childNodes[i];
+      if (this.attemptFocus(child) || this.focusFirstDescendant(child)) {
+        return true;
+      }
+    }
+    return false;
+  },
+  // Subject to the W3C Software License at https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+  focusLastDescendant(element) {
+    for (let i = element.childNodes.length - 1; i >= 0; i--) {
+      let child = element.childNodes[i];
+      if (this.attemptFocus(child) || this.focusLastDescendant(child)) {
+        return true;
+      }
+    }
+    return false;
+  },
+};
 
+// Acessible routing -- effecting frontend changes from server-side events:
+// refs:
+// 1. fly.io blog post: https://fly.io/phoenix-files/server-triggered-js/
+// 2. livebeats as an example: https://github.com/fly-apps/live_beats/blob/ac9780472e7019af274110a1cf71250a8d40c986/assets/js/app.js#L307
+window.addEventListener("phx:js:exec", (e) => {
+  liveSocket.execJS(liveSocket.main.el, e.detail.cmd);
+});
 
+window.addEventListener("js:call", (e) =>
+  e.target[e.detail.call](...e.detail.args),
+);
+window.addEventListener("js:focus", (e) => {
+  let parent = document.querySelector(e.detail.parent);
+  if (parent && isVisible(parent)) {
+    e.target.focus();
+  }
+});
+window.addEventListener("js:focus-closest", (e) => {
+  let el = e.target;
+  let sibling = el.nextElementSibling;
+  while (sibling) {
+    if (isVisible(sibling) && Focus.attemptFocus(sibling)) {
+      return;
+    }
+    sibling = sibling.nextElementSibling;
+  }
+  sibling = el.previousElementSibling;
+  while (sibling) {
+    if (isVisible(sibling) && Focus.attemptFocus(sibling)) {
+      return;
+    }
+    sibling = sibling.previousElementSibling;
+  }
+  Focus.attemptFocus(el.parent) || Focus.focusMain();
+});
+window.addEventListener("phx:remove-el", (e) =>
+  document.getElementById(e.detail.id).remove(),
+);
 
 // Show progress bar on live navigation and form submits
 topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });

assets/js/hooks/index.js

@@ -13,6 +13,7 @@ import Scrolling from "./scrolling.js";
 import ButtonClickRelayer from "./button_click_relayer.js";
 import SessionBox from "./session_box.js";
 import TextareaAutoResize from "./textarea_auto_resize.js";
+import TextareaFocus from "./textarea_focus.js";
 import PseudoForm from "./pseudo_form.js";
 
 let Hooks = {
@@ -29,6 +30,7 @@ let Hooks = {
   ButtonClickRelayer,
   SessionBox,
   TextareaAutoResize,
+  TextareaFocus,
   PseudoForm,
 };
 

assets/js/hooks/textarea_auto_resize.js

@@ -3,12 +3,75 @@
  * textarea height (bound by max height, if already defined).
  * */
 
+const targetEvents = ["input", "focus", "click"];
+
 export default TextareaAutoResize = {
   mounted() {
+    console.log("!!! mounted TextareaAutoResize");
     this.handleInput();
+
+    // Bind handleInput to maintain context
+    this.handleInputBound = this.handleInput.bind(this);
+
+    // Add event listeners correctly
+    targetEvents.forEach((e) =>
+      this.el.addEventListener(e, this.handleInputBound),
+    );
+
+    // watches for visibility changes:
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const isTextAreaVisibleInViewport = entry.isIntersecting;
+        if (isTextAreaVisibleInViewport) {
+          this.handleInput(); // Call handleInput when textarea becomes visible
+        }
+      });
+    });
+
+    // watches for mutations on the element
+    this.mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const isDisabledAttrMutated =
+          mutation.type === "attributes" &&
+          mutation.attributeName === "disabled";
+        if (isDisabledAttrMutated) {
+          this.handleInput();
+        }
+      });
+    });
+
+    // Start observing:
+    this.observer.observe(this.el);
+    this.mutationObserver.observe(this.el, { attributes: true });
   },
+
+  destroyed() {
+    console.log("!!! destroyed TextareaAutoResize");
+
+    // Prevent memory leaks by removing event listeners
+    targetEvents.forEach((e) =>
+      this.el.removeEventListener(e, this.handleInputBound),
+    );
+
+    // Disconnect observers:
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  },
+
+  /**
+   * Adjusts the height of the textarea on input.
+   */
   handleInput() {
-    this.el.style.height = "auto"; // Resets height to auto to shrink if needed
-    this.el.style.height = `${this.el.scrollHeight}px`; // Sets height based on scrollHeight
+    this.el.style.height = "auto"; // Reset height
+    this.el.style.height = `${this.el.scrollHeight}px`; // Set height based on scrollHeight
+    console.log("!!! Handling input", {
+      elem: this.el,
+      pxScrollHeight: this.el.scrollHeight,
+    });
   },
 };

assets/js/hooks/textarea_focus.js

@@ -0,0 +1,9 @@
+/**
+ * Autofocuses on the textarea that the hook is applied to.
+ * Just a client-side shortcut.
+ * */
+export default TextareaFocus = {
+  mounted() {
+    this.el.focus();
+  },
+};

assets/tailwind.config.js

@@ -4,6 +4,7 @@
 const plugin = require("tailwindcss/plugin");
 const fs = require("fs");
 const path = require("path");
+// const colors = require("./colors"); // QQ: @ks0m1c_dharma any idea why if i uncomment this, the tailwind plugin config gets broken?
 
 module.exports = {
   content: [
@@ -49,19 +50,23 @@ module.exports = {
         xs: "0.65rem",
       },
       colors: {
+        aerospaceOrange: "hsla(30, 100%, 50%, 1)",
         primary: "var(--color-primary)",
         ink: "#1E1024",
         primaryAccent: "var(--color-primary-accent)",
         secondary: "var(--color-secondary)",
         primaryBackground: "var(--color-primary-background)",
-        secondary: "var(--color-secondary)",
+        secondaryBackground: "var(--color-secondary-background)",
         brand: "var(--color-brand)",
         brandLight: "var(--color-brand-light)",
         brandExtraLight: "var(--color-brand-extra-light)",
         brandAccent: "var(--color-brand-accent)",
         brandAccentLight: "var(--color-brand-accent-light)",
         brandDark: "var(--color-brand-dark)",
         brandExtraDark: "var(--color-brand-extra-dark)",
+        // Additional colors from your palette
+        dun: "var(--dun)",
+        bloodRed: "var(--blood-red)",
       },
     },
   },