[codex] Reset frontend shell

assets/js/app.js

@@ -1,102 +1,48 @@
-import "vite/modulepreload-polyfill";
-// If you want to use Phoenix channels, run `mix help phx.gen.channel`
-// to get started and then uncomment the line below.
-// import "./user_socket.js"
-// You can include dependencies in two ways.
-//
-// The simplest option is to put them in assets/vendor and
-// import them using relative paths:
-//
-//     import "../vendor/some-package.js"
-//
-// Alternatively, you can `npm install some-package --prefix assets` and import
-// them using a path starting with the package name:
-//
-//     import "some-package"
-//
-// If you have dependencies that try to import CSS, esbuild will generate a separate `app.css` file.
-// To load it, simply add a second `<link>` to your `root.html.heex` file.
-// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html";
-// Establish Phoenix Socket and LiveView configuration.
-import { Socket } from "phoenix";
-import { LiveSocket } from "phoenix_live_view";
-import { getHooks } from "live_vue";
-import liveVueApp from "../vue";
-import topbar from "topbar";
-import { createLiveToastHook } from "../../deps/live_toast/priv/static/live_toast.esm.js";
-
-const csrfToken = document
-  .querySelector("meta[name='csrf-token']")
-  .getAttribute("content");
+import "vite/modulepreload-polyfill"
+import "phoenix_html"
+import {Socket} from "phoenix"
+import {LiveSocket} from "phoenix_live_view"
+import {getHooks} from "live_vue"
+import liveVueApp from "../vue"
+import {hooks as colocatedHooks} from "phoenix-colocated/jido_code"
+import SaladUI from "salad_ui"
+import "salad_ui/components/dialog"
+import "salad_ui/components/tabs"
+import topbar from "topbar"
 
+const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
-  params: {
-    _csrf_token: csrfToken,
-  },
-  hooks: {
-    LiveToast: createLiveToastHook(),
-    ...getHooks(liveVueApp),
-  },
-});
+  params: {_csrf_token: csrfToken},
+  hooks: {...colocatedHooks, ...getHooks(liveVueApp), SaladUI: SaladUI.SaladUIHook},
+})
 
-// Show progress bar on live navigation and form submits
-topbar.config({
-  barColors: {
-    0: "#29d",
-  },
-  shadowColor: "rgba(0, 0, 0, .3)",
-});
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
+window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
 
-window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
-window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
+liveSocket.connect()
+window.liveSocket = liveSocket
 
-// connect if there are any LiveViews on the page
-liveSocket.connect();
+if (process.env.NODE_ENV === "development") {
+  window.addEventListener("phx:live_reload:attached", ({detail: reloader}) => {
+    reloader.enableServerLogs()
 
-// expose liveSocket on window for web console debug logs and latency simulation:
-// >> liveSocket.enableDebug()
-// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
-// >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket;
+    let keyDown
+    window.addEventListener("keydown", e => keyDown = e.key)
+    window.addEventListener("keyup", () => 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)
 
-// 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;
-    },
-  );
+    window.liveReloader = reloader
+  })
 }

assets/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "types": ["vite/client"]
+  },
+  "include": ["js/**/*", "vue/**/*", "vue/**/*.vue", "vue/env.d.ts"]
+}