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)",
       },
     },
   },

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}

lib/vyasa/sangh.ex

@@ -488,12 +488,10 @@ defmodule Vyasa.Sangh do
     reply |> update_sheaf(reconciled_attrs)
   end
 
-  # way number 3 -- no assoced parent, nothing to reconcile
+  # way number 3 -- no assoced parent (i.e. will be root sheaf), nothing to reconcile
   def make_reply(
-        %Sheaf{
-          parent: nil
-        } = reply,
-        attrs
+        %Sheaf{} = reply,
+        %{parent: nil} = attrs
       ) do
     IO.puts("CHECKPOINT Make Reply way 3 -- no parent to associate to")
     reply |> update_sheaf(attrs)

lib/vyasa/sangh/sheaf_lattice.ex

@@ -190,6 +190,20 @@ defmodule Vyasa.Sangh.SheafLattice do
     end
   end
 
+  def set_show_sheaf_modal?(%{} = ui_lattice, lattice_key, value \\ true)
+      when is_list(lattice_key) do
+    sheaf_ui = ui_lattice |> Map.get(lattice_key, nil)
+
+    case sheaf_ui do
+      ui when not is_nil(ui) ->
+        updated_sheaf_ui = ui |> SheafUiState.set_show_sheaf_modal?(value)
+        ui_lattice |> Map.put(lattice_key, updated_sheaf_ui)
+
+      _ ->
+        ui_lattice
+    end
+  end
+
   def toggle_sheaf_is_focused?(
         %{} = ui_lattice,
         lattice_key

lib/vyasa_web/components/contexts/discuss.ex

@@ -33,6 +33,7 @@ defmodule VyasaWeb.Context.Discuss do
       :ok,
       socket
       |> assign(id: id)
+      |> assign(url_params: url_params)
       |> assign(session: session)
       |> assign(user_mode: user_mode)
       # TODO remove TEMP once doing the url_params:
@@ -667,6 +668,22 @@ defmodule VyasaWeb.Context.Discuss do
     }
   end
 
+  def handle_event(
+        "sheaf::clear_reply_to_context",
+        _,
+        %Socket{
+          assigns: %{
+            session: %{sangh: %{id: _sangh_id}},
+            draft_reflector_path: %Ltree{},
+            reply_to_path: _
+          }
+        } = socket
+      ) do
+    {:noreply,
+     socket
+     |> assign(reply_to_path: nil)}
+  end
+
   @impl true
   # TODO @ks0m1c another place that would require binding / permalinking apis
   # equivalent handler for the read mode as well...
@@ -698,8 +715,7 @@ defmodule VyasaWeb.Context.Discuss do
   def handle_event(
         "sheaf::publish",
         %{
-          "body" => body,
-          "is_private" => _is_private
+          "body" => body
         } = _params,
         %Socket{
           assigns: %{
@@ -712,17 +728,14 @@ defmodule VyasaWeb.Context.Discuss do
             draft_reflector_path: %Ltree{
               labels: draft_sheaf_lattice_key
             },
-            reply_to_path: %Ltree{
-              labels: reply_to_lattice_key
-            },
+            reply_to_path: reply_to_path,
             sheaf_lattice: %{} = sheaf_lattice,
             sheaf_ui_lattice: %{} = sheaf_ui_lattice
           }
         } = socket
       )
       when is_binary(body) do
