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,22 @@
  **/
 @layer base {
     :root {
-        --chili-red: #e83a21ff;
-        --pearl: #e3dabeff;
-        --black: #070302ff;
-        --dun: #deb587;
-        --blood-red: #5b1208ff;
+        --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: #f3efe3;
-        --linen: #faf1e6;
+        --white-alabaster: hsla(40, 20%, 95%, 1); /* #f3efe3 */
+        --linen: hsla(40, 30%, 97%, 1); /* #faf1e6 */
 
-        --aerospace-orange: #fd4f00;
-        --coral-orange: #ff8349;
-        --atomic-tangerine: #ff9b6d;
+        --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: #922e00;
-        --sienna: #7f2800;
-        --rust: #ae3700;
+        --brown: hsla(15, 80%, 30%, 1); /* #922e00 */
+        --sienna: hsla(10, 80%, 25%, 1); /* #7f2800 */
+        --rust: hsla(0, 85%, 40%, 1); /* #ae3700 */
 
         --color-brand: var(--aerospace-orange);
         --color-brand-light: var(--atomic-tangerine);
@@ -162,3 +162,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/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/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,6 +50,8 @@ module.exports = {
         xs: "0.65rem",
       },
       colors: {
+        // ...colors,
+        aerospaceOrange: "hsla(30, 100%, 50%, 1)",
         primary: "var(--color-primary)",
         primaryAccent: "var(--color-primary-accent)",
         secondary: "var(--color-secondary)",

lib/utils/formatters/time.ex

@@ -11,7 +11,9 @@ defmodule Utils.Formatters.Time do
       %Utils.Formatters.TimeDisplay{formatted_time: "just now", original_datetime: datetime}
   """
 
-  def friendly(datetime) when is_struct(datetime, NaiveDateTime), do: friendly(DateTime.from_naive!(datetime, "Etc/UTC"))
+  def friendly(datetime) when is_struct(datetime, NaiveDateTime),
+    do: friendly(DateTime.from_naive!(datetime, "Etc/UTC"))
+
   def friendly(datetime) when is_struct(datetime, DateTime) do
     now = DateTime.utc_now()
 
@@ -21,9 +23,9 @@ defmodule Utils.Formatters.Time do
     formatted_time =
       cond do
         seconds_diff < 60 -> "just now"
-        seconds_diff < 3600 -> "#{div(seconds_diff, 60)} minutes ago"
-        seconds_diff < 86400 -> "#{div(seconds_diff, 3600)} hours ago"
-        true -> "#{div(seconds_diff, 86400)} days ago"
+        seconds_diff < 3600 -> "#{div(seconds_diff, 60)}m ago"
+        seconds_diff < 86400 -> "#{div(seconds_diff, 3600)}h ago"
+        true -> "#{div(seconds_diff, 86400)}d ago"
       end
 
     %TimeDisplay{formatted_time: formatted_time, original_datetime: datetime}