add page to manipulate playback queue

assets/css/app.scss

@@ -1,4 +1,11 @@
 /* This file is for your main application css. */
+
+@import "tailwindcss/base";
+
+@import "tailwindcss/components";
+
+@import "tailwindcss/utilities";
+
 @import "./phoenix.css";
 
 $gold: rgb(182, 140, 47);

assets/js/app.js

@@ -13,3 +13,27 @@ import "../css/app.scss"
 //     import socket from "./socket"
 //
 import "phoenix_html"
+import { Socket } from "phoenix"
+import NProgress from "nprogress"
+import { LiveSocket } from "phoenix_live_view"
+import 'alpinejs'
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken } })
+
+// Show progress bar on live navigation and form submits
+window.addEventListener("phx:page-loading-start", info => NProgress.start())
+window.addEventListener("phx:page-loading-stop", info => NProgress.done())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)
+window.liveSocket = liveSocket
+
+// document.getElementById("play-it").addEventListener("click", (e) => {
+//     e.preventDefault();
+//     console.log('adjisda');
+// })