That's a modal

backseat/components/assets/static/main.css

@@ -7,7 +7,7 @@ html, body {
 }
 
 main {
-  max-width: 60%; /* TODO: Responsivity */
+  width: 60%; /* TODO: Responsivity */
   margin: 1em auto;
   background-color: white;
   padding: 2em;
@@ -66,5 +66,15 @@ ul.track-list li:has(> input[type=checkbox]:checked):nth-of-type(odd) {
     transform: rotate(360deg);
   }
 }
+dialog {
+  border: none;
+  border-radius: 1em;
+  padding: 1em 4em;
+}
+
+::backdrop {
+  background-color: oklch(70.7% 0.022 261.325deg);
+  opacity: 0.75;
+}
 
 /*# sourceMappingURL=main.css.map */

backseat/components/assets/static/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.scss","_colours.scss"],"names":[],"mappings":"AAAA;AAGA;EACI;EACA;EACA,kBC0GO;EDzGP;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EAEA;EACA;EACA;;AAEA;EAII;EACA;EACA;;AALA;EACI;;AAOR;EACI,kBC4JD;;ADzJH;EACI,kBCUA;;ADTA;EACI,kBCOJ;;;ADDZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;IACI;;EAEJ;IACI","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["main.scss","_colours.scss"],"names":[],"mappings":"AAAA;AAGA;EACI;EACA;EACA,kBC0GO;EDzGP;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EAEA;EACA;EACA;;AAEA;EAII;EACA;EACA;;AALA;EACI;;AAOR;EACI,kBC4JD;;ADzJH;EACI,kBCUA;;ADTA;EACI,kBCOJ;;;ADDZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI,kBCuHO;EDtHP","file":"main.css"}

backseat/components/assets/static/main.scss

@@ -9,7 +9,7 @@ html, body {
 }
 
 main {
-    max-width: 60%; /* TODO: Responsivity */
+    width: 60%; /* TODO: Responsivity */
     margin: 1em auto;
     background-color: white;
     padding: 2em;
@@ -72,4 +72,15 @@ ul.track-list {
     100% {
         transform: rotate(360deg);
     }
-}
+}
+
+dialog {
+    border: none;
+    border-radius: 1em;
+    padding: 1em 4em;
+}
+
+::backdrop {
+    background-color: $gray-400;
+    opacity: 0.75;
+}

backseat/components/recentlyListened/index.templ

@@ -41,7 +41,7 @@ templ indexPage() {
             }
         </script>
 
-        <form hx-put="/recentlyListened/createPlaylist" hx-target="main" hx-select="main" hx-disinherit="*" hx-vars="selected:collectSelectedTracks()">
+        <form hx-put="/recentlyListened/createPlaylist" hx-target="#modal-target" hx-swap="innerHTML" hx-disinherit="*" hx-vars="selected:collectSelectedTracks()">
             <input type="submit" />
             <ul id="track-list" class="track-list" hx-get="/recentlyListened/tracks" hx-trigger="load">
                 <div style="width: 100%; display: flex; flex-direction: column; gap: 0.5em; align-items: center;">
@@ -77,13 +77,16 @@ templ trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) {
 }
 
 templ createPlaylistPage(trackIDs []string) {
-    @httpUtil.BasePage("Recently Listened"){
+    <dialog id="modal">
         <h1>Create Playlist</h1>
-
         <ul>
             for _, id := range trackIDs {
                 <li>{ id }</li>
             }
         </ul>
-    }
+        <div>kerblam</div>
+    </dialog>
+    <script>
+        document.getElementById("modal").showModal()
+    </script>
 }

backseat/components/recentlyListened/index_templ.go

@@ -72,7 +72,7 @@ func indexPage() templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<h1>Recently Listened Tracks</h1><script>\n            const collectSelectedTracks = () => {\n                return Array.from(document.querySelectorAll('#track-list .track-selection-checkbox:checked')).map((elem) => (elem.dataset.trackid)).join(',')\n            }\n        </script> <form hx-put=\"/recentlyListened/createPlaylist\" hx-target=\"main\" hx-select=\"main\" hx-disinherit=\"*\" hx-vars=\"selected:collectSelectedTracks()\"><input type=\"submit\"><ul id=\"track-list\" class=\"track-list\" hx-get=\"/recentlyListened/tracks\" hx-trigger=\"load\"><div style=\"width: 100%; display: flex; flex-direction: column; gap: 0.5em; align-items: center;\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<h1>Recently Listened Tracks</h1><script>\n            const collectSelectedTracks = () => {\n                return Array.from(document.querySelectorAll('#track-list .track-selection-checkbox:checked')).map((elem) => (elem.dataset.trackid)).join(',')\n            }\n        </script> <form hx-put=\"/recentlyListened/createPlaylist\" hx-target=\"#modal-target\" hx-swap=\"innerHTML\" hx-disinherit=\"*\" hx-vars=\"selected:collectSelectedTracks()\"><input type=\"submit\"><ul id=\"track-list\" class=\"track-list\" hx-get=\"/recentlyListened/tracks\" hx-trigger=\"load\"><div style=\"width: 100%; display: flex; flex-direction: column; gap: 0.5em; align-items: center;\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -264,48 +264,30 @@ func createPlaylistPage(trackIDs []string) templ.Component {
 			templ_7745c5c3_Var11 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var12 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<dialog id=\"modal\"><h1>Create Playlist</h1><ul>")
-			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_Err != nil {
-			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+			return templ_7745c5c3_Err
-			if !templ_7745c5c3_IsBuffer {
+		}
-				defer func() {
+		for _, id := range trackIDs {
-					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<li>")
-					if templ_7745c5c3_Err == nil {
-						templ_7745c5c3_Err = templ_7745c5c3_BufErr
-					}
-				}()
-			}
-			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<h1>Create Playlist</h1><ul>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			for _, id := range trackIDs {
+			var templ_7745c5c3_Var12 string
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<li>")
+			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(id)
-				if templ_7745c5c3_Err != nil {
+			if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 84, Col: 24}
-				}
-				var templ_7745c5c3_Var13 string
-				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(id)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 85, Col: 24}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</li>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</ul>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			return nil
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</li>")
-		})
+			if templ_7745c5c3_Err != nil {
-		templ_7745c5c3_Err = httpUtil.BasePage("Recently Listened").Render(templ.WithChildren(ctx, templ_7745c5c3_Var12), templ_7745c5c3_Buffer)
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</ul><div>kerblam</div></dialog><script>\n        document.getElementById(\"modal\").showModal()\n    </script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

backseat/httpUtil/basePage.templ

@@ -23,10 +23,17 @@ templ BasePage(title string) {
             <main>
                 { children... }
             </main>
+            <div id="modal-target"></div>
         </body>
     </html>
 }
 
 templ LoadingSpinner() {
     <span class="loader"></span>
+}
+
+templ ModalTarget() {
+    <div id="modal-target" hx-swap-oob="true">
+        { children... }
+    </div>
 }

backseat/httpUtil/basePage_templ.go

@@ -50,7 +50,7 @@ func BasePage(title string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main><div id=\"modal-target\"></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -87,4 +87,41 @@ func LoadingSpinner() templ.Component {
 	})
 }
 
+func ModalTarget() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div id=\"modal-target\" hx-swap-oob=\"true\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var4.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
 var _ = templruntime.GeneratedTemplate