diff --git a/backseat/components/recentlyListened/index.templ b/backseat/components/recentlyListened/index.templ
index f539c36..e2e73ef 100644
--- a/backseat/components/recentlyListened/index.templ
+++ b/backseat/components/recentlyListened/index.templ
@@ -4,6 +4,7 @@ import (
     "git.akpain.net/codemicro/backseat-music/backseat/httpUtil"
     "github.com/zmb3/spotify/v2"
     "strconv"
+    "encoding/json"
 )
 
 func formatArtistNames(artists []spotify.SimpleArtist) string {
@@ -41,7 +42,7 @@ templ indexPage() {
             }
         </script>
 
-        <form hx-put="/recentlyListened/createPlaylist" hx-target="#modal-target" hx-swap="innerHTML" hx-disinherit="*" hx-vars="selected:collectSelectedTracks()">
+        <form hx-get="/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;">
@@ -76,17 +77,40 @@ templ trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) {
     </div>
 }
 
-templ createPlaylistPage(trackIDs []string) {
-    <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>
+templ createPlaylistModal(trackIDs []string) {
+    @httpUtil.Modal(){
+        <div id="cpmb">
+            <div class="htmx-indicator">
+                @httpUtil.LoadingSpinner()
+            </div>
+            <div class="htmx-not-indicator">
+                <h1>Create Playlist</h1>
+                <p>For { len(trackIDs) } tracks</p>
+                {{ vals, _ := json.Marshal(map[string][]string{"tracks": trackIDs}) }}
+                <form hx-post="/recentlyListened/createPlaylist" hx-indicator="#cpmb" hx-vals={ string(vals) } hx-target="#modal-target" hx-swap="innerHTML">
+                    <input type="text" name="playlistName">
+                    <button type="submit">Create</button>
+                </form>
+            </div>
+        </div>
+    }
+}
+
+templ createPlaylistProblemModal(reason string) {
+    @httpUtil.Modal() {
+        <h1>Error</h1>
+        <p>{ reason }</p>
+        <form method="dialog">
+            <button>OK</button>
+        </form>
+    }
+}
+
+templ createPlaylistDoneModal() {
+    @httpUtil.Modal() {
+        <h1>Doneso</h1>
+        <form method="dialog">
+            <button>OK</button>
+        </form>
+    }
 }
\ No newline at end of file
diff --git a/backseat/components/recentlyListened/index_templ.go b/backseat/components/recentlyListened/index_templ.go
index e8c437b..607e7c3 100644
--- a/backseat/components/recentlyListened/index_templ.go
+++ b/backseat/components/recentlyListened/index_templ.go
@@ -9,6 +9,7 @@ import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
 import (
+	"encoding/json"
 	"git.akpain.net/codemicro/backseat-music/backseat/httpUtil"
 	"github.com/zmb3/spotify/v2"
 	"strconv"
@@ -72,7 +73,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=\"#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;\">")
+			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-get=\"/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
 			}
@@ -123,7 +124,7 @@ func trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) templ.Compon
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(record.Track.ID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 60, Col: 82}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 61, Col: 82}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
@@ -141,7 +142,7 @@ func trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) templ.Compon
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(smallestImage.URL)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 62, Col: 45}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 63, Col: 45}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -154,7 +155,7 @@ func trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) templ.Compon
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("album art for " + record.Track.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 62, Col: 105}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 63, Col: 105}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -167,7 +168,7 @@ func trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) templ.Compon
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(record.Track.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 63, Col: 36}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 64, Col: 36}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -180,7 +181,7 @@ func trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) templ.Compon
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(formatArtistNames(record.Track.Artists))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 64, Col: 58}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 65, Col: 58}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -193,7 +194,7 @@ func trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) templ.Compon
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(record.PlayedAt.String())
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 65, Col: 43}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 66, Col: 43}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
@@ -224,7 +225,7 @@ func trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) templ.Compon
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs("/recentlyListened/tracks?before=" + strconv.FormatInt(recentlyListenedTracks[len(recentlyListenedTracks)-1].PlayedAt.UnixMilli(), 10))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 74, Col: 163}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 75, Col: 163}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
@@ -243,7 +244,7 @@ func trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) templ.Compon
 	})
 }
 
