toggle collapse and store states in browser storage

assets/js/hooks/index.ts

@@ -5,9 +5,19 @@ export const Hooks = {
   outline: {
     selector: '.node:not([data-processed="true"]',
     mounted() {
+      this.el.addEventListener("toggle_collapse", ({ detail }) => {
+        const item = getItemById(detail.uuid);
+        item!.toggleAttribute("data-collapsed");
+        const collapsedStatus = localStorage.getItem(this.el.id) || "{}";
+        const collapsed = JSON.parse(collapsedStatus);
+        collapsed[detail.uuid] = !collapsed[detail.uuid];
+        localStorage.setItem(this.el.id, JSON.stringify(collapsed));
+      });
+      const collapsedStatus = localStorage.getItem(this.el.id) || "{}";
+      const collapsed = JSON.parse(collapsedStatus);
       const nodes = this.el.querySelectorAll(this.selector);
       nodes.forEach((item: HTMLDivElement) => {
-        const { parent_id, prev_id } = getNodeByItem(item);
+        const { uuid, parent_id, prev_id } = getNodeByItem(item);
         const parentNode = getItemById(parent_id);
         const prevNode = getItemById(prev_id);
 
@@ -16,7 +26,7 @@ export const Hooks = {
         } else if (parentNode) {
           parentNode.querySelector(".children")!.append(item);
         }
-
+        item.toggleAttribute("data-collapsed", !!collapsed[uuid]);
         setAttribute(item, "processed", true);
       });
     },

lib/radiator_web/live/outline_component.ex

@@ -98,11 +98,6 @@ defmodule RadiatorWeb.OutlineComponent do
     |> reply(:noreply)
   end
 
-  def handle_event("toggle_collapse", %{"uuid" => _uuid}, socket) do
-    socket
-    |> reply(:noreply)
-  end
-
   def handle_event("keydown", %{"key" => key, "uuid" => uuid, "value" => ""}, socket)
       when key in ["Backspace", "Delete", "Meta"] do
     user_id = socket.assigns.user_id

lib/radiator_web/live/outline_component.html.heex

@@ -1,14 +1,13 @@
 <div id={@id}>
   <OutlineComponents.keyboard_shortcuts />
 
-  <div id={[@id, "-stream"]} class="my-6" phx-hook="outline" phx-update="stream">
+  <div id={[@id, "-stream-#{@episode_id}"]} class="my-6" phx-hook="outline" phx-update="stream">
     <div
       :for={{id, form} <- @streams.nodes}
       id={id}
       class="relative group node"
       data-parent={form.data.parent_id}
       data-prev={form.data.prev_id}
-      data-collapsed={false}
     >
       <OutlineComponents.outline_form
         for={form}
@@ -35,9 +34,7 @@
       <div class="ml-4 peer children group-data-[collapsed]:hidden"></div>
       <button
         class="absolute peer-empty:hidden top-3 left-0 group-data-[collapsed]:-rotate-90 duration-200 z-10"
-        phx-click="toggle_collapse"
-        phx-value-uuid={form.data.uuid}
-        phx-target={@myself}
+        phx-click={JS.dispatch("toggle_collapse", detail: %{uuid: form.data.uuid})}
       >
         <svg width="20" height="20" viewBox="0 0 20 20" class="text-gray-500 rotate-90">
           <path