Merge pull request #47 from mbaraa/feat/add-to-playlist-popup

Feat: add to playlist popup

.air.toml

@@ -0,0 +1,40 @@
+root = "."
+
+[build]
+bin = "./dankmuzikk serve"
+cmd = "go generate && go build"
+delay = 100
+exclude_dir = [
+  "assets",
+  "tmp",
+  "vendor",
+  "_db",
+  "_serve",
+  "node_modules",
+  "ytscraper",
+  "ytdl",
+]
+exclude_file = []
+exclude_regex = [".*_templ.go"]
+exclude_unchanged = false
+follow_symlink = false
+full_bin = ""
+include_dir = []
+include_ext = ["go", "tpl", "tmpl", "templ", "html", "js", "css"]
+kill_delay = "0s"
+log = "build-errors.log"
+send_interrupt = true
+stop_on_error = true
+
+[color]
+app = ""
+build = "yellow"
+main = "magenta"
+runner = "green"
+watcher = "cyan"
+
+[log]
+time = false
+
+[misc]
+clean_on_exit = false

Makefile

@@ -6,19 +6,16 @@ BINARY_NAME=dankmuzikk
 build:
 	npm i && \
 	go mod tidy && \
-	templ generate && \
 	go generate && \
 	go build -ldflags="-w -s" -o ${BINARY_NAME}
 
 generate:
-	go generate && \
-    templ generate
+	go generate
 
 init:
 	npm i && \
 	go get && \
 	go generate && \
-	templ generate && \
     go run main.go migrate
 
 seed:
@@ -27,7 +24,7 @@ seed:
 # dev runs the development server where it builds the tailwind css sheet,
 # and compiles the project whenever a file is changed.
 dev:
-	templ generate --watch --cmd="./run.sh dev"
+	go run github.com/cosmtrek/[email protected]
 
 clean:
 	go clean

run.sh

@@ -1,15 +1,5 @@
 #!/bin/sh
 
-dev() {
-    # This function is used to compile tailwind's style sheet, and run the web server.
-    # Also this is supposed to be ran using templ's CLI, i.e.
-    # templ generate --watch --cmd="./run.sh"
-    # idk, that's it.
-
-    go generate
-    go run . serve
-}
-
 beta() {
     ./dankmuzikk serve
 }

views/components/loading/loading.templ

@@ -4,7 +4,7 @@ templ Loading() {
 	<div
 		class={
 			"absolute", "top-0", "left-0", "z-[200]", "w-screen", "h-screen",
-			"bg-accent-trans-30", "flex", "justify-center", "items-center",
+			"bg-accent-trans-30", "flex", "justify-center", "items-center", "z-50",
 		}
 	>
 		<div class={ "loader", "!h-32", "!w-32" }></div>

views/components/playlist/new_playlis_popover.templ

@@ -24,23 +24,18 @@ templ newPlaylistPopover() {
 			name="title"
 			placeholder="Enter the playlist's title"
 			autofocus
+			required
 		/>
 		<button
 			class={
 				"bg-primary", "text-secondary", "rounded-[50px]", "py-[5px]",
 				"px-[60px]", "w-full",
 			}
 			type="submit"
-			onClick={ hideNewPlayListPopover() }
 		>Create playlist</button>
 	</form>
 }
 
 templ newPlaylistPopoverButton() {
 	New playlist
 }
-
-script hideNewPlayListPopover() {
-    document.getElementById("popover-new-playlist")
-        .style.display = "none";
-}

views/components/playlist/options.templ

@@ -5,10 +5,11 @@ import (
 	"dankmuzikk/entities"
 	"dankmuzikk/views/components/popover"
 	"dankmuzikk/models"
+	"dankmuzikk/views/icons"
 )
 
 templ PlaylistsOptionsPopover(playlist entities.Playlist) {
-	@popover.Popover("playlist-"+playlist.PublicId, "Playlist options", playlistOptionsButton(), playlistOptions(playlist))
+	@popover.Popover("playlist-"+playlist.PublicId, "Playlist options", icons.Options(), playlistOptions(playlist))
 }
 
 templ playlistOptions(playlist entities.Playlist) {
@@ -48,14 +49,6 @@ templ playlistOptions(playlist entities.Playlist) {
 	</div>
 }
 
-templ playlistOptionsButton() {
-	<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<circle cx="10.5" cy="2.5" r="2.5" fill="var(--secondary-color)"></circle>
-		<circle cx="10.5" cy="10.5" r="2.5" fill="var(--secondary-color)"></circle>
-		<circle cx="10.5" cy="18.5" r="2.5" fill="var(--secondary-color)"></circle>
-	</svg>
-}
-
 templ publicPlaylistToggle(publicId string, isPublic bool) {
 	<div
 		class={ "flex", "gap-x-2", "items-center", "cursor-pointer" }
@@ -75,7 +68,7 @@ templ publicPlaylistToggle(publicId string, isPublic bool) {
 				"/api/playlist/public?playlist-id=%s", publicId,
 			),
 		}
-		title="Toggeling this will change the playlist's visibility!"
+		title="Toggling this will change the playlist's visibility!"
 	>
 		<div
 			id={ fmt.Sprintf("public-playlist-%s", publicId) }

views/components/playlist/popover.templ → views/components/playlist/popup.templ

@@ -3,16 +3,21 @@ package playlist
 import (
 	"fmt"
 	"dankmuzikk/entities"
-	"dankmuzikk/views/components/popover"
+	"dankmuzikk/views/components/popup"
 )
 
-templ PlaylistsPopover(index int, songId string, playlists []entities.Playlist, songsInPlaylists map[string]bool) {
-	@popover.Popover(fmt.Sprint(index), "Add to playlist", popoverButton(), playlistsSelector(songId, playlists, songsInPlaylists))
+templ PlaylistsPopup(index int, songId string, playlists []entities.Playlist, songsInPlaylists map[string]bool) {
+	@popup.Popup(fmt.Sprint(index), "Add to playlist", popoverButton(), playlistsSelector(songId, playlists, songsInPlaylists))
 }
 
 templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPlaylists map[string]bool) {
-	<div class={ "min-w-[250px]", "bg-accent-trans-30", "backdrop-blur-md", "p-3", "rounded-[10px]", "text-secondary" }>
-		<h2 class={ "text-lg" }>Save this song to...</h2>
+	<div
+		class={
+			"min-w-[350px]", "bg-accent-trans-30", "backdrop-blur-md", "p-3", "text-secondary",
+			"rounded-b-[10px]", "rounded-l-[10px]",
+		}
+	>
+		<h2 class={ "text-xl", "font-bold" }>Save this song to...</h2>
 		<div class={ "my-2" }></div>
 		<ul class={ "flex", "flex-col", "gap-y-2" }>
 			if playlists == nil || len(playlists) == 0 {

views/components/popup/popup.templ

@@ -0,0 +1,53 @@
+package popup
+
+import "fmt"
+
+templ Popup(id, title string, button, child templ.Component) {
+	<button
+		class={
+			"popup-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
+			"flex", "justify-center", "items-center",
+		}
+		title={ title }
+		type="button"
+		onClick={ toggleTheThing(id) }
+	>
+		@button
+	</button>
+	<dialog
+		id={ fmt.Sprintf("popup-%s", id) }
+		class={ "bg-[#ffffff00]" }
+	>
+		<form
+			class={  }
+		>
+			<div class={ "w-full","flex", "justify-end" }>
+				<button
+					formmethod="dialog"
+					type="submit"
+					class={
+						"bg-[#DE3333]", "hover:bg-white", "text-white", "hover:text-[#DE3333]",
+						"popup-trigger", "p-[5px]", "rounded-t-md", "text-lg", "font-medium",
+					}
+				>Close</button>
+			</div>
+			@child
+		</form>
+	</dialog>
+}
+
+script toggleTheThing(id string) {
+    const popup = document.getElementById(`popup-${id}`);
+    popup.showModal();
+    popup.addEventListener("click", e => {
+    const rect = popup.getBoundingClientRect()
+        if (
+          e.clientX < rect.left ||
+          e.clientX > rect.right ||
+          e.clientY < rect.top ||
+          e.clientY > rect.bottom
+        ) {
+          popup.close()
+        }
+    })
+}

views/icons/options.templ

@@ -0,0 +1,9 @@
+package icons
+
+templ Options() {
+	<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<circle cx="10.5" cy="2.5" r="2.5" fill="var(--secondary-color)"></circle>
+		<circle cx="10.5" cy="10.5" r="2.5" fill="var(--secondary-color)"></circle>
+		<circle cx="10.5" cy="18.5" r="2.5" fill="var(--secondary-color)"></circle>
+	</svg>
+}

views/pages/playlist.templ

@@ -7,6 +7,7 @@ import (
 	"dankmuzikk/views/components/popover"
 	"dankmuzikk/models"
 	"dankmuzikk/views/components/playlist"
+	"dankmuzikk/views/icons"
 )
 
 templ Playlist(pl entities.Playlist) {
@@ -97,9 +98,9 @@ templ Playlist(pl entities.Playlist) {
 											</div>
 											<div>
 												if isMobile, ok := ctx.Value("is-mobile").(bool); ok && isMobile {
-													@popover.Popover(song.YtId, "Options", songOptionsToggle(), songOptionsMobile(song, pl.PublicId))
+													@popover.Popover(song.YtId, "Options", icons.Options(), songOptionsMobile(song, pl.PublicId))
 												} else {
-													@popover.Popover(song.YtId, "Options", songOptionsToggle(), songOptions(song, pl.PublicId))
+													@popover.Popover(song.YtId, "Options", icons.Options(), songOptions(song, pl.PublicId))
 												}
 											</div>
 										</div>
@@ -113,15 +114,6 @@ templ Playlist(pl entities.Playlist) {
 		</div>
 	</main>
 	<input id="clipboard-text-blyat" type="text" hidden/>
-	//	<div class={ "hidden" }><textarea id="clipboard-text-blyat"></textarea></div>
-}
-
-templ songOptionsToggle() {
-	<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<circle cx="10.5" cy="2.5" r="2.5" fill="var(--secondary-color)"></circle>
-		<circle cx="10.5" cy="10.5" r="2.5" fill="var(--secondary-color)"></circle>
-		<circle cx="10.5" cy="18.5" r="2.5" fill="var(--secondary-color)"></circle>
-	</svg>
 }
 
 templ songOptions(song entities.Song, playlistId string) {

views/pages/search_results.templ

@@ -60,7 +60,7 @@ templ SearchResults(results []entities.Song, playlists []entities.Playlist, song
 						</div>
 						<!-- actions -->
 						<div class={ "w-[30px]", "h-auto", "relative" }>
-							@playlist.PlaylistsPopover(idx, res.YtId, playlists, songsInPlaylists)
+							@playlist.PlaylistsPopup(idx, res.YtId, playlists, songsInPlaylists)
 							<button
 								class={
 									"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",