-func createPlaylistPage(trackIDs []string) templ.Component {
+func createPlaylistModal(trackIDs []string) 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 {
@@ -264,30 +265,171 @@ func createPlaylistPage(trackIDs []string) templ.Component {
 			templ_7745c5c3_Var11 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<dialog id=\"modal\"><h1>Create Playlist</h1><ul>")
+		templ_7745c5c3_Var12 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			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_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div id=\"cpmb\"><div class=\"htmx-indicator\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = httpUtil.LoadingSpinner().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div><div class=\"htmx-not-indicator\"><h1>Create Playlist</h1><p>For ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var13 string
+			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(len(trackIDs))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 88, Col: 38}
+			}
+			_, 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, " tracks</p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			vals, _ := json.Marshal(map[string][]string{"tracks": trackIDs})
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<form hx-post=\"/recentlyListened/createPlaylist\" hx-indicator=\"#cpmb\" hx-vals=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var14 string
+			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(string(vals))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 90, Col: 108}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\" hx-target=\"#modal-target\" hx-swap=\"innerHTML\"><input type=\"text\" name=\"playlistName\"> <button type=\"submit\">Create</button></form></div></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return nil
+		})
+		templ_7745c5c3_Err = httpUtil.Modal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var12), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		for _, id := range trackIDs {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<li>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var12 string
-			templ_7745c5c3_Var12, 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: 84, Col: 24}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-			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
-			}
+		return nil
+	})
+}
+
+func createPlaylistProblemModal(reason string) 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_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</ul><div>kerblam</div></dialog><script>\n        document.getElementById(\"modal\").showModal()\n    </script>")
+		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_Var15 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var15 == nil {
+			templ_7745c5c3_Var15 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var16 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			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_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<h1>Error</h1><p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var17 string
+			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(reason)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 102, Col: 19}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</p><form method=\"dialog\"><button>OK</button></form>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return nil
+		})
+		templ_7745c5c3_Err = httpUtil.Modal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var16), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func createPlaylistDoneModal() 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_Var18 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var18 == nil {
+			templ_7745c5c3_Var18 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var19 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			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_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<h1>Doneso</h1><form method=\"dialog\"><button>OK</button></form>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return nil
+		})
+		templ_7745c5c3_Err = httpUtil.Modal().Render(templ.WithChildren(ctx, templ_7745c5c3_Var19), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/backseat/components/recentlyListened/recentlyListened.go b/backseat/components/recentlyListened/recentlyListened.go
index 32da5a2..bd6ed0f 100644
--- a/backseat/components/recentlyListened/recentlyListened.go
+++ b/backseat/components/recentlyListened/recentlyListened.go
@@ -5,10 +5,12 @@ import (
 	"git.akpain.net/codemicro/backseat-music/backseat/data"
 	"git.akpain.net/codemicro/backseat-music/backseat/httpUtil"
 	"git.akpain.net/codemicro/backseat-music/backseat/spotifyUtil"
+	"github.com/a-h/templ"
 	"github.com/zmb3/spotify/v2"
 	"net/http"
 	"strconv"
 	"strings"
+	"time"
 )
 
 type RecentlyListened struct {
@@ -27,7 +29,8 @@ func New(data *data.Store) *RecentlyListened {
 	t.mux.Handle("GET /recentlyListened/{$}", httpUtil.HandleErrors(t.index))
 	t.mux.Handle("POST /recentlyListened/{$}", httpUtil.HandleErrors(t.index))
 	t.mux.Handle("GET /recentlyListened/tracks", httpUtil.HandleErrors(t.tracks))
-	t.mux.Handle("PUT /recentlyListened/createPlaylist", httpUtil.HandleErrors(t.createPlaylist))
+	t.mux.Handle("GET /recentlyListened/createPlaylist", httpUtil.HandleErrors(t.getCreatePlaylist))
+	t.mux.Handle("POST /recentlyListened/createPlaylist", httpUtil.HandleErrors(t.postCreatePlaylist))
 
 	return t
 }
@@ -91,15 +94,37 @@ func (r *RecentlyListened) tracks(rw http.ResponseWriter, rq *http.Request) erro
 	return nil
 }
 
-func (r *RecentlyListened) createPlaylist(rw http.ResponseWriter, rq *http.Request) error {
-	if err := rq.ParseForm(); err != nil {
-		rw.WriteHeader(http.StatusBadRequest)
-		return nil
+func (r *RecentlyListened) getCreatePlaylist(rw http.ResponseWriter, rq *http.Request) error {
+	trackIDs := strings.Split(rq.URL.Query().Get("selected"), ",")
+
+	var responseTemplate templ.Component
+
+	if len(trackIDs) == 1 && trackIDs[0] == "" { // this is the result of calling strings.Split on an empty string
+		responseTemplate = createPlaylistProblemModal("No tracks selected")
+	} else {
+		responseTemplate = createPlaylistModal(trackIDs)
 	}
 
-	trackIDs := strings.Split(rq.FormValue("selected"), ",")
-
-	if err := createPlaylistPage(trackIDs).Render(rq.Context(), rw); err != nil {
+	if err := responseTemplate.Render(rq.Context(), rw); err != nil {
+		return fmt.Errorf("render template: %w", err)
+	}
+
+	return nil
+}
+
+func (r *RecentlyListened) postCreatePlaylist(rw http.ResponseWriter, rq *http.Request) error {
+	time.Sleep(2 * time.Second)
+	if err := rq.ParseForm(); err != nil {
+		rw.WriteHeader(http.StatusBadRequest)
+		return nil
+	}
+
+	trackIDs := rq.Form["tracks"]
+	playlistName := rq.FormValue("playlistName")
+
+	fmt.Println(playlistName, trackIDs)
+
+	if err := createPlaylistDoneModal().Render(rq.Context(), rw); err != nil {
 		return fmt.Errorf("render template: %w", err)
 	}
 
diff --git a/backseat/httpUtil/basePage.templ b/backseat/httpUtil/basePage.templ
index 975c723..0569f7d 100644
--- a/backseat/httpUtil/basePage.templ
+++ b/backseat/httpUtil/basePage.templ
@@ -17,6 +17,10 @@ templ BasePage(title string) {
                 .htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
                     display: block;
                 }
+
+                .htmx-request .htmx-not-indicator {
+                    display: none;
+                }
             </style>
         </head>
         <body>
@@ -36,4 +40,13 @@ templ ModalTarget() {
     <div id="modal-target" hx-swap-oob="true">
         { children... }
     </div>
+}
+
+templ Modal() {
+    <dialog id="modal">
+        { children... }
+    </dialog>
+    <script>
+        document.getElementById("modal").showModal()
+    </script>
 }
\ No newline at end of file
diff --git a/backseat/httpUtil/basePage_templ.go b/backseat/httpUtil/basePage_templ.go
index 1580268..c35a6a7 100644
--- a/backseat/httpUtil/basePage_templ.go
+++ b/backseat/httpUtil/basePage_templ.go
@@ -42,7 +42,7 @@ func BasePage(title string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Backseat Music</title><link rel=\"stylesheet\" href=\"/assets/main.css\"><meta name=\"htmx-config\" content='{\"includeIndicatorStyles\":false}'><script src=\"https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.js\"></script><style>\n                .htmx-indicator {\n                    display: none;\n                }\n\n                .htmx-request .htmx-indicator, .htmx-request.htmx-indicator {\n                    display: block;\n                }\n            </style></head><body><main>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Backseat Music</title><link rel=\"stylesheet\" href=\"/assets/main.css\"><meta name=\"htmx-config\" content='{\"includeIndicatorStyles\":false}'><script src=\"https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.js\"></script><style>\n                .htmx-indicator {\n                    display: none;\n                }\n\n                .htmx-request .htmx-indicator, .htmx-request.htmx-indicator {\n                    display: block;\n                }\n\n                .htmx-request .htmx-not-indicator {\n                    display: none;\n                }\n            </style></head><body><main>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -124,4 +124,41 @@ func ModalTarget() templ.Component {
 	})
 }
 
+func Modal() 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_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<dialog id=\"modal\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ_7745c5c3_Var5.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</dialog><script>\n        document.getElementById(\"modal\").showModal()\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
 var _ = templruntime.GeneratedTemplate