-    # TODO: the reply_to_lattice_key might be nil, that case of "create new thread" is not handled right now by discuss
-    reply_to_sheaf = sheaf_lattice[reply_to_lattice_key]
+    reply_to_sheaf = reply_to_path && sheaf_lattice[reply_to_path.labels]
     draft_sheaf = sheaf_lattice[draft_sheaf_lattice_key]
 
     payload_precursor = %{
@@ -735,10 +748,10 @@ defmodule VyasaWeb.Context.Discuss do
     update_payload =
       case(is_nil(reply_to_sheaf)) do
         true ->
-          payload_precursor
+          payload_precursor |> Map.put(:parent, nil)
 
         false ->
-          Map.put(payload_precursor, :parent, reply_to_sheaf)
+          payload_precursor |> Map.put(:parent, reply_to_sheaf)
       end
 
     {:ok, updated_sheaf} = draft_sheaf |> Vyasa.Sangh.make_reply(update_payload)
@@ -787,6 +800,31 @@ defmodule VyasaWeb.Context.Discuss do
     {:noreply, socket}
   end
 
+  # FIXME: we need to improve how the modal show and hide is happening by calling the necessary
+  # JS-struct based functions, this is what is causing the scrolling bugs
+  def handle_event(
+        "navigate::see_discussion",
+        _,
+        %Socket{
+          assigns: %{
+            session: %{sangh: %{id: _sangh_id}},
+            draft_reflector_path: %Ltree{
+              labels: draft_sheaf_lattice_key
+            },
+            sheaf_lattice: %{} = _sheaf_lattice,
+            sheaf_ui_lattice: %{} = sheaf_ui_lattice
+          }
+        } = socket
+      ) do
+    new_lattice =
+      sheaf_ui_lattice |> SheafLattice.set_show_sheaf_modal?(draft_sheaf_lattice_key, false)
+
+    {:noreply,
+     socket
+     |> push_js_cmd(hide_modal(%JS{}, "modal-wrapper-sheaf-creator"))
+     |> assign(sheaf_ui_lattice: new_lattice)}
+  end
+
   @impl true
   def handle_event(
         "mark::editMarkContent",
@@ -876,10 +914,26 @@ defmodule VyasaWeb.Context.Discuss do
           []
       end
 
+    {reflected_sheaf, reflected_sheaf_ui} =
+      case Map.has_key?(assigns, :draft_reflector_path) do
+        true ->
+          lattice_key = assigns.draft_reflector_path.labels
+
+          {assigns.sheaf_lattice |> Map.get(lattice_key),
+           assigns.sheaf_ui_lattice |> Map.get(lattice_key)}
+
+        false ->
+          {nil, nil}
+      end
+
     assigns =
       assigns
-      |> assign(:reply_to, reply_to_sheaf)
-      |> assign(:root_sheaves, root_sheaves)
+      |> assign(%{
+        reply_to: reply_to_sheaf,
+        root_sheaves: root_sheaves,
+        reflected_sheaf: reflected_sheaf,
+        reflected_sheaf_ui: reflected_sheaf_ui
+      })
 
     ~H"""
     <div id={@id}>
@@ -888,19 +942,22 @@ defmodule VyasaWeb.Context.Discuss do
         label="Context Dump on Discussions"
         draft_reflector_path={@draft_reflector_path}
         reply_to={@reply_to}
-        reflected={@sheaf_lattice |> Map.get(@draft_reflector_path.labels)}
-        reflected_ui={@sheaf_ui_lattice |> Map.get(@draft_reflector_path.labels)}
+        reflected={@reflected_sheaf}
+        reflected_ui={@reflected_sheaf_ui}
       /> -->
-      <div id="content-display" class="mx-auto max-w-4xl pb-16">
+      <div id="content-display" class="mx-auto max-w-4xl pb-16 w-full">
         <.header class="m-8 ml-0">
           <div class="font-dn text-4xl">
             Discussions
           </div>
           <br />
           <div class="font-dn text-xl">
-            <%= Enum.count(@root_sheaves || []) %> threads with a total of <%= Enum.count(
-              Map.keys(@sheaf_lattice || %{})
-            ) %> comments
+            <% num_active_root_sheaves = Enum.count(@root_sheaves || []) %>
+            <% num_comments = Enum.count(Map.keys(@sheaf_lattice || %{})) %>
+            <%= num_active_root_sheaves %> <%= Inflex.inflect("thread", num_active_root_sheaves) %> with a total of <%= num_comments %> <%= Inflex.inflect(
+              "comment",
+              num_comments
+            ) %>
           </div>
         </.header>
         <.sheaf_creator_modal
@@ -911,12 +968,8 @@ defmodule VyasaWeb.Context.Discuss do
           id="sheaf-creator"
           session={@session}
           reply_to={@reply_to}
-          draft_sheaf={
-            @sheaf_lattice |> SheafLattice.get_sheaf_from_lattice(@draft_reflector_path.labels)
-          }
-          draft_sheaf_ui={
-            @sheaf_ui_lattice |> SheafLattice.get_sheaf_from_lattice(@draft_reflector_path.labels)
-          }
+          draft_sheaf={@reflected_sheaf}
+          draft_sheaf_ui={@reflected_sheaf_ui}
           event_target="#content-display"
         />
 
@@ -928,12 +981,8 @@ defmodule VyasaWeb.Context.Discuss do
                   not is_nil(@draft_reflector_path)
               }
               label="CHECK SHEAF CREATOR MODAL INPUTS"
-              draft_sheaf_ui={
-                @sheaf_ui_lattice |> SheafLattice.get_sheaf_from_lattice(@draft_reflector_path.labels)
-              }
-              draft_sheaf={
-                @sheaf_lattice |> SheafLattice.get_sheaf_from_lattice(@draft_reflector_path.labels)
-              }
+              draft_sheaf={@reflected_sheaf}
+              draft_sheaf_ui={@reflected_sheaf_ui}
               event_target="#content-display"
             /> -->
           </div>
@@ -956,6 +1005,22 @@ defmodule VyasaWeb.Context.Discuss do
           </div>
         <% end %>
       </div>
+      <!-- Floating Action Button -->
+      <div class="fixed bottom-20 right-4 z-50">
+        <.floating_action_button
+          :if={@reflected_sheaf_ui}
+          icon_name="hero-plus"
+          icon_class="w-6 h-6"
+          event_target="#content-display"
+          on_click={
+            case @reflected_sheaf_ui.marks_ui.show_sheaf_modal? do
+              # ignores this click event since the clickaway listener for the modal will already do the toggle:
+              true -> nil
+              false -> "ui::toggle_show_sheaf_modal?"
+            end
+          }
+        />
+      </div>
     </div>
     """
   end

lib/vyasa_web/components/contexts/discuss/sheaf_tree.ex

@@ -144,43 +144,49 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do
 
   def collapsible_sheaf_container(assigns) do
     ~H"""
-    <div
-      class={["border-l-2 border-gray-200", @container_class]}
-      id={"collapsible-sheaf-container-" <> @id}
-    >
-      <!-- <.debug_dump
-        label="collapsible sheaf container"
-        id={@id}
-        level={@level}
-        num_children={@sheafs |> Enum.count()}
-      /> -->
+    <div class={["flex", @container_class]} id={"collapsible-sheaf-container-" <> @id}>
+      <!-- Clickable Indent Guide -->
+      <div
+        class="cursor-pointer flex-shrink-0 transition-transform duration-200 ease-in-out transform hover:scale-105 focus:outline-none"
+        phx-click={@on_replies_click}
+        phx-value-sheaf_path_labels={Jason.encode!(@sheaf |> Sheaf.get_path_labels() || [])}
+        aria-label="Toggle replies"
+      >
+        <div
+          id={"clickable-indent-guide-level-" <> to_string(@level) <> "-sheaf-" <> @id}
+          class="w-6 xl:w-10 h-full border-l-2 border-dun rounded-bl-lg shadow-sm hover:border-bloodRed focus:border-bloodRed
+                 transition-colors duration-200"
+        />
+      </div>
       <!-- Non-Collapsible View -->
-      <%= if is_nil(@sheafs) or !@sheafs or Enum.empty?(@sheafs) do %>
-        <p class="text-gray-500">No child sheafs available.</p>
-      <% else %>
-        <%= for child <- @sheafs do %>
-          <.sheaf_component
-            id={"sheaf-" <> child.id}
-            events_target={@events_target}
-            reply_to={@reply_to}
-            sheaf={child}
-            sheaf_ui={SheafLattice.get_ui_from_lattice(@sheaf_ui_lattice, child)}
-            sheaf_lattice={@sheaf_lattice}
-            sheaf_ui_lattice={@sheaf_ui_lattice}
-            level={@level + 1}
-            on_replies_click={@on_replies_click}
-            on_set_reply_to={@on_set_reply_to}
-            on_quick_reply={@on_quick_reply}
-            children={
-              SheafLattice.read_published_from_sheaf_lattice(
-                @sheaf_lattice,
-                @level + 2,
-                child.path.labels ++ [nil]
-              )
-            }
-          />
+      <div class="flex-grow overflow-y-auto overflow-x-hidden w-full max-w-full">
+        <%= if is_nil(@sheafs) or !@sheafs or Enum.empty?(@sheafs) do %>
+          <p class="text-gray-500">No child sheafs available.</p>
+        <% else %>
+          <%= for child <- @sheafs do %>
+            <.sheaf_component
+              id={"sheaf-" <> child.id}
+              events_target={@events_target}
+              reply_to={@reply_to}
+              sheaf={child}
+              sheaf_ui={SheafLattice.get_ui_from_lattice(@sheaf_ui_lattice, child)}
+              sheaf_lattice={@sheaf_lattice}
+              sheaf_ui_lattice={@sheaf_ui_lattice}
+              level={@level + 1}
+              on_replies_click={@on_replies_click}
+              on_set_reply_to={@on_set_reply_to}
+              on_quick_reply={@on_quick_reply}
+              children={
+                SheafLattice.read_published_from_sheaf_lattice(
+                  @sheaf_lattice,
+                  @level + 2,
+                  child.path.labels ++ [nil]
+                )
+              }
+            />
+          <% end %>
         <% end %>
-      <% end %>
+      </div>
     </div>
     """
   end
@@ -254,7 +260,7 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do
     ~H"""
     <div
       id={"level" <> to_string(@level) <> "-sheaf-component_container-" <> @id}
-      class="flex flex-col"
+      class="flex flex-col my-2"
     >
       <!-- <.debug_dump
         id={@id}
@@ -263,8 +269,8 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do
         level={@level}
         num_children={@children |> Enum.count()}
       /> -->
-      <.sheaf_summary
-        id={"sheaf-tree-node-sheaf-summary-"<> @id}
+      <.sheaf_display
+        id={"sheaf-treenode-sheaf-display-" <> @id}
         level={@level}
         is_reply_to={@is_reply_to}
         sheaf={@sheaf}
@@ -274,24 +280,17 @@ defmodule VyasaWeb.Context.Discuss.SheafTree do
         on_replies_click={@on_replies_click}
         on_set_reply_to={@on_set_reply_to}
         on_quick_reply={@on_quick_reply}
+        events_target={@events_target}
+        marks_target={@events_target}
+        myself={@events_target}
       />
-      <!-- Display Marks if Active -->
-      <%= if @sheaf.active do %>
-        <.collapsible_marks_display
-          marks_target={@events_target}
-          sheaf={@sheaf}
-          sheaf_ui={@sheaf_ui}
-          id={"marks-" <> @sheaf.id}
-          myself={@events_target}
-        />
-      <% end %>
       <!-- Collapsible Sheaf Container -->
       <%= if @level <= 2 && @sheaf_ui.is_expanded? do %>
         <.collapsible_sheaf_container
           id={"collapsible_sheaf_container-" <> @id}
           sheaf={@sheaf}
           reply_to={@reply_to}
-          container_class={"flex flex-col overflow-scroll pl-#{to_string((@level + 1) * 5)}  ml-#{to_string((@level + 1) * 4)}"}
+          container_class="overflow-y-auto w-full max-w-screen"
           events_target={@events_target}
           sheafs={@children}
           sheaf_lattice={@sheaf_lattice}

lib/vyasa_web/components/contexts/read.ex

@@ -35,6 +35,7 @@ defmodule VyasaWeb.Context.Read do
       :ok,
       socket
       |> assign(id: id)
+      |> assign(url_params: url_params)
       |> assign(session: session)
       |> assign(user_mode: user_mode)
       |> apply_action(live_action, url_params)
@@ -804,8 +805,7 @@ defmodule VyasaWeb.Context.Read do
   def handle_event(
         "sheaf::publish",
         %{
-          "body" => body,
-          "is_private" => is_private
+          "body" => body
         } = _params,
         %Socket{
           assigns: %{
@@ -823,7 +823,7 @@ defmodule VyasaWeb.Context.Read do
           }
         } = socket
       ) do
-    IO.inspect(%{body: body, is_private: is_private},
+    IO.inspect(%{body: body},
       label: "SHEAF CREATION without parent"
     )
 
@@ -834,13 +834,17 @@ defmodule VyasaWeb.Context.Read do
       inserted_at: Utils.Time.get_utc_now()
     }
 
+    # FIXME: the socket state should be the SOT. So even if the draft sheaf has an associated parent,
+    # when my reply_to_sheaf is nil, then the parent should be set to nil if it gets published.
+    # currently this is NOT happening.
     reply_payload =
-      cond do
-        %Sheaf{} = reply_to_sheaf ->
+      case reply_to_sheaf do
+        %Sheaf{} ->
           payload_precursor |> Map.put(:parent, reply_to_sheaf)
 
-        true ->
-          payload_precursor
+        nil ->
+          # so the socket's reply_to will take priority, even if the draft sheaf may already an associated parent, this will take priority.
+          payload_precursor |> Map.put(:parent, nil)
       end
 
     draft_sheaf
@@ -854,6 +858,25 @@ defmodule VyasaWeb.Context.Read do
      |> cascade_stream_change()}
   end
 
+  def handle_event(
+        "sheaf::clear_reply_to_context",
+        _,
+        %Socket{
+          assigns: %{
+            draft_reflector: %Sheaf{} = _draft_sheaf,
+            draft_reflector_ui: %SheafUiState{
+              marks_ui: %MarksUiState{} = _ui_state
+            },
+            reply_to: _reply_to_sheaf
+          }
+        } = socket
+      ) do
+    {:noreply,
+     socket
+     |> assign(reply_to: nil)
+     |> cascade_stream_change()}
+  end
+
   @impl true
   # TODO @ks0m1c this is an example of what binding/permalinking should handle
   # we need to do a push-patch direction from this function
@@ -877,12 +900,26 @@ defmodule VyasaWeb.Context.Read do
     {:noreply, socket}
   end
 
-  @impl true
-  def handle_event("dummy_event", _params, socket) do
-    # Handle the event here (e.g., log it, update state, etc.)
-    IO.puts("Dummy event triggered")
+  # NOTE: this is a mode gate, it hides the modal then routes the user to discussions
+  def handle_event(
+        "navigate::see_discussion",
+        _,
+        %{assigns: %{url_params: %{path: curr_path}}} = socket
+      ) do
+    target_path =
+      curr_path
+      |> String.split("/")
+      |> List.replace_at(1, "discuss")
+      |> Enum.join("/")
 
-    {:noreply, socket}
+    {
+      :noreply,
+      socket
+      # technically this is not necessary since the pushpatch results in hotswap of dom state for the content-display,
+      # however, this push_js_cmd is a good proof that the push_js_cmd routine works
+      # |> push_js_cmd(hide_modal(%JS{}, "modal-wrapper-sheaf-creator"))
+      |> push_patch(to: target_path)
+    }
   end
 
   @impl true
@@ -900,7 +937,7 @@ defmodule VyasaWeb.Context.Read do
   # TODO: sheaf-crud: reply_to is currently set to the same as the active_sheaf
   def render(assigns) do
     ~H"""
-    <div id={@id} class="flex-grow" >
+    <div id={@id} class="flex-grow">
       <!-- CONTENT DISPLAY: -->
       <div id="content-display" class="mx-auto max-w-2xl">
         <%= if @content_action == :show_sources do %>

lib/vyasa_web/components/contexts/read/verse_matrix.ex

@@ -179,7 +179,7 @@ defmodule VyasaWeb.Context.Read.VerseMatrix do
         sheaf={@draft_sheaf}
         sheaf_ui={@draft_sheaf_ui}
       />
-      <.sheaf_display :for={sheaf <- @sheafs} sheaf={sheaf} />
+      <!-- <.sheaf_display :for={sheaf <- @sheafs} sheaf={sheaf} /> -->
     </div>
     """
   end

lib/vyasa_web/components/contexts/ui_state.ex

@@ -107,6 +107,16 @@ defmodule VyasaWeb.Context.Components.UiState.Marks do
     %MarksUiState{ui_state | show_sheaf_modal?: !curr}
   end
 
+  def set_show_sheaf_modal?(
+        %MarksUiState{
+          show_sheaf_modal?: _
+        } = ui_state,
+        new_val \\ true
+      )
+      when is_boolean(new_val) do
+    %MarksUiState{ui_state | show_sheaf_modal?: new_val}
+  end
+
   def toggle_is_editable(
         %MarksUiState{
           is_editable_marks?: curr
@@ -191,6 +201,18 @@ defmodule VyasaWeb.Context.Components.UiState.Sheaf do
     struct(SheafUiState, @initial)
   end
 
+  def get_mark_ui(
+        %SheafUiState{
+          marks_ui: %MarksUiState{
+            mark_id_to_ui: mark_id_to_ui
+          }
+        },
+        mark_id
+      )
+      when is_binary(mark_id) do
+    mark_id_to_ui |> Map.get(mark_id)
+  end
+
   def toggle_sheaf_is_focused?(%SheafUiState{is_focused?: curr} = ui_state) do
     %SheafUiState{ui_state | is_focused?: !curr}
   end
@@ -229,6 +251,19 @@ defmodule VyasaWeb.Context.Components.UiState.Sheaf do
     }
   end
 
+  def set_show_sheaf_modal?(
+        %SheafUiState{
+          marks_ui: ui_state
+        } = sheaf_ui_state,
+        new_val \\ true
+      )
+      when is_boolean(new_val) do
+    %SheafUiState{
+      sheaf_ui_state
+      | marks_ui: ui_state |> MarksUiState.set_show_sheaf_modal?(new_val)
+    }
+  end
+
   @doc """
   Wraps the toggle function for the sheaf ui modal
   """

lib/vyasa_web/components/control_panel.ex

@@ -27,6 +27,7 @@ defmodule VyasaWeb.ControlPanel do
       <!-- SVG Icon Button -->
       <.control_panel_mode_indicator mode={@mode} myself={@myself} session_active?={@session.name} />
       <div
+        :if={@show_control_panel?}
         id="buttonGroup"
         class={[
           "mt-2 p-3 rounded-2xl backdrop-blur-lg bg-white/10 shadow-lg transition-all duration-300 border border-white/20",

lib/vyasa_web/components/core_components.ex

@@ -222,7 +222,9 @@ defmodule VyasaWeb.CoreComponents do
   attr(:close_button_class, :string, default: "")
   attr(:close_button_icon_class, :string, default: "")
   attr(:focus_container_class, :string, default: "")
+  attr(:message_box_class, :string, default: "", doc: "Inline style for the message box")
 
+  slot(:message_box, required: false)
   slot(:inner_block, required: true)
 
   @doc """
@@ -250,12 +252,12 @@ defmodule VyasaWeb.CoreComponents do
       :if={@show}
       id={@id}
       phx-mounted={@show && @on_mount_callback && show_modal(@id)}
-      class={["relative z-50 hidden w-full mx-auto", @container_class]}
+      class={["relative z-50 w-full mx-auto overflow-scroll", @container_class]}
     >
       <div
         id={"#{@id}-bg"}
         class={[
-          "fixed inset-0 backdrop-blur-md",
+          "fixed inset-0 backdrop-blur-md transition-opacity duration-300 ease-in-out",
           @background_class
         ]}
         aria-hidden="true"
@@ -267,19 +269,28 @@ defmodule VyasaWeb.CoreComponents do
         tabindex="0"
         class={["fixed inset-0 flex items-center justify-center", @dialog_class]}
       >
-        <div class={["bg-white rounded-lg overflow-scroll", @focus_container_class]}>
+        <div class={[
+          "w-full bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out",
+          @focus_container_class
+        ]}>
           <.focus_wrap
             id={"#{@id}-container"}
             phx-mounted={@show && @on_mount_callback && show_modal(@id)}
             phx-window-keydown={hide_modal(@window_keydown_callback, @id)}
             phx-key={@cancel_key}
             phx-click-away={hide_modal(@on_click_away_callback, @id)}
             class={[
-              "relative flex flex-col w-full",
+              "relative flex flex-col w-full p-4",
               @focus_wrap_class
             ]}
           >
-            <div :if={@close_button_icon} class="absolute top-4 right-4">
+            <!-- Dialog Top Section -->
+            <div class="flex items-start justify-between items-center">
+              <!-- Aligns items in a row -->
+              <div class="flex-grow">
+                <%= render_slot(@message_box) %>
+                <!-- Render the message box slot -->
+              </div>
               <button
                 phx-click={hide_modal(@on_cancel_callback, @id)}
                 type="button"
@@ -292,7 +303,8 @@ defmodule VyasaWeb.CoreComponents do
                 />
               </button>
             </div>
-            <div id={"#{@id}-content"} class="w-full">
+            <!-- Inner Content -->
+            <div class="flex-grow">
               <%= render_slot(@inner_block) %>
             </div>
           </.focus_wrap>
@@ -492,6 +504,56 @@ defmodule VyasaWeb.CoreComponents do
     do:
       "inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
 
+  @doc """
+  Renders a toggle button with text and icons based on a flag.
+
+  ## Examples
+
+      <.action_toggle_button
+        on_click="toggle"
+        flag={@is_toggled}
+        true_text="Enabled"
+        false_text="Disabled"
+        true_icon_name="icon-enabled"
+        false_icon_name="icon-disabled"
+        button_class="my-custom-class"
+        icon_class="my-icon-class">
+        Additional content here
+      </.action_toggle_button>
+  """
+  attr :on_click, :string, required: true, doc: "The event handler for the button click."
+  attr :flag, :boolean, default: true, doc: "Determines which icon and text to display."
+  attr :true_text, :string, default: "", doc: "Text displayed when flag is true."
+  attr :false_text, :string, default: "", doc: "Text displayed when flag is false."
+  attr :true_icon_name, :string, default: nil, doc: "Icon name displayed when flag is true."
+  attr :false_icon_name, :string, default: nil, doc: "Icon name displayed when flag is false."
+  attr :button_class, :string, default: "", doc: "Additional classes for styling the button."
+  attr :icon_class, :string, default: "", doc: "Additional classes for styling the icon."
+  attr :text_class, :string, default: "text-sm", doc: "Class definition for text span."
+  attr :rest, :global, doc: "Additional global HTML attributes."
+
+  slot :inner_block
+
+  def action_toggle_button(assigns) do
+    ~H"""
+    <button
+      type="button"
+      phx-click={@on_click}
+      {@rest}
+      class={["flex items-center text-gray-600 hover:text-gray-800", @button_class]}
+    >
+      <%= if @flag do %>
+        <.icon :if={@true_icon_name} name={@true_icon_name} class={@icon_class} />
+        <span class={@text_class}><%= @true_text %></span>
+      <% else %>
+        <.icon :if={@false_icon_name} name={@false_icon_name} class={@icon_class} />
+        <span :if={@false_text} class={@text_class}><%= @false_text %></span>
+      <% end %>
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
   @doc """
   Renders an input with label and error messages.
 
@@ -965,6 +1027,11 @@ defmodule VyasaWeb.CoreComponents do
   end
 
   ## JS Commands
+  def push_js_cmd(socket, %JS{ops: ops}) do
+    detail = %{cmd: Phoenix.json_library().encode!(ops)}
+    IO.inspect(detail, label: "CHECKPOINT detail:")
+    Phoenix.LiveView.push_event(socket, "js:exec", detail)
+  end
 
   def show(js \\ %JS{}, selector) do
     JS.show(js,

lib/vyasa_web/components/layouts/root.html.heex

@@ -2,7 +2,7 @@
 <html lang="en" class="[scrollbar-gutter:stable]">
   <head id="root-container" phx-hook="Scrolling">
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="csrf-token" content={get_csrf_token()} />
     <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />