Update app.js to match Phoenix 1.8 generated version

assets/js/app.js

@@ -31,10 +31,10 @@ let Hooks = FluxonHooks;
 Hooks.BarcodeScanner = BarcodeScannerHook;
 Hooks.LiveToast = createLiveToastHook();
 
-let csrfToken = document
+const csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");
-let liveSocket = new LiveSocket("/live", Socket, {
+const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
   hooks: { ...Hooks, ...colocatedHooks },
@@ -79,6 +79,41 @@ liveSocket.connect();
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket;
 
+// The lines below enable quality of life phoenix_live_reload
+// development features:
+//
+//     1. stream server logs to the browser console
+//     2. click on elements to jump to their definitions in your code editor
+//
+if (process.env.NODE_ENV === "development") {
+  window.addEventListener("phx:live_reload:attached", ({ detail: reloader }) => {
+    // Enable server log streaming to client.
+    // Disable with reloader.disableServerLogs()
+    reloader.enableServerLogs()
+
+    // Open configured PLUG_EDITOR at file:line of the clicked element's HEEx component
+    //
+    //   * click with "c" key pressed to open at caller location
+    //   * click with "d" key pressed to open at function component definition location
+    let keyDown
+    window.addEventListener("keydown", e => keyDown = e.key)
+    window.addEventListener("keyup", e => keyDown = null)
+    window.addEventListener("click", e => {
+      if (keyDown === "c") {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        reloader.openEditorAtCaller(e.target)
+      } else if (keyDown === "d") {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        reloader.openEditorAtDef(e.target)
+      }
+    }, true)
+
+    window.liveReloader = reloader
+  })
+}
+
 // Credit: https://andrewtimberlake.com/blog/2025/03/see-what-liveview-changes-are-being-made
 window.enableLiveViewChangeObserver = () => {
   // Mutation observer to highlight changed elements