From 49b68ef15ced22b62e2c0954e74ab8de335139c8 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 12:30:04 +0300
Subject: [PATCH 01/97] chore(mobilenav): update vertical padding

---
 views/components/mobilenav/mobilenav.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/components/mobilenav/mobilenav.templ b/views/components/mobilenav/mobilenav.templ
index 8b8c702..fdf0482 100644
--- a/views/components/mobilenav/mobilenav.templ
+++ b/views/components/mobilenav/mobilenav.templ
@@ -9,7 +9,7 @@ templ MobileNav() {
 		<nav
 			class={ "bg-primary",  "h-[70px]", "m-[5px]", "rounded-[10px]", "flex", "justify-center", "items-center" }
 		>
-			<ul class={ "w-full", "m-0", "p-5", "list-none", "flex", "justify-between" }>
+			<ul class={ "w-full", "m-0", "p-5", "px-16", "list-none", "flex", "justify-between" }>
 				<!-- kept for SEO -->
 				<div class="hidden">
 					<li><a href="/about">About</a></li>

From e7bdb429e45e66ec19f9b380799979ccd95d3e96 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 12:31:39 +0300
Subject: [PATCH 02/97] chore(mobilenav): less is more

---
 views/components/mobilenav/mobilenav.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/components/mobilenav/mobilenav.templ b/views/components/mobilenav/mobilenav.templ
index fdf0482..4482226 100644
--- a/views/components/mobilenav/mobilenav.templ
+++ b/views/components/mobilenav/mobilenav.templ
@@ -9,7 +9,7 @@ templ MobileNav() {
 		<nav
 			class={ "bg-primary",  "h-[70px]", "m-[5px]", "rounded-[10px]", "flex", "justify-center", "items-center" }
 		>
-			<ul class={ "w-full", "m-0", "p-5", "px-16", "list-none", "flex", "justify-between" }>
+			<ul class={ "w-full", "m-0", "p-5", "px-14", "list-none", "flex", "justify-between" }>
 				<!-- kept for SEO -->
 				<div class="hidden">
 					<li><a href="/about">About</a></li>

From e5e386f23aee095a132a469c701c1ba0d52d1cd1 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 12:32:12 +0300
Subject: [PATCH 03/97] chore(workflows): remove *.md from deployment trigger

---
 .github/workflows/rex-deploy.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/rex-deploy.yml b/.github/workflows/rex-deploy.yml
index 10f5969..e277fe5 100644
--- a/.github/workflows/rex-deploy.yml
+++ b/.github/workflows/rex-deploy.yml
@@ -4,6 +4,8 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - "**.md"
   pull_request:
     branches:
       - non-existent

From df10fb6430bc7279ad19bdb1967a95c935a23697 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 16:48:40 +0300
Subject: [PATCH 04/97] fix(player): loop all on single song

---
 static/js/player.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/static/js/player.js b/static/js/player.js
index 427ab91..801994c 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -393,7 +393,10 @@ audioPlayerEl.addEventListener("ended", () => {
     case "ALL":
       if (currentPlaylistPlayer) {
         currentPlaylistPlayer.next(shuffleSongs, true);
+        return;
       }
+      stopMuzikk();
+      playMuzikk();
       break;
   }
 });

From f1394a65e1d7620e55f51d656610e63e00079ccb Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 22:39:15 +0300
Subject: [PATCH 05/97] chore(playlist): add play icon to play playlist

---
 static/images/play-playlist-icon.svg | 4 ++++
 views/pages/playlist.templ           | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 static/images/play-playlist-icon.svg

diff --git a/static/images/play-playlist-icon.svg b/static/images/play-playlist-icon.svg
new file mode 100644
index 0000000..95e0905
--- /dev/null
+++ b/static/images/play-playlist-icon.svg
@@ -0,0 +1,4 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="30" cy="30" r="30" fill="black" fill-opacity="0.5"/>
+<path d="M39.0702 25.7967C41.3019 27.1914 42.4176 27.8888 42.8003 28.7817C43.1345 29.5614 43.1345 30.4441 42.8003 31.2239C42.4176 32.1167 41.3019 32.8141 39.0702 34.2089L28.5888 40.7598C26.112 42.3078 24.8736 43.0819 23.8516 42.9996C22.9608 42.928 22.1442 42.4755 21.6113 41.758C21 40.935 21 39.4746 21 36.5537V23.4519C21 20.5311 21 19.0707 21.6113 18.2476C22.1442 17.5301 22.9608 17.0775 23.8516 17.0059C24.8736 16.9238 26.112 17.6978 28.5888 19.2458L39.0702 25.7967Z" stroke="#9EE07E" stroke-width="4" stroke-linejoin="round"/>
+</svg>
diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index a9ec17c..9937cbe 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -27,8 +27,9 @@ templ justPlaylist(pl entities.Playlist) {
 					<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>{ pl.Title }</h1>
 					<button
 						type="button"
+						title="Play playlist"
 						onClick={ playPlaylist(pl) }
-					>Play</button>
+					><img src="/static/images/play-playlist-icon.svg" alt="Play"/></button>
 				</div>
 				<div id="playlists-listing">
 					if pl.Songs == nil || len(pl.Songs) == 0 {

From fb1a27f2dd19efb58c0a06fb4b96e9a753698980 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 22:55:00 +0300
Subject: [PATCH 06/97] chore(playlist): update playlistSongRepo's name

---
 services/playlists/songs/songs.go | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/services/playlists/songs/songs.go b/services/playlists/songs/songs.go
index 8dc383a..0a92020 100644
--- a/services/playlists/songs/songs.go
+++ b/services/playlists/songs/songs.go
@@ -8,18 +8,18 @@ import (
 // Service represents songs in platlists management service,
 // where it adds and deletes songs to and from playlists
 type Service struct {
-	repo         db.CRUDRepo[models.PlaylistSong]
-	songRepo     db.GetterRepo[models.Song]
-	playlistRepo db.GetterRepo[models.Playlist]
+	playlistSongRepo db.UnsafeCRUDRepo[models.PlaylistSong]
+	songRepo         db.UnsafeCRUDRepo[models.Song]
+	playlistRepo     db.UnsafeCRUDRepo[models.Playlist]
 }
 
 // New accepts repos lol, and returns a new instance to the songs playlists service.
 func New(
-	repo db.CRUDRepo[models.PlaylistSong],
-	songRepo db.GetterRepo[models.Song],
-	playlistRepo db.GetterRepo[models.Playlist],
+	playlistSongRepo db.UnsafeCRUDRepo[models.PlaylistSong],
+	songRepo db.UnsafeCRUDRepo[models.Song],
+	playlistRepo db.UnsafeCRUDRepo[models.Playlist],
 ) *Service {
-	return &Service{repo, songRepo, playlistRepo}
+	return &Service{playlistSongRepo, songRepo, playlistRepo}
 }
 
 // AddSongToPlaylist adds a given song to the given playlist,
@@ -36,7 +36,7 @@ func (s *Service) AddSongToPlaylist(songId, playlistPubId string) error {
 		return err
 	}
 
-	return s.repo.Add(&models.PlaylistSong{
+	return s.playlistSongRepo.Add(&models.PlaylistSong{
 		PlaylistId: playlist[0].Id,
 		SongId:     song[0].Id,
 	})
@@ -57,6 +57,6 @@ func (s *Service) RemoveSongFromPlaylist(songId, playlistPubId string) error {
 	}
 
 	return s.
-		repo.
+		playlistSongRepo.
 		Delete("playlist_id = ? AND song_id = ?", playlist[0].Id, song[0].Id)
 }

From a294476723544c5b4862c7f868af1ab75336db27 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 22:55:30 +0300
Subject: [PATCH 07/97] chore(playlist): add song total plays in a playlist

---
 models/playlist.go | 1 +
 1 file changed, 1 insertion(+)

diff --git a/models/playlist.go b/models/playlist.go
index e45bb86..5ba56cd 100644
--- a/models/playlist.go
+++ b/models/playlist.go
@@ -47,6 +47,7 @@ type PlaylistSong struct {
 	PlaylistId uint `gorm:"primaryKey"`
 	SongId     uint `gorm:"primaryKey"`
 	Votes      int
+	PlayTimes  int
 
 	CreatedAt time.Time
 	UpdatedAt time.Time

From bfab21be970ac610a1296e9971fe2adb89e4c55b Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 23:44:59 +0300
Subject: [PATCH 08/97] chore(playlist): add increment song plays in playlist

---
 services/playlists/songs/songs.go | 52 +++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/services/playlists/songs/songs.go b/services/playlists/songs/songs.go
index 0a92020..0d3700b 100644
--- a/services/playlists/songs/songs.go
+++ b/services/playlists/songs/songs.go
@@ -42,6 +42,58 @@ func (s *Service) AddSongToPlaylist(songId, playlistPubId string) error {
 	})
 }
 
+// IncrementSongPlays increases the song's play times in the given playlist.
+// Checks for the song and playlist first, yada yada...
+// TODO: check playlist's owner :)
+func (s *Service) IncrementSongPlays(songId, playlistPubId string) error {
+	var song models.Song
+	err := s.
+		songRepo.
+		GetDB().
+		Model(new(models.Song)).
+		Select("id").
+		Where("yt_id = ?", songId).
+		First(&song).
+		Error
+	if err != nil {
+		return err
+	}
+
+	var playlist models.Playlist
+	err = s.
+		songRepo.
+		GetDB().
+		Model(new(models.Playlist)).
+		Select("id").
+		Where("public_id = ?", playlistPubId).
+		First(&playlist).
+		Error
+	if err != nil {
+		return err
+	}
+
+	var ps models.PlaylistSong
+	err = s.
+		playlistSongRepo.
+		GetDB().
+		Model(new(models.PlaylistSong)).
+		Select("play_times").
+		Where("playlist_id = ? AND song_id = ?", playlist.Id, song.Id).
+		First(&ps).
+		Error
+	if err != nil {
+		return err
+	}
+
+	return s.
+		playlistSongRepo.
+		GetDB().
+		Model(new(models.PlaylistSong)).
+		Where("playlist_id = ? AND song_id = ?", playlist.Id, song.Id).
+		Update("play_times", ps.PlayTimes+1).
+		Error
+}
+
 // RemoveSongFromPlaylist removes a given song from the given playlist,
 // checks if the actual song and playlist exist then removes the song to the given playlist,
 // and returns an occurring error.

From 2f6d34030e012305615d84fba0b16974bd1b6862 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 23:45:46 +0300
Subject: [PATCH 09/97] chore(playlist): add increment bla bla's endpoint

---
 cmd/server/server.go   |  3 ++-
 handlers/apis/songs.go | 28 +++++++++++++++++++++++++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/cmd/server/server.go b/cmd/server/server.go
index 7dabb80..46f91b4 100644
--- a/cmd/server/server.go
+++ b/cmd/server/server.go
@@ -60,7 +60,7 @@ func StartServer(staticFS embed.FS) error {
 
 	emailLoginApi := apis.NewEmailLoginApi(login.NewEmailLoginService(accountRepo, profileRepo, otpRepo, jwtUtil))
 	googleLoginApi := apis.NewGoogleLoginApi(login.NewGoogleLoginService(accountRepo, profileRepo, otpRepo, jwtUtil))
-	songDownloadApi := apis.NewDownloadHandler(downloadService)
+	songDownloadApi := apis.NewDownloadHandler(downloadService, songsService)
 	playlistsApi := apis.NewPlaylistApi(playlistsService, songsService)
 
 	apisHandler := http.NewServeMux()
@@ -76,6 +76,7 @@ func StartServer(staticFS embed.FS) error {
 	apisHandler.HandleFunc("GET /song/download/queue", songDownloadApi.HandleDownloadSongToQueue)
 	apisHandler.HandleFunc("POST /playlist", gHandler.AuthApi(playlistsApi.HandleCreatePlaylist))
 	apisHandler.HandleFunc("PUT /toggle-song-in-playlist", gHandler.AuthApi(playlistsApi.HandleToggleSongInPlaylist))
+	apisHandler.HandleFunc("PUT /increment-song-plays", gHandler.AuthApi(songDownloadApi.HandleIncrementSongPlaysInPlaylist))
 
 	applicationHandler := http.NewServeMux()
 	applicationHandler.Handle("/", pagesHandler)
diff --git a/handlers/apis/songs.go b/handlers/apis/songs.go
index 37b8e7a..55c958c 100644
--- a/handlers/apis/songs.go
+++ b/handlers/apis/songs.go
@@ -3,6 +3,7 @@ package apis
 import (
 	"dankmuzikk/entities"
 	"dankmuzikk/log"
+	"dankmuzikk/services/playlists/songs"
 	"dankmuzikk/services/youtube/download"
 	"errors"
 	"net/http"
@@ -10,11 +11,32 @@ import (
 )
 
 type songDownloadHandler struct {
-	service *download.Service
+	service      *download.Service
+	songsService *songs.Service
 }
 
-func NewDownloadHandler(service *download.Service) *songDownloadHandler {
-	return &songDownloadHandler{service}
+func NewDownloadHandler(service *download.Service, songsService *songs.Service) *songDownloadHandler {
+	return &songDownloadHandler{service, songsService}
+}
+
+func (s *songDownloadHandler) HandleIncrementSongPlaysInPlaylist(w http.ResponseWriter, r *http.Request) {
+	songId := r.URL.Query().Get("song-id")
+	if songId == "" {
+		w.WriteHeader(http.StatusBadRequest)
+		return
+	}
+	playlistId := r.URL.Query().Get("playlist-id")
+	if playlistId == "" {
+		w.WriteHeader(http.StatusBadRequest)
+		return
+	}
+
+	err := s.songsService.IncrementSongPlays(songId, playlistId)
+	if err != nil {
+		log.Errorln(err)
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
 }
 
 func (s *songDownloadHandler) HandleDownloadSong(w http.ResponseWriter, r *http.Request) {

From 5a09c46ff64e2d9e6c6beaf741035c8dbb7da7d7 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Wed, 15 May 2024 23:46:21 +0300
Subject: [PATCH 10/97] chore(playlist): utilize that endpoint

---
 static/js/player.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/static/js/player.js b/static/js/player.js
index 801994c..c97bb35 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -84,6 +84,7 @@ class PlaylistPlayer {
       songToPlay.artist,
       songToPlay.duration,
     );
+    this.#updateSongPlays();
   }
 
   next(shuffle = false, loop = false) {
@@ -107,6 +108,7 @@ class PlaylistPlayer {
       songToPlay.artist,
       songToPlay.duration,
     );
+    this.#updateSongPlays();
   }
 
   previous(shuffle = false, loop = false) {
@@ -126,6 +128,20 @@ class PlaylistPlayer {
       songToPlay.artist,
       songToPlay.duration,
     );
+    this.#updateSongPlays();
+  }
+
+  async #updateSongPlays() {
+    await fetch(
+      "/api/increment-song-plays?" +
+        new URLSearchParams({
+          "song-id": this.#currentPlaylist.songs[this.#currentSongIndex].yt_id,
+          "playlist-id": this.#currentPlaylist.public_id,
+        }).toString(),
+      {
+        method: "PUT",
+      },
+    ).catch((err) => console.error(err));
   }
 }
 

From 47b41703ded985c29cf85a6a03d20e438feecb90 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 00:20:06 +0300
Subject: [PATCH 11/97] chore(playlist): map play times to entities

---
 entities/song.go                |  1 +
 services/playlists/playlists.go | 26 +++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/entities/song.go b/entities/song.go
index fa2fa59..1a572c9 100644
--- a/entities/song.go
+++ b/entities/song.go
@@ -6,4 +6,5 @@ type Song struct {
 	Artist       string `json:"artist"`
 	ThumbnailUrl string `json:"thumbnail_url"`
 	Duration     string `json:"duration"`
+	PlayTimes    int    `json:"play_times"`
 }
diff --git a/services/playlists/playlists.go b/services/playlists/playlists.go
index a19b5cd..761de11 100644
--- a/services/playlists/playlists.go
+++ b/services/playlists/playlists.go
@@ -16,6 +16,7 @@ import (
 type Service struct {
 	repo               db.UnsafeCRUDRepo[models.Playlist]
 	playlistOwnersRepo db.CRUDRepo[models.PlaylistOwner]
+	playlistSongsRepo  db.UnsafeCRUDRepo[models.PlaylistSong]
 	downloadService    *download.Service
 }
 
@@ -23,9 +24,10 @@ type Service struct {
 func New(
 	repo db.UnsafeCRUDRepo[models.Playlist],
 	playlistOwnersRepo db.CRUDRepo[models.PlaylistOwner],
+	playlistSongsRepo db.UnsafeCRUDRepo[models.PlaylistSong],
 	downloadService *download.Service,
 ) *Service {
-	return &Service{repo, playlistOwnersRepo, downloadService}
+	return &Service{repo, playlistOwnersRepo, playlistSongsRepo, downloadService}
 }
 
 // CreatePlaylist creates a new playlist with with provided details for the given account's profile.
@@ -145,6 +147,27 @@ func (p *Service) Get(playlistPubId string, ownerId uint) (entities.Playlist, er
 		return entities.Playlist{}, ErrUnauthorizedToSeePlaylist
 	}
 
+	var playlistSongs []models.PlaylistSong
+	err = p.
+		playlistSongsRepo.
+		GetDB().
+		Model(new(models.PlaylistSong)).
+		Where("playlist_id = ?", dbPlaylists[0].Id).
+		Select("song_id", "play_times", "votes").
+		Find(&playlistSongs).
+		Error
+	if err != nil {
+		return entities.Playlist{}, err
+	}
+	if len(playlistSongs) == 0 {
+		return entities.Playlist{}, ErrUnauthorizedToSeePlaylist
+	}
+
+	mappedPlaylistSongsToPlaysSuka := make(map[uint]int)
+	for _, playlistSong := range playlistSongs {
+		mappedPlaylistSongsToPlaysSuka[playlistSong.SongId] = playlistSong.PlayTimes
+	}
+
 	songs := make([]entities.Song, len(dbPlaylists[0].Songs))
 	for i, song := range dbPlaylists[0].Songs {
 		songs[i] = entities.Song{
@@ -153,6 +176,7 @@ func (p *Service) Get(playlistPubId string, ownerId uint) (entities.Playlist, er
 			Artist:       song.Artist,
 			ThumbnailUrl: song.ThumbnailUrl,
 			Duration:     song.Duration,
+			PlayTimes:    mappedPlaylistSongsToPlaysSuka[song.Id],
 		}
 	}
 

From f97f60687c1f4128df94bc84dffe6416c650e22d Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 00:21:43 +0300
Subject: [PATCH 12/97] chore(playlist): initializers stuff

---
 cmd/seeder/seeder.go | 2 +-
 cmd/server/server.go | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cmd/seeder/seeder.go b/cmd/seeder/seeder.go
index 231d522..d933dcd 100644
--- a/cmd/seeder/seeder.go
+++ b/cmd/seeder/seeder.go
@@ -44,7 +44,7 @@ func SeedDb() error {
 	playlistSongsRepo = db.NewBaseDB[models.PlaylistSong](dbConn)
 	playlistOwnerRepo = db.NewBaseDB[models.PlaylistOwner](dbConn)
 
-	playlistService := playlistspkg.New(playlistRepo, playlistOwnerRepo, nil)
+	playlistService := playlistspkg.New(playlistRepo, playlistOwnerRepo, nil, nil)
 
 	pl, err := playlistService.GetAll(400)
 	if err != nil {
diff --git a/cmd/server/server.go b/cmd/server/server.go
index 46f91b4..7b6b74b 100644
--- a/cmd/server/server.go
+++ b/cmd/server/server.go
@@ -33,7 +33,7 @@ func StartServer(staticFS embed.FS) error {
 	playlistSongssRepo := db.NewBaseDB[models.PlaylistSong](dbConn)
 
 	downloadService := download.New(songRepo)
-	playlistsService := playlists.New(playlistRepo, playlistOwnersRepo, downloadService)
+	playlistsService := playlists.New(playlistRepo, playlistOwnersRepo, playlistSongssRepo, downloadService)
 	songsService := songs.New(playlistSongssRepo, songRepo, playlistRepo)
 
 	jwtUtil := jwt.NewJWTImpl()

From a78fde05fb504c7bc6c2a11063cae6b8b0910344 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 00:25:19 +0300
Subject: [PATCH 13/97] chore(player): update song type (idk why)

---
 static/js/player.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/js/player.js b/static/js/player.js
index c97bb35..dfd7781 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -47,6 +47,7 @@ let currentPlaylistPlayer;
  * @property {string} duration
  * @property {string} thumbnail_url
  * @property {string} yt_id
+ * @property {number} play_times
  *
  * @typedef {object} Playlist
  * @property {string} public_id

From 51d8d63a201bfa507c404ce30f61f7da7d50a0d0 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 00:54:23 +0300
Subject: [PATCH 14/97] chore(playlist): add addedAt attribute to song's entity

---
 entities/song.go                | 1 +
 services/playlists/playlists.go | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/entities/song.go b/entities/song.go
index 1a572c9..c4e93d5 100644
--- a/entities/song.go
+++ b/entities/song.go
@@ -7,4 +7,5 @@ type Song struct {
 	ThumbnailUrl string `json:"thumbnail_url"`
 	Duration     string `json:"duration"`
 	PlayTimes    int    `json:"play_times"`
+	AddedAt      string `json:"added_at"`
 }
diff --git a/services/playlists/playlists.go b/services/playlists/playlists.go
index 761de11..7f326c8 100644
--- a/services/playlists/playlists.go
+++ b/services/playlists/playlists.go
@@ -7,6 +7,7 @@ import (
 	"dankmuzikk/services/youtube/download"
 	"fmt"
 	"strings"
+	"time"
 
 	"github.com/google/uuid"
 )
@@ -153,7 +154,7 @@ func (p *Service) Get(playlistPubId string, ownerId uint) (entities.Playlist, er
 		GetDB().
 		Model(new(models.PlaylistSong)).
 		Where("playlist_id = ?", dbPlaylists[0].Id).
-		Select("song_id", "play_times", "votes").
+		Select("song_id", "play_times", "votes", "created_at").
 		Find(&playlistSongs).
 		Error
 	if err != nil {
@@ -164,8 +165,10 @@ func (p *Service) Get(playlistPubId string, ownerId uint) (entities.Playlist, er
 	}
 
 	mappedPlaylistSongsToPlaysSuka := make(map[uint]int)
+	mappedPlaylistSongsToCreatedAtSuka := make(map[uint]time.Time)
 	for _, playlistSong := range playlistSongs {
 		mappedPlaylistSongsToPlaysSuka[playlistSong.SongId] = playlistSong.PlayTimes
+		mappedPlaylistSongsToCreatedAtSuka[playlistSong.SongId] = playlistSong.CreatedAt
 	}
 
 	songs := make([]entities.Song, len(dbPlaylists[0].Songs))
@@ -177,6 +180,7 @@ func (p *Service) Get(playlistPubId string, ownerId uint) (entities.Playlist, er
 			ThumbnailUrl: song.ThumbnailUrl,
 			Duration:     song.Duration,
 			PlayTimes:    mappedPlaylistSongsToPlaysSuka[song.Id],
+			AddedAt:      mappedPlaylistSongsToCreatedAtSuka[song.Id].Format("January 2nd 2006"),
 		}
 	}
 

From fd2419bf04185a931ab9ccbf96b9b9d29edc3ba6 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 00:55:03 +0300
Subject: [PATCH 15/97] chore(playlist): update style

---
 views/pages/playlist.templ | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 9937cbe..f7cd1b1 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -37,15 +37,15 @@ templ justPlaylist(pl entities.Playlist) {
 					} else {
 						<div
 							class={
-								"grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "xl:grid-cols-4", "2xl:grid-cols-5",
+								"w-full", "flex", "flex-col",
 								"gap-5", "lg:my-10",
 							}
 						>
 							for _, song := range pl.Songs {
 								<div
 									class={
-										"lg:w-[200px]", "lg:h-[200px]", "bg-white-trans-100", "rounded-[10px]", "px-5", "cursor-pointer",
-										"flex", "flex-row", "lg:flex-col", "lg:justify-center", "items-center", "gap-5",
+										"", "bg-white-trans-100", "rounded-[10px]", "p-2", "lg:p-5", "cursor-pointer",
+										"flex", "flex-row", "items-center", "gap-5",
 									}
 									onClick={ playSongFromPlaylist(song.YtId, pl) }
 								>
@@ -55,7 +55,16 @@ templ justPlaylist(pl entities.Playlist) {
 											songThumb(fmt.Sprintf("url(\"%s\")", song.ThumbnailUrl)), "bg-repeat", "bg-cover", "bg-center",
 										}
 									></div>
-									<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Title }</p>
+									<div class={ "flex", "flex-col", "lg:gap-2" }>
+										<p class={ "text-lg", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Title }</p>
+										<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Artist }</p>
+										<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Added on { song.AddedAt }</p>
+										if song.PlayTimes == 1 {
+											<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
+										} else if song.PlayTimes > 1 {
+											<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
+										}
+									</div>
 								</div>
 							}
 						</div>

From 6944af226cff820300fb7f835f1f75fb5b78ca2c Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 01:15:50 +0300
Subject: [PATCH 16/97] chore(docker): update uploads path

---
 docker-compose-beta.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker-compose-beta.yml b/docker-compose-beta.yml
index f780528..565a14f 100644
--- a/docker-compose-beta.yml
+++ b/docker-compose-beta.yml
@@ -28,4 +28,4 @@ volumes:
     driver_opts:
       type: none
       o: bind
-      device: /mnt/vault/blobs/dankmuzikk/muzikk/
+      device: ./_serve/

From b33ebb41834aacab938e84bb49f604579c2b3b8d Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 01:20:46 +0300
Subject: [PATCH 17/97] chore(playlist): update time format

---
 services/playlists/playlists.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/playlists/playlists.go b/services/playlists/playlists.go
index 7f326c8..8b772ff 100644
--- a/services/playlists/playlists.go
+++ b/services/playlists/playlists.go
@@ -180,7 +180,7 @@ func (p *Service) Get(playlistPubId string, ownerId uint) (entities.Playlist, er
 			ThumbnailUrl: song.ThumbnailUrl,
 			Duration:     song.Duration,
 			PlayTimes:    mappedPlaylistSongsToPlaysSuka[song.Id],
-			AddedAt:      mappedPlaylistSongsToCreatedAtSuka[song.Id].Format("January 2nd 2006"),
+			AddedAt:      mappedPlaylistSongsToCreatedAtSuka[song.Id].Format("2, January, 2006"),
 		}
 	}
 

From d56fb7ded6da56a78246338ef202de07fee180ff Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 12:06:15 +0300
Subject: [PATCH 18/97] fix(playlist): playlist and play button alignment

---
 views/pages/playlist.templ | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index f7cd1b1..7707c49 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -23,13 +23,15 @@ templ justPlaylist(pl entities.Playlist) {
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
 				}
 			>
-				<div class={ "flex", "justify-between", "w-full" }>
+				<div class={ "flex", "justify-between", "items-center", "w-full" }>
 					<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>{ pl.Title }</h1>
-					<button
-						type="button"
-						title="Play playlist"
-						onClick={ playPlaylist(pl) }
-					><img src="/static/images/play-playlist-icon.svg" alt="Play"/></button>
+					if pl.Songs != nil && len(pl.Songs) > 0 {
+						<button
+							type="button"
+							title="Play playlist"
+							onClick={ playPlaylist(pl) }
+						><img src="/static/images/play-playlist-icon.svg" alt="Play"/></button>
+					}
 				</div>
 				<div id="playlists-listing">
 					if pl.Songs == nil || len(pl.Songs) == 0 {

From 958fe1e735c4af138e502ad8077d39554f23e798 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 12:19:56 +0300
Subject: [PATCH 19/97] chore(playlist): add songs count to the mix

---
 views/pages/playlist.templ | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 7707c49..e66818a 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -24,7 +24,10 @@ templ justPlaylist(pl entities.Playlist) {
 				}
 			>
 				<div class={ "flex", "justify-between", "items-center", "w-full" }>
-					<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>{ pl.Title }</h1>
+					<div class={ "flex", "flex-col", "gap-y-1" }>
+						<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>{ pl.Title }</h1>
+						<p class={ "text-white", "text-md" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>
+					</div>
 					if pl.Songs != nil && len(pl.Songs) > 0 {
 						<button
 							type="button"

From 39ebb12069e72cef4d26ecbafda8f066e4998027 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 12:25:08 +0300
Subject: [PATCH 20/97] chore(playlist): add songs count to the main view

---
 views/pages/playlists.templ | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index 400bc58..f147844 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -57,11 +57,14 @@ templ JustPlaylists(pls []entities.Playlist) {
 templ singlePlaylist(pl entities.Playlist) {
 	<div
 		class={
-			"lg:w-[200px]", "lg:h-[200px]", "bg-white-trans-100", "rounded-[10px]", "px-5",
-			"flex", "flex-row", "lg:flex-col", "lg:justify-center", "items-center", "gap-5",
+			"lg:w-[200px]", "lg:h-[200px]", "bg-white-trans-100", "rounded-[10px]", "px-5", "py-2",
+			"flex", "flex-row", "lg:flex-col", "lg:justify-center", "items-center", "gap-x-5", "lg:gap-x-0",
 		}
 	>
 		<img src="/static/images/album-cover-icon.svg" class={ "lg:w-[125px]", "lg:h-[125px]" } alt=""/>
-		<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ pl.Title }</p>
+		<div class={ "lg:text-center" }>
+			<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ pl.Title }</p>
+			<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>
+		</div>
 	</div>
 }

From 03762d66c0928325dc6bb5beac6d167b2eaebdff Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 18:30:59 +0300
Subject: [PATCH 21/97] refactor(pages): add passed down values to context

---
 handlers/handler.go | 26 ++++++++++++++++++++++++--
 handlers/keys.go    |  2 ++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/handlers/handler.go b/handlers/handler.go
index 8e8da2f..924971b 100644
--- a/handlers/handler.go
+++ b/handlers/handler.go
@@ -8,6 +8,7 @@ import (
 	"dankmuzikk/services/jwt"
 	"net/http"
 	"slices"
+	"strings"
 )
 
 var noAuthPaths = []string{"/login", "/signup"}
@@ -62,11 +63,13 @@ func (a *Handler) AuthPage(h http.HandlerFunc) http.HandlerFunc {
 	})
 }
 
-// NoAuthPage returns a page's handler after setting Content-Type to text/html.
+// NoAuthPage returns a page's handler after setting Content-Type to text/html, and some context values.
 func (a *Handler) NoAuthPage(h http.HandlerFunc) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Content-Type", "text/html; charset=utf-8")
-		h(w, r)
+		ctx := context.WithValue(r.Context(), ThemeKey, getTheme(r))
+		ctx = context.WithValue(ctx, IsMobileKey, isMobile(r))
+		h(w, r.WithContext(ctx))
 	}
 }
 
@@ -126,6 +129,25 @@ func (a *Handler) authenticate(r *http.Request) (uint, error) {
 	return profile.Id, nil
 }
 
+func isMobile(r *http.Request) bool {
+	return strings.Contains(strings.ToLower(r.Header.Get("User-Agent")), "mobile")
+}
+
+func getTheme(r *http.Request) string {
+	themeCookie, err := r.Cookie(ThemeName)
+	if err != nil || themeCookie == nil || themeCookie.Value == "" {
+		return "default"
+	}
+	switch themeCookie.Value {
+	case "black":
+		return "black"
+	case "default":
+		fallthrough
+	default:
+		return "default"
+	}
+}
+
 // IsNoReloadPage checks if the requested page requires a no reload or not.
 func IsNoReloadPage(r *http.Request) bool {
 	noReload, exists := r.URL.Query()["no_reload"]
diff --git a/handlers/keys.go b/handlers/keys.go
index 78ed4b3..b451293 100644
--- a/handlers/keys.go
+++ b/handlers/keys.go
@@ -10,4 +10,6 @@ const (
 // Context keys
 const (
 	ProfileIdKey = "profile-id"
+	ThemeKey     = "theme-name"
+	IsMobileKey  = "is-mobile"
 )

From 877283ae689a755a087f7de987958a5ec5a120d7 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 18:43:59 +0300
Subject: [PATCH 22/97] refactor(layout): use context in layout

---
 views/components/header/header.templ | 4 ++--
 views/components/player/player.templ | 4 ++--
 views/layouts/default.templ          | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index 58d292b..c20ea45 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -72,10 +72,10 @@ templ desktopHeader() {
 	</div>
 }
 
-templ Header(isMobile bool) {
+templ Header() {
 	<header id="dank-header" class={ "bg-accent", "p-[20px]", "md:p-[10px]" }>
 		// mobiles are usually shitty at rendering, so this prevents mobiles from rendering two blocks and choosing one using CSS.
-		if isMobile {
+		if ctx.Value("is-mobile").(bool) {
 			@mobileHeader()
 		} else {
 			<div style="display: contents" class={ "hidden", "md:block" }>
diff --git a/views/components/player/player.templ b/views/components/player/player.templ
index 2129b01..f3c1067 100644
--- a/views/components/player/player.templ
+++ b/views/components/player/player.templ
@@ -1,8 +1,8 @@
 package player
 
-templ PlayerSticky(isMobile bool) {
+templ PlayerSticky() {
 	<div id="muzikk" class="hidden">
-		if isMobile {
+		if ctx.Value("is-mobile").(bool) {
 			@mobilePlayer()
 		} else {
 			@desktopPlayer()
diff --git a/views/layouts/default.templ b/views/layouts/default.templ
index afb4f1e..3717011 100644
--- a/views/layouts/default.templ
+++ b/views/layouts/default.templ
@@ -8,7 +8,7 @@ import (
 	"dankmuzikk/views/components/mobilenav"
 )
 
-templ Default(isMobile bool, themeName string, children ...templ.Component) {
+templ Default(children ...templ.Component) {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
@@ -42,7 +42,7 @@ templ Default(isMobile bool, themeName string, children ...templ.Component) {
 				href="/static/css/ubuntu-font.css"
 			/>
 			<link href="/static/css/tailwind.css" rel="stylesheet"/>
-			<link href={ fmt.Sprintf("/static/css/themes/%s.css", themeName) } rel="stylesheet"/>
+			<link href={ fmt.Sprintf("/static/css/themes/%s.css", ctx.Value("theme-name").(string)) } rel="stylesheet"/>
 			<script src="/static/js/htmx/htmx.min.js"></script>
 			<script async defer src="/static/js/htmx/json-enc.js"></script>
 			<script async defer src="/static/js/htmx/loading-states.js"></script>
@@ -60,7 +60,7 @@ templ Default(isMobile bool, themeName string, children ...templ.Component) {
                 font-family: "Ubuntu";
             '
 		>
-			@header.Header(isMobile)
+			@header.Header()
 			<div id="main-contents" style="display: contents">
 				for _, child := range children {
 					@child
@@ -77,7 +77,7 @@ templ Default(isMobile bool, themeName string, children ...templ.Component) {
 			<div id="loading" class="hidden">
 				@loading.Loading()
 			</div>
-			@player.PlayerSticky(isMobile)
+			@player.PlayerSticky()
 			//
 			<script src="/static/js/utils.js"></script>
 			<script type="module">

From 1b4312b6dc22b67e39d61f685da227fc04102eaf Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 18:52:26 +0300
Subject: [PATCH 23/97] refactor(pages): reflected usage of context

---
 handlers/pages/pages.go          | 35 ++++++++++++++++----------------
 views/pages/about.templ          |  4 ++--
 views/pages/index.templ          |  4 ++--
 views/pages/login.templ          |  4 ++--
 views/pages/playlist.templ       |  4 ++--
 views/pages/playlists.templ      |  6 +++---
 views/pages/privacy.templ        |  4 ++--
 views/pages/profile.templ        |  4 ++--
 views/pages/search_results.templ |  4 ++--
 views/pages/signup.templ         |  4 ++--
 10 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
index 85dbeb9..239447b 100644
--- a/handlers/pages/pages.go
+++ b/handlers/pages/pages.go
@@ -1,7 +1,6 @@
 package pages
 
 import (
-	"context"
 	"dankmuzikk/config"
 	"dankmuzikk/db"
 	"dankmuzikk/entities"
@@ -36,24 +35,24 @@ func NewPagesHandler(
 	return &pagesHandler{profileRepo, playlistsService, jwtUtil}
 }
 
-func (p *pagesHandler) HandleAboutPage(w http.ResponseWriter, r *http.Request) {
+func (p *pagesHandler) HandleHomePage(w http.ResponseWriter, r *http.Request) {
 	if handlers.IsNoReloadPage(r) {
-		pages.AboutNoReload().Render(context.Background(), w)
+		pages.IndexNoReload().Render(r.Context(), w)
 		return
 	}
-	pages.About(p.isMobile(r), p.getTheme(r)).Render(context.Background(), w)
+	pages.Index().Render(r.Context(), w)
 }
 
-func (p *pagesHandler) HandleHomePage(w http.ResponseWriter, r *http.Request) {
+func (p *pagesHandler) HandleAboutPage(w http.ResponseWriter, r *http.Request) {
 	if handlers.IsNoReloadPage(r) {
-		pages.IndexNoReload().Render(context.Background(), w)
+		pages.AboutNoReload().Render(r.Context(), w)
 		return
 	}
-	pages.Index(p.isMobile(r), p.getTheme(r)).Render(context.Background(), w)
+	pages.About().Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleLoginPage(w http.ResponseWriter, r *http.Request) {
-	pages.Login(p.isMobile(r), p.getTheme(r)).Render(context.Background(), w)
+	pages.Login().Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandlePlaylistsPage(w http.ResponseWriter, r *http.Request) {
@@ -69,10 +68,10 @@ func (p *pagesHandler) HandlePlaylistsPage(w http.ResponseWriter, r *http.Reques
 	}
 
 	if handlers.IsNoReloadPage(r) {
-		pages.PlaylistsNoReload(playlists).Render(context.Background(), w)
+		pages.PlaylistsNoReload(playlists).Render(r.Context(), w)
 		return
 	}
-	pages.Playlists(p.isMobile(r), p.getTheme(r), playlists).Render(context.Background(), w)
+	pages.Playlists(playlists).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleSinglePlaylistPage(w http.ResponseWriter, r *http.Request) {
@@ -96,14 +95,14 @@ func (p *pagesHandler) HandleSinglePlaylistPage(w http.ResponseWriter, r *http.R
 	_ = playlist
 
 	if handlers.IsNoReloadPage(r) {
-		pages.PlaylistNoReload(playlist).Render(context.Background(), w)
+		pages.PlaylistNoReload(playlist).Render(r.Context(), w)
 		return
 	}
-	pages.Playlist(p.isMobile(r), p.getTheme(r), playlist).Render(context.Background(), w)
+	pages.Playlist(playlist).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandlePrivacyPage(w http.ResponseWriter, r *http.Request) {
-	pages.Privacy(p.isMobile(r), p.getTheme(r)).Render(context.Background(), w)
+	pages.Privacy().Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request) {
@@ -124,10 +123,10 @@ func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request)
 		Username: dbProfile.Username,
 	}
 	if handlers.IsNoReloadPage(r) {
-		pages.ProfileNoReload(profile).Render(context.Background(), w)
+		pages.ProfileNoReload(profile).Render(r.Context(), w)
 		return
 	}
-	pages.Profile(p.isMobile(r), p.getTheme(r), profile).Render(context.Background(), w)
+	pages.Profile(profile).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleSearchResultsPage(ytSearch search.Service) http.HandlerFunc {
@@ -161,15 +160,15 @@ func (p *pagesHandler) HandleSearchResultsPage(ytSearch search.Service) http.Han
 		}
 
 		if handlers.IsNoReloadPage(r) {
-			pages.SearchResultsNoReload(results, playlists, songsInPlaylists).Render(context.Background(), w)
+			pages.SearchResultsNoReload(results, playlists, songsInPlaylists).Render(r.Context(), w)
 			return
 		}
-		pages.SearchResults(p.isMobile(r), p.getTheme(r), results, playlists, songsInPlaylists).Render(context.Background(), w)
+		pages.SearchResults(results, playlists, songsInPlaylists).Render(r.Context(), w)
 	}
 }
 
 func (p *pagesHandler) HandleSignupPage(w http.ResponseWriter, r *http.Request) {
-	pages.Signup(p.isMobile(r), p.getTheme(r)).Render(context.Background(), w)
+	pages.Signup().Render(r.Context(), w)
 }
 
 func (p *pagesHandler) isMobile(r *http.Request) bool {
diff --git a/views/pages/about.templ b/views/pages/about.templ
index e190824..335be41 100644
--- a/views/pages/about.templ
+++ b/views/pages/about.templ
@@ -3,8 +3,8 @@ package pages
 import "dankmuzikk/views/layouts"
 import "dankmuzikk/views/components/info"
 
-templ About(isMobile bool, themeName string) {
-	@layouts.Default(isMobile, themeName, about())
+templ About() {
+	@layouts.Default(about())
 }
 
 templ AboutNoReload() {
diff --git a/views/pages/index.templ b/views/pages/index.templ
index 7d3cd76..4c83a47 100644
--- a/views/pages/index.templ
+++ b/views/pages/index.templ
@@ -5,8 +5,8 @@ import (
 	"dankmuzikk/views/components/navlink"
 )
 
-templ Index(isMobile bool, themeName string) {
-	@layouts.Default(isMobile, themeName, main())
+templ Index() {
+	@layouts.Default(main())
 }
 
 templ IndexNoReload() {
diff --git a/views/pages/login.templ b/views/pages/login.templ
index 27270bc..4f59688 100644
--- a/views/pages/login.templ
+++ b/views/pages/login.templ
@@ -9,8 +9,8 @@ import (
    This page uses desktop design after lg (1024px)
 */
 
-templ Login(isMobile bool, themeName string) {
-	@layouts.Default(isMobile, themeName, login())
+templ Login() {
+	@layouts.Default(login())
 }
 
 templ login() {
diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index e66818a..324e209 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -6,8 +6,8 @@ import (
 	"fmt"
 )
 
-templ Playlist(isMobile bool, themeName string, pl entities.Playlist) {
-	@layouts.Default(isMobile, themeName, justPlaylist(pl))
+templ Playlist(pl entities.Playlist) {
+	@layouts.Default(justPlaylist(pl))
 }
 
 templ PlaylistNoReload(pl entities.Playlist) {
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index f147844..372d5b0 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -8,8 +8,8 @@ import (
 	"dankmuzikk/views/components/navlink"
 )
 
-templ Playlists(isMobile bool, themeName string, pls []entities.Playlist) {
-	@layouts.Default(isMobile, themeName, playlists(pls))
+templ Playlists(pls []entities.Playlist) {
+	@layouts.Default(playlists(pls))
 }
 
 templ PlaylistsNoReload(pls []entities.Playlist) {
@@ -25,7 +25,7 @@ templ playlists(pls []entities.Playlist) {
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
 				}
 			>
-				<div class={ "flex", "justify-between", "w-full" }>
+				<div class={ "flex", "justify-between", "items-center", "w-full" }>
 					<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>Playlists</h1>
 					@playlist.NewPlaylistPlaylistsPopover()
 				</div>
diff --git a/views/pages/privacy.templ b/views/pages/privacy.templ
index 8f234c9..ab2ac0c 100644
--- a/views/pages/privacy.templ
+++ b/views/pages/privacy.templ
@@ -2,8 +2,8 @@ package pages
 
 import "dankmuzikk/views/layouts"
 
-templ Privacy(isMobile bool, themeName string) {
-	@layouts.Default(isMobile, themeName, privacy())
+templ Privacy() {
+	@layouts.Default(privacy())
 }
 
 templ privacy() {
diff --git a/views/pages/profile.templ b/views/pages/profile.templ
index 57e43d8..0fc7e3d 100644
--- a/views/pages/profile.templ
+++ b/views/pages/profile.templ
@@ -6,8 +6,8 @@ import (
 	"dankmuzikk/views/components/themeswitch"
 )
 
-templ Profile(isMobile bool, themeName string, prfl entities.Profile) {
-	@layouts.Default(isMobile, themeName, profile(prfl))
+templ Profile(prfl entities.Profile) {
+	@layouts.Default(profile(prfl))
 }
 
 templ ProfileNoReload(prfl entities.Profile) {
diff --git a/views/pages/search_results.templ b/views/pages/search_results.templ
index db90840..582112a 100644
--- a/views/pages/search_results.templ
+++ b/views/pages/search_results.templ
@@ -9,8 +9,8 @@ import (
 
 type SearchResult = search.Result
 
-templ SearchResults(isMobile bool, themeName string, results []SearchResult, playlists []entities.Playlist, songsInPlaylists map[string]string) {
-	@layouts.Default(isMobile, themeName, searchResults(results, playlists, songsInPlaylists))
+templ SearchResults(results []SearchResult, playlists []entities.Playlist, songsInPlaylists map[string]string) {
+	@layouts.Default(searchResults(results, playlists, songsInPlaylists))
 }
 
 templ SearchResultsNoReload(results []SearchResult, playlists []entities.Playlist, songsInPlaylists map[string]string) {
diff --git a/views/pages/signup.templ b/views/pages/signup.templ
index 90b54d1..8eef620 100644
--- a/views/pages/signup.templ
+++ b/views/pages/signup.templ
@@ -9,8 +9,8 @@ import (
    This page uses desktop design after lg (1024px)
 */
 
-templ Signup(isMobile bool, themeName string) {
-	@layouts.Default(isMobile, themeName, signup())
+templ Signup() {
+	@layouts.Default(signup())
 }
 
 templ signup() {

From 239e5f1633f7a6853a75d5be10e61f5c56254c96 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 18:54:21 +0300
Subject: [PATCH 24/97] chore(pages): remove unused methods

---
 handlers/pages/pages.go | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
index 239447b..20e5356 100644
--- a/handlers/pages/pages.go
+++ b/handlers/pages/pages.go
@@ -12,7 +12,6 @@ import (
 	"dankmuzikk/services/youtube/search"
 	"dankmuzikk/views/pages"
 	"net/http"
-	"strings"
 
 	_ "github.com/a-h/templ"
 )
@@ -170,22 +169,3 @@ func (p *pagesHandler) HandleSearchResultsPage(ytSearch search.Service) http.Han
 func (p *pagesHandler) HandleSignupPage(w http.ResponseWriter, r *http.Request) {
 	pages.Signup().Render(r.Context(), w)
 }
-
-func (p *pagesHandler) isMobile(r *http.Request) bool {
-	return strings.Contains(strings.ToLower(r.Header.Get("User-Agent")), "mobile")
-}
-
-func (p *pagesHandler) getTheme(r *http.Request) string {
-	themeCookie, err := r.Cookie(handlers.ThemeName)
-	if err != nil || themeCookie == nil || themeCookie.Value == "" {
-		return "default"
-	}
-	switch themeCookie.Value {
-	case "black":
-		return "black"
-	case "default":
-		fallthrough
-	default:
-		return "default"
-	}
-}

From 3239936618ddb13791b05605a22aabc5dc7344b4 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 19:25:04 +0300
Subject: [PATCH 25/97] chore(login): big login suka

---
 static/js/login.js       | 17 --------
 views/layouts/raw.templ  | 91 ++++++++++++++++++++++++++++++++++++++++
 views/pages/login.templ  | 14 +++----
 views/pages/signup.templ | 14 +++----
 4 files changed, 105 insertions(+), 31 deletions(-)
 delete mode 100644 static/js/login.js
 create mode 100644 views/layouts/raw.templ

diff --git a/static/js/login.js b/static/js/login.js
deleted file mode 100644
index 08bd421..0000000
--- a/static/js/login.js
+++ /dev/null
@@ -1,17 +0,0 @@
-"use strict";
-
-function setContainerFullHeight(id) {
-  document.getElementById(id).style.height =
-    (
-      window.innerHeight -
-      document.getElementById("dank-header").getBoundingClientRect().height
-    ).toString() + "px";
-}
-window.addEventListener("load", () => {
-  setContainerFullHeight("frank");
-  setContainerFullHeight("login-form");
-});
-window.addEventListener("resize", () => {
-  setContainerFullHeight("frank");
-  setContainerFullHeight("login-form");
-});
diff --git a/views/layouts/raw.templ b/views/layouts/raw.templ
new file mode 100644
index 0000000..efc610f
--- /dev/null
+++ b/views/layouts/raw.templ
@@ -0,0 +1,91 @@
+package layouts
+
+import (
+	"dankmuzikk/views/components/loading"
+	"fmt"
+)
+
+templ Raw(children ...templ.Component) {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			<meta charset="UTF-8"/>
+			<title>DankMuzikk</title>
+			<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
+			<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
+			<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
+			<link rel="manifest" href="/static/site.webmanifest"/>
+			<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#4C8C36"/>
+			<meta name="msapplication-TileColor" content="#4C8C36"/>
+			<meta name="theme-color" content="#4C8C36"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1"/>
+			<meta name="description" content="Create, Share and Play Music Playlists."/>
+			<meta
+				name="keywords"
+				content="dankmuzikk,dank,dank music,music,music playlist,share playlist,group playlist"
+			/>
+			<link
+				async
+				defer
+				rel="stylesheet"
+				type="text/css"
+				href="/static/css/player-seeker.css"
+			/>
+			<link
+				async
+				defer
+				rel="stylesheet"
+				type="text/css"
+				href="/static/css/ubuntu-font.css"
+			/>
+			<link href="/static/css/tailwind.css" rel="stylesheet"/>
+			<link href={ fmt.Sprintf("/static/css/themes/%s.css", ctx.Value("theme-name").(string)) } rel="stylesheet"/>
+			<script src="/static/js/htmx/htmx.min.js"></script>
+			<script async defer src="/static/js/htmx/json-enc.js"></script>
+			<script async defer src="/static/js/htmx/loading-states.js"></script>
+		</head>
+		<body
+			hx-ext="loading-states"
+			style='
+                background-repeat: repeat;
+                background-size: cover;
+                padding: 0px;
+                margin: 0px;
+                background-position: center;
+                background-attachment: fixed;
+                min-height: 100dvh;
+                font-family: "Ubuntu";
+            '
+		>
+			<div id="main-contents" style="display: contents">
+				for _, child := range children {
+					@child
+				}
+			</div>
+			<div id="loading" class="hidden">
+				@loading.Loading()
+			</div>
+			//
+			<script src="/static/js/utils.js"></script>
+			<script type="module">
+			    function registerServiceWorkers() {
+			    	if (!("serviceWorker" in navigator)) {
+			    		console.error("Browser doesn't support service workers");
+			    		return;
+			    	}
+			    	window.addEventListener("load", () => {
+			    		navigator.serviceWorker
+			    			.register("/static/js/service-worker.js")
+			    			.then((reg) => {
+			    				console.log("Service Worker Registered", reg);
+			    			})
+			    			.catch((err) => {
+			    				console.log("Service Worker Registration failed:", err);
+			    			});
+		                });
+			    }
+			    registerServiceWorkers();
+		    </script>
+		</body>
+	</html>
+}
diff --git a/views/pages/login.templ b/views/pages/login.templ
index 4f59688..bad783f 100644
--- a/views/pages/login.templ
+++ b/views/pages/login.templ
@@ -10,18 +10,17 @@ import (
 */
 
 templ Login() {
-	@layouts.Default(login())
+	@layouts.Raw(login())
 }
 
 templ login() {
-	<main id="main-login-container" class={ "w-full", "h-fit", "flex" }>
+	<main id="main-login-container" class={ "w-full", "h-screen", "flex" }>
 		<!-- frank and details -->
 		<div class={ "hidden", "lg:block", "relative", "w-[70%]", "xl:w-full", "h-fit", "flex" }>
 			<!-- frank -->
 			<div
-				id="frank"
 				class={
-					"w-full", "h-[90vh]", "bg-accent", "bg-[url('/static/images/frank-cropped.png')]",
+					"w-full", "h-screen", "bg-accent", "bg-[url('/static/images/frank-cropped.png')]",
 					"bg-repeat", "bg-cover", "bg-center",
 				}
 			></div>
@@ -35,12 +34,14 @@ templ login() {
 		</div>
 		<!-- login form -->
 		<div
-			id="login-form"
 			class={
 				"w-full", "p-[15px]", "lg:px-[40px]",
 				"bg-black-trans-500", "flex", "flex-col", "justify-center", "items-center",
 			}
 		>
+			<div class={ "block", "lg:hidden", "mb-5" }>
+				@info.Intro()
+			</div>
 			<div
 				id="replaceable-login-form"
 				class={
@@ -65,7 +66,6 @@ templ login() {
 			</div>
 		</div>
 	</main>
-	<script src="/static/js/login.js"></script>
 }
 
 templ loginForm() {
@@ -89,7 +89,7 @@ templ loginForm() {
 				autofocus
 			/>
 		</div>
-		<div class={ "flex", "justify-between", "gap-x-[10px]", "lg:gap-x-[30px]" }>
+		<div class={ "flex", "flex-col-reverse", "lg:flex-row", "lg:justify-between", "gap-[15px]", "lg:gap-x-[30px]", "mt-4" }>
 			<a class={ "w-full" } href="/api/login/google" title="Login with Google">
 				<button
 					type="button"
diff --git a/views/pages/signup.templ b/views/pages/signup.templ
index 8eef620..253c638 100644
--- a/views/pages/signup.templ
+++ b/views/pages/signup.templ
@@ -10,18 +10,17 @@ import (
 */
 
 templ Signup() {
-	@layouts.Default(signup())
+	@layouts.Raw(signup())
 }
 
 templ signup() {
-	<main id="main-login-container" class={ "w-full", "h-fit", "flex" }>
+	<main id="main-login-container" class={ "w-full", "h-screen", "flex" }>
 		<!-- frank and details -->
 		<div class={ "hidden", "lg:block", "relative", "w-[70%]", "xl:w-full", "h-fit", "flex" }>
 			<!-- frank -->
 			<div
-				id="frank"
 				class={
-					"w-full", "h-[90vh]", "bg-accent", "bg-[url('/static/images/frank-cropped.png')]",
+					"w-full", "h-screen", "bg-accent", "bg-[url('/static/images/frank-cropped.png')]",
 					"bg-repeat", "bg-cover", "bg-center",
 				}
 			></div>
@@ -35,12 +34,14 @@ templ signup() {
 		</div>
 		<!-- signup form -->
 		<div
-			id="login-form"
 			class={
 				"w-full", "p-[15px]", "lg:px-[40px]",
 				"bg-black-trans-500", "flex", "flex-col", "justify-center", "items-center",
 			}
 		>
+			<div class={ "block", "lg:hidden", "mb-5" }>
+				@info.Intro()
+			</div>
 			<div
 				id="replaceable-login-form"
 				class={
@@ -65,7 +66,6 @@ templ signup() {
 			</div>
 		</div>
 	</main>
-	<script src="/static/js/login.js"></script>
 }
 
 templ signupForm() {
@@ -98,7 +98,7 @@ templ signupForm() {
 				placeholder="Enter your email"
 			/>
 		</div>
-		<div class={ "flex", "justify-between", "gap-x-[10px]", "lg:gap-x-[30px]" }>
+		<div class={ "flex", "flex-col-reverse", "lg:flex-row", "lg:justify-between", "gap-[15px]", "lg:gap-x-[30px]", "mt-4" }>
 			<a class={ "w-full" } href="/api/signup/google" title="Sign up with Google">
 				<button
 					type="button"

From 2bffde7c30a7947bff2df6d3285a9bda3c11c16f Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 19:32:50 +0300
Subject: [PATCH 26/97] chore(pages): change `no_reload` to `no_layout`

---
 handlers/handler.go                              |  8 ++++----
 handlers/pages/pages.go                          | 14 +++++++-------
 views/components/navlink/navlink.templ           |  4 ++--
 views/components/search/search.templ             |  4 ++--
 views/components/search/search_suggestions.templ |  4 ++--
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/handlers/handler.go b/handlers/handler.go
index 924971b..f4e2df3 100644
--- a/handlers/handler.go
+++ b/handlers/handler.go
@@ -44,7 +44,7 @@ func (a *Handler) OptionalAuthPage(h http.HandlerFunc) http.HandlerFunc {
 // AuthPage authenticates a page's handler.
 func (a *Handler) AuthPage(h http.HandlerFunc) http.HandlerFunc {
 	return a.NoAuthPage(func(w http.ResponseWriter, r *http.Request) {
-		htmxRedirect := IsNoReloadPage(r)
+		htmxRedirect := IsNoLayoutPage(r)
 		profileId, err := a.authenticate(r)
 		authed := err == nil
 
@@ -148,8 +148,8 @@ func getTheme(r *http.Request) string {
 	}
 }
 
-// IsNoReloadPage checks if the requested page requires a no reload or not.
-func IsNoReloadPage(r *http.Request) bool {
-	noReload, exists := r.URL.Query()["no_reload"]
+// IsNoLayoutPage checks if the requested page requires a no reload or not.
+func IsNoLayoutPage(r *http.Request) bool {
+	noReload, exists := r.URL.Query()["no_layout"]
 	return exists && noReload[0] == "true"
 }
diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
index 20e5356..95c25fb 100644
--- a/handlers/pages/pages.go
+++ b/handlers/pages/pages.go
@@ -35,7 +35,7 @@ func NewPagesHandler(
 }
 
 func (p *pagesHandler) HandleHomePage(w http.ResponseWriter, r *http.Request) {
-	if handlers.IsNoReloadPage(r) {
+	if handlers.IsNoLayoutPage(r) {
 		pages.IndexNoReload().Render(r.Context(), w)
 		return
 	}
@@ -43,7 +43,7 @@ func (p *pagesHandler) HandleHomePage(w http.ResponseWriter, r *http.Request) {
 }
 
 func (p *pagesHandler) HandleAboutPage(w http.ResponseWriter, r *http.Request) {
-	if handlers.IsNoReloadPage(r) {
+	if handlers.IsNoLayoutPage(r) {
 		pages.AboutNoReload().Render(r.Context(), w)
 		return
 	}
@@ -66,7 +66,7 @@ func (p *pagesHandler) HandlePlaylistsPage(w http.ResponseWriter, r *http.Reques
 		playlists = make([]entities.Playlist, 0)
 	}
 
-	if handlers.IsNoReloadPage(r) {
+	if handlers.IsNoLayoutPage(r) {
 		pages.PlaylistsNoReload(playlists).Render(r.Context(), w)
 		return
 	}
@@ -93,7 +93,7 @@ func (p *pagesHandler) HandleSinglePlaylistPage(w http.ResponseWriter, r *http.R
 	}
 	_ = playlist
 
-	if handlers.IsNoReloadPage(r) {
+	if handlers.IsNoLayoutPage(r) {
 		pages.PlaylistNoReload(playlist).Render(r.Context(), w)
 		return
 	}
@@ -107,7 +107,7 @@ func (p *pagesHandler) HandlePrivacyPage(w http.ResponseWriter, r *http.Request)
 func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request) {
 	profileId, profileIdCorrect := r.Context().Value(handlers.ProfileIdKey).(uint)
 	if !profileIdCorrect {
-		if handlers.IsNoReloadPage(r) {
+		if handlers.IsNoLayoutPage(r) {
 			w.Header().Set("HX-Redirect", "/")
 		} else {
 			http.Redirect(w, r, config.Env().Hostname, http.StatusTemporaryRedirect)
@@ -121,7 +121,7 @@ func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request)
 		PfpLink:  dbProfile.PfpLink,
 		Username: dbProfile.Username,
 	}
-	if handlers.IsNoReloadPage(r) {
+	if handlers.IsNoLayoutPage(r) {
 		pages.ProfileNoReload(profile).Render(r.Context(), w)
 		return
 	}
@@ -158,7 +158,7 @@ func (p *pagesHandler) HandleSearchResultsPage(ytSearch search.Service) http.Han
 			playlists, songsInPlaylists, _ = p.playlistsService.GetAllMappedForAddPopover(songs, profileId)
 		}
 
-		if handlers.IsNoReloadPage(r) {
+		if handlers.IsNoLayoutPage(r) {
 			pages.SearchResultsNoReload(results, playlists, songsInPlaylists).Render(r.Context(), w)
 			return
 		}
diff --git a/views/components/navlink/navlink.templ b/views/components/navlink/navlink.templ
index 3d3382c..8af55b0 100644
--- a/views/components/navlink/navlink.templ
+++ b/views/components/navlink/navlink.templ
@@ -5,7 +5,7 @@ templ NavLink(title, imageUrl, path string) {
 		href={ templ.SafeURL(path) }
 		title={ title }
 		class={ "cursor-pointer", "underline", "hover:no-underline" , "inline-block" }
-		hx-get={ path + "?no_reload=true" }
+		hx-get={ path + "?no_layout=true" }
 		hx-target="#main-contents"
 		hx-swap="innerHTML"
 		hx-trigger="click,submit"
@@ -23,7 +23,7 @@ templ LinkContainer(path string, child templ.Component) {
 	<a
 		href={ templ.SafeURL(path) }
 		class={ "cursor-pointer" }
-		hx-get={ path + "?no_reload=true" }
+		hx-get={ path + "?no_layout=true" }
 		hx-target="#main-contents"
 		hx-swap="innerHTML"
 		hx-trigger="click,submit"
diff --git a/views/components/search/search.templ b/views/components/search/search.templ
index fca1523..d549b89 100644
--- a/views/components/search/search.templ
+++ b/views/components/search/search.templ
@@ -5,13 +5,13 @@ templ Search() {
 		<form
 			id="search-form"
 			class={ "w-full" }
-			hx-get="/search?no_reload=true"
+			hx-get="/search?no_layout=true"
 			hx-swap="innerHTML"
 			hx-target="#main-contents"
 			hx-trigger="submit"
 			data-loading-target="#loading"
 			data-loading-class-remove="hidden"
-			data-loading-path="/search?no_reload=true"
+			data-loading-path="/search?no_layout=true"
 		>
 			<div class={ "flex", "bg-white", "rounded-[8px]", "border", "border-b-[3px]", "border-black" }>
 				<input
diff --git a/views/components/search/search_suggestions.templ b/views/components/search/search_suggestions.templ
index 65208ad..61e45ed 100644
--- a/views/components/search/search_suggestions.templ
+++ b/views/components/search/search_suggestions.templ
@@ -12,13 +12,13 @@ templ SearchSuggestions(suggestions []string, originalQuery string) {
 			>
 				<a
 					href={ templ.SafeURL(fmt.Sprintf("/search?query=%s", suggestion)) }
-					hx-get={ fmt.Sprintf("/search?no_reload=true&query=%s", suggestion) }
+					hx-get={ fmt.Sprintf("/search?no_layout=true&query=%s", suggestion) }
 					hx-swap="innerHTML"
 					hx-target="#main-contents"
 					hx-trigger="click,submit"
 					data-loading-target="#loading"
 					data-loading-class-remove="hidden"
-					data-loading-path={ fmt.Sprintf("/search?no_reload=true&query=%s", suggestion) }
+					data-loading-path={ fmt.Sprintf("/search?no_layout=true&query=%s", suggestion) }
 					class={ "w-full", "p-[10px]" }
 					id={ fmt.Sprintf("search-suggestion-%d", i) }
 					onClick={ searchNoRealod(suggestion) }

From ab52dc419f41de80d35c1ae7aae8f722c043c034 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Thu, 16 May 2024 19:41:29 +0300
Subject: [PATCH 27/97] chore(pages): remove sneaky dependency on the layout

---
 handlers/pages/pages.go          | 31 ++++++++++++++++---------------
 views/pages/about.templ          |  9 ---------
 views/pages/index.templ          |  9 ---------
 views/pages/login.templ          |  5 -----
 views/pages/playlist.templ       |  9 ---------
 views/pages/playlists.templ      |  9 ---------
 views/pages/privacy.templ        |  6 ------
 views/pages/profile.templ        |  9 ---------
 views/pages/search_results.templ |  9 ---------
 views/pages/signup.templ         |  5 -----
 10 files changed, 16 insertions(+), 85 deletions(-)

diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
index 95c25fb..a17823a 100644
--- a/handlers/pages/pages.go
+++ b/handlers/pages/pages.go
@@ -10,6 +10,7 @@ import (
 	"dankmuzikk/services/jwt"
 	"dankmuzikk/services/playlists"
 	"dankmuzikk/services/youtube/search"
+	"dankmuzikk/views/layouts"
 	"dankmuzikk/views/pages"
 	"net/http"
 
@@ -36,22 +37,22 @@ func NewPagesHandler(
 
 func (p *pagesHandler) HandleHomePage(w http.ResponseWriter, r *http.Request) {
 	if handlers.IsNoLayoutPage(r) {
-		pages.IndexNoReload().Render(r.Context(), w)
+		pages.Index().Render(r.Context(), w)
 		return
 	}
-	pages.Index().Render(r.Context(), w)
+	layouts.Default(pages.Index()).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleAboutPage(w http.ResponseWriter, r *http.Request) {
 	if handlers.IsNoLayoutPage(r) {
-		pages.AboutNoReload().Render(r.Context(), w)
+		pages.About().Render(r.Context(), w)
 		return
 	}
-	pages.About().Render(r.Context(), w)
+	layouts.Default(pages.About()).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleLoginPage(w http.ResponseWriter, r *http.Request) {
-	pages.Login().Render(r.Context(), w)
+	layouts.Raw(pages.Login()).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandlePlaylistsPage(w http.ResponseWriter, r *http.Request) {
@@ -67,10 +68,10 @@ func (p *pagesHandler) HandlePlaylistsPage(w http.ResponseWriter, r *http.Reques
 	}
 
 	if handlers.IsNoLayoutPage(r) {
-		pages.PlaylistsNoReload(playlists).Render(r.Context(), w)
+		pages.Playlists(playlists).Render(r.Context(), w)
 		return
 	}
-	pages.Playlists(playlists).Render(r.Context(), w)
+	layouts.Default(pages.Playlists(playlists)).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleSinglePlaylistPage(w http.ResponseWriter, r *http.Request) {
@@ -94,14 +95,14 @@ func (p *pagesHandler) HandleSinglePlaylistPage(w http.ResponseWriter, r *http.R
 	_ = playlist
 
 	if handlers.IsNoLayoutPage(r) {
-		pages.PlaylistNoReload(playlist).Render(r.Context(), w)
+		pages.Playlist(playlist).Render(r.Context(), w)
 		return
 	}
-	pages.Playlist(playlist).Render(r.Context(), w)
+	layouts.Default(pages.Playlist(playlist)).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandlePrivacyPage(w http.ResponseWriter, r *http.Request) {
-	pages.Privacy().Render(r.Context(), w)
+	layouts.Default(pages.Privacy()).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request) {
@@ -122,10 +123,10 @@ func (p *pagesHandler) HandleProfilePage(w http.ResponseWriter, r *http.Request)
 		Username: dbProfile.Username,
 	}
 	if handlers.IsNoLayoutPage(r) {
-		pages.ProfileNoReload(profile).Render(r.Context(), w)
+		pages.Profile(profile).Render(r.Context(), w)
 		return
 	}
-	pages.Profile(profile).Render(r.Context(), w)
+	layouts.Default(pages.Profile(profile)).Render(r.Context(), w)
 }
 
 func (p *pagesHandler) HandleSearchResultsPage(ytSearch search.Service) http.HandlerFunc {
@@ -159,13 +160,13 @@ func (p *pagesHandler) HandleSearchResultsPage(ytSearch search.Service) http.Han
 		}
 
 		if handlers.IsNoLayoutPage(r) {
-			pages.SearchResultsNoReload(results, playlists, songsInPlaylists).Render(r.Context(), w)
+			pages.SearchResults(results, playlists, songsInPlaylists).Render(r.Context(), w)
 			return
 		}
-		pages.SearchResults(results, playlists, songsInPlaylists).Render(r.Context(), w)
+		layouts.Default(pages.SearchResults(results, playlists, songsInPlaylists)).Render(r.Context(), w)
 	}
 }
 
 func (p *pagesHandler) HandleSignupPage(w http.ResponseWriter, r *http.Request) {
-	pages.Signup().Render(r.Context(), w)
+	layouts.Raw(pages.Signup()).Render(r.Context(), w)
 }
diff --git a/views/pages/about.templ b/views/pages/about.templ
index 335be41..fe4bc55 100644
--- a/views/pages/about.templ
+++ b/views/pages/about.templ
@@ -1,17 +1,8 @@
 package pages
 
-import "dankmuzikk/views/layouts"
 import "dankmuzikk/views/components/info"
 
 templ About() {
-	@layouts.Default(about())
-}
-
-templ AboutNoReload() {
-	@about()
-}
-
-templ about() {
 	<main class={ "w-full", "h-[120dvh]" }>
 		<div class={ "flex", "justify-center" }>
 			<section
diff --git a/views/pages/index.templ b/views/pages/index.templ
index 4c83a47..25463b8 100644
--- a/views/pages/index.templ
+++ b/views/pages/index.templ
@@ -1,19 +1,10 @@
 package pages
 
 import (
-	"dankmuzikk/views/layouts"
 	"dankmuzikk/views/components/navlink"
 )
 
 templ Index() {
-	@layouts.Default(main())
-}
-
-templ IndexNoReload() {
-	@main()
-}
-
-templ main() {
 	<main class={ "w-full", "h-full", "flex", "flex-col", "justify-center", "items-center" }>
 		<div class={ "flex", "justify-center" }>
 			<section
diff --git a/views/pages/login.templ b/views/pages/login.templ
index bad783f..21cfd84 100644
--- a/views/pages/login.templ
+++ b/views/pages/login.templ
@@ -1,7 +1,6 @@
 package pages
 
 import (
-	"dankmuzikk/views/layouts"
 	"dankmuzikk/views/components/info"
 )
 
@@ -10,10 +9,6 @@ import (
 */
 
 templ Login() {
-	@layouts.Raw(login())
-}
-
-templ login() {
 	<main id="main-login-container" class={ "w-full", "h-screen", "flex" }>
 		<!-- frank and details -->
 		<div class={ "hidden", "lg:block", "relative", "w-[70%]", "xl:w-full", "h-fit", "flex" }>
diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 324e209..4bf20cf 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -1,20 +1,11 @@
 package pages
 
 import (
-	"dankmuzikk/views/layouts"
 	"dankmuzikk/entities"
 	"fmt"
 )
 
 templ Playlist(pl entities.Playlist) {
-	@layouts.Default(justPlaylist(pl))
-}
-
-templ PlaylistNoReload(pl entities.Playlist) {
-	@justPlaylist(pl)
-}
-
-templ justPlaylist(pl entities.Playlist) {
 	<main class={ "w-full", "h-[120dvh]" }>
 		<div class={ "flex", "justify-center" }>
 			<section
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index 372d5b0..0ddb145 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -1,7 +1,6 @@
 package pages
 
 import (
-	"dankmuzikk/views/layouts"
 	"dankmuzikk/entities"
 	"dankmuzikk/views/components/playlist"
 	"fmt"
@@ -9,14 +8,6 @@ import (
 )
 
 templ Playlists(pls []entities.Playlist) {
-	@layouts.Default(playlists(pls))
-}
-
-templ PlaylistsNoReload(pls []entities.Playlist) {
-	@playlists(pls)
-}
-
-templ playlists(pls []entities.Playlist) {
 	<main class={ "w-full", "h-[120dvh]" }>
 		<div class={ "flex", "justify-center" }>
 			<section
diff --git a/views/pages/privacy.templ b/views/pages/privacy.templ
index ab2ac0c..1736bd3 100644
--- a/views/pages/privacy.templ
+++ b/views/pages/privacy.templ
@@ -1,12 +1,6 @@
 package pages
 
-import "dankmuzikk/views/layouts"
-
 templ Privacy() {
-	@layouts.Default(privacy())
-}
-
-templ privacy() {
 	<main class={ "w-full", "h-full", "flex", "justify-center" }>
 		<section
 			class={
diff --git a/views/pages/profile.templ b/views/pages/profile.templ
index 0fc7e3d..a48c9e7 100644
--- a/views/pages/profile.templ
+++ b/views/pages/profile.templ
@@ -1,20 +1,11 @@
 package pages
 
 import (
-	"dankmuzikk/views/layouts"
 	"dankmuzikk/entities"
 	"dankmuzikk/views/components/themeswitch"
 )
 
 templ Profile(prfl entities.Profile) {
-	@layouts.Default(profile(prfl))
-}
-
-templ ProfileNoReload(prfl entities.Profile) {
-	@profile(prfl)
-}
-
-templ profile(prfl entities.Profile) {
 	<main class={ "w-full", "h-[105dvh]" }>
 		<div class={ "flex", "justify-center" }>
 			<section
diff --git a/views/pages/search_results.templ b/views/pages/search_results.templ
index 582112a..e36bc39 100644
--- a/views/pages/search_results.templ
+++ b/views/pages/search_results.templ
@@ -1,7 +1,6 @@
 package pages
 
 import (
-	"dankmuzikk/views/layouts"
 	"dankmuzikk/services/youtube/search"
 	"dankmuzikk/views/components/playlist"
 	"dankmuzikk/entities"
@@ -10,14 +9,6 @@ import (
 type SearchResult = search.Result
 
 templ SearchResults(results []SearchResult, playlists []entities.Playlist, songsInPlaylists map[string]string) {
-	@layouts.Default(searchResults(results, playlists, songsInPlaylists))
-}
-
-templ SearchResultsNoReload(results []SearchResult, playlists []entities.Playlist, songsInPlaylists map[string]string) {
-	@searchResults(results, playlists, songsInPlaylists)
-}
-
-templ searchResults(results []SearchResult, playlists []entities.Playlist, songsInPlaylists map[string]string) {
 	<main class={ "w-full", "h-full", "flex", "justify-center" }>
 		<section
 			class={ "w-full", "md:w-auto", "overflow-y-scroll", "min-h-[50vh]", "max-h-[50vh]", "md:max-h-[75vh]",  "bg-black-trans-100", "rounded-md",
diff --git a/views/pages/signup.templ b/views/pages/signup.templ
index 253c638..cc24997 100644
--- a/views/pages/signup.templ
+++ b/views/pages/signup.templ
@@ -1,7 +1,6 @@
 package pages
 
 import (
-	"dankmuzikk/views/layouts"
 	"dankmuzikk/views/components/info"
 )
 
@@ -10,10 +9,6 @@ import (
 */
 
 templ Signup() {
-	@layouts.Raw(signup())
-}
-
-templ signup() {
 	<main id="main-login-container" class={ "w-full", "h-screen", "flex" }>
 		<!-- frank and details -->
 		<div class={ "hidden", "lg:block", "relative", "w-[70%]", "xl:w-full", "h-fit", "flex" }>

From e16be790ed9393c29c2cd0fb52231bb118074283 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 01:41:54 +0300
Subject: [PATCH 28/97] chore(theme): fix themes' color groups

---
 static/css/themes/black.css   | 13 ++++++++++---
 static/css/themes/default.css | 13 ++++++++++---
 tailwind.config.js            | 24 +++++++++---------------
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/static/css/themes/black.css b/static/css/themes/black.css
index 1c5dc6b..c5dfe20 100644
--- a/static/css/themes/black.css
+++ b/static/css/themes/black.css
@@ -1,7 +1,14 @@
 :root {
-  --primary-color: #000;
-  --secondary-color: #000;
-  --accent-color: #000;
+  --primary-color: #000000;
+  --primary-color-20: #00000033;
+
+  --secondary-color: #ffffff;
+  --secondary-color-20: #ffffff33;
+
+  --accent-color: #d3fcbf;
+  --accent-color-20: #d3fcbf33;
+  --accent-color-30: #d3fcbf4c;
+  --accent-color-69: #d3fcbfb0;
 }
 
 body {
diff --git a/static/css/themes/default.css b/static/css/themes/default.css
index a8ce441..abbacf5 100644
--- a/static/css/themes/default.css
+++ b/static/css/themes/default.css
@@ -1,7 +1,14 @@
 :root {
-  --primary-color: #7acb65;
-  --secondary-color: #9ee07e;
-  --accent-color: #4c8c36;
+  --primary-color: #4c8c36;
+  --primary-color-20: #4c8c3633;
+
+  --secondary-color: #ffffff;
+  --secondary-color-20: #ffffff33;
+
+  --accent-color: #000000;
+  --accent-color-20: #00000033;
+  --accent-color-30: #0000004c;
+  --accent-color-69: #000000b0;
 }
 
 body {
diff --git a/tailwind.config.js b/tailwind.config.js
index 288338a..21e4303 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,28 +9,22 @@ module.exports = {
       colors: {
         primary: {
           DEFAULT: "var(--primary-color)",
+          trans: {
+            20: "var(--primary-color-20)",
+          },
         },
         secondary: {
           DEFAULT: "var(--secondary-color)",
-        },
-        accent: {
-          DEFAULT: "var(--accent-color)",
-        },
-        black: {
-          DEFAULT: "#000",
           trans: {
-            100: "#00000044",
-            200: "#00000055",
-            300: "#00000066",
-            400: "#00000088",
-            500: "#000000B0",
+            20: "var(--secondary-color-20)",
           },
         },
-        white: {
-          DEFAULT: "#fff",
+        accent: {
+          DEFAULT: "var(--accent-color)",
           trans: {
-            100: "#FFFFFF25",
-            200: "#FFFFFFEE",
+            20: "var(--accent-color-20)",
+            30: "var(--accent-color-30)",
+            69: "var(--accent-color-69)",
           },
         },
       },

From bdeb01689e4376c0f9d448d5fda534f4bf0fa425 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 01:42:30 +0300
Subject: [PATCH 29/97] chore(theme): update themes in the switcher

---
 .../components/themeswitch/themeswitch.templ  | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index 23b7681..f0d62d4 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -18,7 +18,7 @@ templ ThemeSwitch() {
 	<div class={ "theme-toggle-container", "relative" }>
 		<button
 			onClick={ toggleTheThing() }
-			class={ "p-2", "rounded-md", "hover:bg-black-trans-100" }
+			class={ "p-2", "rounded-md", "hover:bg-accent-trans-20" }
 		>
 			<img src="/static/images/theme-icon.svg" alt="Theme Selector"/>
 		</button>
@@ -26,17 +26,17 @@ templ ThemeSwitch() {
 			id="theme-selector"
 			class={
 				"hidden", "absolute", "z-30", "top-[35px]", "right-[0px]",
-				"bg-white", "shadow-md", "p-[10px]", "rounded-[5px]",
-				"min-w-[150px]", "text-black",
+				"bg-secondary-trans-20", "backdrop-blur-md", "shadow-md", "p-[10px]", "rounded-[5px]",
+				"min-w-[150px]", "text-secondary",
 			}
 		>
-			<ul class={ "text-black" }>
+			<ul class={ "text-secondary" }>
 				for _, theme := range themes {
 					<li>
 						<button
 							onClick={ changeTheme(theme.actualName) }
 							type="button"
-							class={ "w-full", "p-2", "rounded-md", "hover:bg-black-trans-100", "text-left" }
+							class={ "w-full", "p-2", "rounded-md", "hover:bg-accent-trans-20", "text-left" }
 						>{ theme.displayName }</button>
 					</li>
 				}
@@ -51,15 +51,25 @@ script changeTheme(themeName string) {
 
     const themes = {
         default: {
-            primary: "#7acb65",
-            secondary: "#9ee07e",
-            accent: "#4c8c36",
+            primary: "#4c8c36",
+            primary20: "#4c8c3633",
+            secondary: "#ffffff",
+            secondary20: "#ffffff33",
+            accent: "#000000",
+            accent20: "#00000033",
+            accent30: "#0000004c",
+            accent69: "#000000b0",
             bg: "/static/images/dankground.svg",
         },
         black: {
-            primary: "#000",
-            secondary: "#000",
-            accent: "#000",
+            primary: "#000000",
+            primary20: "#00000033",
+            secondary: "#ffffff",
+            secondary20: "#ffffff33",
+            accent: "#D3FCBF",
+            accent20: "#D3FCBF33",
+            accent30: "#D3FCBF4c",
+            accent69: "#D3FCBFb0",
             bg: "/static/images/dankground-dark.svg",
         },
     };
@@ -72,8 +82,13 @@ script changeTheme(themeName string) {
     }
 
     style.setProperty('--primary-color', theme.primary);
+    style.setProperty('--primary-color-20', theme.primary20);
     style.setProperty('--secondary-color', theme.secondary);
+    style.setProperty('--secondary-color-20', theme.secondary20);
     style.setProperty('--accent-color', theme.accent);
+    style.setProperty('--accent-color-20', theme.accent20);
+    style.setProperty('--accent-color-30', theme.accent30);
+    style.setProperty('--accent-color-69', theme.accent69);
     document.body.style.backgroundImage = `url('${theme.bg}'), linear-gradient(to right, var(--accent-color), var(--secondary-color))`;
     document.getElementById("theme-selector").style.display = "none";
 }

From 2f0892b7ca0b4cc222a3578822e18f8ab907a30f Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 01:42:56 +0300
Subject: [PATCH 30/97] chore(theme): update color utilization

---
 handlers/apis/playlist.go                      |  4 ++--
 views/components/header/header.templ           | 10 +++++-----
 views/components/info/intro.templ              |  4 ++--
 views/components/otp/otp.templ                 |  8 ++++----
 views/components/player/desktop_player.templ   |  2 +-
 views/components/player/mobile_player.templ    |  2 +-
 .../playlist/new_playlis_popover.templ         |  4 ++--
 views/components/playlist/popover.templ        |  6 +++---
 views/components/search/search.templ           |  4 ++--
 .../components/search/search_suggestions.templ |  9 ++++++---
 views/pages/about.templ                        |  6 +++---
 views/pages/index.templ                        |  4 ++--
 views/pages/login.templ                        | 16 ++++++++--------
 views/pages/playlist.templ                     |  8 ++++----
 views/pages/playlists.templ                    |  8 ++++----
 views/pages/privacy.templ                      |  6 +++---
 views/pages/profile.templ                      | 10 +++++-----
 views/pages/search_results.templ               | 12 +++++++-----
 views/pages/signup.templ                       | 18 +++++++++---------
 19 files changed, 73 insertions(+), 68 deletions(-)

diff --git a/handlers/apis/playlist.go b/handlers/apis/playlist.go
index fc24cfb..b945944 100644
--- a/handlers/apis/playlist.go
+++ b/handlers/apis/playlist.go
@@ -92,8 +92,8 @@ func (p *playlistApi) HandleToggleSongInPlaylist(w http.ResponseWriter, r *http.
 	// TODO: idk, this is ugly, but it works lol
 	switch removeSongFromPlaylist {
 	case "false":
-		w.Write([]byte("<div class=\"w-[20px] h-[20px] rounded-sm border border-accent bg-accent\"></div>"))
+		w.Write([]byte("<div class=\"w-[20px] h-[20px] rounded-sm border border-secondary bg-secondary\"></div>"))
 	case "true":
-		w.Write([]byte("<div class=\"w-[20px] h-[20px] rounded-sm border border-accent\"></div>"))
+		w.Write([]byte("<div class=\"w-[20px] h-[20px] rounded-sm border border-secondary\"></div>"))
 	}
 }
diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index c20ea45..9aeccca 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -7,11 +7,11 @@ import (
 )
 
 templ mobileHeader() {
-	<div class={ "md:hidden", "h-[250px]", "", "flex", "flex-col", "justify-between" }>
+	<div class={ "md:hidden", "h-[250px]", "flex", "flex-col", "justify-between" }>
 		<div class={ "absolute", "top-[15px]", "right-[15px]" }>
 			@navlink.NavLink("About", "/static/images/nav-about-icon.svg", "/about")
 		</div>
-		<div class={ "font-Ubuntu", "text-white" }>
+		<div class={ "font-Ubuntu", "text-secondary" }>
 			<a href="/" class={ "flex", "justify-center", "items-center", "flex-col", "gap-y-3", "h-min" }>
 				<img
 					src="/static/android-chrome-512x512.png"
@@ -22,7 +22,7 @@ templ mobileHeader() {
 			</a>
 		</div>
 		<div class={  }>
-			<p class={ "text-white", "font-Ubuntu", "text-xl" }>
+			<p class={ "text-secondary", "font-Ubuntu", "text-xl" }>
 				Hey,
 				<br/>
 				Wanna play something?
@@ -35,7 +35,7 @@ templ mobileHeader() {
 }
 
 templ desktopHeader() {
-	<div class={ "hidden", "md:flex", "justify-between", "font-Ubuntu", "text-white" }>
+	<div class={ "hidden", "md:flex", "justify-between", "font-Ubuntu", "text-secondary" }>
 		<a href="/" class={ "flex", "justify-center", "items-center", "gap-x-3", "h-min" }>
 			<img
 				src="/static/android-chrome-512x512.png"
@@ -73,7 +73,7 @@ templ desktopHeader() {
 }
 
 templ Header() {
-	<header id="dank-header" class={ "bg-accent", "p-[20px]", "md:p-[10px]" }>
+	<header id="dank-header" class={ "bg-primary", "p-[20px]", "md:p-[10px]" }>
 		// mobiles are usually shitty at rendering, so this prevents mobiles from rendering two blocks and choosing one using CSS.
 		if ctx.Value("is-mobile").(bool) {
 			@mobileHeader()
diff --git a/views/components/info/intro.templ b/views/components/info/intro.templ
index a370807..564d762 100644
--- a/views/components/info/intro.templ
+++ b/views/components/info/intro.templ
@@ -1,8 +1,8 @@
 package info
 
 templ Intro() {
-	<div class={ "p-[20px]", "bg-black-trans-500", "max-w-[420px]", "rounded-xl" }>
-		<p class={ "text-white", "text-[20px]", "font-thin" }>
+	<div class={ "p-[20px]", "bg-accent-trans-69", "max-w-[420px]", "rounded-xl" }>
+		<p class={ "text-secondary", "text-[20px]", "font-thin" }>
 			Create, share, vote and play music playlists
 			with DankMuzikk.
 		</p>
diff --git a/views/components/otp/otp.templ b/views/components/otp/otp.templ
index cae0af8..69a79e7 100644
--- a/views/components/otp/otp.templ
+++ b/views/components/otp/otp.templ
@@ -2,7 +2,7 @@ package otp
 
 templ VerifyOtp() {
 	<h1
-		class={ "text-white", "text-[35px]", "lg:text-[48px]", "font-light" }
+		class={ "text-secondary", "text-[35px]", "lg:text-[48px]", "font-light" }
 	>
 		One more step...
 	</h1>
@@ -15,7 +15,7 @@ templ VerifyOtp() {
 		data-loading-class-remove="hidden"
 	>
 		<div class={ "flex", "flex-col", "gap-y-[10px]" }>
-			<label class={ "text-white", "text-[16px]" } for="otp">One Time Password</label>
+			<label class={ "text-secondary", "text-[16px]" } for="otp">One Time Password</label>
 			<input
 				id="otp"
 				class={ "w-full", "p-[10px]", "lg:p-[15px]", "rounded-[8px]" }
@@ -27,14 +27,14 @@ templ VerifyOtp() {
 		<div class={ "flex", "justify-between", "gap-x-[10px]", "lg:gap-x-[30px]" }>
 			<button
 				type="submit"
-				class={ "bg-white", "rounded-[50px]", "p-[10px]", "px-[60px]", "w-full" }
+				class={ "bg-secondary", "rounded-[50px]", "p-[10px]", "px-[60px]", "w-full" }
 			>
 				Continue
 			</button>
 		</div>
 	</form>
 	<!--
-	<div class={ "text-white", "flex", "justify-between" }>
+	<div class={ "text-secondary", "flex", "justify-between" }>
 		<p class={ "" }>Didn't receive anything?</p>
 		<a class={ "underline" } href="/signup">Resend</a>
 	</div>
diff --git a/views/components/player/desktop_player.templ b/views/components/player/desktop_player.templ
index 6fe4361..27a7ab3 100644
--- a/views/components/player/desktop_player.templ
+++ b/views/components/player/desktop_player.templ
@@ -5,7 +5,7 @@ templ desktopPlayer() {
 		class={
 			"fixed", "bottom-0", "w-screen", "h-[90px]", "bg-accent", "rounded-t-3xl",
 			"font-Ubuntu", "flex", "items-center", "justify-between", "gap-x-4", "p-[20px]",
-			"text-white",
+			"text-secondary",
 		}
 	>
 		<!-- details -->
diff --git a/views/components/player/mobile_player.templ b/views/components/player/mobile_player.templ
index 8bf2c1a..d9738aa 100644
--- a/views/components/player/mobile_player.templ
+++ b/views/components/player/mobile_player.templ
@@ -5,7 +5,7 @@ templ mobilePlayer() {
 		class={
 			"fixed", "bottom-[80px]", "w-screen", "h-[120px]", "bg-accent", "rounded-[30px]",
 			"font-Ubuntu", "flex", "items-center", "justify-between", "gap-x-1", "p-[10px]",
-			"text-white",
+			"text-secondary",
 		}
 	>
 		<div class={ "flex", "items-center", "w-[80px]" }>
diff --git a/views/components/playlist/new_playlis_popover.templ b/views/components/playlist/new_playlis_popover.templ
index c07091b..b99fd9a 100644
--- a/views/components/playlist/new_playlis_popover.templ
+++ b/views/components/playlist/new_playlis_popover.templ
@@ -9,7 +9,7 @@ templ NewPlaylistPlaylistsPopover() {
 			id="new-playlist-popover"
 			class={
 				"hidden", "absolute", "z-30", "top-[35px]", "right-[0px]",
-				"bg-white", "shadow-md", "p-[10px]", "rounded-[5px]",
+				"bg-secondary", "shadow-md", "p-[10px]", "rounded-[5px]",
 				"min-w-[250px]", "text-black",
 			}
 		>
@@ -33,7 +33,7 @@ templ NewPlaylistPlaylistsPopover() {
 				/>
 				<button
 					class={
-						"bg-accent", "text-white", "rounded-[50px]", "py-[5px]",
+						"bg-accent", "text-secondary", "rounded-[50px]", "py-[5px]",
 						"px-[60px]", "w-full",
 					}
 					type="submit"
diff --git a/views/components/playlist/popover.templ b/views/components/playlist/popover.templ
index 0a2081c..05b5e48 100644
--- a/views/components/playlist/popover.templ
+++ b/views/components/playlist/popover.templ
@@ -13,7 +13,7 @@ templ PlaylistsPopover(index int, songId string, playlists []entities.Playlist,
 		<div
 			class={
 				fmt.Sprintf("popover-%d", index), "hidden", "absolute", "z-30", "top-[35px]", "right-[0px]",
-				"bg-white", "shadow-md", "p-[10px]", "rounded-[5px]",
+				"bg-primary-trans-20", "backdrop-blur-md", "shadow-md", "p-[10px]", "rounded-[5px]", "text-secondary",
 				"min-w-[250px]",
 			}
 		>
@@ -55,9 +55,9 @@ templ PlaylistsPopover(index int, songId string, playlists []entities.Playlist,
 							>
 								<div
 									class={
-										"w-[20px]", "h-[20px]", "rounded-sm", "border", "border-accent",
+										"w-[20px]", "h-[20px]", "rounded-sm", "border", "border-secondary",
 										map[string]bool{
-											"bg-accent": playlist.PublicId == songsInPlaylists[songId],
+											"bg-secondary": playlist.PublicId == songsInPlaylists[songId],
 										},
 									}
 								></div>
diff --git a/views/components/search/search.templ b/views/components/search/search.templ
index d549b89..fddb407 100644
--- a/views/components/search/search.templ
+++ b/views/components/search/search.templ
@@ -1,7 +1,7 @@
 package search
 
 templ Search() {
-	<div class={ "!text-accent", "!font-Ubuntu", "w-[92vw]", "md:w-[300px]", "xl:w-[500px]" }>
+	<div class={ "!text-primary", "!font-Ubuntu", "w-[92vw]", "md:w-[300px]", "xl:w-[500px]" }>
 		<form
 			id="search-form"
 			class={ "w-full" }
@@ -13,7 +13,7 @@ templ Search() {
 			data-loading-class-remove="hidden"
 			data-loading-path="/search?no_layout=true"
 		>
-			<div class={ "flex", "bg-white", "rounded-[8px]", "border", "border-b-[3px]", "border-black" }>
+			<div class={ "flex", "bg-secondary", "rounded-[8px]", "border", "border-b-[3px]", "border-accent" }>
 				<input
 					id="search-input"
 					class={ "w-full", "p-[10px]", "ps-[15px]", "rounded-l-[8px]", "font-Ubuntu" }
diff --git a/views/components/search/search_suggestions.templ b/views/components/search/search_suggestions.templ
index 61e45ed..8329486 100644
--- a/views/components/search/search_suggestions.templ
+++ b/views/components/search/search_suggestions.templ
@@ -3,11 +3,14 @@ package search
 import "fmt"
 
 templ SearchSuggestions(suggestions []string, originalQuery string) {
-	<ul id="search-suggestions" class={ "grid", "grid-cols-1", "w-full", "bg-white-trans-200", "rounded-lg", "p-[10px]" }>
+	<ul
+		id="search-suggestions"
+		class={ "grid", "grid-cols-1", "w-full", "bg-accent-trans-30", "backdrop-blur-md", "rounded-lg", "p-[10px]" }
+	>
 		for i, suggestion := range suggestions {
 			<li
-				class={ "focus-within:bg-primary", "focus-within:text-white",
-                        "text-lg", "p-1", "first:rounded-t", "last:rounded-b",
+				class={ "focus-within:bg-secondary", "focus-within:text-primary", "text-secondary",
+                        "text-lg", "p-2", "first:rounded-t", "last:rounded-b",
                         "border-b", "border-b-primary", "last:border-b-0" }
 			>
 				<a
diff --git a/views/pages/about.templ b/views/pages/about.templ
index fe4bc55..0153629 100644
--- a/views/pages/about.templ
+++ b/views/pages/about.templ
@@ -3,13 +3,13 @@ package pages
 import "dankmuzikk/views/components/info"
 
 templ About() {
-	<main class={ "w-full", "h-[120dvh]" }>
+	<main class={ "w-full", "h-auto" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
-					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-black-trans-100", "rounded-xl",
+					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
-					"justify-between", "text-white",
+					"justify-between", "text-secondary",
 				}
 			>
 				<section id="brand" class={ "w-full", "flex", "justify-center" }>
diff --git a/views/pages/index.templ b/views/pages/index.templ
index 25463b8..b8d0e74 100644
--- a/views/pages/index.templ
+++ b/views/pages/index.templ
@@ -9,9 +9,9 @@ templ Index() {
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
-					"w-full", "md:w-2/3", "bg-black-trans-100", "rounded-xl",
+					"w-full", "md:w-2/3", "bg-accent-trans-20", "backdrop-blur-lg", "rounded-xl",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
-					"", "text-white",
+					"text-secondary",
 				}
 			>
 				<h2 class={ "text-xl" }>What should you expect?</h2>
diff --git a/views/pages/login.templ b/views/pages/login.templ
index 21cfd84..31cac81 100644
--- a/views/pages/login.templ
+++ b/views/pages/login.templ
@@ -20,7 +20,7 @@ templ Login() {
 				}
 			></div>
 			<!-- details -->
-			<div class={ "absolute", "top-0", "left-0", "z-10", "w-full", "h-full", "bg-black-trans-300" }>
+			<div class={ "absolute", "top-0", "left-0", "z-10", "w-full", "h-full", "bg-accent-trans-30" }>
 				<div class={ "absolute", "left-[20px]", "bottom-[20px]" }>
 					@info.Intro()
 					@info.Links()
@@ -31,7 +31,7 @@ templ Login() {
 		<div
 			class={
 				"w-full", "p-[15px]", "lg:px-[40px]",
-				"bg-black-trans-500", "flex", "flex-col", "justify-center", "items-center",
+				"bg-accent-trans-69", "flex", "flex-col", "justify-center", "items-center",
 			}
 		>
 			<div class={ "block", "lg:hidden", "mb-5" }>
@@ -40,18 +40,18 @@ templ Login() {
 			<div
 				id="replaceable-login-form"
 				class={
-					"w-full", "h-[95%]", "lg:h-auto", "bg-white-trans-100",
+					"w-full", "h-[95%]", "lg:h-auto", "bg-secondary-trans-20", "backdrop-blur-sm",
 					"p-[20px]", "lg:p-[60px]", "rounded-[10px]",
 					"flex", "flex-col", "justify-between", "lg:gap-y-[30px]",
 				}
 			>
 				<h1
-					class={ "text-white", "text-[35px]", "lg:text-[48px]", "font-light" }
+					class={ "text-secondary", "text-[35px]", "lg:text-[48px]", "font-light" }
 				>
 					Login
 				</h1>
 				@loginForm()
-				<div class={ "text-white", "flex", "justify-between" }>
+				<div class={ "text-secondary", "flex", "justify-between" }>
 					<p class={ "" }>New here?</p>
 					<a class={ "underline" } href="/signup">Signup</a>
 				</div>
@@ -73,7 +73,7 @@ templ loginForm() {
 		data-loading-class-remove="hidden"
 	>
 		<div class={ "flex", "flex-col", "gap-y-[10px]" }>
-			<label class={ "text-white", "text-[16px]" } for="email">Email</label>
+			<label class={ "text-secondary", "text-[16px]" } for="email">Email</label>
 			<input
 				id="email"
 				type="email"
@@ -88,7 +88,7 @@ templ loginForm() {
 			<a class={ "w-full" } href="/api/login/google" title="Login with Google">
 				<button
 					type="button"
-					class={ "w-full", "bg-white", "rounded-[50px]", "p-[10px]", "flex", "justify-center", "items-center" }
+					class={ "w-full", "bg-secondary", "rounded-[50px]", "p-[10px]", "flex", "justify-center", "items-center" }
 				>
 					<span class={ "font-Ubuntu" }>
 						<img class={ "w-[25px]", "h-[25px]" } src="/static/images/google.webp" alt="Login with Google"/>
@@ -97,7 +97,7 @@ templ loginForm() {
 			</a>
 			<button
 				type="submit"
-				class={ "bg-white", "rounded-[50px]", "p-[10px]", "px-[60px]", "w-full" }
+				class={ "bg-secondary", "rounded-[50px]", "p-[10px]", "px-[60px]", "w-full" }
 			>
 				Login
 			</button>
diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 4bf20cf..9bcd01b 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -10,14 +10,14 @@ templ Playlist(pl entities.Playlist) {
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
-					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-black-trans-100", "rounded-xl", "text-white",
+					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl", "text-secondary",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
 				}
 			>
 				<div class={ "flex", "justify-between", "items-center", "w-full" }>
 					<div class={ "flex", "flex-col", "gap-y-1" }>
-						<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>{ pl.Title }</h1>
-						<p class={ "text-white", "text-md" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>
+						<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>{ pl.Title }</h1>
+						<p class={ "text-secondary", "text-md" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>
 					</div>
 					if pl.Songs != nil && len(pl.Songs) > 0 {
 						<button
@@ -40,7 +40,7 @@ templ Playlist(pl entities.Playlist) {
 							for _, song := range pl.Songs {
 								<div
 									class={
-										"", "bg-white-trans-100", "rounded-[10px]", "p-2", "lg:p-5", "cursor-pointer",
+										"bg-secondary-trans-20", "rounded-[10px]", "p-2", "lg:p-5", "cursor-pointer",
 										"flex", "flex-row", "items-center", "gap-5",
 									}
 									onClick={ playSongFromPlaylist(song.YtId, pl) }
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index 0ddb145..9daa4cf 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -8,16 +8,16 @@ import (
 )
 
 templ Playlists(pls []entities.Playlist) {
-	<main class={ "w-full", "h-[120dvh]" }>
+	<main class={ "w-full" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
-					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-black-trans-100", "rounded-xl", "text-white",
+					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl", "text-secondary",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
 				}
 			>
 				<div class={ "flex", "justify-between", "items-center", "w-full" }>
-					<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>Playlists</h1>
+					<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Playlists</h1>
 					@playlist.NewPlaylistPlaylistsPopover()
 				</div>
 				<div id="playlists-listing">
@@ -48,7 +48,7 @@ templ JustPlaylists(pls []entities.Playlist) {
 templ singlePlaylist(pl entities.Playlist) {
 	<div
 		class={
-			"lg:w-[200px]", "lg:h-[200px]", "bg-white-trans-100", "rounded-[10px]", "px-5", "py-2",
+			"lg:w-[200px]", "lg:h-[200px]", "bg-secondary-trans-20", "rounded-[10px]", "px-5", "py-2",
 			"flex", "flex-row", "lg:flex-col", "lg:justify-center", "items-center", "gap-x-5", "lg:gap-x-0",
 		}
 	>
diff --git a/views/pages/privacy.templ b/views/pages/privacy.templ
index 1736bd3..0046ebd 100644
--- a/views/pages/privacy.templ
+++ b/views/pages/privacy.templ
@@ -4,12 +4,12 @@ templ Privacy() {
 	<main class={ "w-full", "h-full", "flex", "justify-center" }>
 		<section
 			class={
-				"w-full", "md:w-2/3", "min-h-[50vh]", "bg-black-trans-100", "rounded-xl",
+				"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl",
 				"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
-				"justify-between", "text-white",
+				"justify-between", "text-secondary",
 			}
 		>
-			<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>Privacy</h1>
+			<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Privacy</h1>
 			<p>
 				I respect the privacy of my users. This Privacy Policy explains what information we collect when you use this music player application DankMuzikk, how I use that information, and the choices you have about your information.
 			</p>
diff --git a/views/pages/profile.templ b/views/pages/profile.templ
index a48c9e7..d8aa973 100644
--- a/views/pages/profile.templ
+++ b/views/pages/profile.templ
@@ -10,12 +10,12 @@ templ Profile(prfl entities.Profile) {
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
-					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-black-trans-100", "rounded-xl",
+					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
-					"justify-between", "text-white",
+					"justify-between", "text-secondary",
 				}
 			>
-				<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>Profile</h1>
+				<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Profile</h1>
 				<section id="brand" class={ "w-full", "flex", "justify-center" }>
 					<div
 						class={ "flex", "flex-col", "justify-center", "items-center", "gap-y-3", }
@@ -37,7 +37,7 @@ templ Profile(prfl entities.Profile) {
 					<a href="/api/logout">
 						<button
 							type="submit"
-							class={ "bg-[#DE3333]", "text-white", "rounded-[50px]", "p-[10px]", "px-[60px]", "w-full" }
+							class={ "bg-[#DE3333]", "text-secondary", "rounded-[50px]", "p-[10px]", "px-[60px]", "w-full" }
 						>
 							Logout
 						</button>
@@ -45,7 +45,7 @@ templ Profile(prfl entities.Profile) {
 				</section>
 				<!-- TODO: remove the settings hide thingy, i.e. implement rest of the fucking settings :) -->
 				<section id="more-info" class={ "flex", "md:hidden", "flex-col", "gap-y-4" }>
-					<h1 class={ "text-white", "text-3xl", "lg:text-4xl" }>Settings</h1>
+					<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Settings</h1>
 					<div class={ "flex", "justify-between" }>
 						<span>Theme</span>
 						@themeswitch.ThemeSwitch()
diff --git a/views/pages/search_results.templ b/views/pages/search_results.templ
index e36bc39..d926615 100644
--- a/views/pages/search_results.templ
+++ b/views/pages/search_results.templ
@@ -11,9 +11,11 @@ type SearchResult = search.Result
 templ SearchResults(results []SearchResult, playlists []entities.Playlist, songsInPlaylists map[string]string) {
 	<main class={ "w-full", "h-full", "flex", "justify-center" }>
 		<section
-			class={ "w-full", "md:w-auto", "overflow-y-scroll", "min-h-[50vh]", "max-h-[50vh]", "md:max-h-[75vh]",  "bg-black-trans-100", "rounded-md",
-                    "rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[5px]", "md:p-[20px]", "flex", "flex-col", "gap-y-3",
-                    "justify-between" }
+			class={
+				"w-full", "md:w-auto", "overflow-y-scroll", "min-h-[50vh]", "max-h-[50vh]", "md:max-h-[75vh]",
+				"bg-accent-trans-20", "backdrop-blur-sm", "rounded-md", "rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[5px]",
+				"md:p-[20px]", "flex", "flex-col", "gap-y-3", "justify-between",
+			}
 		>
 			for idx, res := range results {
 				<div
@@ -36,7 +38,7 @@ templ SearchResults(results []SearchResult, playlists []entities.Playlist, songs
 								src={ res.ThumbnailUrl }
 								alt="Video Thumbnail"
 							/>
-							<div class={ "absolute", "right-0", "bottom-0", "text-white", "text-sm", "md:text-md", "font-light", "m-2", "p-[6px]", "bg-black-trans-400", "rounded-sm" }>
+							<div class={ "absolute", "right-0", "bottom-0", "text-secondary", "text-sm", "md:text-md", "font-light", "m-2", "p-[6px]", "bg-accent-trans-30", "rounded-sm" }>
 								<p class={ "leading-3", "font-Ubuntu" }>
 									{ res.Duration }
 								</p>
@@ -45,7 +47,7 @@ templ SearchResults(results []SearchResult, playlists []entities.Playlist, songs
 					</div>
 					<!-- title, channel title, and description -->
 					<div class={ "w-[150px]", "md:w-[250px]", "lg:min-w-[300px]", "xl:min-w-[400px]" }>
-						<div class={ "w-full", "h-full", "flex", "gap-y-3", "items-center", "flex-col",  "font-Ubuntu", "text-white" }>
+						<div class={ "w-full", "h-full", "flex", "gap-y-3", "items-center", "flex-col",  "font-Ubuntu", "text-secondary" }>
 							<h3
 								class={ "w-full", "text-md", "md:text-lg", "font-bold", "cursor-pointer", "overflow-hidden", "text-nowrap", "text-ellipsis" }
 								title={ res.Title }
diff --git a/views/pages/signup.templ b/views/pages/signup.templ
index cc24997..09179aa 100644
--- a/views/pages/signup.templ
+++ b/views/pages/signup.templ
@@ -20,7 +20,7 @@ templ Signup() {
 				}
 			></div>
 			<!-- details -->
-			<div class={ "absolute", "top-0", "left-0", "z-10", "w-full", "h-full", "bg-black-trans-300" }>
+			<div class={ "absolute", "top-0", "left-0", "z-10", "w-full", "h-full", "bg-accent-trans-30" }>
 				<div class={ "absolute", "left-[20px]", "bottom-[20px]" }>
 					@info.Intro()
 					@info.Links()
@@ -31,7 +31,7 @@ templ Signup() {
 		<div
 			class={
 				"w-full", "p-[15px]", "lg:px-[40px]",
-				"bg-black-trans-500", "flex", "flex-col", "justify-center", "items-center",
+				"bg-accent-trans-69", "flex", "flex-col", "justify-center", "items-center",
 			}
 		>
 			<div class={ "block", "lg:hidden", "mb-5" }>
@@ -40,18 +40,18 @@ templ Signup() {
 			<div
 				id="replaceable-login-form"
 				class={
-					"w-full", "h-[95%]", "lg:h-auto", "bg-white-trans-100",
+					"w-full", "h-[95%]", "lg:h-auto", "bg-secondary-trans-20", "backdrop-blur-sm",
 					"p-[20px]", "lg:p-[60px]", "rounded-[10px]",
 					"flex", "flex-col", "justify-between", "lg:gap-y-[30px]",
 				}
 			>
 				<h1
-					class={ "text-white", "text-[35px]", "lg:text-[48px]", "font-light" }
+					class={ "text-secondary", "text-[35px]", "lg:text-[48px]", "font-light" }
 				>
 					Sign up
 				</h1>
 				@signupForm()
-				<div class={ "text-white", "flex", "justify-between" }>
+				<div class={ "text-secondary", "flex", "justify-between" }>
 					<p class={ "" }>Already a DankMuzikker?</p>
 					<a class={ "underline" } href="/login">Login</a>
 				</div>
@@ -73,7 +73,7 @@ templ signupForm() {
 		data-loading-class-remove="hidden"
 	>
 		<div class={ "flex", "flex-col", "gap-y-[10px]" }>
-			<label class={ "text-white", "text-[16px]" } for="name">Name</label>
+			<label class={ "text-secondary", "text-[16px]" } for="name">Name</label>
 			<input
 				id="name"
 				type="text"
@@ -84,7 +84,7 @@ templ signupForm() {
 			/>
 		</div>
 		<div class={ "flex", "flex-col", "gap-y-[10px]" }>
-			<label class={ "text-white", "text-[16px]" } for="email">Email</label>
+			<label class={ "text-secondary", "text-[16px]" } for="email">Email</label>
 			<input
 				id="email"
 				type="email"
@@ -97,7 +97,7 @@ templ signupForm() {
 			<a class={ "w-full" } href="/api/signup/google" title="Sign up with Google">
 				<button
 					type="button"
-					class={ "w-full", "bg-white", "rounded-[50px]", "p-[10px]", "flex", "justify-center", "items-center" }
+					class={ "w-full", "bg-secondary", "rounded-[50px]", "p-[10px]", "flex", "justify-center", "items-center" }
 				>
 					<span class={ "font-Ubuntu" }>
 						<img class={ "w-[25px]", "h-[25px]" } src="/static/images/google.webp" alt="Sign up with Google"/>
@@ -106,7 +106,7 @@ templ signupForm() {
 			</a>
 			<button
 				type="submit"
-				class={ "bg-white", "rounded-[50px]", "p-[10px]", "px-[60px]", "w-full" }
+				class={ "bg-secondary", "rounded-[50px]", "p-[10px]", "px-[60px]", "w-full" }
 			>
 				Sign up
 			</button>

From b2e85bbe193d2be627ce2528b60c4adc59934767 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 01:59:57 +0300
Subject: [PATCH 31/97] chore(theme): update new theme for player and search

---
 views/components/player/desktop_player.templ     | 4 ++--
 views/components/player/mobile_player.templ      | 4 ++--
 views/components/search/search_suggestions.templ | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/views/components/player/desktop_player.templ b/views/components/player/desktop_player.templ
index 27a7ab3..cd5cc71 100644
--- a/views/components/player/desktop_player.templ
+++ b/views/components/player/desktop_player.templ
@@ -3,7 +3,7 @@ package player
 templ desktopPlayer() {
 	<div
 		class={
-			"fixed", "bottom-0", "w-screen", "h-[90px]", "bg-accent", "rounded-t-3xl",
+			"fixed", "bottom-0", "w-screen", "h-[90px]", "bg-primary", "rounded-t-3xl",
 			"font-Ubuntu", "flex", "items-center", "justify-between", "gap-x-4", "p-[20px]",
 			"text-secondary",
 		}
@@ -13,7 +13,7 @@ templ desktopPlayer() {
 			<div
 				id="song-image"
 				class={
-					"w-[60px]", "h-[60px]", "rounded-md", "bg-accent", "bg-[url('/static/images/dankground.svg')]",
+					"w-[60px]", "h-[60px]", "rounded-md", "bg-primary", "bg-[url('/static/images/dankground.svg')]",
 					"bg-repeat", "bg-cover", "bg-center",
 				}
 			></div>
diff --git a/views/components/player/mobile_player.templ b/views/components/player/mobile_player.templ
index d9738aa..2e2f0d6 100644
--- a/views/components/player/mobile_player.templ
+++ b/views/components/player/mobile_player.templ
@@ -3,7 +3,7 @@ package player
 templ mobilePlayer() {
 	<div
 		class={
-			"fixed", "bottom-[80px]", "w-screen", "h-[120px]", "bg-accent", "rounded-[30px]",
+			"fixed", "bottom-[80px]", "w-screen", "h-[120px]", "bg-primary", "rounded-[30px]",
 			"font-Ubuntu", "flex", "items-center", "justify-between", "gap-x-1", "p-[10px]",
 			"text-secondary",
 		}
@@ -12,7 +12,7 @@ templ mobilePlayer() {
 			<div
 				id="song-image"
 				class={
-					"w-[80px]", "h-[80px]", "rounded-md", "bg-accent", "bg-[url('/static/images/dankground.svg')]",
+					"w-[80px]", "h-[80px]", "rounded-md", "bg-primary", "bg-[url('/static/images/dankground.svg')]",
 					"bg-repeat", "bg-cover", "bg-center",
 				}
 			></div>
diff --git a/views/components/search/search_suggestions.templ b/views/components/search/search_suggestions.templ
index 8329486..c64f0fa 100644
--- a/views/components/search/search_suggestions.templ
+++ b/views/components/search/search_suggestions.templ
@@ -5,13 +5,13 @@ import "fmt"
 templ SearchSuggestions(suggestions []string, originalQuery string) {
 	<ul
 		id="search-suggestions"
-		class={ "grid", "grid-cols-1", "w-full", "bg-accent-trans-30", "backdrop-blur-md", "rounded-lg", "p-[10px]" }
+		class={ "grid", "grid-cols-1", "w-full", "bg-secondary-trans-20", "backdrop-blur-md", "rounded-lg", "p-[10px]" }
 	>
 		for i, suggestion := range suggestions {
 			<li
 				class={ "focus-within:bg-secondary", "focus-within:text-primary", "text-secondary",
                         "text-lg", "p-2", "first:rounded-t", "last:rounded-b",
-                        "border-b", "border-b-primary", "last:border-b-0" }
+                        "border-b", "border-b-secondary", "last:border-b-0" }
 			>
 				<a
 					href={ templ.SafeURL(fmt.Sprintf("/search?query=%s", suggestion)) }

From c6a1191ceaf0d289bb705e2e34c65142683fad6a Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 02:02:46 +0300
Subject: [PATCH 32/97] chore(pages): remove the extra height

---
 views/pages/playlist.templ | 2 +-
 views/pages/profile.templ  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 9bcd01b..38f4273 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -6,7 +6,7 @@ import (
 )
 
 templ Playlist(pl entities.Playlist) {
-	<main class={ "w-full", "h-[120dvh]" }>
+	<main class={ "w-full" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
diff --git a/views/pages/profile.templ b/views/pages/profile.templ
index d8aa973..651f4ea 100644
--- a/views/pages/profile.templ
+++ b/views/pages/profile.templ
@@ -6,7 +6,7 @@ import (
 )
 
 templ Profile(prfl entities.Profile) {
-	<main class={ "w-full", "h-[105dvh]" }>
+	<main class={ "w-full" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={

From a1abf41507a4053627f55d8ef096536ec7c74c71 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 02:36:54 +0300
Subject: [PATCH 33/97] feat(views): add a popover component

---
 views/components/popover/popover.templ | 36 ++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 views/components/popover/popover.templ

diff --git a/views/components/popover/popover.templ b/views/components/popover/popover.templ
new file mode 100644
index 0000000..6b9a0b9
--- /dev/null
+++ b/views/components/popover/popover.templ
@@ -0,0 +1,36 @@
+package popover
+
+import (
+	"fmt"
+)
+
+templ Popover(id string, button, child templ.Component) {
+	<div class={ "popover-container", "relative" }>
+		<button
+			class={ "popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20" }
+			onClick={ toggleTheThing(id) }
+		>
+			@button
+		</button>
+		<div
+			id={ fmt.Sprintf("popover-%s", id) }
+			class={
+				"hidden", "absolute", "z-30", "top-[45px]", "right-[0px]",
+				"bg-secondary-trans-20", "backdrop-blur-md", "shadow-md", "p-[10px]", "rounded-[5px]", "text-secondary",
+				"min-w-[150px]",
+			}
+		>
+			@child
+		</div>
+	</div>
+}
+
+script toggleTheThing(id string) {
+    const popover = document.getElementById(`popover-${id}`);
+
+    if (popover.style.display !== "block") {
+      popover.style.display = "block";
+    } else {
+      popover.style.display = "none";
+    }
+}

From cdf649c84359153c052947593101a5d86b927aa1 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 02:37:19 +0300
Subject: [PATCH 34/97] chore(popover): utilize the new popover component

---
 .../playlist/new_playlis_popover.templ        |  88 +++++-------
 views/components/playlist/popover.templ       | 126 ++++++++----------
 .../components/themeswitch/themeswitch.templ  |  61 +++------
 views/pages/playlists.templ                   |   2 +-
 4 files changed, 117 insertions(+), 160 deletions(-)

diff --git a/views/components/playlist/new_playlis_popover.templ b/views/components/playlist/new_playlis_popover.templ
index b99fd9a..b488f89 100644
--- a/views/components/playlist/new_playlis_popover.templ
+++ b/views/components/playlist/new_playlis_popover.templ
@@ -1,60 +1,46 @@
 package playlist
 
-templ NewPlaylistPlaylistsPopover() {
-	<div class={ "popover-container", "relative" }>
-		<button onClick={ toggleNewPlaylistPopover() } class={ "popover-trigger" }>
-			New playlist
-		</button>
-		<div
-			id="new-playlist-popover"
+import "dankmuzikk/views/components/popover"
+
+templ NewPlaylistPopover() {
+	@popover.Popover("new-playlist", newPlaylistPopoverButton(), newPlaylistPopover())
+}
+
+templ newPlaylistPopover() {
+	<form
+		class={ "flex", "flex-col", "gap-3", "w-[250px]" }
+		hx-post="/api/playlist"
+		hx-swap="innerHTML"
+		hx-target="#playlists-listing"
+		hx-trigger="submit"
+		hx-ext="json-enc"
+		data-loading-target="#loading"
+		data-loading-class-remove="hidden"
+		data-loading-path="/api/playlist"
+	>
+		<input
+			type="text"
+			class={ "w-full", "p-[10px]", "rounded-[8px]", "border", "border-black" }
+			name="title"
+			placeholder="Enter the playlist's title"
+			autofocus
+		/>
+		<button
 			class={
-				"hidden", "absolute", "z-30", "top-[35px]", "right-[0px]",
-				"bg-secondary", "shadow-md", "p-[10px]", "rounded-[5px]",
-				"min-w-[250px]", "text-black",
+				"bg-primary", "text-secondary", "rounded-[50px]", "py-[5px]",
+				"px-[60px]", "w-full",
 			}
-		>
-			<form
-				class={ "flex", "flex-col", "gap-3" }
-				hx-post="/api/playlist"
-				hx-swap="innerHTML"
-				hx-target="#playlists-listing"
-				hx-trigger="submit"
-				hx-ext="json-enc"
-				data-loading-target="#loading"
-				data-loading-class-remove="hidden"
-				data-loading-path="/api/playlist"
-			>
-				<input
-					type="text"
-					class={ "w-full", "p-[10px]", "rounded-[8px]", "border", "border-black" }
-					name="title"
-					placeholder="Enter the playlist's title"
-					autofocus
-				/>
-				<button
-					class={
-						"bg-accent", "text-secondary", "rounded-[50px]", "py-[5px]",
-						"px-[60px]", "w-full",
-					}
-					type="submit"
-					onClick={ hideNewPlayListPopover() }
-				>Create playlist</button>
-			</form>
-		</div>
-	</div>
+			type="submit"
+			onClick={ hideNewPlayListPopover() }
+		>Create playlist</button>
+	</form>
 }
 
-script hideNewPlayListPopover() {
-    document.getElementById("new-playlist-popover")
-        .style.display = "none";
+templ newPlaylistPopoverButton() {
+	New playlist
 }
 
-script toggleNewPlaylistPopover() {
-    const popover = document.getElementById("new-playlist-popover");
-
-    if (popover.style.display !== "block") {
-      popover.style.display = "block";
-    } else {
-      popover.style.display = "none";
-    }
+script hideNewPlayListPopover() {
+    document.getElementById("popover-new-playlist")
+        .style.display = "none";
 }
diff --git a/views/components/playlist/popover.templ b/views/components/playlist/popover.templ
index 05b5e48..4dc011b 100644
--- a/views/components/playlist/popover.templ
+++ b/views/components/playlist/popover.templ
@@ -3,82 +3,70 @@ package playlist
 import (
 	"fmt"
 	"dankmuzikk/entities"
+	"dankmuzikk/views/components/popover"
 )
 
 templ PlaylistsPopover(index int, songId string, playlists []entities.Playlist, songsInPlaylists map[string]string) {
-	<div class={ "popover-container", "relative" }>
-		<button onClick={ toggleTheThing(index) } class={ "popover-trigger" }>
-			<img class={ "w-full", "h-full" } height="30" width="30" src="/static/images/add-to-playlist.svg" alt="Add to playlist"/>
-		</button>
-		<div
-			class={
-				fmt.Sprintf("popover-%d", index), "hidden", "absolute", "z-30", "top-[35px]", "right-[0px]",
-				"bg-primary-trans-20", "backdrop-blur-md", "shadow-md", "p-[10px]", "rounded-[5px]", "text-secondary",
-				"min-w-[250px]",
-			}
-		>
-			<h2 class={ "text-lg" }>Save this song to...</h2>
-			<div class={ "my-2" }></div>
-			<ul class={ "flex", "flex-col", "gap-y-2" }>
-				if playlists == nil || len(playlists) == 0 {
-					<p>
-						No playlists were found
-					</p>
-				} else {
-					for _, playlist := range playlists {
-						<li
-							class={ "flex", "gap-x-4", "items-center", "cursor-pointer" }
-							hx-put={
-								fmt.Sprintf(
-									"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s&remove=%v",
-									songId,
-									playlist.PublicId,
-									playlist.PublicId == songsInPlaylists[songId],
-								),
-							}
-							hx-swap="innerHTML"
-							hx-target={ fmt.Sprintf("#song-in-playlist-%s", playlist.PublicId) }
-							hx-trigger="click"
-							data-loading-target="#loading"
-							data-loading-class-remove="hidden"
-							data-loading-path={
-								fmt.Sprintf(
-									"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s&remove=%v",
-									songId,
-									playlist.PublicId,
-									playlist.PublicId == songsInPlaylists[songId],
-								),
-							}
+	@popover.Popover(fmt.Sprint(index), popoverButton(), playlistsSelector(songId, playlists, songsInPlaylists))
+}
+
+templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPlaylists map[string]string) {
+	<div class={ "min-w-[250px]" }>
+		<h2 class={ "text-lg" }>Save this song to...</h2>
+		<div class={ "my-2" }></div>
+		<ul class={ "flex", "flex-col", "gap-y-2" }>
+			if playlists == nil || len(playlists) == 0 {
+				<p>
+					No playlists were found
+				</p>
+			} else {
+				for _, playlist := range playlists {
+					<li
+						class={ "flex", "gap-x-4", "items-center", "cursor-pointer" }
+						hx-put={
+							fmt.Sprintf(
+								"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s&remove=%v",
+								songId,
+								playlist.PublicId,
+								playlist.PublicId == songsInPlaylists[songId],
+							),
+						}
+						hx-swap="innerHTML"
+						hx-target={ fmt.Sprintf("#song-in-playlist-%s", playlist.PublicId) }
+						hx-trigger="click"
+						data-loading-target="#loading"
+						data-loading-class-remove="hidden"
+						data-loading-path={
+							fmt.Sprintf(
+								"/api/toggle-song-in-playlist?song-id=%s&playlist-id=%s&remove=%v",
+								songId,
+								playlist.PublicId,
+								playlist.PublicId == songsInPlaylists[songId],
+							),
+						}
+					>
+						<div
+							id={ fmt.Sprintf("song-in-playlist-%s", playlist.PublicId) }
 						>
 							<div
-								id={ fmt.Sprintf("song-in-playlist-%s", playlist.PublicId) }
-							>
-								<div
-									class={
-										"w-[20px]", "h-[20px]", "rounded-sm", "border", "border-secondary",
-										map[string]bool{
-											"bg-secondary": playlist.PublicId == songsInPlaylists[songId],
-										},
-									}
-								></div>
-							</div>
-							<p class={ "max-w-[300px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>
-								{ playlist.Title }
-							</p>
-						</li>
-					}
+								class={
+									"w-[20px]", "h-[20px]", "rounded-sm", "border", "border-secondary",
+									map[string]bool{
+										"bg-secondary": playlist.PublicId == songsInPlaylists[songId],
+									},
+								}
+							></div>
+						</div>
+						<p class={ "max-w-[300px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>
+							{ playlist.Title }
+						</p>
+					</li>
 				}
-			</ul>
-		</div>
+			}
+		</ul>
 	</div>
 }
 
-script toggleTheThing(index int) {
-    const popover = document.querySelector(`.popover-${index}`);
-
-    if (popover.style.display !== "block") {
-      popover.style.display = "block";
-    } else {
-      popover.style.display = "none";
-    }
+templ popoverButton() {
+	<img class={ "max-w-[30px]", "h-[30px]" } src="/static/images/add-to-playlist.svg" alt="Add to playlist"/>
 }
diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index f0d62d4..6fdba50 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -1,5 +1,7 @@
 package themeswitch
 
+import "dankmuzikk/views/components/popover"
+
 var themes = []struct {
 	displayName string
 	actualName  string
@@ -15,34 +17,25 @@ var themes = []struct {
 }
 
 templ ThemeSwitch() {
-	<div class={ "theme-toggle-container", "relative" }>
-		<button
-			onClick={ toggleTheThing() }
-			class={ "p-2", "rounded-md", "hover:bg-accent-trans-20" }
-		>
-			<img src="/static/images/theme-icon.svg" alt="Theme Selector"/>
-		</button>
-		<div
-			id="theme-selector"
-			class={
-				"hidden", "absolute", "z-30", "top-[35px]", "right-[0px]",
-				"bg-secondary-trans-20", "backdrop-blur-md", "shadow-md", "p-[10px]", "rounded-[5px]",
-				"min-w-[150px]", "text-secondary",
-			}
-		>
-			<ul class={ "text-secondary" }>
-				for _, theme := range themes {
-					<li>
-						<button
-							onClick={ changeTheme(theme.actualName) }
-							type="button"
-							class={ "w-full", "p-2", "rounded-md", "hover:bg-accent-trans-20", "text-left" }
-						>{ theme.displayName }</button>
-					</li>
-				}
-			</ul>
-		</div>
-	</div>
+	@popover.Popover("theme-switcher", themeSwitchButton(), themeSwitch())
+}
+
+templ themeSwitch() {
+	<ul class={ "text-secondary" }>
+		for _, theme := range themes {
+			<li>
+				<button
+					onClick={ changeTheme(theme.actualName) }
+					type="button"
+					class={ "w-full", "p-2", "rounded-md", "hover:bg-accent-trans-20", "text-left" }
+				>{ theme.displayName }</button>
+			</li>
+		}
+	</ul>
+}
+
+templ themeSwitchButton() {
+	<img src="/static/images/theme-icon.svg" alt="Theme Selector"/>
 }
 
 script changeTheme(themeName string) {
@@ -90,15 +83,5 @@ script changeTheme(themeName string) {
     style.setProperty('--accent-color-30', theme.accent30);
     style.setProperty('--accent-color-69', theme.accent69);
     document.body.style.backgroundImage = `url('${theme.bg}'), linear-gradient(to right, var(--accent-color), var(--secondary-color))`;
-    document.getElementById("theme-selector").style.display = "none";
-}
-
-script toggleTheThing() {
-    const themeTogglePopover = document.getElementById("theme-selector");
-
-    if (themeTogglePopover.style.display !== "block") {
-      themeTogglePopover.style.display = "block";
-    } else {
-      themeTogglePopover.style.display = "none";
-    }
+    document.getElementById("popover-theme-switcher").style.display = "none";
 }
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index 9daa4cf..bb25216 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -18,7 +18,7 @@ templ Playlists(pls []entities.Playlist) {
 			>
 				<div class={ "flex", "justify-between", "items-center", "w-full" }>
 					<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Playlists</h1>
-					@playlist.NewPlaylistPlaylistsPopover()
+					@playlist.NewPlaylistPopover()
 				</div>
 				<div id="playlists-listing">
 					if pls == nil || len(pls) == 0 {

From 9699b96e39d981aba1c972c2fc325a30164b9100 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 02:42:55 +0300
Subject: [PATCH 35/97] fix(pages): mobile height

---
 views/pages/playlist.templ  | 2 +-
 views/pages/playlists.templ | 2 +-
 views/pages/profile.templ   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 38f4273..dac90dc 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -6,7 +6,7 @@ import (
 )
 
 templ Playlist(pl entities.Playlist) {
-	<main class={ "w-full" }>
+	<main class={ "w-full", "h-[100dvh]", "lg:h-auto" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index bb25216..d44cd41 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -8,7 +8,7 @@ import (
 )
 
 templ Playlists(pls []entities.Playlist) {
-	<main class={ "w-full" }>
+	<main class={ "w-full", "h-[100dvh]", "lg:h-auto" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
diff --git a/views/pages/profile.templ b/views/pages/profile.templ
index 651f4ea..019f42e 100644
--- a/views/pages/profile.templ
+++ b/views/pages/profile.templ
@@ -6,7 +6,7 @@ import (
 )
 
 templ Profile(prfl entities.Profile) {
-	<main class={ "w-full" }>
+	<main class={ "w-full", "h-[100dvh]", "lg:h-auto" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={

From 0beb8993823df44e8d794e8c9c6c44e6ba4734b4 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 12:43:52 +0300
Subject: [PATCH 36/97] chore(theme): title remove gradient background

---
 static/css/themes/black.css                    | 4 ++--
 static/css/themes/default.css                  | 4 ++--
 views/components/themeswitch/themeswitch.templ | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/css/themes/black.css b/static/css/themes/black.css
index c5dfe20..bc9d18d 100644
--- a/static/css/themes/black.css
+++ b/static/css/themes/black.css
@@ -12,6 +12,6 @@
 }
 
 body {
-  background-image: url("/static/images/dankground-dark.svg"),
-    linear-gradient(to right, var(--accent-color), var(--secondary-color));
+  background-image: url("/static/images/dankground-dark.svg");
+  background-color: var(--primary-color);
 }
diff --git a/static/css/themes/default.css b/static/css/themes/default.css
index abbacf5..dccf3a6 100644
--- a/static/css/themes/default.css
+++ b/static/css/themes/default.css
@@ -12,6 +12,6 @@
 }
 
 body {
-  background-image: url("/static/images/dankground.svg"),
-    linear-gradient(to right, var(--accent-color), var(--secondary-color));
+  background-image: url("/static/images/dankground.svg");
+  background-color: var(--primary-color);
 }
diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index 6fdba50..d525a95 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -70,7 +70,6 @@ script changeTheme(themeName string) {
     const style = document.documentElement.style;
     const theme = themes[themeName];
     if (!theme) {
-        window.location.reload();
         return;
     }
 
@@ -82,6 +81,7 @@ script changeTheme(themeName string) {
     style.setProperty('--accent-color-20', theme.accent20);
     style.setProperty('--accent-color-30', theme.accent30);
     style.setProperty('--accent-color-69', theme.accent69);
-    document.body.style.backgroundImage = `url('${theme.bg}'), linear-gradient(to right, var(--accent-color), var(--secondary-color))`;
+    document.body.style.backgroundImage = `url('${theme.bg}')`;
+    document.body.style.backgroundColor = theme.primary;
     document.getElementById("popover-theme-switcher").style.display = "none";
 }

From 3ea73e4c40196118441daea3c8b420a155f4cb1a Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 12:47:16 +0300
Subject: [PATCH 37/97] chore(theme): use vars for player seeker's colors

---
 static/css/player-seeker.css | 38 ++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/static/css/player-seeker.css b/static/css/player-seeker.css
index a6647fd..6d2bc86 100644
--- a/static/css/player-seeker.css
+++ b/static/css/player-seeker.css
@@ -23,26 +23,26 @@ input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   height: 20px;
   width: 20px;
-  border: 1px solid #ffffff;
+  border: 1px solid var(--secondary-color);
   border-radius: 30px;
-  background: #9ee07e;
+  background: var(--primary-color);
   cursor: pointer;
   margin-top: -7px;
 }
 input[type="range"]::-moz-range-thumb {
   height: 20px;
   width: 20px;
-  border: 1px solid #ffffff;
+  border: 1px solid var(--secondary-color);
   border-radius: 30px;
-  background: #9ee07e;
+  background: var(--primary-color);
   cursor: pointer;
 }
 input[type="range"]::-ms-thumb {
   height: 20px;
   width: 20px;
-  border: 1px solid #ffffff;
+  border: 1px solid var(--secondary-color);
   border-radius: 30px;
-  background: #9ee07e;
+  background: var(--primary-color);
   cursor: pointer;
 }
 
@@ -51,22 +51,22 @@ input[type="range"]::-webkit-slider-runnable-track {
   width: 100%;
   height: 8.4px;
   cursor: pointer;
-  background: #ffffff;
-  color: #ffffff;
+  background: var(--secondary-color);
+  color: var(--secondary-color);
   border-radius: 30px;
-  border: 0.2px solid #ffffff;
+  border: 0.2px solid var(--secondary-color);
 }
 input[type="range"]:focus::-webkit-slider-runnable-track {
-  background: #ffffff;
-  color: #ffffff;
+  background: var(--secondary-color);
+  color: var(--secondary-color);
 }
 input[type="range"]::-moz-range-track {
   width: 100%;
   height: 8.4px;
   cursor: pointer;
-  background: #ffffff;
+  background: var(--secondary-color);
   border-radius: 20px;
-  border: 0.2px solid #ffffff;
+  border: 0.2px solid var(--secondary-color);
 }
 input[type="range"]::-ms-track {
   width: 100%;
@@ -78,18 +78,18 @@ input[type="range"]::-ms-track {
   color: transparent;
 }
 input[type="range"]::-ms-fill-lower {
-  background: #ffffff;
-  border: 0.2px solid #ffffff;
+  background: var(--secondary-color);
+  border: 0.2px solid var(--secondary-color);
   border-radius: 20px;
 }
 input[type="range"]:focus::-ms-fill-lower {
-  background: #ffffff;
+  background: var(--secondary-color);
 }
 input[type="range"]::-ms-fill-upper {
-  background: #ffffff;
-  border: 0.2px solid #ffffff;
+  background: var(--secondary-color);
+  border: 0.2px solid var(--secondary-color);
   border-radius: 20px;
 }
 input[type="range"]:focus::-ms-fill-upper {
-  background: #ffffff;
+  background: var(--secondary-color);
 }

From 712e3c8497ad8992d9762274933fb9de8bad3548 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 12:49:39 +0300
Subject: [PATCH 38/97] chore(theme): increase player's seeker's thumb border

---
 static/css/player-seeker.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/css/player-seeker.css b/static/css/player-seeker.css
index 6d2bc86..5158720 100644
--- a/static/css/player-seeker.css
+++ b/static/css/player-seeker.css
@@ -23,7 +23,7 @@ input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   height: 20px;
   width: 20px;
-  border: 1px solid var(--secondary-color);
+  border: 2px solid var(--secondary-color);
   border-radius: 30px;
   background: var(--primary-color);
   cursor: pointer;
@@ -32,7 +32,7 @@ input[type="range"]::-webkit-slider-thumb {
 input[type="range"]::-moz-range-thumb {
   height: 20px;
   width: 20px;
-  border: 1px solid var(--secondary-color);
+  border: 2px solid var(--secondary-color);
   border-radius: 30px;
   background: var(--primary-color);
   cursor: pointer;
@@ -40,7 +40,7 @@ input[type="range"]::-moz-range-thumb {
 input[type="range"]::-ms-thumb {
   height: 20px;
   width: 20px;
-  border: 1px solid var(--secondary-color);
+  border: 2px solid var(--secondary-color);
   border-radius: 30px;
   background: var(--primary-color);
   cursor: pointer;

From c9593962621fedcd02032ad872d51ba11ee4fd71 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 12:52:34 +0300
Subject: [PATCH 39/97] chore(bg): decreased background's opacity

---
 static/images/dankground-dark.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/images/dankground-dark.svg b/static/images/dankground-dark.svg
index 4d2624c..1f76e58 100644
--- a/static/images/dankground-dark.svg
+++ b/static/images/dankground-dark.svg
@@ -1,6 +1,6 @@
 <svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <rect width="1920" height="1080" fill="url(#pattern0_100_2568)"/>
-<rect width="1920" height="1080" fill="black" fill-opacity="0.95"/>
+<rect width="1920" height="1080" fill="black" fill-opacity="0.85"/>
 <defs>
 <pattern id="pattern0_100_2568" patternContentUnits="objectBoundingBox" width="1" height="1">
 <use xlink:href="#image0_100_2568" transform="scale(0.000520833 0.000925926)"/>

From 403279ba52df0778977e3698398fce0a1bd42cba Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 13:06:39 +0300
Subject: [PATCH 40/97] chore(colors): add transparency for all colors

---
 static/css/themes/black.css   | 12 ++++++++----
 static/css/themes/default.css |  4 ++++
 tailwind.config.js            |  4 ++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/static/css/themes/black.css b/static/css/themes/black.css
index bc9d18d..19f5b50 100644
--- a/static/css/themes/black.css
+++ b/static/css/themes/black.css
@@ -1,14 +1,18 @@
 :root {
   --primary-color: #000000;
   --primary-color-20: #00000033;
+  --primary-color-30: #0000004c;
+  --primary-color-69: #000000b0;
 
   --secondary-color: #ffffff;
   --secondary-color-20: #ffffff33;
+  --secondary-color-30: #ffffff4c;
+  --secondary-color-69: #ffffffb0;
 
-  --accent-color: #d3fcbf;
-  --accent-color-20: #d3fcbf33;
-  --accent-color-30: #d3fcbf4c;
-  --accent-color-69: #d3fcbfb0;
+  --accent-color: #4c8c36;
+  --accent-color-20: #4c8c3633;
+  --accent-color-30: #4c8c364c;
+  --accent-color-69: #4c8c36b0;
 }
 
 body {
diff --git a/static/css/themes/default.css b/static/css/themes/default.css
index dccf3a6..309b2d0 100644
--- a/static/css/themes/default.css
+++ b/static/css/themes/default.css
@@ -1,9 +1,13 @@
 :root {
   --primary-color: #4c8c36;
   --primary-color-20: #4c8c3633;
+  --primary-color-30: #4c8c364c;
+  --primary-color-69: #4c8c36b0;
 
   --secondary-color: #ffffff;
   --secondary-color-20: #ffffff33;
+  --secondary-color-30: #ffffff4c;
+  --secondary-color-69: #ffffffb0;
 
   --accent-color: #000000;
   --accent-color-20: #00000033;
diff --git a/tailwind.config.js b/tailwind.config.js
index 21e4303..c5faec0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,12 +11,16 @@ module.exports = {
           DEFAULT: "var(--primary-color)",
           trans: {
             20: "var(--primary-color-20)",
+            30: "var(--primary-color-30)",
+            69: "var(--primary-color-69)",
           },
         },
         secondary: {
           DEFAULT: "var(--secondary-color)",
           trans: {
             20: "var(--secondary-color-20)",
+            30: "var(--secondary-color-30)",
+            69: "var(--secondary-color-69)",
           },
         },
         accent: {

From 2e5d9379d142b2e3be5f69b01d26f9a61d3c1efb Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 13:08:02 +0300
Subject: [PATCH 41/97] chore(theme): fix color groups across all themes

---
 views/pages/login.templ  | 6 +++---
 views/pages/signup.templ | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/views/pages/login.templ b/views/pages/login.templ
index 31cac81..51171a0 100644
--- a/views/pages/login.templ
+++ b/views/pages/login.templ
@@ -15,12 +15,12 @@ templ Login() {
 			<!-- frank -->
 			<div
 				class={
-					"w-full", "h-screen", "bg-accent", "bg-[url('/static/images/frank-cropped.png')]",
+					"w-full", "h-screen", "bg-primary", "bg-[url('/static/images/frank-cropped.png')]",
 					"bg-repeat", "bg-cover", "bg-center",
 				}
 			></div>
 			<!-- details -->
-			<div class={ "absolute", "top-0", "left-0", "z-10", "w-full", "h-full", "bg-accent-trans-30" }>
+			<div class={ "absolute", "top-0", "left-0", "z-10", "w-full", "h-full", "bg-primary-trans-20" }>
 				<div class={ "absolute", "left-[20px]", "bottom-[20px]" }>
 					@info.Intro()
 					@info.Links()
@@ -31,7 +31,7 @@ templ Login() {
 		<div
 			class={
 				"w-full", "p-[15px]", "lg:px-[40px]",
-				"bg-accent-trans-69", "flex", "flex-col", "justify-center", "items-center",
+				"bg-primary-trans-20", "flex", "flex-col", "justify-center", "items-center",
 			}
 		>
 			<div class={ "block", "lg:hidden", "mb-5" }>
diff --git a/views/pages/signup.templ b/views/pages/signup.templ
index 09179aa..888f29d 100644
--- a/views/pages/signup.templ
+++ b/views/pages/signup.templ
@@ -15,12 +15,12 @@ templ Signup() {
 			<!-- frank -->
 			<div
 				class={
-					"w-full", "h-screen", "bg-accent", "bg-[url('/static/images/frank-cropped.png')]",
+					"w-full", "h-screen", "bg-primary", "bg-[url('/static/images/frank-cropped.png')]",
 					"bg-repeat", "bg-cover", "bg-center",
 				}
 			></div>
 			<!-- details -->
-			<div class={ "absolute", "top-0", "left-0", "z-10", "w-full", "h-full", "bg-accent-trans-30" }>
+			<div class={ "absolute", "top-0", "left-0", "z-10", "w-full", "h-full", "bg-primary-trans-20" }>
 				<div class={ "absolute", "left-[20px]", "bottom-[20px]" }>
 					@info.Intro()
 					@info.Links()
@@ -31,7 +31,7 @@ templ Signup() {
 		<div
 			class={
 				"w-full", "p-[15px]", "lg:px-[40px]",
-				"bg-accent-trans-69", "flex", "flex-col", "justify-center", "items-center",
+				"bg-primary-trans-20", "flex", "flex-col", "justify-center", "items-center",
 			}
 		>
 			<div class={ "block", "lg:hidden", "mb-5" }>

From 56598bda2404083610c23fbe52690b6400e751c2 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 13:08:51 +0300
Subject: [PATCH 42/97] chore(theme): update colors in loading and playlist
 popover

---
 views/components/loading/loading.templ              | 2 +-
 views/components/playlist/new_playlis_popover.templ | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/views/components/loading/loading.templ b/views/components/loading/loading.templ
index c84ca0c..fd01dc3 100644
--- a/views/components/loading/loading.templ
+++ b/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-black-trans-200", "flex", "justify-center", "items-center",
+			"bg-accent-trans-30", "flex", "justify-center", "items-center",
 		}
 	>
 		<div class={ "loader", "!h-32", "!w-32" }></div>
diff --git a/views/components/playlist/new_playlis_popover.templ b/views/components/playlist/new_playlis_popover.templ
index b488f89..a8397e2 100644
--- a/views/components/playlist/new_playlis_popover.templ
+++ b/views/components/playlist/new_playlis_popover.templ
@@ -20,7 +20,7 @@ templ newPlaylistPopover() {
 	>
 		<input
 			type="text"
-			class={ "w-full", "p-[10px]", "rounded-[8px]", "border", "border-black" }
+			class={ "w-full", "p-[10px]", "rounded-[8px]", "border", "border-accent" }
 			name="title"
 			placeholder="Enter the playlist's title"
 			autofocus

From f3e77dbc59af9524156419bd1f408851c6c249d1 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 13:11:18 +0300
Subject: [PATCH 43/97] chore(theme): update text color for new playlist's
 field

---
 views/components/playlist/new_playlis_popover.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/components/playlist/new_playlis_popover.templ b/views/components/playlist/new_playlis_popover.templ
index a8397e2..70f4a77 100644
--- a/views/components/playlist/new_playlis_popover.templ
+++ b/views/components/playlist/new_playlis_popover.templ
@@ -20,7 +20,7 @@ templ newPlaylistPopover() {
 	>
 		<input
 			type="text"
-			class={ "w-full", "p-[10px]", "rounded-[8px]", "border", "border-accent" }
+			class={ "w-full", "p-[10px]", "rounded-[8px]", "border", "border-accent", "text-primary" }
 			name="title"
 			placeholder="Enter the playlist's title"
 			autofocus

From 4568bf4d415401deb8f42d681c4e770f9cc5a5de Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 13:14:33 +0300
Subject: [PATCH 44/97] chore(icons): remove un-used icons

---
 static/images/pause-disabled-icon.svg | 3 ---
 static/images/play-disabled-icon.svg  | 3 ---
 static/js/player.js                   | 2 --
 views/components/player/player.templ  | 2 --
 4 files changed, 10 deletions(-)
 delete mode 100644 static/images/pause-disabled-icon.svg
 delete mode 100644 static/images/play-disabled-icon.svg

diff --git a/static/images/pause-disabled-icon.svg b/static/images/pause-disabled-icon.svg
deleted file mode 100644
index ac35549..0000000
--- a/static/images/pause-disabled-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.6667 11.0417V41.9584M35.3334 11.0417V41.9584" stroke="#34FF00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/static/images/play-disabled-icon.svg b/static/images/play-disabled-icon.svg
deleted file mode 100644
index 9aa4063..0000000
--- a/static/images/play-disabled-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M34.7046 19.3467C37.7042 21.2214 39.2038 22.1587 39.7181 23.3589C40.1673 24.4068 40.1673 25.5932 39.7181 26.6414C39.2038 27.8414 37.7042 28.7787 34.7046 30.6534L20.6167 39.4584C17.2876 41.5391 15.6231 42.5795 14.2495 42.4689C13.0521 42.3726 11.9546 41.7645 11.2384 40.8001C10.4167 39.6939 10.4167 37.7309 10.4167 33.8051V16.195C10.4167 12.2693 10.4167 10.3064 11.2384 9.20007C11.9546 8.23573 13.0521 7.62742 14.2495 7.53115C15.6231 7.42073 17.2876 8.46107 20.6167 10.5417L34.7046 19.3467Z" stroke="#34FF00" stroke-width="4" stroke-linejoin="round"/>
-</svg>
diff --git a/static/js/player.js b/static/js/player.js
index dfd7781..dc5db7e 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -1,9 +1,7 @@
 "use strict";
 
 const playerButtonsIcons = {
-  playDisabled: ` <img class="w-[50px] h-[50px]" src="/static/images/play-disabled-icon.svg" alt="Play"/>`,
   play: `<img class="w-[50px] h-[50px]" src="/static/images/play-icon.svg" alt="Play"/>`,
-  pauseDisabled: `<img class="w-[50px] h-[50px]" src="/static/images/pause-disabled-icon.svg" alt="Pause"/>`,
   pause: `<img class="w-[50px] h-[50px]" src="/static/images/pause-icon.svg" alt="Pause"/>`,
   loop: `<img class="w-[40px]" src="/static/images/loop-icon.svg" alt="Loop"/>`,
   loopOnce: `<img class="w-[40px]" src="/static/images/loop-once-icon.svg" alt="Loop Once"/>`,
diff --git a/views/components/player/player.templ b/views/components/player/player.templ
index f3c1067..1e89c8f 100644
--- a/views/components/player/player.templ
+++ b/views/components/player/player.templ
@@ -9,9 +9,7 @@ templ PlayerSticky() {
 		}
 	</div>
 	<div class="hidden">
-		<img class="w-[50px]" src="/static/images/play-disabled-icon.svg" alt="Play"/>
 		<img class="w-[50px]" src="/static/images/play-icon.svg" alt="Play"/>
-		<img class="w-[50px]" src="/static/images/pause-disabled-icon.svg" alt="Pause"/>
 		<img class="w-[50px]" src="/static/images/pause-icon.svg" alt="Pause"/>
 		<img class="w-[40px]" src="/static/images/loop-icon.svg" alt="Loop"/>
 		<img class="w-[40px]" src="/static/images/loop-once-icon.svg" alt="Loop Once"/>

From 4afc2fc597c77a0eee9c01128d5e9d5efa6acdb4 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 13:28:45 +0300
Subject: [PATCH 45/97] chore(icons): move icons to a separate direcrtory

---
 static/{images => icons}/add-to-playlist.svg       |  0
 static/{images => icons}/loop-icon.svg             |  0
 static/{images => icons}/loop-off-icon.svg         |  0
 static/{images => icons}/loop-once-icon.svg        |  0
 static/{images => icons}/nav-about-icon.svg        |  0
 .../{images => icons}/nav-about-selected-icon.svg  |  0
 static/{images => icons}/nav-home-icon.svg         |  0
 .../{images => icons}/nav-home-selected-icon.svg   |  0
 static/{images => icons}/nav-playlists-icon.svg    |  0
 .../nav-playlists-selected-icon.svg                |  0
 static/{images => icons}/nav-profile-icon.svg      |  0
 .../nav-profile-selected-icon.svg                  |  0
 static/{images => icons}/next-icon.svg             |  0
 static/{images => icons}/pause-icon.svg            |  0
 static/{images => icons}/play-icon.svg             |  0
 static/{images => icons}/play-playlist-icon.svg    |  0
 static/{images => icons}/previous-icon.svg         |  0
 static/{images => icons}/search-icon.svg           |  0
 static/{images => icons}/shuffle-icon.svg          |  0
 static/{images => icons}/shuffle-off-icon.svg      |  0
 static/{images => icons}/theme-icon.svg            |  0
 static/js/player.js                                | 14 +++++++-------
 views/components/header/header.templ               |  2 +-
 views/components/mobilenav/mobilenav.templ         | 14 +++++++-------
 views/components/player/desktop_player.templ       | 10 +++++-----
 views/components/player/mobile_player.templ        | 10 +++++-----
 views/components/player/player.templ               | 14 +++++++-------
 views/components/playlist/popover.templ            |  2 +-
 views/components/search/search.templ               |  2 +-
 views/components/themeswitch/themeswitch.templ     |  2 +-
 views/pages/playlist.templ                         |  2 +-
 31 files changed, 36 insertions(+), 36 deletions(-)
 rename static/{images => icons}/add-to-playlist.svg (100%)
 rename static/{images => icons}/loop-icon.svg (100%)
 rename static/{images => icons}/loop-off-icon.svg (100%)
 rename static/{images => icons}/loop-once-icon.svg (100%)
 rename static/{images => icons}/nav-about-icon.svg (100%)
 rename static/{images => icons}/nav-about-selected-icon.svg (100%)
 rename static/{images => icons}/nav-home-icon.svg (100%)
 rename static/{images => icons}/nav-home-selected-icon.svg (100%)
 rename static/{images => icons}/nav-playlists-icon.svg (100%)
 rename static/{images => icons}/nav-playlists-selected-icon.svg (100%)
 rename static/{images => icons}/nav-profile-icon.svg (100%)
 rename static/{images => icons}/nav-profile-selected-icon.svg (100%)
 rename static/{images => icons}/next-icon.svg (100%)
 rename static/{images => icons}/pause-icon.svg (100%)
 rename static/{images => icons}/play-icon.svg (100%)
 rename static/{images => icons}/play-playlist-icon.svg (100%)
 rename static/{images => icons}/previous-icon.svg (100%)
 rename static/{images => icons}/search-icon.svg (100%)
 rename static/{images => icons}/shuffle-icon.svg (100%)
 rename static/{images => icons}/shuffle-off-icon.svg (100%)
 rename static/{images => icons}/theme-icon.svg (100%)

diff --git a/static/images/add-to-playlist.svg b/static/icons/add-to-playlist.svg
similarity index 100%
rename from static/images/add-to-playlist.svg
rename to static/icons/add-to-playlist.svg
diff --git a/static/images/loop-icon.svg b/static/icons/loop-icon.svg
similarity index 100%
rename from static/images/loop-icon.svg
rename to static/icons/loop-icon.svg
diff --git a/static/images/loop-off-icon.svg b/static/icons/loop-off-icon.svg
similarity index 100%
rename from static/images/loop-off-icon.svg
rename to static/icons/loop-off-icon.svg
diff --git a/static/images/loop-once-icon.svg b/static/icons/loop-once-icon.svg
similarity index 100%
rename from static/images/loop-once-icon.svg
rename to static/icons/loop-once-icon.svg
diff --git a/static/images/nav-about-icon.svg b/static/icons/nav-about-icon.svg
similarity index 100%
rename from static/images/nav-about-icon.svg
rename to static/icons/nav-about-icon.svg
diff --git a/static/images/nav-about-selected-icon.svg b/static/icons/nav-about-selected-icon.svg
similarity index 100%
rename from static/images/nav-about-selected-icon.svg
rename to static/icons/nav-about-selected-icon.svg
diff --git a/static/images/nav-home-icon.svg b/static/icons/nav-home-icon.svg
similarity index 100%
rename from static/images/nav-home-icon.svg
rename to static/icons/nav-home-icon.svg
diff --git a/static/images/nav-home-selected-icon.svg b/static/icons/nav-home-selected-icon.svg
similarity index 100%
rename from static/images/nav-home-selected-icon.svg
rename to static/icons/nav-home-selected-icon.svg
diff --git a/static/images/nav-playlists-icon.svg b/static/icons/nav-playlists-icon.svg
similarity index 100%
rename from static/images/nav-playlists-icon.svg
rename to static/icons/nav-playlists-icon.svg
diff --git a/static/images/nav-playlists-selected-icon.svg b/static/icons/nav-playlists-selected-icon.svg
similarity index 100%
rename from static/images/nav-playlists-selected-icon.svg
rename to static/icons/nav-playlists-selected-icon.svg
diff --git a/static/images/nav-profile-icon.svg b/static/icons/nav-profile-icon.svg
similarity index 100%
rename from static/images/nav-profile-icon.svg
rename to static/icons/nav-profile-icon.svg
diff --git a/static/images/nav-profile-selected-icon.svg b/static/icons/nav-profile-selected-icon.svg
similarity index 100%
rename from static/images/nav-profile-selected-icon.svg
rename to static/icons/nav-profile-selected-icon.svg
diff --git a/static/images/next-icon.svg b/static/icons/next-icon.svg
similarity index 100%
rename from static/images/next-icon.svg
rename to static/icons/next-icon.svg
diff --git a/static/images/pause-icon.svg b/static/icons/pause-icon.svg
similarity index 100%
rename from static/images/pause-icon.svg
rename to static/icons/pause-icon.svg
diff --git a/static/images/play-icon.svg b/static/icons/play-icon.svg
similarity index 100%
rename from static/images/play-icon.svg
rename to static/icons/play-icon.svg
diff --git a/static/images/play-playlist-icon.svg b/static/icons/play-playlist-icon.svg
similarity index 100%
rename from static/images/play-playlist-icon.svg
rename to static/icons/play-playlist-icon.svg
diff --git a/static/images/previous-icon.svg b/static/icons/previous-icon.svg
similarity index 100%
rename from static/images/previous-icon.svg
rename to static/icons/previous-icon.svg
diff --git a/static/images/search-icon.svg b/static/icons/search-icon.svg
similarity index 100%
rename from static/images/search-icon.svg
rename to static/icons/search-icon.svg
diff --git a/static/images/shuffle-icon.svg b/static/icons/shuffle-icon.svg
similarity index 100%
rename from static/images/shuffle-icon.svg
rename to static/icons/shuffle-icon.svg
diff --git a/static/images/shuffle-off-icon.svg b/static/icons/shuffle-off-icon.svg
similarity index 100%
rename from static/images/shuffle-off-icon.svg
rename to static/icons/shuffle-off-icon.svg
diff --git a/static/images/theme-icon.svg b/static/icons/theme-icon.svg
similarity index 100%
rename from static/images/theme-icon.svg
rename to static/icons/theme-icon.svg
diff --git a/static/js/player.js b/static/js/player.js
index dc5db7e..70803d1 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -1,13 +1,13 @@
 "use strict";
 
 const playerButtonsIcons = {
-  play: `<img class="w-[50px] h-[50px]" src="/static/images/play-icon.svg" alt="Play"/>`,
-  pause: `<img class="w-[50px] h-[50px]" src="/static/images/pause-icon.svg" alt="Pause"/>`,
-  loop: `<img class="w-[40px]" src="/static/images/loop-icon.svg" alt="Loop"/>`,
-  loopOnce: `<img class="w-[40px]" src="/static/images/loop-once-icon.svg" alt="Loop Once"/>`,
-  loopOff: `<img class="w-[40px]" src="/static/images/loop-off-icon.svg" alt="Loop Off"/>`,
-  shuffle: `<img src="/static/images/shuffle-icon.svg" alt="Shuffle"/>`,
-  shuffleOff: `<img src="/static/images/shuffle-off-icon.svg" alt="Shuffle"/>`,
+  play: `<img class="w-[50px] h-[50px]" src="/static/icons/play-icon.svg" alt="Play"/>`,
+  pause: `<img class="w-[50px] h-[50px]" src="/static/icons/pause-icon.svg" alt="Pause"/>`,
+  loop: `<img class="w-[40px]" src="/static/icons/loop-icon.svg" alt="Loop"/>`,
+  loopOnce: `<img class="w-[40px]" src="/static/icons/loop-once-icon.svg" alt="Loop Once"/>`,
+  loopOff: `<img class="w-[40px]" src="/static/icons/loop-off-icon.svg" alt="Loop Off"/>`,
+  shuffle: `<img src="/static/icons/shuffle-icon.svg" alt="Shuffle"/>`,
+  shuffleOff: `<img src="/static/icons/shuffle-off-icon.svg" alt="Shuffle"/>`,
   loading: `<div class="loader !h-10 !w-10"></div>`,
 };
 
diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index 9aeccca..617d59d 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -9,7 +9,7 @@ import (
 templ mobileHeader() {
 	<div class={ "md:hidden", "h-[250px]", "flex", "flex-col", "justify-between" }>
 		<div class={ "absolute", "top-[15px]", "right-[15px]" }>
-			@navlink.NavLink("About", "/static/images/nav-about-icon.svg", "/about")
+			@navlink.NavLink("About", "/static/icons/nav-about-icon.svg", "/about")
 		</div>
 		<div class={ "font-Ubuntu", "text-secondary" }>
 			<a href="/" class={ "flex", "justify-center", "items-center", "flex-col", "gap-y-3", "h-min" }>
diff --git a/views/components/mobilenav/mobilenav.templ b/views/components/mobilenav/mobilenav.templ
index 4482226..cc64d28 100644
--- a/views/components/mobilenav/mobilenav.templ
+++ b/views/components/mobilenav/mobilenav.templ
@@ -17,21 +17,21 @@ templ MobileNav() {
 					<li><a href="/profile">Profile</a></li>
 				</div>
 				<li>
-					@navlink.NavLink("Home", "/static/images/nav-home-icon.svg", "/")
+					@navlink.NavLink("Home", "/static/icons/nav-home-icon.svg", "/")
 				</li>
 				<li>
-					@navlink.NavLink("Playlists", "/static/images/nav-playlists-icon.svg", "/playlists")
+					@navlink.NavLink("Playlists", "/static/icons/nav-playlists-icon.svg", "/playlists")
 				</li>
 				<li>
-					@navlink.NavLink("Profile", "/static/images/nav-profile-icon.svg", "/profile")
+					@navlink.NavLink("Profile", "/static/icons/nav-profile-icon.svg", "/profile")
 				</li>
 			</ul>
 		</nav>
 	</div>
 	<div class="hidden">
-		<img src="/static/images/nav-home-selected-icon.svg" alt="Home"/>
-		<img src="/static/images/nav-playlists-selected-icon.svg" alt="Playlists"/>
-		<img src="/static/images/nav-profile-selected-icon.svg" alt="Profile"/>
-		<img src="/static/images/nav-about-selected-icon.svg" alt="About"/>
+		<img src="/static/icons/nav-home-selected-icon.svg" alt="Home"/>
+		<img src="/static/icons/nav-playlists-selected-icon.svg" alt="Playlists"/>
+		<img src="/static/icons/nav-profile-selected-icon.svg" alt="Profile"/>
+		<img src="/static/icons/nav-about-selected-icon.svg" alt="About"/>
 	</div>
 }
diff --git a/views/components/player/desktop_player.templ b/views/components/player/desktop_player.templ
index cd5cc71..bf6acee 100644
--- a/views/components/player/desktop_player.templ
+++ b/views/components/player/desktop_player.templ
@@ -13,7 +13,7 @@ templ desktopPlayer() {
 			<div
 				id="song-image"
 				class={
-					"w-[60px]", "h-[60px]", "rounded-md", "bg-primary", "bg-[url('/static/images/dankground.svg')]",
+					"w-[60px]", "h-[60px]", "rounded-md", "bg-primary", "bg-[url('/static/icons/dankground.svg')]",
 					"bg-repeat", "bg-cover", "bg-center",
 				}
 			></div>
@@ -42,19 +42,19 @@ templ desktopPlayer() {
 		<!-- player controls -->
 		<div class={ "float-right", "flex", "items-center", "gap-x-1", "min-w-[190px]" }>
 			<button id="shuffle" type="button" title="Shuffle" disabled>
-				<img src="/static/images/shuffle-off-icon.svg" alt="Shuffle"/>
+				<img src="/static/icons/shuffle-off-icon.svg" alt="Shuffle"/>
 			</button>
 			<button id="prev" type="button" title="Previous song" disabled>
-				<img src="/static/images/previous-icon.svg" alt="Previous"/>
+				<img src="/static/icons/previous-icon.svg" alt="Previous"/>
 			</button>
 			<button id="play" type="button" title="Play/Pause" disabled>
 				<div id="loading" class="loader !h-10 !w-10"></div>
 			</button>
 			<button id="next" type="button" title="Next song" disabled>
-				<img src="/static/images/next-icon.svg" alt="Next"/>
+				<img src="/static/icons/next-icon.svg" alt="Next"/>
 			</button>
 			<button id="loop" type="button" title="Loop" disabled>
-				<img src="/static/images/loop-off-icon.svg" alt="Loop"/>
+				<img src="/static/icons/loop-off-icon.svg" alt="Loop"/>
 			</button>
 		</div>
 	</div>
diff --git a/views/components/player/mobile_player.templ b/views/components/player/mobile_player.templ
index 2e2f0d6..b068894 100644
--- a/views/components/player/mobile_player.templ
+++ b/views/components/player/mobile_player.templ
@@ -12,7 +12,7 @@ templ mobilePlayer() {
 			<div
 				id="song-image"
 				class={
-					"w-[80px]", "h-[80px]", "rounded-md", "bg-primary", "bg-[url('/static/images/dankground.svg')]",
+					"w-[80px]", "h-[80px]", "rounded-md", "bg-primary", "bg-[url('/static/icons/dankground.svg')]",
 					"bg-repeat", "bg-cover", "bg-center",
 				}
 			></div>
@@ -41,19 +41,19 @@ templ mobilePlayer() {
 				<!-- player controls -->
 				<div class={ "flex", "items-center", "gap-x-0", "min-w-[200px]" }>
 					<button id="shuffle" type="button" title="Shuffle" disabled>
-						<img src="/static/images/shuffle-off-icon.svg" alt="Shuffle"/>
+						<img src="/static/icons/shuffle-off-icon.svg" alt="Shuffle"/>
 					</button>
 					<button id="prev" type="button" title="Previous song" disabled>
-						<img src="/static/images/previous-icon.svg" alt="Previous"/>
+						<img src="/static/icons/previous-icon.svg" alt="Previous"/>
 					</button>
 					<button id="play" type="button" title="Play/Pause" disabled>
 						<div id="loading" class="loader !h-10 !w-10"></div>
 					</button>
 					<button id="next" type="button" title="Next song" disabled>
-						<img src="/static/images/next-icon.svg" alt="Next"/>
+						<img src="/static/icons/next-icon.svg" alt="Next"/>
 					</button>
 					<button id="loop" type="button" title="Loop" disabled>
-						<img src="/static/images/loop-off-icon.svg" alt="Loop"/>
+						<img src="/static/icons/loop-off-icon.svg" alt="Loop"/>
 					</button>
 				</div>
 			</div>
diff --git a/views/components/player/player.templ b/views/components/player/player.templ
index 1e89c8f..539aa2d 100644
--- a/views/components/player/player.templ
+++ b/views/components/player/player.templ
@@ -9,13 +9,13 @@ templ PlayerSticky() {
 		}
 	</div>
 	<div class="hidden">
-		<img class="w-[50px]" src="/static/images/play-icon.svg" alt="Play"/>
-		<img class="w-[50px]" src="/static/images/pause-icon.svg" alt="Pause"/>
-		<img class="w-[40px]" src="/static/images/loop-icon.svg" alt="Loop"/>
-		<img class="w-[40px]" src="/static/images/loop-once-icon.svg" alt="Loop Once"/>
-		<img class="w-[40px]" src="/static/images/loop-off-icon.svg" alt="Loop Off"/>
-		<img class="w-[40px]" src="/static/images/shuffle-icon.svg" alt="Shuffle"/>
-		<img class="w-[40px]" src="/static/images/shuffle-off-icon.svg" alt="Shuffle"/>
+		<img class="w-[50px]" src="/static/icons/play-icon.svg" alt="Play"/>
+		<img class="w-[50px]" src="/static/icons/pause-icon.svg" alt="Pause"/>
+		<img class="w-[40px]" src="/static/icons/loop-icon.svg" alt="Loop"/>
+		<img class="w-[40px]" src="/static/icons/loop-once-icon.svg" alt="Loop Once"/>
+		<img class="w-[40px]" src="/static/icons/loop-off-icon.svg" alt="Loop Off"/>
+		<img class="w-[40px]" src="/static/icons/shuffle-icon.svg" alt="Shuffle"/>
+		<img class="w-[40px]" src="/static/icons/shuffle-off-icon.svg" alt="Shuffle"/>
 		<audio
 			id="audio-player"
 			controls
diff --git a/views/components/playlist/popover.templ b/views/components/playlist/popover.templ
index 4dc011b..45db914 100644
--- a/views/components/playlist/popover.templ
+++ b/views/components/playlist/popover.templ
@@ -68,5 +68,5 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
 }
 
 templ popoverButton() {
-	<img class={ "max-w-[30px]", "h-[30px]" } src="/static/images/add-to-playlist.svg" alt="Add to playlist"/>
+	<img class={ "max-w-[30px]", "h-[30px]" } src="/static/icons/add-to-playlist.svg" alt="Add to playlist"/>
 }
diff --git a/views/components/search/search.templ b/views/components/search/search.templ
index fddb407..195a137 100644
--- a/views/components/search/search.templ
+++ b/views/components/search/search.templ
@@ -33,7 +33,7 @@ templ Search() {
 				>
 					<img
 						class={ "w-[44px]", "h-[44px]", "rounded-r-[8px]", "pe-[10px]" }
-						src="/static/images/search-icon.svg"
+						src="/static/icons/search-icon.svg"
 						alt="search"
 					/>
 				</button>
diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index d525a95..c39b6e2 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -35,7 +35,7 @@ templ themeSwitch() {
 }
 
 templ themeSwitchButton() {
-	<img src="/static/images/theme-icon.svg" alt="Theme Selector"/>
+	<img src="/static/icons/theme-icon.svg" alt="Theme Selector"/>
 }
 
 script changeTheme(themeName string) {
diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index dac90dc..c01d363 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -24,7 +24,7 @@ templ Playlist(pl entities.Playlist) {
 							type="button"
 							title="Play playlist"
 							onClick={ playPlaylist(pl) }
-						><img src="/static/images/play-playlist-icon.svg" alt="Play"/></button>
+						><img src="/static/icons/play-playlist-icon.svg" alt="Play"/></button>
 					}
 				</div>
 				<div id="playlists-listing">

From fc6a605eac7e2114053488b5b4af717d3f1a2a2d Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 13:45:35 +0300
Subject: [PATCH 46/97] chore(profile): add profile name to request's context

---
 entities/profile.go |  1 +
 handlers/handler.go | 38 +++++++++++++++++++++++---------------
 handlers/keys.go    |  1 +
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/entities/profile.go b/entities/profile.go
index d731c1e..9d95e40 100644
--- a/entities/profile.go
+++ b/entities/profile.go
@@ -1,6 +1,7 @@
 package entities
 
 type Profile struct {
+	Id       uint `json:"-"`
 	Email    string
 	Name     string
 	PfpLink  string
diff --git a/handlers/handler.go b/handlers/handler.go
index f4e2df3..70d0fda 100644
--- a/handlers/handler.go
+++ b/handlers/handler.go
@@ -4,6 +4,7 @@ import (
 	"context"
 	"dankmuzikk/config"
 	"dankmuzikk/db"
+	"dankmuzikk/entities"
 	"dankmuzikk/models"
 	"dankmuzikk/services/jwt"
 	"net/http"
@@ -32,12 +33,14 @@ func NewHandler(
 // OptionalAuthPage authenticates a page's handler optionally (without redirection).
 func (a *Handler) OptionalAuthPage(h http.HandlerFunc) http.HandlerFunc {
 	return a.NoAuthPage(func(w http.ResponseWriter, r *http.Request) {
-		profileId, err := a.authenticate(r)
+		profile, err := a.authenticate(r)
 		if err != nil {
 			h(w, r)
 			return
 		}
-		h(w, r.WithContext(context.WithValue(r.Context(), ProfileIdKey, profileId)))
+		ctx := context.WithValue(r.Context(), ProfileIdKey, profile.Id)
+		ctx = context.WithValue(ctx, FullNameKey, profile.Name)
+		h(w, r.WithContext(ctx))
 	})
 }
 
@@ -45,20 +48,22 @@ func (a *Handler) OptionalAuthPage(h http.HandlerFunc) http.HandlerFunc {
 func (a *Handler) AuthPage(h http.HandlerFunc) http.HandlerFunc {
 	return a.NoAuthPage(func(w http.ResponseWriter, r *http.Request) {
 		htmxRedirect := IsNoLayoutPage(r)
-		profileId, err := a.authenticate(r)
+		profile, err := a.authenticate(r)
 		authed := err == nil
+		ctx := context.WithValue(r.Context(), ProfileIdKey, profile.Id)
+		ctx = context.WithValue(ctx, FullNameKey, profile.Name)
 
 		switch {
 		case authed && slices.Contains(noAuthPaths, r.URL.Path):
 			http.Redirect(w, r, config.Env().Hostname, http.StatusTemporaryRedirect)
 		case !authed && slices.Contains(noAuthPaths, r.URL.Path):
-			h(w, r.WithContext(context.WithValue(r.Context(), ProfileIdKey, profileId)))
+			h(w, r.WithContext(ctx))
 		case !authed && htmxRedirect:
 			w.Header().Set("HX-Redirect", "/login")
 		case !authed && !htmxRedirect:
 			http.Redirect(w, r, config.Env().Hostname+"/login", http.StatusTemporaryRedirect)
 		default:
-			h(w, r.WithContext(context.WithValue(r.Context(), ProfileIdKey, profileId)))
+			h(w, r.WithContext(ctx))
 		}
 	})
 }
@@ -76,12 +81,12 @@ func (a *Handler) NoAuthPage(h http.HandlerFunc) http.HandlerFunc {
 // AuthApi authenticates an API's handler.
 func (a *Handler) AuthApi(h http.HandlerFunc) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		profileId, err := a.authenticate(r)
+		profile, err := a.authenticate(r)
 		if err != nil {
 			w.WriteHeader(http.StatusUnauthorized)
 			return
 		}
-		h(w, r.WithContext(context.WithValue(r.Context(), ProfileIdKey, profileId)))
+		h(w, r.WithContext(context.WithValue(r.Context(), ProfileIdKey, profile.Id)))
 	}
 }
 
@@ -93,22 +98,22 @@ func (a *Handler) NoAuthApi(h http.HandlerFunc) http.HandlerFunc {
 	}
 }
 
-func (a *Handler) authenticate(r *http.Request) (uint, error) {
+func (a *Handler) authenticate(r *http.Request) (entities.Profile, error) {
 	sessionToken, err := r.Cookie(SessionTokenKey)
 	if err != nil {
-		return 0, err
+		return entities.Profile{}, err
 	}
 	theThing, err := a.jwtUtil.Decode(sessionToken.Value, jwt.SessionToken)
 	if err != nil {
-		return 0, err
+		return entities.Profile{}, err
 	}
 	payload, valid := theThing.Payload.(map[string]any)
 	if !valid || payload == nil {
-		return 0, err
+		return entities.Profile{}, err
 	}
 	username, validUsername := theThing.Payload.(map[string]any)["username"].(string)
 	if !validUsername || username == "" {
-		return 0, err
+		return entities.Profile{}, err
 	}
 
 	var profile models.Profile
@@ -117,16 +122,19 @@ func (a *Handler) authenticate(r *http.Request) (uint, error) {
 		profileRepo.
 		GetDB().
 		Model(&profile).
-		Select("id").
+		Select("id", "name").
 		Where("username = ?", username).
 		First(&profile).
 		Error
 
 	if err != nil {
-		return 0, err
+		return entities.Profile{}, err
 	}
 
-	return profile.Id, nil
+	return entities.Profile{
+		Id:   profile.Id,
+		Name: profile.Name,
+	}, nil
 }
 
 func isMobile(r *http.Request) bool {
diff --git a/handlers/keys.go b/handlers/keys.go
index b451293..ac4898e 100644
--- a/handlers/keys.go
+++ b/handlers/keys.go
@@ -12,4 +12,5 @@ const (
 	ProfileIdKey = "profile-id"
 	ThemeKey     = "theme-name"
 	IsMobileKey  = "is-mobile"
+	FullNameKey  = "full-name"
 )

From e8702b44af4bd668707dbecfa3c0f6a95b86a28b Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 13:46:07 +0300
Subject: [PATCH 47/97] chore(profile): add user name to the mobile header

more friendly and stuff
---
 views/components/header/header.templ | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index 617d59d..7838db3 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -23,7 +23,11 @@ templ mobileHeader() {
 		</div>
 		<div class={  }>
 			<p class={ "text-secondary", "font-Ubuntu", "text-xl" }>
-				Hey,
+				if fullName, ok := ctx.Value("full-name").(string); ok {
+					Hi { fullName } 👋
+				} else {
+					Hiyo 👋
+				}
 				<br/>
 				Wanna play something?
 			</p>

From 0f48a349ccb7eabb15d14b5bd4d9b5b37289c989 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 13:53:37 +0300
Subject: [PATCH 48/97] chore(header): set no layout home link

---
 views/components/header/header.templ | 29 +++++++++++++---------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index 7838db3..573c1c3 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -6,20 +6,24 @@ import (
 	"dankmuzikk/views/components/navlink"
 )
 
+templ homeLinkContainer() {
+	<div class={ "flex", "justify-center", "items-center", "flex-col", "md:flex-row", "gap-3", "h-min" }>
+		<img
+			src="/static/android-chrome-512x512.png"
+			alt="DankMuzikk Logo"
+			class={ "w-[55px]", "rounded-md" }
+		/>
+		<h1 class={ "text-3xl", "lg:text-2xl", "md:hidden", "lg:block" }>DankMuzikk</h1>
+	</div>
+}
+
 templ mobileHeader() {
 	<div class={ "md:hidden", "h-[250px]", "flex", "flex-col", "justify-between" }>
 		<div class={ "absolute", "top-[15px]", "right-[15px]" }>
 			@navlink.NavLink("About", "/static/icons/nav-about-icon.svg", "/about")
 		</div>
 		<div class={ "font-Ubuntu", "text-secondary" }>
-			<a href="/" class={ "flex", "justify-center", "items-center", "flex-col", "gap-y-3", "h-min" }>
-				<img
-					src="/static/android-chrome-512x512.png"
-					alt="DankMuzikk Logo"
-					class={ "w-[55px]", "rounded-md" }
-				/>
-				<h1 class={ "text-3xl" }>DankMuzikk</h1>
-			</a>
+			@navlink.LinkContainer("/", homeLinkContainer())
 		</div>
 		<div class={  }>
 			<p class={ "text-secondary", "font-Ubuntu", "text-xl" }>
@@ -40,14 +44,7 @@ templ mobileHeader() {
 
 templ desktopHeader() {
 	<div class={ "hidden", "md:flex", "justify-between", "font-Ubuntu", "text-secondary" }>
-		<a href="/" class={ "flex", "justify-center", "items-center", "gap-x-3", "h-min" }>
-			<img
-				src="/static/android-chrome-512x512.png"
-				alt="DankMuzikk Logo"
-				class={ "w-[55px]", "rounded-md" }
-			/>
-			<h1 class={ "hidden", "lg:block", "text-2xl" }>DankMuzikk</h1>
-		</a>
+		@navlink.LinkContainer("/", homeLinkContainer())
 		<div class={ "flex", "justify-center", "items-center" }>
 			@search.Search()
 		</div>

From 6235c6978be7bffbf0bcfca62bc20ab7eec17751 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 14:02:12 +0300
Subject: [PATCH 49/97] chore(playlists): add default size to playlist

---
 views/pages/playlists.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index d44cd41..400bd09 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -52,7 +52,7 @@ templ singlePlaylist(pl entities.Playlist) {
 			"flex", "flex-row", "lg:flex-col", "lg:justify-center", "items-center", "gap-x-5", "lg:gap-x-0",
 		}
 	>
-		<img src="/static/images/album-cover-icon.svg" class={ "lg:w-[125px]", "lg:h-[125px]" } alt=""/>
+		<img src="/static/images/album-cover-icon.svg" class={ "w-[70px] h-[70px] lg:w-[125px]", "lg:h-[125px]" } alt=""/>
 		<div class={ "lg:text-center" }>
 			<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ pl.Title }</p>
 			<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>

From 08d79608015d3a0ec91a60833649fb95216a5f4b Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 14:12:58 +0300
Subject: [PATCH 50/97] fix(playlist): empty playlist view

---
 handlers/pages/pages.go         |  9 +++++++--
 services/playlists/errors.go    |  1 +
 services/playlists/playlists.go | 10 ++++++++--
 views/pages/playlist.templ      |  2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
index a17823a..a359ac9 100644
--- a/handlers/pages/pages.go
+++ b/handlers/pages/pages.go
@@ -88,11 +88,16 @@ func (p *pagesHandler) HandleSinglePlaylistPage(w http.ResponseWriter, r *http.R
 	}
 
 	playlist, err := p.playlistsService.Get(playlistPubId, profileId)
-	if err != nil {
+	switch err {
+	case playlists.ErrUnauthorizedToSeePlaylist:
 		w.Write([]byte(notFoundMessage))
 		return
+	default:
+		if playlist.Title == "" {
+			w.Write([]byte(notFoundMessage))
+			return
+		}
 	}
-	_ = playlist
 
 	if handlers.IsNoLayoutPage(r) {
 		pages.Playlist(playlist).Render(r.Context(), w)
diff --git a/services/playlists/errors.go b/services/playlists/errors.go
index a2a4bd5..d6689bb 100644
--- a/services/playlists/errors.go
+++ b/services/playlists/errors.go
@@ -6,4 +6,5 @@ var (
 	ErrOwnerCantLeavePlaylist      = errors.New("playlists: owner can't leave playlists")
 	ErrNonOwnerCantDeletePlaylists = errors.New("playlists: non owners can only leave playlists")
 	ErrUnauthorizedToSeePlaylist   = errors.New("playlists: unauthorized to see playlist")
+	ErrEmptyPlaylist               = errors.New("playlists: empty playlists")
 )
diff --git a/services/playlists/playlists.go b/services/playlists/playlists.go
index 8b772ff..2c10446 100644
--- a/services/playlists/playlists.go
+++ b/services/playlists/playlists.go
@@ -158,10 +158,16 @@ func (p *Service) Get(playlistPubId string, ownerId uint) (entities.Playlist, er
 		Find(&playlistSongs).
 		Error
 	if err != nil {
-		return entities.Playlist{}, err
+		return entities.Playlist{
+			PublicId: dbPlaylists[0].PublicId,
+			Title:    dbPlaylists[0].Title,
+		}, err
 	}
 	if len(playlistSongs) == 0 {
-		return entities.Playlist{}, ErrUnauthorizedToSeePlaylist
+		return entities.Playlist{
+			PublicId: dbPlaylists[0].PublicId,
+			Title:    dbPlaylists[0].Title,
+		}, ErrEmptyPlaylist
 	}
 
 	mappedPlaylistSongsToPlaysSuka := make(map[uint]int)
diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index c01d363..e0ec92e 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -10,7 +10,7 @@ templ Playlist(pl entities.Playlist) {
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
-					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl", "text-secondary",
+					"w-full", "md:w-2/3", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl", "text-secondary",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
 				}
 			>

From d7b8100e1f0c069a25f3681c8c70aa447f9795c4 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 14:22:02 +0300
Subject: [PATCH 51/97] chore(playlist): fix weird lists scroll

---
 views/pages/playlist.templ  | 6 +++---
 views/pages/playlists.templ | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index e0ec92e..a2ff877 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -6,7 +6,7 @@ import (
 )
 
 templ Playlist(pl entities.Playlist) {
-	<main class={ "w-full", "h-[100dvh]", "lg:h-auto" }>
+	<main class={ "w-full", "h-full", "lg:h-auto" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
@@ -33,8 +33,8 @@ templ Playlist(pl entities.Playlist) {
 					} else {
 						<div
 							class={
-								"w-full", "flex", "flex-col",
-								"gap-5", "lg:my-10",
+								"w-full", "overflow-y-scroll", "min-h-[40vh]", "max-h-[50vh]", "md:max-h-[65vh]",
+								"flex", "flex-col", "gap-5", "lg:my-10",
 							}
 						>
 							for _, song := range pl.Songs {
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index 400bd09..44b376a 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -8,11 +8,11 @@ import (
 )
 
 templ Playlists(pls []entities.Playlist) {
-	<main class={ "w-full", "h-[100dvh]", "lg:h-auto" }>
+	<main class={ "w-full", "h-auto", "lg:h-auto" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
-					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl", "text-secondary",
+					"w-full", "md:w-2/3", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl", "text-secondary",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
 				}
 			>
@@ -35,6 +35,7 @@ templ Playlists(pls []entities.Playlist) {
 templ JustPlaylists(pls []entities.Playlist) {
 	<div
 		class={
+			"w-full", "overflow-y-scroll", "min-h-[40vh]", "max-h-[50vh]", "md:max-h-[65vh]",
 			"grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "xl:grid-cols-4", "2xl:grid-cols-5",
 			"gap-5", "lg:my-10",
 		}

From 77b0c3fa86d336a54898a6a33b49419cbe1a94dd Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 14:26:21 +0300
Subject: [PATCH 52/97] chore(playlist): update empty messages

---
 views/pages/playlist.templ  | 2 +-
 views/pages/playlists.templ | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index a2ff877..890e98e 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -29,7 +29,7 @@ templ Playlist(pl entities.Playlist) {
 				</div>
 				<div id="playlists-listing">
 					if pl.Songs == nil || len(pl.Songs) == 0 {
-						<p>This playlist is empty!</p>
+						<p>Hmm... This playlist looks empty, you can add songs from the search!</p>
 					} else {
 						<div
 							class={
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index 44b376a..e4bcdb5 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -22,7 +22,7 @@ templ Playlists(pls []entities.Playlist) {
 				</div>
 				<div id="playlists-listing">
 					if pls == nil || len(pls) == 0 {
-						<p>No playlists were found!</p>
+						<p>Hmm... You don't have any playlists yet, you can create from the button above!</p>
 					} else {
 						@JustPlaylists(pls)
 					}

From b7884c8d1d446ca3b0e338870a43f0ece9b5d1ff Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 14:47:13 +0300
Subject: [PATCH 53/97] chore(views): update sizes and scroll for mobile

---
 views/pages/playlist.templ  | 4 ++++
 views/pages/playlists.templ | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 890e98e..8aea23d 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -12,6 +12,7 @@ templ Playlist(pl entities.Playlist) {
 				class={
 					"w-full", "md:w-2/3", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl", "text-secondary",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
+					"mb-[170px]", "lg:mb-0",
 				}
 			>
 				<div class={ "flex", "justify-between", "items-center", "w-full" }>
@@ -69,6 +70,9 @@ templ Playlist(pl entities.Playlist) {
 			</section>
 		</div>
 	</main>
+	<script>
+        window.scrollTo(0, 1000);
+    </script>
 }
 
 css songThumb(url string) {
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index e4bcdb5..2527996 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -14,6 +14,7 @@ templ Playlists(pls []entities.Playlist) {
 				class={
 					"w-full", "md:w-2/3", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl", "text-secondary",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
+					"mb-[170px]", "lg:mb-0",
 				}
 			>
 				<div class={ "flex", "justify-between", "items-center", "w-full" }>
@@ -30,6 +31,9 @@ templ Playlists(pls []entities.Playlist) {
 			</section>
 		</div>
 	</main>
+	<script>
+        window.scrollTo(0, 1000);
+    </script>
 }
 
 templ JustPlaylists(pls []entities.Playlist) {

From 6214880190bdde036aa3459fbefa3b64802e4eb7 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 14:56:37 +0300
Subject: [PATCH 54/97] chore(theme): add theme switcher to mobile's header

---
 views/components/header/header.templ | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index 573c1c3..f4c18fc 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -19,9 +19,12 @@ templ homeLinkContainer() {
 
 templ mobileHeader() {
 	<div class={ "md:hidden", "h-[250px]", "flex", "flex-col", "justify-between" }>
-		<div class={ "absolute", "top-[15px]", "right-[15px]" }>
+		<div class={ "absolute", "top-[20px]", "left-[20px]", "w-[23px]" }>
 			@navlink.NavLink("About", "/static/icons/nav-about-icon.svg", "/about")
 		</div>
+		<div class={ "absolute", "top-[15px]", "right-[15px]" }>
+			@themeswitch.ThemeSwitch()
+		</div>
 		<div class={ "font-Ubuntu", "text-secondary" }>
 			@navlink.LinkContainer("/", homeLinkContainer())
 		</div>

From baad7d598a36b43874b793fea2749b80198cc671 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 14:57:06 +0300
Subject: [PATCH 55/97] chore(pages): fix scroll

---
 views/pages/about.templ   |  2 +-
 views/pages/privacy.templ |  2 +-
 views/pages/profile.templ | 13 +++++--------
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/views/pages/about.templ b/views/pages/about.templ
index 0153629..2ac417d 100644
--- a/views/pages/about.templ
+++ b/views/pages/about.templ
@@ -9,7 +9,7 @@ templ About() {
 				class={
 					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
-					"justify-between", "text-secondary",
+					"justify-between", "text-secondary", "mb-[100px]", "lg:mb-0",
 				}
 			>
 				<section id="brand" class={ "w-full", "flex", "justify-center" }>
diff --git a/views/pages/privacy.templ b/views/pages/privacy.templ
index 0046ebd..add1c3f 100644
--- a/views/pages/privacy.templ
+++ b/views/pages/privacy.templ
@@ -6,7 +6,7 @@ templ Privacy() {
 			class={
 				"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl",
 				"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
-				"justify-between", "text-secondary",
+				"justify-between", "text-secondary", "mb-[100px]", "lg:mb-0",
 			}
 		>
 			<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Privacy</h1>
diff --git a/views/pages/profile.templ b/views/pages/profile.templ
index 019f42e..5f39a42 100644
--- a/views/pages/profile.templ
+++ b/views/pages/profile.templ
@@ -2,17 +2,16 @@ package pages
 
 import (
 	"dankmuzikk/entities"
-	"dankmuzikk/views/components/themeswitch"
 )
 
 templ Profile(prfl entities.Profile) {
-	<main class={ "w-full", "h-[100dvh]", "lg:h-auto" }>
+	<main class={ "w-full", "h-full", "lg:h-auto" }>
 		<div class={ "flex", "justify-center" }>
 			<section
 				class={
 					"w-full", "md:w-2/3", "min-h-[50vh]", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl",
 					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
-					"justify-between", "text-secondary",
+					"justify-between", "text-secondary", "mb-[170px]", "lg:mb-0",
 				}
 			>
 				<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Profile</h1>
@@ -44,13 +43,11 @@ templ Profile(prfl entities.Profile) {
 					</a>
 				</section>
 				<!-- TODO: remove the settings hide thingy, i.e. implement rest of the fucking settings :) -->
-				<section id="more-info" class={ "flex", "md:hidden", "flex-col", "gap-y-4" }>
+				<!--
+				<section id="more-info" class={ "hidden", "flex-col", "gap-y-4" }>
 					<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>Settings</h1>
-					<div class={ "flex", "justify-between" }>
-						<span>Theme</span>
-						@themeswitch.ThemeSwitch()
-					</div>
 				</section>
+                -->
 			</section>
 		</div>
 	</main>

From 134f7a2af92a3ca6370238dba41ffe2306b922ba Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 15:00:45 +0300
Subject: [PATCH 56/97] chore(config): update .env.example

---
 .env.example | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.env.example b/.env.example
index b784872..52d5763 100644
--- a/.env.example
+++ b/.env.example
@@ -1,19 +1,19 @@
 PORT=3000
-HOSTNAME="http://localhost:${PORT}"
+HOSTNAME="http://localhost:3000"
 JWT_SECRET="spoikoninochi"
 
 YOUTUBE_SCAPER_URL="http://localhost:1234"
 YOUTUBE_DOWNLOADER_URL="http://localhost:4321"
-YOUTUBE_MUSIC_DOWNLOAD_PATH="."
+YOUTUBE_MUSIC_DOWNLOAD_PATH="./_serve/"
 
 GOOGLE_APPLICATION_CREDENTIALS="./google-service-account.json"
 GOOGLE_CLIENT_ID=""
 GOOGLE_CLIENT_SECRET=""
 
-DB_NAME=""
-DB_HOST=""
-DB_USERNAME=""
-DB_PASSWORD=""
+DB_NAME="dankabase"
+DB_HOST="dank-db"
+DB_USERNAME="root"
+DB_PASSWORD="previetcomrade"
 
 SMTP_HOST=""
 SMTP_PORT=""

From 451861b8ab7ee46af0e9d5e595cc10d33f065708 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 15:15:12 +0300
Subject: [PATCH 57/97] chore(playlist): add back button to playlist

---
 static/icons/back-button-icon.svg |   3 +
 views/pages/playlist.templ        | 102 ++++++++++++++++--------------
 2 files changed, 58 insertions(+), 47 deletions(-)
 create mode 100644 static/icons/back-button-icon.svg

diff --git a/static/icons/back-button-icon.svg b/static/icons/back-button-icon.svg
new file mode 100644
index 0000000..b72f35b
--- /dev/null
+++ b/static/icons/back-button-icon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.78462 12.9782C2.16532 11.9662 1.35578 11.4603 1.0781 10.8123C0.835619 10.2466 0.835619 9.60613 1.0781 9.04031C1.35578 8.3925 2.16532 7.88651 3.78462 6.87442L11.3899 2.12111C13.187 0.997903 14.0856 0.436243 14.8272 0.495963C15.4735 0.547923 16.066 0.876214 16.4527 1.39682C16.8962 1.99402 16.8962 3.05369 16.8962 5.17301L9.42289 9.89298L16.8962 14.6797C16.8962 16.799 16.8962 17.8586 16.4527 18.4558C16.066 18.9764 15.4735 19.3048 14.8272 19.3568C14.0856 19.4164 13.187 18.8548 11.3899 17.7316L3.78462 12.9782Z" stroke="white" stroke-linejoin="round"/>
+</svg>
diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 8aea23d..fa1fb16 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -3,6 +3,7 @@ package pages
 import (
 	"dankmuzikk/entities"
 	"fmt"
+	"dankmuzikk/views/components/navlink"
 )
 
 templ Playlist(pl entities.Playlist) {
@@ -11,61 +12,68 @@ templ Playlist(pl entities.Playlist) {
 			<section
 				class={
 					"w-full", "md:w-2/3", "bg-primary-trans-20", "backdrop-blur-md", "rounded-xl", "text-secondary",
-					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]", "flex", "flex-col", "gap-y-6",
+					"rounded-[10px]", "m-[10px]", "md:m-[20px]", "p-[20px]", "md:p-[40px]",
 					"mb-[170px]", "lg:mb-0",
 				}
 			>
-				<div class={ "flex", "justify-between", "items-center", "w-full" }>
-					<div class={ "flex", "flex-col", "gap-y-1" }>
-						<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>{ pl.Title }</h1>
-						<p class={ "text-secondary", "text-md" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>
-					</div>
-					if pl.Songs != nil && len(pl.Songs) > 0 {
-						<button
-							type="button"
-							title="Play playlist"
-							onClick={ playPlaylist(pl) }
-						><img src="/static/icons/play-playlist-icon.svg" alt="Play"/></button>
-					}
+				<div class={ "mb-4" }>
+					@navlink.NavLink("Playlists", "/static/icons/back-button-icon.svg", "/playlists", true)
 				</div>
-				<div id="playlists-listing">
-					if pl.Songs == nil || len(pl.Songs) == 0 {
-						<p>Hmm... This playlist looks empty, you can add songs from the search!</p>
-					} else {
-						<div
-							class={
-								"w-full", "overflow-y-scroll", "min-h-[40vh]", "max-h-[50vh]", "md:max-h-[65vh]",
-								"flex", "flex-col", "gap-5", "lg:my-10",
-							}
-						>
-							for _, song := range pl.Songs {
-								<div
-									class={
-										"bg-secondary-trans-20", "rounded-[10px]", "p-2", "lg:p-5", "cursor-pointer",
-										"flex", "flex-row", "items-center", "gap-5",
-									}
-									onClick={ playSongFromPlaylist(song.YtId, pl) }
-								>
+				<div
+					class={ "flex", "flex-col", "gap-y-6", }
+				>
+					<div class={ "flex", "justify-between", "items-center", "w-full" }>
+						<div class={ "flex", "flex-col", "gap-y-1" }>
+							<h1 class={ "text-secondary", "text-3xl", "lg:text-4xl" }>{ pl.Title }</h1>
+							<p class={ "text-secondary", "text-md" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>
+						</div>
+						if pl.Songs != nil && len(pl.Songs) > 0 {
+							<button
+								type="button"
+								title="Play playlist"
+								onClick={ playPlaylist(pl) }
+							><img src="/static/icons/play-playlist-icon.svg" alt="Play"/></button>
+						}
+					</div>
+					<div id="playlists-listing">
+						if pl.Songs == nil || len(pl.Songs) == 0 {
+							<p>Hmm... This playlist looks empty, you can add songs from the search!</p>
+						} else {
+							<div
+								class={
+									"w-full", "overflow-y-scroll", "min-h-[40vh]", "max-h-[50vh]", "md:max-h-[65vh]",
+									"flex", "flex-col", "gap-5", "lg:my-10",
+								}
+							>
+								for _, song := range pl.Songs {
 									<div
 										class={
-											"w-[80px]", "h-[80px]", "lg:w-[125px]", "lg:h-[125px]", "rounded-md", "bg-accent",
-											songThumb(fmt.Sprintf("url(\"%s\")", song.ThumbnailUrl)), "bg-repeat", "bg-cover", "bg-center",
-										}
-									></div>
-									<div class={ "flex", "flex-col", "lg:gap-2" }>
-										<p class={ "text-lg", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Title }</p>
-										<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Artist }</p>
-										<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Added on { song.AddedAt }</p>
-										if song.PlayTimes == 1 {
-											<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
-										} else if song.PlayTimes > 1 {
-											<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
+											"bg-secondary-trans-20", "rounded-[10px]", "p-2", "lg:p-5", "cursor-pointer",
+											"flex", "flex-row", "items-center", "gap-5",
 										}
+										onClick={ playSongFromPlaylist(song.YtId, pl) }
+									>
+										<div
+											class={
+												"w-[80px]", "h-[80px]", "lg:w-[125px]", "lg:h-[125px]", "rounded-md", "bg-accent",
+												songThumb(fmt.Sprintf("url(\"%s\")", song.ThumbnailUrl)), "bg-repeat", "bg-cover", "bg-center",
+											}
+										></div>
+										<div class={ "flex", "flex-col", "lg:gap-2" }>
+											<p class={ "text-lg", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Title }</p>
+											<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ song.Artist }</p>
+											<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Added on { song.AddedAt }</p>
+											if song.PlayTimes == 1 {
+												<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played once</p>
+											} else if song.PlayTimes > 1 {
+												<p class={ "text-md", "max-w-[200px]", "lg:max-w-[600px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>Played { fmt.Sprint( song.PlayTimes) } times</p>
+											}
+										</div>
 									</div>
-								</div>
-							}
-						</div>
-					}
+								}
+							</div>
+						}
+					</div>
 				</div>
 			</section>
 		</div>

From b2d1e1dcc4b63f627c0451112a7db5f582d08436 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 15:15:35 +0300
Subject: [PATCH 58/97] chore(navlink): add optional text-img display

---
 views/components/navlink/navlink.templ | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/views/components/navlink/navlink.templ b/views/components/navlink/navlink.templ
index 8af55b0..2640f94 100644
--- a/views/components/navlink/navlink.templ
+++ b/views/components/navlink/navlink.templ
@@ -1,6 +1,6 @@
 package navlink
 
-templ NavLink(title, imageUrl, path string) {
+templ NavLink(title, imageUrl, path string, showTilte ...bool) {
 	<a
 		href={ templ.SafeURL(path) }
 		title={ title }
@@ -12,7 +12,12 @@ templ NavLink(title, imageUrl, path string) {
 		onClick={ updateHref(path) }
 	>
 		if imageUrl != "" {
-			<img src={ imageUrl } alt={ title }/>
+			<div class={ "flex", "gap-x-3", "items-center" }>
+				<img src={ imageUrl } alt={ title }/>
+				if len(showTilte) > 0 && showTilte[0] {
+					{ title }
+				}
+			</div>
 		} else {
 			{ title }
 		}

From 6ff61b49d15ddf0e0974ecff6ef0f062cff74fff Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 15:19:13 +0300
Subject: [PATCH 59/97] fix(playlist): content spacing

---
 views/pages/playlist.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index fa1fb16..6d7fa5c 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -20,7 +20,7 @@ templ Playlist(pl entities.Playlist) {
 					@navlink.NavLink("Playlists", "/static/icons/back-button-icon.svg", "/playlists", true)
 				</div>
 				<div
-					class={ "flex", "flex-col", "gap-y-6", }
+					class={ "flex", "flex-col", "gap-y-4", "lg:gap-y-0", }
 				>
 					<div class={ "flex", "justify-between", "items-center", "w-full" }>
 						<div class={ "flex", "flex-col", "gap-y-1" }>

From 068bee45cc260b124cadcd3ab8ade4592d7bd2cc Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 15:24:31 +0300
Subject: [PATCH 60/97] chore(scroll): this wasn't needed

---
 views/pages/playlist.templ  | 3 ---
 views/pages/playlists.templ | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index 6d7fa5c..eca3d9d 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -78,9 +78,6 @@ templ Playlist(pl entities.Playlist) {
 			</section>
 		</div>
 	</main>
-	<script>
-        window.scrollTo(0, 1000);
-    </script>
 }
 
 css songThumb(url string) {
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index 2527996..806ac1e 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -31,9 +31,6 @@ templ Playlists(pls []entities.Playlist) {
 			</section>
 		</div>
 	</main>
-	<script>
-        window.scrollTo(0, 1000);
-    </script>
 }
 
 templ JustPlaylists(pls []entities.Playlist) {

From e1b9c5a5420e3c010c5c0fe64b65dd22409771b8 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 15:30:28 +0300
Subject: [PATCH 61/97] chore(seo): add robots and sitemap

---
 static/robots.txt  | 35 +++++++++++++++++++++++++++++++++++
 static/sitemap.xml | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 static/robots.txt
 create mode 100644 static/sitemap.xml

diff --git a/static/robots.txt b/static/robots.txt
new file mode 100644
index 0000000..e83c5ea
--- /dev/null
+++ b/static/robots.txt
@@ -0,0 +1,35 @@
+User-agent: Googlebot
+Disallow:
+User-agent: googlebot-image
+Disallow:
+User-agent: googlebot-mobile
+Disallow:
+User-agent: MSNBot
+Disallow:
+User-agent: Slurp
+Disallow:
+User-agent: Teoma
+Disallow:
+User-agent: Gigabot
+Disallow:
+User-agent: Robozilla
+Disallow:
+User-agent: Nutch
+Disallow:
+User-agent: ia_archiver
+Disallow:
+User-agent: baiduspider
+Disallow:
+User-agent: naverbot
+Disallow:
+User-agent: yeti
+Disallow:
+User-agent: yahoo-mmcrawler
+Disallow:
+User-agent: psbot
+Disallow:
+User-agent: yahoo-blogs/v3.9
+Disallow:
+User-agent: *
+Disallow:
+
diff --git a/static/sitemap.xml b/static/sitemap.xml
new file mode 100644
index 0000000..2b3a5e9
--- /dev/null
+++ b/static/sitemap.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+  <url>
+    <loc>https://dankmuzikk.com/</loc>
+    <lastmod>2024-05-17T12:28:54+00:00</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://dankmuzikk.com/about</loc>
+    <lastmod>2024-05-17T12:28:54+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://dankmuzikk.com/login</loc>
+    <lastmod>2024-05-17T12:28:54+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://dankmuzikk.com/playlists</loc>
+    <lastmod>2024-05-17T12:28:54+00:00</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://dankmuzikk.com/privacy</loc>
+    <lastmod>2024-05-17T12:28:54+00:00</lastmod>
+    <priority>0.64</priority>
+  </url>
+  <url>
+    <loc>https://dankmuzikk.com/signup</loc>
+    <lastmod>2024-05-17T12:28:54+00:00</lastmod>
+    <priority>0.64</priority>
+  </url>
+</urlset>

From 123aee7bd36c54ef347ee6f4fe33b626df320ebe Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 16:25:41 +0300
Subject: [PATCH 62/97] chore(theme): added transparent shades

---
 views/components/themeswitch/themeswitch.templ | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index c39b6e2..f9b58a3 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -46,8 +46,12 @@ script changeTheme(themeName string) {
         default: {
             primary: "#4c8c36",
             primary20: "#4c8c3633",
+            primary30: "#4c8c364c",
+            primary69: "#4c8c36b0",
             secondary: "#ffffff",
             secondary20: "#ffffff33",
+            secondary30: "#ffffff4c",
+            secondary69: "#ffffffb0",
             accent: "#000000",
             accent20: "#00000033",
             accent30: "#0000004c",
@@ -57,8 +61,12 @@ script changeTheme(themeName string) {
         black: {
             primary: "#000000",
             primary20: "#00000033",
+            primary30: "#0000004c",
+            primary69: "#000000b0",
             secondary: "#ffffff",
             secondary20: "#ffffff33",
+            secondary30: "#ffffff4c",
+            secondary69: "#ffffffb0",
             accent: "#D3FCBF",
             accent20: "#D3FCBF33",
             accent30: "#D3FCBF4c",
@@ -75,8 +83,12 @@ script changeTheme(themeName string) {
 
     style.setProperty('--primary-color', theme.primary);
     style.setProperty('--primary-color-20', theme.primary20);
+    style.setProperty('--primary-color-30', theme.primary30);
+    style.setProperty('--primary-color-69', theme.primary69);
     style.setProperty('--secondary-color', theme.secondary);
     style.setProperty('--secondary-color-20', theme.secondary20);
+    style.setProperty('--secondary-color-30', theme.secondary30);
+    style.setProperty('--secondary-color-69', theme.secondary69);
     style.setProperty('--accent-color', theme.accent);
     style.setProperty('--accent-color-20', theme.accent20);
     style.setProperty('--accent-color-30', theme.accent30);

From 727c51ea83b4c927dc747403f85c43c60d2ae9ae Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 17:12:19 +0300
Subject: [PATCH 63/97] feat(theme): add white theme

---
 handlers/handler.go                           |  2 ++
 static/css/themes/white.css                   | 21 +++++++++++++
 static/images/dankground-light.svg            | 10 ++++++
 .../components/themeswitch/themeswitch.templ  | 31 ++++++++++++++++---
 4 files changed, 59 insertions(+), 5 deletions(-)
 create mode 100644 static/css/themes/white.css
 create mode 100644 static/images/dankground-light.svg

diff --git a/handlers/handler.go b/handlers/handler.go
index 70d0fda..7c93598 100644
--- a/handlers/handler.go
+++ b/handlers/handler.go
@@ -149,6 +149,8 @@ func getTheme(r *http.Request) string {
 	switch themeCookie.Value {
 	case "black":
 		return "black"
+	case "white":
+		return "white"
 	case "default":
 		fallthrough
 	default:
diff --git a/static/css/themes/white.css b/static/css/themes/white.css
new file mode 100644
index 0000000..327ae93
--- /dev/null
+++ b/static/css/themes/white.css
@@ -0,0 +1,21 @@
+:root {
+  --primary-color: #ffffff;
+  --primary-color-20: #ffffff33;
+  --primary-color-30: #ffffff4c;
+  --primary-color-69: #ffffffb0;
+
+  --secondary-color: #4c8c36;
+  --secondary-color-20: #4c8c3633;
+  --secondary-color-30: #4c8c364c;
+  --secondary-color-69: #4c8c36b0;
+
+  --accent-color: #d5ffc1;
+  --accent-color-20: #d5ffc133;
+  --accent-color-30: #d5ffc14c;
+  --accent-color-69: #d5ffc1b0;
+}
+
+body {
+  background-image: url("/static/images/dankground-light.svg");
+  background-color: var(--primary-color);
+}
diff --git a/static/images/dankground-light.svg b/static/images/dankground-light.svg
new file mode 100644
index 0000000..fc6b5c6
--- /dev/null
+++ b/static/images/dankground-light.svg
@@ -0,0 +1,10 @@
+<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="1920" height="1080" fill="url(#pattern0_169_497)"/>
+<rect width="1920" height="1080" fill="white" fill-opacity="0.55"/>
+<defs>
+<pattern id="pattern0_169_497" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_169_497" transform="scale(0.000520833 0.000925926)"/>
+</pattern>
+<image id="image0_169_497" width="1920" height="1080" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAQ4B4ADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDqKKSlr548MKKKSgApaSloADSUtJQAVo2X/Hv/AMCNZ9aVmMWy+5NBUdyeiiikaBRRRQAVWmuYjG6BskgjgVZ7Vi0EydgooopmYUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUATMv+iI3+0R/n8qt2JzAfZv8KiVM6b+Of1p1gflcehFBa3LlFFFIsKKKKACiiigAooooAKjuP8Aj3k/3akqO4/495P92gTM+2bDlfWrLDcpB6GqIOOlW4pBIv8AtDrTIRVdSjYNNq+yqwwwyKiNsmerUBYq1bgjKLk9TTkiRDkDn1NOJCgknAoBIbK+2M+p4FJYfff6VWkkMjZ7DoKs2H33+goBbl6iiikaBRRRQAUUUUAFFFFAFS//ANWn1qhV+/8A9Wn1qhTM5bhRRRQSFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRS0AJRRRQAUUUUAFFFFABRRRQAUUUtABRRRQAUUUUAFJS0GgBKKKKACiiigAooooAKKKKACiiigAooooAKtWP+vP+6f5iqtWbH/j4P+6aBrc0aKKKRqFFFFAFe6n8pdq/fP6Cs9mLEkkknvV2+iBUSDqODVCmZy3CrsSBEGOpHJqlV9fuL9BQCFooopDCiiigAooooAKKKKACiiigAooooAKhuf8AVj/e/wAamqG5/wBUP97/ABoBhYuquwYgbsYzWhWL34rapjiFFAIIyKKRQUUUUAFFFFABRRRQAUUUUAQ3FwIVGBlj0FUzdzE/fx7ACku2JuWB7YAqGmZtu5N9rn/v/oKPtU3/AD0P5CoaKBXZN9qn/wCen6Cj7VP/AM9P0FQ0UBdkwupgfv8A6CrVvdeadjgBu2O9Z9OQlXUjqDmgabNeiiikaBRRRQAUUUUAFFFFADJf9U/0NZ9t99vpWjJ/q2+hrOtvvH6UES3G3H+tNRVJP/rj+FR0yWFFFFAgooooAKKKKAFFFFFABRSUUALmjNJRQAUuaSigAooooAKKKKACrkOfJXNVAMsB6mr4AAAHQUFIKKKKQwpHJCMR1ApaKAKvkMyhgQSecVCcg4NWVkEcjRt93PHtRcKCocY/xpk2K1FFFAgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAHxKHkCnpTKKKBmxH/qk/wB0U6mx/wCqT/dFOpGoUUUUAFFFFABRRRQAUUhIHUgUbl/vD86AFooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAxaKKKZiFFFFAC0UmaXNABRRmlVWc4VST7UDE74rWhTy4VXuBUFvaeWQ8n3uw9KtUFxVgooopFBRRRQAVi1tVjEYOKZEhKKKKCBaSlpKACigAk4AyanS2J5c49hQMgo61dWGNf4QfrzT6B2KGCOxpK0KayK33lBoCxRoqw9t3Q/gagKlTgjBoFYSiiigQtJRRQBpRgCwx/sE1HYDiQ/SmyShbNIwfmYfkKntI9kAJ6tzSNFuT0UUUFBRRRQAUUUUAFFFFABUdx/x7yf7pqSorj/AI95PpQJmWKUEg5BwaQUUzImW5I+8ufcVJ9oT3/KqlFA7llrkfwqfxqB5Gc5Y/hTaKAuFXLD7z/QVTq7Yfek+goHHcu0UUUjQKKKKACiiigAooooAqX/APq0+tUKv3/+rT61QpmctwooooJCiiigAooooAKKWkoAKKKKACiiloASiiigAooooAKXNJRQAtJRRQAUUUUAFFFFABRRRQAUUUUAFLSUtABRRRQAUUUUAFJS0lABRRRQAUUUtACUUtJQAUUUUAFFFLQAlWbH/j4/4CarVZsf+Pg/7poGtzRooopGoUUUUAIyhlKsMg9qz57bbJiLLcZK9xWjUMkJZ98b7HxjPqKBNXMur6/cX6CqUg2yMpOSCRn1q6v3F+gpkIWiiikMKKKKACiiigAooooAKKKKACiiigAqG5/1Q/3v8amqG5/1Q/3v8aAZVBwcinl5JTgszE9qZSgkEEHBFMku2qTxtyuEPUE1PcSGKFmXqKgivV2fvc7h6DrUU935sZQJgE9c0FXSRZt7kSjaxAf+dWKy7VC9wvsdx/CtSkOLugooooKCiiigAooooAy7r/j5f/Paos1Jc/8AHy/1qKmZPcWikpwRm6KT+FACUU4xuB9003vQAUq/eH1pKB98fWgDZooopGoUUUUAFFFFABRRRQA2T/Vt9DWbbH5yPUVpuMow9qxqZEh8x3SsRTKKKCQooooEFFFFABS0lFAC0lFFABRRRQAUUUUAFFFFABRRRQAUUUUAFW4pg4weG/nVSigdzQqB7kA4QZ9zUQmcKVzkHjmo6B3JhctnkAirAkVk35471RozxigVxztvct602iigAooooEFFFFABRRRQAUUUUAAooooAKKKKACiiigAooooAKKKKACiiigDYT7i/QU6kX7o+lLSNgooooAKKKKACmySLGhZugpJJFiXcxwKzZ52mfJ4UdBQS3YZI5kcsepNNoopkDhI69HYfjUguph0kP4jNQ0UBcsfbJh/ED+FSR3xA/eDJ9RVOigLs0Bfxf3X/ACFOF7Cf7w/Cs2igfMzTF5Af4iPwNKLqE/8ALQfkay6KA5mawniP/LRfzpfOi/56J/30KyKKB8xsCRD0dT+NKCD0IrGooDmNqiqVgwy6k8nGBV2kUncKKKKBhRRRQAUUUUAZn2Sf+5/48KPsk/8Ac/8AHhWnRTJ5UZn2Of8Auf8Ajwo+yT/3P/HhWnRQHKjM+xz/ANz9RR9jn/uj8xWnRQHKilBZkPulxgduuaugADAGBRRSGlYKKKKBhRRRQAUUUUAFYx5JrZ71i0yJBS0lFBAtKql2AHWkq3DHsXn7x60DQscaxjjk9zT6KKRQUUUUAFFFFABTXRZBg/gadRQBRdCjYNNq7IgkTHftVLoaZLQUUUUCLNtbGUh3HyfzrRqC0/49U/H+ZqekapaBRRRQMKKKKACiiigAooooAKiuP+PeT6VLUdx/x7yf7poEzKFFFFMyEooooAKKKKACrth96T6CqVXbD70n0FBUdy7RRRSNAooooAKKKKACiiigCpf/AOrT61Qq/f8A+rT61QpmctwooooJClpKWgApKWkoAKKKWgAoxRRQAUUUUAJRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUtACUUtJQAtFJRQAtFJS5oAKKM0UAJS0UUAFFFFABRRQaAEooooAKWkooAKtWH+vb/AHT/ADFV9jbd2Dj1qxYf69v93+ooGtzQooopGoUUUUAFFFFAGTP/AK+T/eP86tr9xfoKqT/8fEn+8atr9xfoKZmhaKKKQwooooAKKKKACiiigAooooAKKKKACobn/VD/AHv8amqG5/1Q/wB7/GgGVaM0UUyApyRvI21Bk1LFayS8kbV9TV+KFYU2rn3JoKUbjbeAQL1yx6mpqKKRYUUUUDCiiigAooooAyrn/j5f60xELtgU+5/4+JPrViJNiD1PWmZ9REhRB0yfU1JTJJBGuT17CqxnkJ64+lINi5TWRXHzD8aqiaQH72frViKUScdG9KAuV5YjGc9VPemL94fWrzKGUg9DVLaVfaexpiaNiiiikahRRRQAUUUUAFFFFACN90/Ssatlvun6VjUyJBRRRQQFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBsr90fSlpF+6PpS0jYKKKKACgkAEnoKKiuSRbvj0oEZ00rSyFj07D0qOiimZhS0lAoEGKmW2YqCSB7U6GLo7fgKsUFJFb7Mf7wo+zH+8Ks0UgsVvsx/vCj7M394VZooCxW+zN/eFH2Zv7wqzRQFit9mb+8KPsx/vCrNFAWK32Y/3hR9mP8AeFWaKAsUoiVmQj+8K16yI/8AXL/vD+da9McQooopFhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABWMeCa2ax3/ANY31NMiQ2iiiggfEu6VR+NXarWw+Zj7VZoKQUUUUhgSAMk4FQtcqDwCainkLPtHQVFTE2WluUJ5BFSggjIORVCpIZNj4P3T1oC5cooopDCqk67ZSex5q3UNyMoD6GgTKtFFFMk07P8A49l/H+dT1BZ/8eqfj/Op6RqtgooooGFFFFABRRRQAUUUUAFRz/8AHvJ/umpKjn/495P900CZlUUUUzISilpKACiiigAq7YdZPwqlV2w+9J9BQVHcu0UUUjQKKKKACiiigAooooAqX/8Aq0+tUKv3/wDq0+tUKZnLcKKKKCQooooAKKWk4oAKWiigAooooAKKKSgAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAozRRQAUUUUAFAooFAC0UUUAFFFFABRRRQAlFFFABSrywHqaKSgC+wGwjtiobL/j4/wCAmozcMybcDJ71JZf8fH/ATQV1NGiiikaBRRRQAUUUUAZM/wDx8Sf7xq2v3F+gqpP/AMfEn+8aeLnAA2dPemZlmiq/2r/Y/wDHqPtX+x/49SC5Yoqv9q/2P/HqPtX+x/49QFyxRVf7V/sf+PUfav8AY/8AHqAuWKKr/av9j/x6j7V/sf8Aj1AXLFFV/tX+x/49R9q/2P8Ax6gLliiq/wBq/wBj/wAeo+1f7H/j1AXLFQ3P+qH+9/jTftX+x/49TJZvMUDbjnPWmFyKrNkoafkA4GeagVchj6DP61Ysf9ef90/zFAluaFFFFI1CiiigAooooAKKKKACiiigDMmXN6R/tCrNV5v+P4/7wqxQQU5m3SH0HAqOnSDDsPem0yQpVYqwYdRSUUCNAHIzVaYYmB9cVYAwoHoKgn/1qikUzSooooNAooooAKKKKACiiigBG+6fpWNWy33G+lY1MiQUUUUEBRRRQAUUUUAFFFFABRRRQAtFJS5oASiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACloooASig0UAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAGyv3F+lLSD7o+lLSNgooooAKbIu+Nl9QRTqa8ixrl2AFAGPRT5tvmsVOVJyKYBmmZBViGH+Jx9BSxQ4+Zhz2FT0DSCiiikMKKKKACiiigAooooAKKKKACiiigCkn+uX/eH8616yE/1y/7w/nWvTCIUUUUiwooooAKKKKAM77dL6L+VH26X0X8qrUUzK7LP26X0X8qPt0vov5VWooC7LP26X0T8qnhvA7BXG0noR0rPooHzM2qKitpDJApJyRwalpFhRRRQMKKKKACiiigArGb7x+tbNYz/AH2+tMiQlFFFBBZtejfhU9V7U8sPpVikUgooooGZ560VJMhSQ+h5FR0yQoop0ab3A7d6ALqklFJ64paKKRQVHP8A6k/hUlQ3BxGB6mgGVaKKKZBpWf8Ax7L9TViq9l/x7j6mrFI1WwUUUUDCiiigAooooAKKKKACo5/+PeT/AHTUlRz/APHvJ/umgTMqiiimZCUUUUAFFFFABV2w6yfh/WqVXbDrJ+H9aCo7l2iiikaBRRRQAUUUUAFFFFAFS/8A9Wn1qhV+/H7pT/tVRpmctxKKWkoJCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAM0ZoooAWikpRQAUUUlABRRS0AFJS0mKACrNj/AK8/7pqvirViP3jH2oGty/RRRSNQooooAKgmukhbaQS3tU9Zt5/x8H6CgTdkQyMHlZh0JzTaKKZmFFFFAgooooAKKKKACiiigAooooAKKKKACiiigCe2Xe0g/wCmZpbI4uPqCKfYD965/wBmmRDZe4HZiKCl0NKiiikaBRRRQAUUUUAFFFFABRRRQBl3P/H0/wBR/KrCMHUMO9V7r/j5f6/0pIpPLbn7p60zO+pLPEW+ZevcVVrQBBGQcimsit95QaAaKNTwREkOwwB096nEaKchRTqAsBOBk9Kplt8u71NOmm3fKvTufWo0++v1oBs2KKKKRoFFFFABRRRQAUUUUAI33G+lY1bLfdP0rGpkSCiiiggKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiloASilpKACiiigAooooAKKKKACiiigBaKKKACiiigAooooASiiigAooooAKKKKACiiigAooooAKKKKACiiigDZX7o+lLSL9xfpS0jYKKKKAGSyCONnPOKyndnYsxyTWuyhlKsMg9ayHUo7KeoOKZEhtT2wBLEjkYxUFWL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Q+wN/fH5Uv2Bv+eg/Kr1FAcqKS2GGBaTI9AKuABQABgClooGlYKKKKBhRRRQAUUUUAFZ19/x8D/dFaNZ17/x8f8AARTJlsVqKKKDMWjGeBRU9un8Z/CgY+KEIMnlv5VLRRSKCiiigAooooAKKKKAK00O35lHHcelQVoVTmTY/HQ8imJojooooJJYITO+M4A6mtRVCKFUYAqjYf6x/pV+g0jsFFFFIoKKKKACiiigAooooAKKKKAMu5/4+X+tRVLdf8fL/UfyqKmZPcDSUppKBBRRRQAU+P76/UUynx/6xPqKBmvRRRSNQooooAKKKKACiiigBG+6fpWNWy33T9KxqZEgooooIClFJQKAFoNFJQAUtJS0AFFFFABRRRQAUlFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRS0AJRS0UAJS0lFAC0UlFAC0UmaWgBKWiigAooooAKKKKAEooooAKKKKACinpE0hOOg701lKMQe1AzZHQUUA5ANFI1CiiigAooooAp6h92P6mobX+P8P61Nf/AHY/qahtf4/w/rTM3uWKKKKQwooooAKKKKACiiigAooooAKKKKACiiigDPPWig9aKZAUqqWYKoyT0FSxW0kvOML6mr0VtHFyBlvU0FJXI7e0EZDvy3YelWqKKRaVgooooGVaKKKCAqK4/wBV+NS1Fcf6r8aAexUooopkGhYf6hv98/yFWqq2H+ob/fP8hVqkarYKKKKBhRRRQAUUUUANkG6Nh6gisitmqj2KnJRsexpkyVyhRS45pMUGYUUtJQAUUYOM9qKAFDMvRiPpT/OkH8X6VHRQMf50n9400szdST9aSigBaSlNJQIKKKKACiiigC1YjMxPotaFU7BRsdu+cVcpGkdgooooKCiiigAooooAKKKKACo5/wDUSf7pqSo5/wDUSf7poEZVJmlpMUzIM0UYooAM0UUUAFXLD77/AEqnirlgPnf6UFLcvUUUUjQKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKzr7/AI+B/uitGs+//wBev+7/AFNMmWxVooooMwq+i7UC+gqnGMyL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grQqtZR7Idx6sc/hVmkaR2CiiigoKKKKACiiigAooooAKKKKAM69Uifd2YVXrXkjWRdrjIqsbBc8OcfSmQ4lGirv2Af89D+VH2Af89f/AB3/AOvQLlZSoq79gH/PQ/lS/YF/56H8qA5WUafEpaVVHc1b+wJ/fapordIeVyT6mgaiS0UUUiwooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACo5pVhTceewFEsqwpub8B61mzTNM+W6dh6UEt2Ly3sRHOVPuKnVldQynIPesap7Vyk6jPDcGmJSNOiiikWFFFFABRRRQAUUUUAFFFFADXcRoWboKzZbiSQ53EDsBVy9OLf6kVm0yJMKKKVVZjhQTQSJRT/Jk/umjyZP7poAZRT/ACZP7po8mT+6aAGUU/yZP7po8mT+6aAGUU/yZP7po8qT+6aAGUU/yZP7po8qT+6aAGUoJByCQfahlKnBGDSUAXbW6JYRyHOehq7WKCQQR1FbKncob1GaC4sWiiikUFFFFABRRRQAVBd/8ez/AIfzqeobv/j2f8P50Cexl0UUUzIKuxf6pfpVKrducxD24oGiWiiikURzDMLVTrQIBBB6GqUkZjbB6djTExlFFFBI+EZlWrtQwRlRubqe1TUikFFFFAytc/eX6VBUs5zKfbioqZLCtqsWtlTlQfUUFRFooopFhRRRQAUUUUAVaKKKCApkwzE1Ppkv+qb6UAUqUUlApkGjY/6hv98/yFWarWP+ob/fP8hVmkarYKKKKBhWTcf8fEn+9WtWTP8A6+T/AHjTIkR0UUUEBRRRQAUUUUALSUUGgAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiigAkgDqaACirItlx8zHPtUMkZjbHUdjQOwyiiigRqWv/Hsn4/zqaobX/j2T/PepqRqtgooooGFFFFABRRRQAUUUdKAIrmTyoSQcMeBWWSSck5NTXUolmO05UcCoKZnJ3YUUUUEhRRRQAUUUUAFFFFABVqxOJyPVaq0qsUYMpwR0NA0bNFRwSebEG796kpGoUUUUAFFFFABRRRQBm3v/Hx+AqvVi9/4+PwFV6Zk9wq4kibF+ZRx61TooBOxe8xP76/nR5if31/OqNFA7l7zE/vr+dHmJ/fX86o0UBcveYn99fzo8xP76/nVGigLl7zE/vr+dHmJ/fX86o0UBcveYn99fzo8xB/Gv51RooC4UUUUEliy/wCPgfQ1pVm2X/HwPoa0qRpHYKKKKCgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACoZLWKT+HafVeKmooEZ8ljIv3CGH5GqzKVOGBB9DWzTXRXGGUEe9MTiY9KqlmCjqTir0lip5RiD6HkU23tXSYM4GF6c9aCeVlwAAADgDgUtFFI0CiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKqXk+0eWhIbuR6UCbsV7tw9wcHIHFQUUUzMKntMfaU3fh9agpVO1w3oc0AjZooByAR3opGoUUUUAFFFFABRRRQAUUUUAVr3/j3/AOBCs6tK9H+jn2IrNpmctwqxa9H/AA/rVerFr/H+H9aBLcsUUUUigooooAKKKKACiiigAooooAq3P+sH+7UNTXP+sH+7UNMlhWxH/qk/3RWPWxH/AKtP90UFRHUUUUiwooooAKKKKACoLw4tm9yKnqrfn9yo/wBr+lAnsZ9FFFMyCp7ZsMVPfpUFKCQQR1FAy/RTY3Ei5H4inUigpCAwwRkUtFAERt4ye4+hpyxIhyBz6mn0UAFFFFABSMwVSx7UtVriTJ2DoOtAMhJyST1NJRRTICtlOEX6VjVrQPvhRvaguJJRRRSLCiiigAooooAq0UUUEBUU5xER6mpaq3DZfHpQJkNAooFMk0bH/UN/vn+QqzVax/1Df75/kKs0jVbBRRRQMKyZ/wDXyf7x/nWtWVcf8fEn1pkSIqKKKCAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAClVtrhvQ0lFAy+rBhkHIqtcOGYAHOKhooC4UUUtAjTtf+PZP896mqG0/wCPZPx/nU1I1WwUUUUDCiiigAooooAKZKu+JlzjI60+o53CQOfbFAmZJooopmQUUUUAFFFFABRRRQAUUUUAFFFFAFmydhNsH3W61o1mWrKk4ZjgetadI0jsFFFFBQUU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FFABRRRQAUUUUAFFFFABRRRQAUUUUAFBGRg9KKKAK8lnE/KjYfbp+VVZLOVOR849utaVFBLijFxiitd4o5PvqD71WexBPyPgehpkuLJLJNsGf7xzVikVQqhR0AxS0i0FFFFAwooooAKKKKACiiigAooooAKKKKACiiigAooooAKx5P8AWN9TWxWRLxNJ/vH+dMiQyiiiggKKKKACiiigAooooAKKKKACjNFFAC0UlFAC0maKKADNFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUALRRRQBqW3/Hsn0qWorb/j2T6VLSNVsFFFFAwoPAzRTZAWicDqQQKAMmR/MkZz3NNoopmQUUUUCCiiigAooooAKKKKACiiigAooooAKKKKACnIjSOFUZJptXbGIgmQjjGBQNK5YhgWEccsepqWiikaBRRRQMKKKKAMy8/4+W+g/lUFWL0f6QfoKr0zJ7hV5DuRT6iqNWbZsqV9ORQCJ6KKKRQVBLBklk/Kp6KAKXlvn7jflUkduc5fp6VZopisFFFFIYUjHapJ7UtQ3DYTb3NAFU9aKKKZBZs/+PgfQ1o1nWf/AB8D6GtGkaR2CiiigoKpah/yz/H+lXap3/3U+poJlsUaKKKZmFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUATwzBV2t26GllnUrtXnPU1XooHcKKKWgRasP9a/+7V+qFh/rX/3av0jSOwUUUUFBRRRQAUUUUAFFFFAGZdqq3DY78n61BUk7753bGOcVHTMnuFFFFAgooooAKKKKACiiigAooooAASCCOorYQkxqScnAyax61oJFljBUYxxj0oLiSUUUUiwooooAKKKKAK95/wAezfUVm1p3n/Hs31FZlMzluFFFFBIUUUUAFFPSJn6Dj1qZbYfxN+VA7FairfkR+h/Og28Z9R+NAWKlFWGtv7rfnULIyH5higLDaKKKBBRRRQAta8f+rT/dFZFa8f8Aq0/3RQXEdRRRSLCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACi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qxbL95vwoEixRRRSKCiimSyCNfUnoKAH0VTMzsfvEfSlWZweuR6GmK5bopqOJFyPyp1IYUhAYEHoaWigCgylWKntSVNcrhw3qKhpki1rx/6tP90VkVrx/wCrT/dFBUR1FFFIsKjnbbA59qkqK6/49n+lAmZdJS0UzISiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigBaKKKANeMlokY9SAadTIf9TH/ALop9I1CiiigYUUUUAFFFFABWYn/AB9t/vGtOsxP+Ptv940EyC5+8v0qCprk/vAPaoaZDCiiigQUUUUAFFFLQAUUUlABRRRQAUUUUAFFFFABRRRQAUUUUAFXY12RgVSq3DKHXB+8P1oGiWiimPKqcHk+gpFD6Kri6GeU/Wp1YOuVPFAXIg4ilKHhTyPai4jBXeByOtQzsGl46Dimh2AxuOPSmK42iiigkKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigABwcignJyetFFAGnaf8eyfj/Op6htP+PZPx/nU1I1WwUUUUDCiiigAoooJAGScAUAFFZdzN5shwTtHQVFk+ppkcxs0VkLNIvR2/OpBdzD+LP1FA+Y06KzhfS+i/lUkd8cnzF47bRSDmRdoqt9th/2vypwvIP75/I0DuieioRdQH/loPyNOFxCf+Wi/nQF0SUUwSxnpIv50u9f7y/nQMdRSZB6EUtABRRRQAUUUUAFFFFABRRRQBnXyYnDdmFVq15I1lTaw4/lVJ7GQH5WVh+RpkNFWirH2Kb0H50fYpvQfnQTZleirH2Kb0X86PsU3ov50BZleirH2Kb0H50fYpvRfzoCzK9FWPsU3oPzo+xTeg/OgLMr0VY+xTeg/Oj7FN6D86AsyvRVj7FN6D86PsU3oPzoCzK9FWPsU3oPzpy2MhPzFQPzoCzCxGZiewWtCo4olhTav4k96kpGiVkFFFFAwqjqHWP8avVRv/vp9DQTLYp0UUUzMKKKKACiiigAooooAKWkooAWikpaADFJS0UAJRS0UAJRRiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAAUtIKWgC1Yf6x/pV+qFh/rH+lX6RpHYKKKKCgooooAKhuZRFEcH5jwKke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tXaRpHYKKKKBhRRRQAUUUUAFUtQHMZ+v9Ku1S1D/AJZ/j/SgmWxSooopmYUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAKCVOQSD7UM7OcscmkooGFFFFAgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKALdh/rH+lX6oWH+sf6VfpGkdgooooKCiiigAJAGTwBVC4u94KR8L3PrT76QgLGD15NUqZEn0EooooICilqSKLzDk52igZFRVr7Mnq350fZk9W/OgLFWirX2ZPVvzo+zJ6t+dAWKtFWvsyerfnR9mT1b86AsVaKtfZk9W/Oj7Mnq350BYq0Va+zJ6t+dH2ZPVvzoCxVrXikWVAy9KzZoljC4zz61asPuP8AWgqO5booopFhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABVe8/49m+oqxUF5/x6v8Ah/OgT2MyiiimZBRRRQAUUUUAFFFFABRRRQAUUUUAFLmkooAWkoooAKKKKACiiigAooooAKKKKACiiigAooooAKUUlKKANeP/AFSf7op1Nj/1Sf7op1I2CiiigAooooAKKKKACsmf/Xyf7x/nWtWTP/r5P94/zpkSI6KKKCAooooAWkoooAKKKWgAooooAKKKKACkpaSgAooooAKKKKACiiigAooooAKKKKACiiigAooooAWikooAKKKKACiiigBc0UlFAC4ooooAKKKKACiiigBKKWkoAKKKKAFCljgDJoZSpwwwanth9496LnqtA7aF225t4/pUtQ2v/Hsn4/zqakaLYKKKKBhRRRQBXvP+PY/UVTtv9Yf92rl5/wAex+oqnbf6w/7tMiW5aooopAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAUpf9a31plPl/1rfWmUyR8cTynCLmrsVkqEM53H07VLbDFsn0qWkWooKKKKCgooooAKKKKACiiigCve/wDHsfqKp26bn3HoKu3g/wBFb2x/Oq1sP3Z+tMh7k3Sqkk7McKSBU1w2I8DucVUoE2GSepqRJnQ9cj0NR0UCL6sGUMOhqK4TKhu4pts33l/GppBmNh7Uh7oLD/lp+H9auVTsOkn4f1q5QVHYKKKKCgooooAKKKKACqWof8s/x/pV2qWof8s/x/pQTLYpUUUUzMKKKKACiiigAooooAKKKKACiiloASiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAopaSgAooooAKKKKACiiigAooooAKKKKACiiigAooooAt2H+sf6VfqhYf61/8Adq/SNI7BRRRQUFFFFAGde5+0fgKrVdv1+4/4GqVMze4UUVJFEZDk8L60CCKMyH/ZHU1bACjAGAKAAoAAwBS0ikgooooAKKKKACiiigAooooAKKKKAILrov41NYfcf61DddF/GprD7j/WmC3LdFFFIsKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKgvP8Aj2b6j+dT1Xvf+PY/UUCexSjh8xC2ee1RVatv9V+NVj94/WmZiUUUUCCiiigAooooAKKKMUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUqqXYKOpoAACTgDJqVbZj944qwkaxjA69zTqCrEIt09z+NI1sp+6SKnopDsUXjaM8j8abV50DoVNUaZLQUopKUUCNeP/AFSf7op1Nj/1Sf7op1I2CiiigAooooAKKKKACsmb/Xyf7x/nWtWRN/r5P94/zpkSGUUUUEBRRRQAuaKSigBaKSigBaKSigBaM0lFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAC0UlFAC0UlLmgAooooAKSiigAFFLQaAFSRozkUO5kbJptFAzUtf+PZPx/nU1RW3/Hsn0qWkaLYKKKKBhRRSOwRCx6AZoAhvP+PZvqKzo3MbZAHTHNTzXfmxlNmAfeq1Mzb1JvtL+i0faX9FqGigVyb7S/otH2l/RahooC5N9pf0Wj7S/otQ0UBcm+0v6LR9pf0WoaKAuTfaX9Fo+0v6LUNFAXJvtL+i0faX9FqGigLk32l/RaPtL+i1DRQFxWYsxY96VhtC+4zTasTLiCBv9nFAF22/49k+lS1DaHNsvtn+dTUjRbBRRRQMKKKKACiiigAooooAgu/+PV/w/nVa2P7s/WrN5/x6v+H86pW77XwehpkPcluBmPPoaqVoEAjB6GqkkLIcgZWgTIqKKekTSHgcetAiW2HLN+FTOcRsfalVQihRUNw/RB9TSHsiWw6Sfh/WrlU7DpJ+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ApaSigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoopyoz/dUmgY2ilZSpwwwaSgQVesPuP8AUVRq9Yfcf6igqO5cooopGgUUUUAFFFFABRRRQAUUVBdTeVHx95uB7UCIZr3krEP+BGqRJJJPJNFFMzbuFFFFAgooooAKKKKACiiigCe0kKTgDo3BrTrHRtjq2M4INa0ciyIGU5FBcR1FFFIsKKKKACiiigDFooopmIUUUUAFFFFABRRRQAUUUUAS23/Hwn1rVrKtf+PlPrWrQaR2CiiikUFFFFABRRVe4uliyq8v+goE3YS7nEaFB95h+QrOpWYsSSck0lMzbuFLkjoaSigQ8TSjpI//AH1TvtE3/PRvzqKigdy2t+wABQN75pw1D1i/8e/+tVKigfMy/wDb17ofzpRfxd1f8h/jWfRQHMzSF7Cf7w/Cl+1wf3/0NZlFAczNT7VB/wA9P0NKLmE/8tBWVRQPmZrCaI/8tF/OpAQRkHI9qxa0rORWgCg/MvUfjQNSuWKKKKRQUUUUAFFFFABUE1qkx3fdb19anooFYzzYSdmT9aPsEv8AeT8z/hWhRQLlRn/YJf7yfmf8KPsEn95PzNaFFAcqM/7BL/eT8z/hR9gl/vJ+Z/wrQooDlRn/AGCX+8n5n/Cj7BL/AHk/M/4VoUUByoz/ALBL/eT8z/hR9gl/vJ+Z/wAK0KKA5UZ/2CX+8n5n/Cj7BL/eT8z/AIVoUUByoz/sEv8AeT8z/hR9gk/vJ+ZrQooDlRVislRgzncR27VaoooGlYKKKKBhQehopD0NAGNRRRTMQooooAKKKKACiiigAooooAKWkooAWikozQAtFFJQAtJiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAClpKWgANa0X+pT/dH8qyTWvF/qU/3R/KguI6iiikWFFFFABVK5uwQY057E1alfy4mbuBxWRTJkwooooMwooooAKKKKACiiigAooooAKKKKACiiigAooooAKuWCHcz44xjNRWsImk+b7o5NaYAAwOBQXFdQooopFhRRRQAVlXP/AB8v9a1ayrn/AI+X+tMmWxFTkOHU+hFNooINCimo25A3rTqRQU2Rd6Fe9OooAzzwaKuSQrJz0PqKj+ynP3/0pk2IACzADqavKNqgegpscSx9OvrT6Q0gooooGHTms81cmbbEffiqdMTCrdj/AK5v93+tVKt2P+ub/d/rQJbl+iiikahRRRQBnX3/AB8D/dH9arVavx+/X/d/qaq0zJ7hRRRQIKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAq8gARcdMVRqRJmQY4I96BonuAPL5654qpT3kaQ89PQUygGFX7D/Vv9aoVesPuP8AUUDjuXKKKKRoFFFFABRRRQAUUUUAFZU8zTPk8AdB6Vq1k3BzO5/2jTJkR0UUUGYUUUUAFFFFABRRRQAUUUUAFWrOYJIUbo386q05Bl1B5yRQNGxRRRSNQooooAKKKKAMWiiimYhRRRQAUUUUAFFFFABRRRQBNa/8fKfWtSsq2/4+U+tatBpHYKKKKRQUUUUARXEhihLD7x4FZeavX+diemTVCmZy3CiiigkWlRC7BRQqljgdatxxiNcDr3NA0iP7Mv8AeNH2Zf7xqeikVYg+zL/eNH2Zf7xqeigLEH2Zf7xo+zL/AHjU9FAWIPsy/wB40fZl/vGp6KAsQfZl/vGj7Mv941PRQFitJAqRlgTxTrH/AI+D/umnz/6lvw/nTLH/AI+D/ummLqaNFFFI0CiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiig9KAMWinxp5j4zjvSOpRip7UzIbRRRQIKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKekLv0GB6mgYyirIth3Y/hQbZezEfWgLFaipJIWj56j1FR0AFFFFAgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAClpKKAFNa8X+pT/dH8qx62Iv8AUp/uj+VBcR1FFFIsKKKKAGSp5kTJ6isxoJVzmNuO+K1qKCWrmKRjrRWu8SSffUGoXsomHy5U/nTFyszqKvCwGeZDj6VMtrCo+7n3NAuVmXRWqbeE/wDLNfw4qNrGInILD2zQHKzOoq99gHaQ/lS/YFx99s+uKA5WUKKtSWLquUbd7YxU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GOlMmTWxFSgE9KACWAHU1bjiEfPVvWghISKEJyeW/lUtFFIoKKKKACiiigAooooAKKKKACiiigAqrc/6wfSrVVbn/WD6UxMuWX/HsPqasVXsv+PcfU1YpFrYKKKKBhRRRQBi0VJ5En939RR5En939aZlYjoqTyJP7v6ijyJP7v6igLEdFSeRJ/d/WoyMHBoAUEqcgkH1FaNrceapVvvj9RWbU1qxW5T3OKBp2ZqUUUUjQKKKKACiiigAooooApah/wAsvx/pVKruof8ALL8f6VSpmctwpV+8PrSUUEmhRSA7lB9RmlpFhVe6HCn8KsU10DqVNAMo0U50ZDhhTaZIVYth94/hUKIzthRVxECIFFAIdRRRSKCqUvMjfWrhOASe1UCcmmJhU9p/x9J+P8jUFS2xxcp9aBLc1aKKKRqFFFFABRRRQAUUUUAFFFFABWdef8fB+grRrOvP+Pg/QUyZbFeiig0GYlFFFABRRRQAo6itmsYda2aC4hRRRSLCiiigAooooAKKKKAMY9TRinSLtlcehNNpmQlFLSUCCiiigAooooAKKKKACiiigAooooAKKKKACilxRQAlFLikoAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAClpKXNABSUUUAFLRRQAhopaKAErYjGI1HoBWSBuIA6mtiguIUUUUiwooooAiuGZLdmU4PH86zGdm+8xP1NaV3/wAez/h/OsumRLcKKKKCAopaSgAooooAKKKKACiiigAooooAKKKKACiijrQBavEx5Tf7OKt253W6H2x+VRXw/cqfRqktP+PZPx/nSNFuTUUUUFBRRRQAUUUUAFFFFABVW/8A9Uv+9Vqqt/8A6pf96gT2KcMnlvz0PWrfBHqDVCpYpinytyv8qZCY57cjlOR6VH5T/wBw/lVtZEbowp1AWKyW5Jy/A9KscKPQCmtKi9WH0FVpJjJx0X0oDYSWTzHz2HSrtj/qD/vH+QrPrRsf+Pc/7x/pQEdyzRRRSNAooooAKKKKACiiigDOvv8Aj4H+6P61Wqzff68f7o/marUzJ7hRRRQIKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiloASilpKACiiigAooooAKKKKAClpKM0ALRRRQAUUUUAFIaWigBKKWkoAKKKKACiiigAooooAKKKKACii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iigAooooAKKKKACiiigDHf8A1jfU02nS/wCtf/eNNpmQ6P8A1qfUVeqjH/rU/wB4VeoGgooopDCiiigAooooAKKKKACo5/8AUt+H86kqOf8A1Lfh/OgCnRRRTIL2n/dk/CrlU7D7sn1FXKRrHYKKKKBhRRRQAUUUUAFYzHc7H1Oa2T0rFpkSCiiiggKuxPvQHv3qlT45DG2e3cUDRdopFYMuQcilpFBRRRQAUUUUAFFFFACEhQSegqk7F3LHvUk0u47V+6P1qGmS2FFFFAi9YH5HHuKuVnWTbZ8f3hitGkaR2CiiigoKKKKAM9LcA5bn27VNRRQQFFFFAAeBk9BVBjuYn1OaKKBMSpbf/j4j+tFFMSNWiiikahRRRQBVvx+6U/7VZ9FFMzluFFFFBIUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABT45GjPHT0NFFADnmZxjGB7VFRRQAVZsv+Pj8DRRQNbmjRRRSNQooooAKKKKACiiigArPvjmVR6LRRQTLYq0UUUzMKKKKACiiigAooooAKKKKACiiigDVtxi3j+lS0UUjVBRRRQMKKKKACobr/j1f8P50UUCexl0UUUzIKKKKACiiigAoxRRQAUUUUAFFFFABRRRQAUtFFAGtD/qI/8AdH8qfRRSNUFFFFAwooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKCcDJoooAyZpTNIWPToB6Co6KKZiFFFFABT4nMciuOxoooA1lIZQw6EZpaKKRsFFFFABRRRQAUUUUAFFFFAGRL/AK1/940yiimYjo/9Yn1FXqKKRSCiiigYUUUUAFFFFABRRRQAVHP/AKlvw/nRRQBTooopkF6w+7J9RVyiikaR2CiiigoKKKKACiiigBDwDWMKKKCJhRRRTICiiigB8cjRnI6dxVpJVfocH0NFFIaY+iiigoKKKKAGs6oPmOKrSzF+Bwv86KKBNkVFFFMkKKKKAJbbi4T61q0UUi47BRRRQWFFFFAH/9k="/>
+</defs>
+</svg>
diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index f9b58a3..137d1bc 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -14,6 +14,10 @@ var themes = []struct {
 		displayName: "Black",
 		actualName:  "black",
 	},
+	{
+		displayName: "White",
+		actualName:  "white",
+	},
 }
 
 templ ThemeSwitch() {
@@ -35,7 +39,9 @@ templ themeSwitch() {
 }
 
 templ themeSwitchButton() {
-	<img src="/static/icons/theme-icon.svg" alt="Theme Selector"/>
+	<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M6.3125 1V5.22222M12.6875 1V4.16667M1 8.38889H18M9.5 20C7.62331 20 6.22284 18.2834 6.61141 16.4594L6.67728 16.1502C6.90831 15.0657 6.35912 13.9656 5.35029 13.4921L3.11406 12.4423C1.8233 11.8364 1 10.5454 1 9.12714V2.72213C1 1.77102 1.77609 1 2.73346 1H16.2665C17.2239 1 18 1.77102 18 2.72213V9.12714C18 10.5454 17.1767 11.8364 15.8859 12.4423L13.6497 13.4921C12.6409 13.9656 12.0917 15.0657 12.3227 16.1502L12.3886 16.4594C12.7772 18.2834 11.3767 20 9.5 20Z" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+	</svg>
 }
 
 script changeTheme(themeName string) {
@@ -67,12 +73,27 @@ script changeTheme(themeName string) {
             secondary20: "#ffffff33",
             secondary30: "#ffffff4c",
             secondary69: "#ffffffb0",
-            accent: "#D3FCBF",
-            accent20: "#D3FCBF33",
-            accent30: "#D3FCBF4c",
-            accent69: "#D3FCBFb0",
+            ACCENT: "#d3fcbf",
+            ACCENT20: "#d3fcbf33",
+            ACCENT30: "#d3fcbf4C",
+            ACCENT69: "#d3fcbfB0",
             bg: "/static/images/dankground-dark.svg",
         },
+        white: {
+            primary: "#ffffff",
+            primary20: "#ffffff33",
+            primary30: "#ffffff4c",
+            primary69: "#ffffffb0",
+            secondary: "#4c8c36",
+            secondary20: "#4c8c3633",
+            secondary30: "#4c8c364c",
+            secondary69: "#4c8c36b0",
+            accent: "#d5ffc1",
+            accent20: "#d5ffc133",
+            accent30: "#d5ffc14c",
+            accent69: "#d5ffc1b0",
+            bg: "/static/images/dankground-light.svg",
+        },
     };
 
     const style = document.documentElement.style;

From 802b7e14478b5a6926960d1e7bad1c74c90c9515 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 17:14:19 +0300
Subject: [PATCH 64/97] chore(icons): move those icons to svg in template

---
 static/icons/back-button-icon.svg      |  3 ---
 static/icons/theme-icon.svg            |  3 ---
 views/components/popover/popover.templ |  2 +-
 views/components/search/search.templ   |  6 +++---
 views/pages/playlist.templ             | 11 ++++++++++-
 5 files changed, 14 insertions(+), 11 deletions(-)
 delete mode 100644 static/icons/back-button-icon.svg
 delete mode 100644 static/icons/theme-icon.svg

diff --git a/static/icons/back-button-icon.svg b/static/icons/back-button-icon.svg
deleted file mode 100644
index b72f35b..0000000
--- a/static/icons/back-button-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.78462 12.9782C2.16532 11.9662 1.35578 11.4603 1.0781 10.8123C0.835619 10.2466 0.835619 9.60613 1.0781 9.04031C1.35578 8.3925 2.16532 7.88651 3.78462 6.87442L11.3899 2.12111C13.187 0.997903 14.0856 0.436243 14.8272 0.495963C15.4735 0.547923 16.066 0.876214 16.4527 1.39682C16.8962 1.99402 16.8962 3.05369 16.8962 5.17301L9.42289 9.89298L16.8962 14.6797C16.8962 16.799 16.8962 17.8586 16.4527 18.4558C16.066 18.9764 15.4735 19.3048 14.8272 19.3568C14.0856 19.4164 13.187 18.8548 11.3899 17.7316L3.78462 12.9782Z" stroke="white" stroke-linejoin="round"/>
-</svg>
diff --git a/static/icons/theme-icon.svg b/static/icons/theme-icon.svg
deleted file mode 100644
index b485024..0000000
--- a/static/icons/theme-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.3125 1V5.22222M12.6875 1V4.16667M1 8.38889H18M9.5 20C7.62331 20 6.22284 18.2834 6.61141 16.4594L6.67728 16.1502C6.90831 15.0657 6.35912 13.9656 5.35029 13.4921L3.11406 12.4423C1.8233 11.8364 1 10.5454 1 9.12714V2.72213C1 1.77102 1.77609 1 2.73346 1H16.2665C17.2239 1 18 1.77102 18 2.72213V9.12714C18 10.5454 17.1767 11.8364 15.8859 12.4423L13.6497 13.4921C12.6409 13.9656 12.0917 15.0657 12.3227 16.1502L12.3886 16.4594C12.7772 18.2834 11.3767 20 9.5 20Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/views/components/popover/popover.templ b/views/components/popover/popover.templ
index 6b9a0b9..552f5cb 100644
--- a/views/components/popover/popover.templ
+++ b/views/components/popover/popover.templ
@@ -16,7 +16,7 @@ templ Popover(id string, button, child templ.Component) {
 			id={ fmt.Sprintf("popover-%s", id) }
 			class={
 				"hidden", "absolute", "z-30", "top-[45px]", "right-[0px]",
-				"bg-secondary-trans-20", "backdrop-blur-md", "shadow-md", "p-[10px]", "rounded-[5px]", "text-secondary",
+				"bg-secondary-trans-20", "backdrop-blur-lg", "shadow-md", "p-[10px]", "rounded-[5px]", "text-secondary",
 				"min-w-[150px]",
 			}
 		>
diff --git a/views/components/search/search.templ b/views/components/search/search.templ
index 195a137..8900b16 100644
--- a/views/components/search/search.templ
+++ b/views/components/search/search.templ
@@ -13,10 +13,10 @@ templ Search() {
 			data-loading-class-remove="hidden"
 			data-loading-path="/search?no_layout=true"
 		>
-			<div class={ "flex", "bg-secondary", "rounded-[8px]", "border", "border-b-[3px]", "border-accent" }>
+			<div class={ "flex", "bg-white", "rounded-[8px]", "border", "border-b-[3px]", "border-accent" }>
 				<input
 					id="search-input"
-					class={ "w-full", "p-[10px]", "ps-[15px]", "rounded-l-[8px]", "font-Ubuntu" }
+					class={ "w-full", "p-[10px]", "ps-[15px]", "rounded-l-[8px]", "font-Ubuntu", "bg-white" }
 					type="search"
 					name="query"
 					autofocus
@@ -32,7 +32,7 @@ templ Search() {
 					id="search-icon"
 				>
 					<img
-						class={ "w-[44px]", "h-[44px]", "rounded-r-[8px]", "pe-[10px]" }
+						class={ "w-[44px]", "h-[44px]", "rounded-r-[8px]", "pe-[10px]", "bg-white" }
 						src="/static/icons/search-icon.svg"
 						alt="search"
 					/>
diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index eca3d9d..bf631b8 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -17,7 +17,7 @@ templ Playlist(pl entities.Playlist) {
 				}
 			>
 				<div class={ "mb-4" }>
-					@navlink.NavLink("Playlists", "/static/icons/back-button-icon.svg", "/playlists", true)
+					@navlink.LinkContainer("/playlists", backButton())
 				</div>
 				<div
 					class={ "flex", "flex-col", "gap-y-4", "lg:gap-y-0", }
@@ -80,6 +80,15 @@ templ Playlist(pl entities.Playlist) {
 	</main>
 }
 
+templ backButton() {
+	<div class={ "flex", "gap-x-3", "items-center" }>
+		<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M3.78462 12.9782C2.16532 11.9662 1.35578 11.4603 1.0781 10.8123C0.835619 10.2466 0.835619 9.60613 1.0781 9.04031C1.35578 8.3925 2.16532 7.88651 3.78462 6.87442L11.3899 2.12111C13.187 0.997903 14.0856 0.436243 14.8272 0.495963C15.4735 0.547923 16.066 0.876214 16.4527 1.39682C16.8962 1.99402 16.8962 3.05369 16.8962 5.17301L9.42289 9.89298L16.8962 14.6797C16.8962 16.799 16.8962 17.8586 16.4527 18.4558C16.066 18.9764 15.4735 19.3048 14.8272 19.3568C14.0856 19.4164 13.187 18.8548 11.3899 17.7316L3.78462 12.9782Z" stroke="var(--secondary-color)" stroke-linejoin="round"></path>
+		</svg>
+		<span>Playlists</span>
+	</div>
+}
+
 css songThumb(url string) {
 	background-image: { url };
 }

From 94e20cab46c7292366e0d0f21bb34cc2874a0237 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 17:18:34 +0300
Subject: [PATCH 65/97] fix(search): text color

---
 views/components/search/search.templ | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/components/search/search.templ b/views/components/search/search.templ
index 8900b16..5a8e57a 100644
--- a/views/components/search/search.templ
+++ b/views/components/search/search.templ
@@ -16,7 +16,7 @@ templ Search() {
 			<div class={ "flex", "bg-white", "rounded-[8px]", "border", "border-b-[3px]", "border-accent" }>
 				<input
 					id="search-input"
-					class={ "w-full", "p-[10px]", "ps-[15px]", "rounded-l-[8px]", "font-Ubuntu", "bg-white" }
+					class={ "w-full", "p-[10px]", "ps-[15px]", "rounded-l-[8px]", "font-Ubuntu", "bg-white", "text-[#4c8c36]" }
 					type="search"
 					name="query"
 					autofocus

From 31d6a7d463f46fb4f373677e733210bb9ccafa24 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 19:06:19 +0300
Subject: [PATCH 66/97] fat-commit: more themes stuff

---
 static/css/themes/black.css                    |  8 ++++----
 static/icons/nav-about-selected-icon.svg       |  5 -----
 static/icons/nav-home-selected-icon.svg        |  3 ---
 static/icons/nav-playlists-selected-icon.svg   |  7 -------
 static/icons/nav-profile-selected-icon.svg     |  3 ---
 views/components/mobilenav/mobilenav.templ     | 13 ++++---------
 views/components/playlist/popover.templ        |  2 +-
 views/components/popover/popover.templ         |  2 +-
 views/components/themeswitch/themeswitch.templ |  8 ++++----
 views/icons/home.templ                         |  7 +++++++
 views/icons/playlists.templ                    | 11 +++++++++++
 views/icons/profile.templ                      |  7 +++++++
 12 files changed, 39 insertions(+), 37 deletions(-)
 delete mode 100644 static/icons/nav-about-selected-icon.svg
 delete mode 100644 static/icons/nav-home-selected-icon.svg
 delete mode 100644 static/icons/nav-playlists-selected-icon.svg
 delete mode 100644 static/icons/nav-profile-selected-icon.svg
 create mode 100644 views/icons/home.templ
 create mode 100644 views/icons/playlists.templ
 create mode 100644 views/icons/profile.templ

diff --git a/static/css/themes/black.css b/static/css/themes/black.css
index 19f5b50..4aec6f0 100644
--- a/static/css/themes/black.css
+++ b/static/css/themes/black.css
@@ -9,10 +9,10 @@
   --secondary-color-30: #ffffff4c;
   --secondary-color-69: #ffffffb0;
 
-  --accent-color: #4c8c36;
-  --accent-color-20: #4c8c3633;
-  --accent-color-30: #4c8c364c;
-  --accent-color-69: #4c8c36b0;
+  --accent-color: #d3fcbf;
+  --accent-color-20: #d3fcbf33;
+  --accent-color-30: #d3fcbf4c;
+  --accent-color-69: #d3fcbfb0;
 }
 
 body {
diff --git a/static/icons/nav-about-selected-icon.svg b/static/icons/nav-about-selected-icon.svg
deleted file mode 100644
index 0f4f619..0000000
--- a/static/icons/nav-about-selected-icon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 23.0233C15.578 23.0233 16.0465 22.5547 16.0465 21.9767V13.6046C16.0465 13.0267 15.578 12.5581 15 12.5581C14.422 12.5581 13.9535 13.0267 13.9535 13.6046V21.9767C13.9535 22.5547 14.422 23.0233 15 23.0233Z" fill="#4C8C36"/>
-<path d="M15 8.02322C15.7706 8.02322 16.3953 8.64795 16.3953 9.41857C16.3953 10.1892 15.7706 10.8139 15 10.8139C14.2293 10.8139 13.6046 10.1892 13.6046 9.41857C13.6046 8.64795 14.2293 8.02322 15 8.02322Z" fill="#4C8C36"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15ZM15 2.09302C7.87168 2.09302 2.09302 7.87168 2.09302 15C2.09302 22.1283 7.87168 27.907 15 27.907C22.1283 27.907 27.907 22.1283 27.907 15C27.907 7.87168 22.1283 2.09302 15 2.09302Z" fill="#4C8C36"/>
-</svg>
diff --git a/static/icons/nav-home-selected-icon.svg b/static/icons/nav-home-selected-icon.svg
deleted file mode 100644
index a8c875d..0000000
--- a/static/icons/nav-home-selected-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="38" height="30" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444H12.7725ZM14.2239 24.227L12.7735 24.1714C12.7728 24.19 12.7725 24.2084 12.7725 24.227H14.2239ZM18.8684 19.9115L18.8173 21.3619C18.8513 21.3631 18.8854 21.3631 18.9194 21.3619L18.8684 19.9115ZM23.5128 24.227H24.9642C24.9642 24.2084 24.9638 24.19 24.9633 24.1714L23.5128 24.227ZM22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444H22.0614ZM14.2239 27.093C13.4223 27.093 12.7725 27.7428 12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958V27.093ZM23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444C24.9642 27.7428 24.3144 27.093 23.5128 27.093V29.9958ZM14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444C15.6753 27.7428 15.0254 27.093 14.2239 27.093V29.9958ZM13.0628 28.5444V27.093C13.0457 27.093 13.0287 27.0932 13.0117 27.0938L13.0628 28.5444ZM6.09603 22.0692H4.64463C4.64463 22.0874 4.64498 22.1058 4.64567 22.1242L6.09603 22.0692ZM7.54743 9.0917C7.54743 8.29012 6.89761 7.6403 6.09603 7.6403C5.29445 7.6403 4.64463 8.29012 4.64463 9.0917H7.54743ZM0.636443 11.0433C-0.0268087 11.4933 -0.199525 12.3959 0.250641 13.0593C0.700827 13.7225 1.60342 13.8951 2.26666 13.445L0.636443 11.0433ZM6.91114 10.2926C7.57439 9.84243 7.7471 8.93983 7.29694 8.2766C6.84675 7.61336 5.94416 7.44063 5.28092 7.89081L6.91114 10.2926ZM5.28092 7.89081C4.61765 8.34094 4.44496 9.2435 4.89508 9.90675C5.34523 10.57 6.24789 10.7427 6.91114 10.2926L5.28092 7.89081ZM16.19 2.24109L15.4026 1.02186C15.3933 1.02786 15.384 1.03395 15.3749 1.04017L16.19 2.24109ZM21.5467 2.24109L22.3618 1.04017C22.3527 1.03395 22.3434 1.02786 22.3341 1.02186L21.5467 2.24109ZM30.8256 10.2926C31.489 10.7428 32.3915 10.57 32.8417 9.90675C33.2918 9.2435 33.119 8.3409 32.4558 7.89078L30.8256 10.2926ZM23.5128 27.093C22.7113 27.093 22.0614 27.7428 22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958V27.093ZM24.674 28.5444L24.725 27.0938C24.708 27.0932 24.691 27.093 24.674 27.093V28.5444ZM31.6407 22.0692L33.0911 22.1242C33.0917 22.1058 33.0921 22.0874 33.0921 22.0692H31.6407ZM33.0921 9.0917C33.0921 8.29012 32.4422 7.6403 31.6407 7.6403C30.8391 7.6403 30.1893 8.29012 30.1893 9.0917H33.0921ZM35.4704 13.4433C36.1338 13.8934 37.0364 13.7204 37.4863 13.057C37.9363 12.3936 37.7633 11.491 37.0999 11.0411L35.4704 13.4433ZM32.4558 7.89078C31.7924 7.44078 30.8896 7.61358 30.4395 8.27694C29.9896 8.94031 30.1622 9.84266 30.8256 10.2926L32.4558 7.89078ZM15.6753 28.5444V24.227H12.7725V28.5444H15.6753ZM15.6743 24.2823C15.7382 22.6091 17.1439 21.3029 18.8173 21.3619L18.9194 18.4608C15.6472 18.3457 12.8985 20.8996 12.7735 24.1714L15.6743 24.2823ZM18.9194 21.3619C20.5928 21.3029 21.9985 22.6091 22.0624 24.2823L24.9633 24.1714C24.8383 20.8996 22.0895 18.3457 18.8173 18.4608L18.9194 21.3619ZM22.0614 24.227V28.5444H24.9642V24.227H22.0614ZM14.2239 29.9958H23.5128V27.093H14.2239V29.9958ZM14.2239 27.093H13.0628V29.9958H14.2239V27.093ZM13.0117 27.0938C10.1012 27.1963 7.65673 24.9242 7.54639 22.0143L4.64567 22.1242C4.81663 26.6332 8.60428 30.1537 13.1138 29.9948L13.0117 27.0938ZM7.54743 22.0692V9.0917H4.64463V22.0692H7.54743ZM2.26666 13.445L6.91114 10.2926L5.28092 7.89081L0.636443 11.0433L2.26666 13.445ZM6.91114 10.2926L17.0051 3.44204L15.3749 1.04017L5.28092 7.89081L6.91114 10.2926ZM16.9775 3.46033C18.1285 2.71696 19.6082 2.71696 20.7592 3.46033L22.3341 1.02186C20.2245 -0.34062 17.5122 -0.34062 15.4026 1.02186L16.9775 3.46033ZM20.7316 3.44204L30.8256 10.2926L32.4558 7.89078L22.3618 1.04017L20.7316 3.44204ZM23.5128 29.9958H24.674V27.093H23.5128V29.9958ZM24.6229 29.9948C29.1325 30.1537 32.92 26.6332 33.0911 22.1242L30.1902 22.0143C30.0799 24.9242 27.6354 27.1963 24.725 27.0938L24.6229 29.9948ZM33.0921 22.0692V9.0917H30.1893V22.0692H33.0921ZM37.0999 11.0411L32.4558 7.89078L30.8256 10.2926L35.4704 13.4433L37.0999 11.0411Z" fill="#4C8C36"/>
-</svg>
diff --git a/static/icons/nav-playlists-selected-icon.svg b/static/icons/nav-playlists-selected-icon.svg
deleted file mode 100644
index 6a932f7..0000000
--- a/static/icons/nav-playlists-selected-icon.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27 1.5C27 2.32842 26.3284 3 25.5 3H1.5C0.671581 3 0 2.32842 0 1.5C0 0.671581 0.671581 0 1.5 0H25.5C26.3284 0 27 0.671581 27 1.5Z" fill="#4C8C36"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23 9.50002C23 10.3284 22.3284 11 21.5 11H1.5C0.671581 11 0 10.3284 0 9.50002C0 8.6716 0.671581 8.00002 1.5 8.00002H21.5C22.3284 8.00002 23 8.6716 23 9.50002Z" fill="#4C8C36"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17.5C15 18.3284 14.3284 19 13.5 19H1.5C0.671581 19 0 18.3284 0 17.5C0 16.6716 0.671581 16 1.5 16H13.5C14.3284 16 15 16.6716 15 17.5Z" fill="#4C8C36"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 25.5C13 26.3284 12.3284 27 11.5 27H1.5C0.671581 27 0 26.3284 0 25.5C0 24.6716 0.671581 24 1.5 24H11.5C12.3284 24 13 24.6716 13 25.5Z" fill="#4C8C36"/>
-<path d="M29.5001 3.99977C30.3285 3.99977 31.0001 4.67135 31.0001 5.49977C31.0001 9.08964 33.9103 11.9998 37.5001 11.9998C38.3285 11.9998 39.0001 12.6714 39.0001 13.4998C39.0001 14.3282 38.3285 14.9998 37.5001 14.9998C34.9857 14.9998 32.6995 14.023 31.0001 12.428V22.4998C31.0001 26.0896 28.0899 28.9998 24.5001 28.9998C20.9103 28.9998 18.0001 26.0896 18.0001 22.4998C18.0001 18.91 20.9103 15.9998 24.5001 15.9998C25.7887 15.9998 26.9899 16.3748 28.0001 17.0216V5.49977C28.0001 4.67135 28.6717 3.99977 29.5001 3.99977Z" fill="#4C8C36"/>
-</svg>
diff --git a/static/icons/nav-profile-selected-icon.svg b/static/icons/nav-profile-selected-icon.svg
deleted file mode 100644
index d032cff..0000000
--- a/static/icons/nav-profile-selected-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8438 27H5.15726C4.09768 27 3.31523 25.9545 3.71487 24.993C5.56915 20.547 9.9254 18 14.9998 18C20.0757 18 24.432 20.547 26.2862 24.993C26.6859 25.9545 25.9034 27 24.8438 27ZM8.87501 8.99998C8.87501 5.69098 11.6235 2.99998 14.9998 2.99998C18.3776 2.99998 21.1246 5.69098 21.1246 8.99998C21.1246 12.309 18.3776 15 14.9998 15C11.6235 15 8.87501 12.309 8.87501 8.99998ZM29.9335 26.454C28.8204 21.4155 25.3384 17.697 20.7556 16.0095C23.184 14.0939 24.6004 10.9964 24.0798 7.6049C23.4765 3.6704 20.1354 0.521966 16.1023 0.0629653C10.5348 -0.571535 5.81261 3.67348 5.81261 8.99998C5.81261 11.835 7.15394 14.3609 9.24555 16.0095C4.66116 17.697 1.18075 21.4155 0.066036 26.454C-0.3382 28.2855 1.1685 30 3.08096 30H26.9186C28.8326 30 30.3393 28.2855 29.9335 26.454Z" fill="#4C8C36"/>
-</svg>
diff --git a/views/components/mobilenav/mobilenav.templ b/views/components/mobilenav/mobilenav.templ
index cc64d28..02755e2 100644
--- a/views/components/mobilenav/mobilenav.templ
+++ b/views/components/mobilenav/mobilenav.templ
@@ -1,6 +1,7 @@
 package mobilenav
 
 import "dankmuzikk/views/components/navlink"
+import "dankmuzikk/views/icons"
 
 templ MobileNav() {
 	<div
@@ -17,21 +18,15 @@ templ MobileNav() {
 					<li><a href="/profile">Profile</a></li>
 				</div>
 				<li>
-					@navlink.NavLink("Home", "/static/icons/nav-home-icon.svg", "/")
+					@navlink.LinkContainer("/", icons.Home())
 				</li>
 				<li>
-					@navlink.NavLink("Playlists", "/static/icons/nav-playlists-icon.svg", "/playlists")
+					@navlink.LinkContainer("/playlists", icons.Playlist())
 				</li>
 				<li>
-					@navlink.NavLink("Profile", "/static/icons/nav-profile-icon.svg", "/profile")
+					@navlink.LinkContainer("/profile", icons.Profile())
 				</li>
 			</ul>
 		</nav>
 	</div>
-	<div class="hidden">
-		<img src="/static/icons/nav-home-selected-icon.svg" alt="Home"/>
-		<img src="/static/icons/nav-playlists-selected-icon.svg" alt="Playlists"/>
-		<img src="/static/icons/nav-profile-selected-icon.svg" alt="Profile"/>
-		<img src="/static/icons/nav-about-selected-icon.svg" alt="About"/>
-	</div>
 }
diff --git a/views/components/playlist/popover.templ b/views/components/playlist/popover.templ
index 45db914..ec00c9b 100644
--- a/views/components/playlist/popover.templ
+++ b/views/components/playlist/popover.templ
@@ -57,7 +57,7 @@ templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPla
 								}
 							></div>
 						</div>
-						<p class={ "max-w-[300px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>
+						<p class={ "max-w-[300px]", "overflow-hidden", "text-nowrap", "text-ellipsis", "text-secondary" }>
 							{ playlist.Title }
 						</p>
 					</li>
diff --git a/views/components/popover/popover.templ b/views/components/popover/popover.templ
index 552f5cb..d463df7 100644
--- a/views/components/popover/popover.templ
+++ b/views/components/popover/popover.templ
@@ -16,7 +16,7 @@ templ Popover(id string, button, child templ.Component) {
 			id={ fmt.Sprintf("popover-%s", id) }
 			class={
 				"hidden", "absolute", "z-30", "top-[45px]", "right-[0px]",
-				"bg-secondary-trans-20", "backdrop-blur-lg", "shadow-md", "p-[10px]", "rounded-[5px]", "text-secondary",
+				"bg-primary-trans-20", "backdrop-blur-lg", "shadow-md", "p-[10px]", "rounded-[5px]", "text-secondary",
 				"min-w-[150px]",
 			}
 		>
diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index 137d1bc..19a1f7a 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -73,10 +73,10 @@ script changeTheme(themeName string) {
             secondary20: "#ffffff33",
             secondary30: "#ffffff4c",
             secondary69: "#ffffffb0",
-            ACCENT: "#d3fcbf",
-            ACCENT20: "#d3fcbf33",
-            ACCENT30: "#d3fcbf4C",
-            ACCENT69: "#d3fcbfB0",
+            accent: "#d3fcbf",
+            accent20: "#d3fcbf33",
+            accent30: "#d3fcbf4C",
+            accent69: "#d3fcbfB0",
             bg: "/static/images/dankground-dark.svg",
         },
         white: {
diff --git a/views/icons/home.templ b/views/icons/home.templ
new file mode 100644
index 0000000..ac1a75f
--- /dev/null
+++ b/views/icons/home.templ
@@ -0,0 +1,7 @@
+package icons
+
+templ Home() {
+	<svg width="38" height="30" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444H12.7725ZM14.2239 24.227L12.7735 24.1714C12.7728 24.19 12.7725 24.2084 12.7725 24.227H14.2239ZM18.8684 19.9115L18.8173 21.3619C18.8513 21.3631 18.8854 21.3631 18.9194 21.3619L18.8684 19.9115ZM23.5128 24.227H24.9642C24.9642 24.2084 24.9638 24.19 24.9633 24.1714L23.5128 24.227ZM22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444H22.0614ZM14.2239 27.093C13.4223 27.093 12.7725 27.7428 12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958V27.093ZM23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444C24.9642 27.7428 24.3144 27.093 23.5128 27.093V29.9958ZM14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444C15.6753 27.7428 15.0254 27.093 14.2239 27.093V29.9958ZM13.0628 28.5444V27.093C13.0457 27.093 13.0287 27.0932 13.0117 27.0938L13.0628 28.5444ZM6.09603 22.0692H4.64463C4.64463 22.0874 4.64498 22.1058 4.64567 22.1242L6.09603 22.0692ZM7.54743 9.0917C7.54743 8.29012 6.89761 7.6403 6.09603 7.6403C5.29445 7.6403 4.64463 8.29012 4.64463 9.0917H7.54743ZM0.636443 11.0433C-0.0268087 11.4933 -0.199525 12.3959 0.250641 13.0593C0.700827 13.7225 1.60342 13.8951 2.26666 13.445L0.636443 11.0433ZM6.91114 10.2926C7.57439 9.84243 7.7471 8.93983 7.29694 8.2766C6.84675 7.61336 5.94416 7.44063 5.28092 7.89081L6.91114 10.2926ZM5.28092 7.89081C4.61765 8.34094 4.44496 9.2435 4.89508 9.90675C5.34523 10.57 6.24789 10.7427 6.91114 10.2926L5.28092 7.89081ZM16.19 2.24109L15.4026 1.02186C15.3933 1.02786 15.384 1.03395 15.3749 1.04017L16.19 2.24109ZM21.5467 2.24109L22.3618 1.04017C22.3527 1.03395 22.3434 1.02786 22.3341 1.02186L21.5467 2.24109ZM30.8256 10.2926C31.489 10.7428 32.3915 10.57 32.8417 9.90675C33.2918 9.2435 33.119 8.3409 32.4558 7.89078L30.8256 10.2926ZM23.5128 27.093C22.7113 27.093 22.0614 27.7428 22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958V27.093ZM24.674 28.5444L24.725 27.0938C24.708 27.0932 24.691 27.093 24.674 27.093V28.5444ZM31.6407 22.0692L33.0911 22.1242C33.0917 22.1058 33.0921 22.0874 33.0921 22.0692H31.6407ZM33.0921 9.0917C33.0921 8.29012 32.4422 7.6403 31.6407 7.6403C30.8391 7.6403 30.1893 8.29012 30.1893 9.0917H33.0921ZM35.4704 13.4433C36.1338 13.8934 37.0364 13.7204 37.4863 13.057C37.9363 12.3936 37.7633 11.491 37.0999 11.0411L35.4704 13.4433ZM32.4558 7.89078C31.7924 7.44078 30.8896 7.61358 30.4395 8.27694C29.9896 8.94031 30.1622 9.84266 30.8256 10.2926L32.4558 7.89078ZM15.6753 28.5444V24.227H12.7725V28.5444H15.6753ZM15.6743 24.2823C15.7382 22.6091 17.1439 21.3029 18.8173 21.3619L18.9194 18.4608C15.6472 18.3457 12.8985 20.8996 12.7735 24.1714L15.6743 24.2823ZM18.9194 21.3619C20.5928 21.3029 21.9985 22.6091 22.0624 24.2823L24.9633 24.1714C24.8383 20.8996 22.0895 18.3457 18.8173 18.4608L18.9194 21.3619ZM22.0614 24.227V28.5444H24.9642V24.227H22.0614ZM14.2239 29.9958H23.5128V27.093H14.2239V29.9958ZM14.2239 27.093H13.0628V29.9958H14.2239V27.093ZM13.0117 27.0938C10.1012 27.1963 7.65673 24.9242 7.54639 22.0143L4.64567 22.1242C4.81663 26.6332 8.60428 30.1537 13.1138 29.9948L13.0117 27.0938ZM7.54743 22.0692V9.0917H4.64463V22.0692H7.54743ZM2.26666 13.445L6.91114 10.2926L5.28092 7.89081L0.636443 11.0433L2.26666 13.445ZM6.91114 10.2926L17.0051 3.44204L15.3749 1.04017L5.28092 7.89081L6.91114 10.2926ZM16.9775 3.46033C18.1285 2.71696 19.6082 2.71696 20.7592 3.46033L22.3341 1.02186C20.2245 -0.34062 17.5122 -0.34062 15.4026 1.02186L16.9775 3.46033ZM20.7316 3.44204L30.8256 10.2926L32.4558 7.89078L22.3618 1.04017L20.7316 3.44204ZM23.5128 29.9958H24.674V27.093H23.5128V29.9958ZM24.6229 29.9948C29.1325 30.1537 32.92 26.6332 33.0911 22.1242L30.1902 22.0143C30.0799 24.9242 27.6354 27.1963 24.725 27.0938L24.6229 29.9948ZM33.0921 22.0692V9.0917H30.1893V22.0692H33.0921ZM37.0999 11.0411L32.4558 7.89078L30.8256 10.2926L35.4704 13.4433L37.0999 11.0411Z" fill="var(--secondary-color)"></path>
+	</svg>
+}
diff --git a/views/icons/playlists.templ b/views/icons/playlists.templ
new file mode 100644
index 0000000..ebc232f
--- /dev/null
+++ b/views/icons/playlists.templ
@@ -0,0 +1,11 @@
+package icons
+
+templ Playlist() {
+	<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M27 1.5C27 2.32842 26.3284 3 25.5 3H1.5C0.671581 3 0 2.32842 0 1.5C0 0.671581 0.671581 0 1.5 0H25.5C26.3284 0 27 0.671581 27 1.5Z" fill="var(--secondary-color)"></path>
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M23 9.50002C23 10.3284 22.3284 11 21.5 11H1.5C0.671581 11 0 10.3284 0 9.50002C0 8.6716 0.671581 8.00002 1.5 8.00002H21.5C22.3284 8.00002 23 8.6716 23 9.50002Z" fill="var(--secondary-color)"></path>
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17.5C15 18.3284 14.3284 19 13.5 19H1.5C0.671581 19 0 18.3284 0 17.5C0 16.6716 0.671581 16 1.5 16H13.5C14.3284 16 15 16.6716 15 17.5Z" fill="var(--secondary-color)"></path>
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M13 25.5C13 26.3284 12.3284 27 11.5 27H1.5C0.671581 27 0 26.3284 0 25.5C0 24.6716 0.671581 24 1.5 24H11.5C12.3284 24 13 24.6716 13 25.5Z" fill="var(--secondary-color)"></path>
+		<path d="M29.5001 3.99977C30.3285 3.99977 31.0001 4.67135 31.0001 5.49977C31.0001 9.08964 33.9103 11.9998 37.5001 11.9998C38.3285 11.9998 39.0001 12.6714 39.0001 13.4998C39.0001 14.3282 38.3285 14.9998 37.5001 14.9998C34.9857 14.9998 32.6995 14.023 31.0001 12.428V22.4998C31.0001 26.0896 28.0899 28.9998 24.5001 28.9998C20.9103 28.9998 18.0001 26.0896 18.0001 22.4998C18.0001 18.91 20.9103 15.9998 24.5001 15.9998C25.7887 15.9998 26.9899 16.3748 28.0001 17.0216V5.49977C28.0001 4.67135 28.6717 3.99977 29.5001 3.99977Z" fill="var(--secondary-color)"></path>
+	</svg>
+}
diff --git a/views/icons/profile.templ b/views/icons/profile.templ
new file mode 100644
index 0000000..9d62fe9
--- /dev/null
+++ b/views/icons/profile.templ
@@ -0,0 +1,7 @@
+package icons
+
+templ Profile() {
+	<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8438 27H5.15726C4.09768 27 3.31523 25.9545 3.71487 24.993C5.56915 20.547 9.9254 18 14.9998 18C20.0757 18 24.432 20.547 26.2862 24.993C26.6859 25.9545 25.9034 27 24.8438 27ZM8.87501 8.99998C8.87501 5.69098 11.6235 2.99998 14.9998 2.99998C18.3776 2.99998 21.1246 5.69098 21.1246 8.99998C21.1246 12.309 18.3776 15 14.9998 15C11.6235 15 8.87501 12.309 8.87501 8.99998ZM29.9335 26.454C28.8204 21.4155 25.3384 17.697 20.7556 16.0095C23.184 14.0939 24.6004 10.9964 24.0798 7.6049C23.4765 3.6704 20.1354 0.521966 16.1023 0.0629653C10.5348 -0.571535 5.81261 3.67348 5.81261 8.99998C5.81261 11.835 7.15394 14.3609 9.24555 16.0095C4.66116 17.697 1.18075 21.4155 0.066036 26.454C-0.3382 28.2855 1.1685 30 3.08096 30H26.9186C28.8326 30 30.3393 28.2855 29.9335 26.454Z" fill="var(--secondary-color)"></path>
+	</svg>
+}

From f31a01577e62cdc68bf3e0169df9770d17a0c3ee Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 19:23:39 +0300
Subject: [PATCH 67/97] chore(icons): move about to component

---
 views/components/header/header.templ | 5 ++---
 views/icons/about.templ              | 9 +++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 views/icons/about.templ

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index f4c18fc..bf0fde1 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -4,6 +4,7 @@ import (
 	"dankmuzikk/views/components/search"
 	"dankmuzikk/views/components/themeswitch"
 	"dankmuzikk/views/components/navlink"
+	"dankmuzikk/views/icons"
 )
 
 templ homeLinkContainer() {
@@ -19,9 +20,7 @@ templ homeLinkContainer() {
 
 templ mobileHeader() {
 	<div class={ "md:hidden", "h-[250px]", "flex", "flex-col", "justify-between" }>
-		<div class={ "absolute", "top-[20px]", "left-[20px]", "w-[23px]" }>
-			@navlink.NavLink("About", "/static/icons/nav-about-icon.svg", "/about")
-		</div>
+		@navlink.LinkContainer("/about", icons.About())
 		<div class={ "absolute", "top-[15px]", "right-[15px]" }>
 			@themeswitch.ThemeSwitch()
 		</div>
diff --git a/views/icons/about.templ b/views/icons/about.templ
new file mode 100644
index 0000000..dbb3745
--- /dev/null
+++ b/views/icons/about.templ
@@ -0,0 +1,9 @@
+package icons
+
+templ About() {
+	<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M15 23.0233C15.578 23.0233 16.0465 22.5547 16.0465 21.9767V13.6046C16.0465 13.0267 15.578 12.5581 15 12.5581C14.422 12.5581 13.9535 13.0267 13.9535 13.6046V21.9767C13.9535 22.5547 14.422 23.0233 15 23.0233Z" fill="var(--secondary-color)"></path>
+		<path d="M15 8.02323C15.7706 8.02323 16.3953 8.64796 16.3953 9.41858C16.3953 10.1892 15.7706 10.8139 15 10.8139C14.2293 10.8139 13.6046 10.1892 13.6046 9.41858C13.6046 8.64796 14.2293 8.02323 15 8.02323Z" fill="var(--secondary-color)"></path>
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15ZM15 2.09302C7.87168 2.09302 2.09302 7.87168 2.09302 15C2.09302 22.1283 7.87168 27.907 15 27.907C22.1283 27.907 27.907 22.1283 27.907 15C27.907 7.87168 22.1283 2.09302 15 2.09302Z" fill="var(--secondary-color)"></path>
+	</svg>
+}

From 3890f03cf153b0fd7d3912a1ea525e065d1b8f3a Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 19:53:13 +0300
Subject: [PATCH 68/97] fat-commit: fix more icons stuff

---
 static/icons/loop-icon.svg                    | 16 ++++++++++++++--
 static/icons/loop-off-icon.svg                | 19 ++++++++++++++++---
 static/icons/loop-once-icon.svg               | 15 +++++++++++----
 static/icons/nav-about-icon.svg               |  5 -----
 static/icons/nav-home-icon.svg                |  3 ---
 static/icons/nav-playlists-icon.svg           |  7 -------
 static/icons/nav-profile-icon.svg             |  3 ---
 static/icons/shuffle-icon.svg                 | 11 +++++++++--
 static/icons/shuffle-off-icon.svg             | 17 ++++++++++-------
 static/js/player.js                           |  2 +-
 views/components/popover/popover.templ        |  5 ++++-
 .../components/themeswitch/themeswitch.templ  |  4 ++--
 12 files changed, 67 insertions(+), 40 deletions(-)
 delete mode 100644 static/icons/nav-about-icon.svg
 delete mode 100644 static/icons/nav-home-icon.svg
 delete mode 100644 static/icons/nav-playlists-icon.svg
 delete mode 100644 static/icons/nav-profile-icon.svg

diff --git a/static/icons/loop-icon.svg b/static/icons/loop-icon.svg
index e268197..1f44ef3 100644
--- a/static/icons/loop-icon.svg
+++ b/static/icons/loop-icon.svg
@@ -1,3 +1,15 @@
-<svg width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.83335 16.5L2.49321 15.0714C1.3816 10.4026 5.33621 6 10.6416 6H28.6667M28.6667 6L23.6667 10.5M28.6667 6L23.6667 1.5M31.1667 13.5L31.5068 14.9286C32.6185 19.5974 28.6638 24 23.3585 24H5.33335M5.33335 24L10.3333 19.5M5.33335 24L10.3333 28.5" stroke="#9EE07E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_170_513)">
+<mask id="mask0_170_513" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="29" height="25">
+<path d="M28.3333 0H0V25H28.3333V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_170_513)">
+<path d="M2.36115 13.75L2.0777 12.5595C1.15135 8.66883 4.44686 5 8.86802 5H23.8889M23.8889 5L19.7223 8.75M23.8889 5L19.7223 1.25M25.9723 11.25L26.2557 12.4405C27.1821 16.3312 23.8865 20 19.4654 20H4.44448M4.44448 20L8.6111 16.25M4.44448 20L8.6111 23.75" stroke="#9EE07E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_170_513">
+<rect width="28.3333" height="25" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/static/icons/loop-off-icon.svg b/static/icons/loop-off-icon.svg
index b59fd79..b92a86b 100644
--- a/static/icons/loop-off-icon.svg
+++ b/static/icons/loop-off-icon.svg
@@ -1,4 +1,17 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.37748 13.2188L2.13445 12.198C1.34016 8.86205 4.16585 5.71624 7.9567 5.71624H20.8362M20.8362 5.71624L17.2635 8.93162M20.8362 5.71624L17.2635 2.50085M22.6225 11.0752L22.8655 12.096C23.6599 15.4319 20.8341 18.5778 17.0433 18.5778H4.1638M4.1638 18.5778L7.73645 15.3624M4.1638 18.5778L7.73645 21.7932" stroke="#9EE07E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="3.56157" y="1.35058" width="1.64359" height="28.0812" rx="0.821795" transform="rotate(-37.4791 3.56157 1.35058)" fill="#9EE07E" stroke="white" stroke-width="0.5"/>
+<svg width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_170_513)">
+<mask id="mask0_170_513" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="29" height="25">
+<path d="M28.3333 0H0V25H28.3333V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_170_513)">
+<path d="M2.36115 13.75L2.0777 12.5595C1.15135 8.66883 4.44686 5 8.86802 5H23.8889M23.8889 5L19.7223 8.75M23.8889 5L19.7223 1.25M25.9723 11.25L26.2557 12.4405C27.1821 16.3312 23.8865 20 19.4654 20H4.44448M4.44448 20L8.6111 16.25M4.44448 20L8.6111 23.75" stroke="#9EE07E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.97807 0.771709L4.97806 0.771715C4.51448 1.12717 4.42682 1.79112 4.78227 2.25471L21.4896 24.0445C21.845 24.5081 22.509 24.5958 22.9726 24.2403C23.4361 23.8849 23.5238 23.2209 23.1684 22.7573L6.46106 0.967499C6.10561 0.503917 5.44165 0.416258 4.97807 0.771709Z" fill="#9EE07E"/>
+<path d="M4.97806 0.771715L4.97807 0.771709C5.44165 0.416258 6.10561 0.503917 6.46106 0.967499L23.1684 22.7573C23.5238 23.2209 23.4361 23.8849 22.9726 24.2403L22.9726 24.2403C22.509 24.5958 21.845 24.5081 21.4896 24.0445L4.78227 2.25471C4.42682 1.79112 4.51448 1.12717 4.97806 0.771715Z" stroke="white" stroke-width="0.5"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_170_513">
+<rect width="28.3333" height="25" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/static/icons/loop-once-icon.svg b/static/icons/loop-once-icon.svg
index 2965406..ccd22c1 100644
--- a/static/icons/loop-once-icon.svg
+++ b/static/icons/loop-once-icon.svg
@@ -1,5 +1,12 @@
-<svg width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.83335 16.5L2.49321 15.0714C1.3816 10.4026 5.33621 6 10.6416 6H28.6667M28.6667 6L23.6667 10.5M28.6667 6L23.6667 1.5M31.1667 13.5L31.5068 14.9286C32.6185 19.5974 28.6638 24 23.3585 24H5.33335M5.33335 24L10.3333 19.5M5.33335 24L10.3333 28.5" stroke="#9EE07E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="17.5" cy="15.5" r="5.5" fill="#7ACB65"/>
-<path d="M15.75 19C15.5391 19 15.3594 18.9297 15.2109 18.7891C15.0703 18.6406 15 18.4609 15 18.25C15 18.0469 15.0703 17.8711 15.2109 17.7227C15.3594 17.5742 15.5391 17.5 15.75 17.5C15.9531 17.5 16.1289 17.4297 16.2773 17.2891C16.4258 17.1406 16.5 16.9609 16.5 16.75V13.75C16.5 13.5469 16.4258 13.3711 16.2773 13.2227C16.1289 13.0742 15.9531 13 15.75 13C15.5391 13 15.3594 12.9297 15.2109 12.7891C15.0703 12.6406 15 12.4609 15 12.25C15 12.0469 15.0703 11.8711 15.2109 11.7227C15.3594 11.5742 15.5391 11.5 15.75 11.5H18C18.4141 11.5 18.7656 11.6484 19.0547 11.9453C19.3516 12.2422 19.5 12.5938 19.5 13V16.75C19.5 16.9609 19.5703 17.1406 19.7109 17.2891C19.8594 17.4297 20.0391 17.5 20.25 17.5C20.4531 17.5 20.6289 17.5742 20.7773 17.7227C20.9258 17.8711 21 18.0469 21 18.25C21 18.4609 20.9258 18.6406 20.7773 18.7891C20.6289 18.9297 20.4531 19 20.25 19H15.75Z" fill="white"/>
+<svg width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_170_522)">
+<path d="M2.36115 13.75L2.0777 12.5595C1.15135 8.66883 4.44686 5 8.86802 5H23.8889M23.8889 5L19.7223 8.75M23.8889 5L19.7223 1.25M25.9723 11.25L26.2557 12.4405C27.1821 16.3312 23.8865 20 19.4654 20H4.44448M4.44448 20L8.6111 16.25M4.44448 20L8.6111 23.75" stroke="#9EE07E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5833 17.5C17.1146 17.5 19.1667 15.448 19.1667 12.9167C19.1667 10.3854 17.1146 8.33333 14.5833 8.33333C12.052 8.33333 10 10.3854 10 12.9167C10 15.448 12.052 17.5 14.5833 17.5Z" fill="#7ACB65"/>
+<path d="M13.125 15.8333C12.9492 15.8333 12.7995 15.7747 12.6758 15.6576C12.5586 15.5338 12.5 15.3841 12.5 15.2083C12.5 15.0391 12.5586 14.8926 12.6758 14.7689C12.7995 14.6452 12.9492 14.5833 13.125 14.5833C13.2942 14.5833 13.4407 14.5247 13.5644 14.4076C13.6882 14.2838 13.75 14.1341 13.75 13.9583V11.4583C13.75 11.2891 13.6882 11.1426 13.5644 11.0189C13.4407 10.8952 13.2942 10.8333 13.125 10.8333C12.9492 10.8333 12.7995 10.7747 12.6758 10.6576C12.5586 10.5338 12.5 10.3841 12.5 10.2083C12.5 10.0391 12.5586 9.89258 12.6758 9.76892C12.7995 9.64517 12.9492 9.58333 13.125 9.58333H15C15.3451 9.58333 15.638 9.707 15.8789 9.95442C16.1263 10.2018 16.25 10.4948 16.25 10.8333V13.9583C16.25 14.1341 16.3086 14.2838 16.4257 14.4076C16.5495 14.5247 16.6992 14.5833 16.875 14.5833C17.0442 14.5833 17.1907 14.6452 17.3144 14.7689C17.4382 14.8926 17.5 15.0391 17.5 15.2083C17.5 15.3841 17.4382 15.5338 17.3144 15.6576C17.1907 15.7747 17.0442 15.8333 16.875 15.8333H13.125Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_170_522">
+<rect width="28.3333" height="25" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/static/icons/nav-about-icon.svg b/static/icons/nav-about-icon.svg
deleted file mode 100644
index 3dcf440..0000000
--- a/static/icons/nav-about-icon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 23.0233C15.578 23.0233 16.0465 22.5547 16.0465 21.9767V13.6046C16.0465 13.0267 15.578 12.5581 15 12.5581C14.422 12.5581 13.9535 13.0267 13.9535 13.6046V21.9767C13.9535 22.5547 14.422 23.0233 15 23.0233Z" fill="white"/>
-<path d="M15 8.02323C15.7706 8.02323 16.3953 8.64796 16.3953 9.41858C16.3953 10.1892 15.7706 10.8139 15 10.8139C14.2293 10.8139 13.6046 10.1892 13.6046 9.41858C13.6046 8.64796 14.2293 8.02323 15 8.02323Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15ZM15 2.09302C7.87168 2.09302 2.09302 7.87168 2.09302 15C2.09302 22.1283 7.87168 27.907 15 27.907C22.1283 27.907 27.907 22.1283 27.907 15C27.907 7.87168 22.1283 2.09302 15 2.09302Z" fill="white"/>
-</svg>
diff --git a/static/icons/nav-home-icon.svg b/static/icons/nav-home-icon.svg
deleted file mode 100644
index f133973..0000000
--- a/static/icons/nav-home-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="38" height="30" viewBox="0 0 38 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444H12.7725ZM14.2239 24.227L12.7735 24.1714C12.7728 24.19 12.7725 24.2084 12.7725 24.227H14.2239ZM18.8684 19.9115L18.8173 21.3619C18.8513 21.3631 18.8854 21.3631 18.9194 21.3619L18.8684 19.9115ZM23.5128 24.227H24.9642C24.9642 24.2084 24.9638 24.19 24.9633 24.1714L23.5128 24.227ZM22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444H22.0614ZM14.2239 27.093C13.4223 27.093 12.7725 27.7428 12.7725 28.5444C12.7725 29.346 13.4223 29.9958 14.2239 29.9958V27.093ZM23.5128 29.9958C24.3144 29.9958 24.9642 29.346 24.9642 28.5444C24.9642 27.7428 24.3144 27.093 23.5128 27.093V29.9958ZM14.2239 29.9958C15.0254 29.9958 15.6753 29.346 15.6753 28.5444C15.6753 27.7428 15.0254 27.093 14.2239 27.093V29.9958ZM13.0628 28.5444V27.093C13.0457 27.093 13.0287 27.0932 13.0117 27.0938L13.0628 28.5444ZM6.09603 22.0692H4.64463C4.64463 22.0874 4.64498 22.1058 4.64567 22.1242L6.09603 22.0692ZM7.54743 9.0917C7.54743 8.29012 6.89761 7.6403 6.09603 7.6403C5.29445 7.6403 4.64463 8.29012 4.64463 9.0917H7.54743ZM0.636443 11.0433C-0.0268087 11.4933 -0.199525 12.3959 0.250641 13.0593C0.700827 13.7225 1.60342 13.8951 2.26666 13.445L0.636443 11.0433ZM6.91114 10.2926C7.57439 9.84243 7.7471 8.93983 7.29694 8.2766C6.84675 7.61336 5.94416 7.44063 5.28092 7.89081L6.91114 10.2926ZM5.28092 7.89081C4.61765 8.34094 4.44496 9.2435 4.89508 9.90675C5.34523 10.57 6.24789 10.7427 6.91114 10.2926L5.28092 7.89081ZM16.19 2.24109L15.4026 1.02186C15.3933 1.02786 15.384 1.03395 15.3749 1.04017L16.19 2.24109ZM21.5467 2.24109L22.3618 1.04017C22.3527 1.03395 22.3434 1.02786 22.3341 1.02186L21.5467 2.24109ZM30.8256 10.2926C31.489 10.7428 32.3915 10.57 32.8417 9.90675C33.2918 9.2435 33.119 8.3409 32.4558 7.89078L30.8256 10.2926ZM23.5128 27.093C22.7113 27.093 22.0614 27.7428 22.0614 28.5444C22.0614 29.346 22.7113 29.9958 23.5128 29.9958V27.093ZM24.674 28.5444L24.725 27.0938C24.708 27.0932 24.691 27.093 24.674 27.093V28.5444ZM31.6407 22.0692L33.0911 22.1242C33.0917 22.1058 33.0921 22.0874 33.0921 22.0692H31.6407ZM33.0921 9.0917C33.0921 8.29012 32.4422 7.6403 31.6407 7.6403C30.8391 7.6403 30.1893 8.29012 30.1893 9.0917H33.0921ZM35.4704 13.4433C36.1338 13.8934 37.0364 13.7204 37.4863 13.057C37.9363 12.3936 37.7633 11.491 37.0999 11.0411L35.4704 13.4433ZM32.4558 7.89078C31.7924 7.44078 30.8896 7.61358 30.4395 8.27694C29.9896 8.94031 30.1622 9.84266 30.8256 10.2926L32.4558 7.89078ZM15.6753 28.5444V24.227H12.7725V28.5444H15.6753ZM15.6743 24.2823C15.7382 22.6091 17.1439 21.3029 18.8173 21.3619L18.9194 18.4608C15.6472 18.3457 12.8985 20.8996 12.7735 24.1714L15.6743 24.2823ZM18.9194 21.3619C20.5928 21.3029 21.9985 22.6091 22.0624 24.2823L24.9633 24.1714C24.8383 20.8996 22.0895 18.3457 18.8173 18.4608L18.9194 21.3619ZM22.0614 24.227V28.5444H24.9642V24.227H22.0614ZM14.2239 29.9958H23.5128V27.093H14.2239V29.9958ZM14.2239 27.093H13.0628V29.9958H14.2239V27.093ZM13.0117 27.0938C10.1012 27.1963 7.65673 24.9242 7.54639 22.0143L4.64567 22.1242C4.81663 26.6332 8.60428 30.1537 13.1138 29.9948L13.0117 27.0938ZM7.54743 22.0692V9.0917H4.64463V22.0692H7.54743ZM2.26666 13.445L6.91114 10.2926L5.28092 7.89081L0.636443 11.0433L2.26666 13.445ZM6.91114 10.2926L17.0051 3.44204L15.3749 1.04017L5.28092 7.89081L6.91114 10.2926ZM16.9775 3.46033C18.1285 2.71696 19.6082 2.71696 20.7592 3.46033L22.3341 1.02186C20.2245 -0.34062 17.5122 -0.34062 15.4026 1.02186L16.9775 3.46033ZM20.7316 3.44204L30.8256 10.2926L32.4558 7.89078L22.3618 1.04017L20.7316 3.44204ZM23.5128 29.9958H24.674V27.093H23.5128V29.9958ZM24.6229 29.9948C29.1325 30.1537 32.92 26.6332 33.0911 22.1242L30.1902 22.0143C30.0799 24.9242 27.6354 27.1963 24.725 27.0938L24.6229 29.9948ZM33.0921 22.0692V9.0917H30.1893V22.0692H33.0921ZM37.0999 11.0411L32.4558 7.89078L30.8256 10.2926L35.4704 13.4433L37.0999 11.0411Z" fill="white"/>
-</svg>
diff --git a/static/icons/nav-playlists-icon.svg b/static/icons/nav-playlists-icon.svg
deleted file mode 100644
index fbdd76a..0000000
--- a/static/icons/nav-playlists-icon.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="39" height="29" viewBox="0 0 39 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M27 1.5C27 2.32842 26.3284 3 25.5 3H1.5C0.671581 3 0 2.32842 0 1.5C0 0.671581 0.671581 0 1.5 0H25.5C26.3284 0 27 0.671581 27 1.5Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23 9.50002C23 10.3284 22.3284 11 21.5 11H1.5C0.671581 11 0 10.3284 0 9.50002C0 8.6716 0.671581 8.00002 1.5 8.00002H21.5C22.3284 8.00002 23 8.6716 23 9.50002Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17.5C15 18.3284 14.3284 19 13.5 19H1.5C0.671581 19 0 18.3284 0 17.5C0 16.6716 0.671581 16 1.5 16H13.5C14.3284 16 15 16.6716 15 17.5Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 25.5C13 26.3284 12.3284 27 11.5 27H1.5C0.671581 27 0 26.3284 0 25.5C0 24.6716 0.671581 24 1.5 24H11.5C12.3284 24 13 24.6716 13 25.5Z" fill="white"/>
-<path d="M29.5001 3.99977C30.3285 3.99977 31.0001 4.67135 31.0001 5.49977C31.0001 9.08964 33.9103 11.9998 37.5001 11.9998C38.3285 11.9998 39.0001 12.6714 39.0001 13.4998C39.0001 14.3282 38.3285 14.9998 37.5001 14.9998C34.9857 14.9998 32.6995 14.023 31.0001 12.428V22.4998C31.0001 26.0896 28.0899 28.9998 24.5001 28.9998C20.9103 28.9998 18.0001 26.0896 18.0001 22.4998C18.0001 18.91 20.9103 15.9998 24.5001 15.9998C25.7887 15.9998 26.9899 16.3748 28.0001 17.0216V5.49977C28.0001 4.67135 28.6717 3.99977 29.5001 3.99977Z" fill="white"/>
-</svg>
diff --git a/static/icons/nav-profile-icon.svg b/static/icons/nav-profile-icon.svg
deleted file mode 100644
index 1ab3cae..0000000
--- a/static/icons/nav-profile-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.8438 27H5.15726C4.09768 27 3.31523 25.9545 3.71487 24.993C5.56915 20.547 9.9254 18 14.9998 18C20.0757 18 24.432 20.547 26.2862 24.993C26.6859 25.9545 25.9034 27 24.8438 27ZM8.87501 8.99998C8.87501 5.69098 11.6235 2.99998 14.9998 2.99998C18.3776 2.99998 21.1246 5.69098 21.1246 8.99998C21.1246 12.309 18.3776 15 14.9998 15C11.6235 15 8.87501 12.309 8.87501 8.99998ZM29.9335 26.454C28.8204 21.4155 25.3384 17.697 20.7556 16.0095C23.184 14.0939 24.6004 10.9964 24.0798 7.6049C23.4765 3.6704 20.1354 0.521966 16.1023 0.0629653C10.5348 -0.571535 5.81261 3.67348 5.81261 8.99998C5.81261 11.835 7.15394 14.3609 9.24555 16.0095C4.66116 17.697 1.18075 21.4155 0.066036 26.454C-0.3382 28.2855 1.1685 30 3.08096 30H26.9186C28.8326 30 30.3393 28.2855 29.9335 26.454Z" fill="white"/>
-</svg>
diff --git a/static/icons/shuffle-icon.svg b/static/icons/shuffle-icon.svg
index 99460e6..550ce33 100644
--- a/static/icons/shuffle-icon.svg
+++ b/static/icons/shuffle-icon.svg
@@ -1,3 +1,10 @@
-<svg width="32" height="28" viewBox="0 0 32 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.0466 8.64901C24.4462 9.24934 24.4462 10.2226 25.0466 10.823C25.6469 11.4233 26.6201 11.4233 27.2205 10.823L25.0466 8.64901ZM31.3199 6.72365C31.9202 6.12332 31.9202 5.14996 31.3199 4.54963C30.7195 3.9493 29.7463 3.9493 29.146 4.54963L31.3199 6.72365ZM29.146 6.72365C29.7463 7.32399 30.7195 7.32399 31.3199 6.72365C31.9202 6.12332 31.9202 5.14996 31.3199 4.54963L29.146 6.72365ZM27.2205 0.45025C26.6201 -0.150083 25.6469 -0.150083 25.0466 0.45025C24.4462 1.05058 24.4462 2.02394 25.0466 2.62427L27.2205 0.45025ZM30.2329 7.17391C31.0819 7.17391 31.7702 6.48564 31.7702 5.63664C31.7702 4.78764 31.0819 4.09937 30.2329 4.09937V7.17391ZM13.3054 12.9905C12.8388 13.6997 13.0354 14.653 13.7448 15.1197C14.454 15.5862 15.4073 15.3897 15.874 14.6803L13.3054 12.9905ZM15.874 14.6803C16.3405 13.9711 16.144 13.0178 15.4346 12.5511C14.7254 12.0846 13.7721 12.2811 13.3054 12.9905L15.874 14.6803ZM1.53727 20.4969C0.688265 20.4969 0 21.1852 0 22.0342C0 22.8831 0.688265 23.5714 1.53727 23.5714V20.4969ZM15.874 12.9905C15.4073 12.2811 14.454 12.0846 13.7448 12.5511C13.0354 13.0178 12.8388 13.9711 13.3054 14.6803L15.874 12.9905ZM30.2329 23.5714C31.0819 23.5714 31.7702 22.8831 31.7702 22.0342C31.7702 21.1852 31.0819 20.4969 30.2329 20.4969V23.5714ZM13.3054 14.6803C13.7721 15.3897 14.7254 15.5862 15.4346 15.1197C16.144 14.653 16.3405 13.6997 15.874 12.9905L13.3054 14.6803ZM1.53727 4.09937C0.688265 4.09937 0 4.78764 0 5.63664C0 6.48564 0.688265 7.17391 1.53727 7.17391V4.09937ZM27.2205 16.8478C26.6201 16.2475 25.6469 16.2475 25.0466 16.8478C24.4462 17.4482 24.4462 18.4214 25.0466 19.0217L27.2205 16.8478ZM29.146 23.1211C29.7463 23.7215 30.7195 23.7215 31.3199 23.1211C31.9202 22.5208 31.9202 21.5476 31.3199 20.9472L29.146 23.1211ZM31.3199 23.1211C31.9202 22.5208 31.9202 21.5476 31.3199 20.9472C30.7195 20.3469 29.7463 20.3469 29.146 20.9472L31.3199 23.1211ZM25.0466 25.0466C24.4462 25.6469 24.4462 26.6201 25.0466 27.2205C25.6469 27.8208 26.6201 27.8208 27.2205 27.2205L25.0466 25.0466ZM27.2205 10.823L31.3199 6.72365L29.146 4.54963L25.0466 8.64901L27.2205 10.823ZM31.3199 4.54963L27.2205 0.45025L25.0466 2.62427L29.146 6.72365L31.3199 4.54963ZM30.2329 4.09937H25.5186L25.5172 7.17391H30.2329V4.09937ZM25.5186 4.09937C21.5486 4.09552 17.8446 6.09083 15.6625 9.40766L18.2312 11.0974C19.8439 8.64585 22.5827 7.17106 25.5172 7.17391L25.5186 4.09937ZM15.6625 9.40766L13.3054 12.9905L15.874 14.6803L18.2312 11.0974L15.6625 9.40766ZM13.3054 12.9905L10.9483 16.5734L13.5169 18.2631L15.874 14.6803L13.3054 12.9905ZM10.9483 16.5734C9.33719 19.0223 6.60236 20.4969 3.67095 20.4969L3.67099 23.5714C7.63702 23.5712 11.3371 21.5765 13.5169 18.2631L10.9483 16.5734ZM3.67095 20.4969H1.53727V23.5714H3.67099L3.67095 20.4969ZM13.3054 14.6803L15.6625 18.2631L18.2312 16.5734L15.874 12.9905L13.3054 14.6803ZM15.6625 18.2631C17.8446 21.5799 21.55 23.5753 25.5201 23.5714L25.5186 20.4969C22.5841 20.4998 19.8439 19.025 18.2312 16.5734L15.6625 18.2631ZM25.5201 23.5714H30.2329V20.4969H25.5186L25.5201 23.5714ZM15.874 12.9905L13.5169 9.40764L10.9483 11.0974L13.3054 14.6803L15.874 12.9905ZM13.5169 9.40764C11.3371 6.09432 7.63706 4.09948 3.67103 4.09937L3.67095 7.17391C6.60236 7.17399 9.33717 8.64843 10.9483 11.0974L13.5169 9.40764ZM3.67103 4.09937H1.53727V7.17391H3.67095L3.67103 4.09937ZM25.0466 19.0217L29.146 23.1211L31.3199 20.9472L27.2205 16.8478L25.0466 19.0217ZM29.146 20.9472L25.0466 25.0466L27.2205 27.2205L31.3199 23.1211L29.146 20.9472Z" fill="#9EE07E"/>
+<svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_170_535)">
+<path d="M22.863 7.72233C22.327 8.25834 22.327 9.12732 22.863 9.66339C23.399 10.1994 24.2679 10.1994 24.804 9.66339L22.863 7.72233ZM28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217C27.9281 3.52616 27.0592 3.52616 26.5232 4.06217L28.4642 6.00326ZM26.5232 6.00326C27.0592 6.53928 27.9281 6.53928 28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217L26.5232 6.00326ZM24.804 0.402009C24.2679 -0.134003 23.399 -0.134003 22.863 0.402009C22.327 0.938018 22.327 1.80709 22.863 2.3431L24.804 0.402009ZM27.4937 6.40528C28.2517 6.40528 28.8663 5.79075 28.8663 5.03271C28.8663 4.27468 28.2517 3.66015 27.4937 3.66015V6.40528ZM12.3798 11.5987C11.9632 12.2319 12.1387 13.083 12.7721 13.4997C13.4054 13.9163 14.2565 13.7408 14.6732 13.1074L12.3798 11.5987ZM14.6732 13.1074C15.0897 12.4742 14.9143 11.623 14.2809 11.2063C13.6477 10.7898 12.7965 10.9653 12.3798 11.5987L14.6732 13.1074ZM1.87256 18.3008C1.11452 18.3008 0.5 18.9154 0.5 19.6734C0.5 20.4313 1.11452 21.0459 1.87256 21.0459V18.3008ZM14.6732 11.5987C14.2565 10.9653 13.4054 10.7898 12.7721 11.2063C12.1387 11.623 11.9632 12.4742 12.3798 13.1074L14.6732 11.5987ZM27.4937 21.0459C28.2517 21.0459 28.8663 20.4313 28.8663 19.6734C28.8663 18.9154 28.2517 18.3008 27.4937 18.3008V21.0459ZM12.3798 13.1074C12.7965 13.7408 13.6477 13.9163 14.2809 13.4997C14.9143 13.083 15.0897 12.2319 14.6732 11.5987L12.3798 13.1074ZM1.87256 3.66015C1.11452 3.66015 0.5 4.27468 0.5 5.03271C0.5 5.79075 1.11452 6.40528 1.87256 6.40528V3.66015ZM24.804 15.0427C24.2679 14.5067 23.399 14.5067 22.863 15.0427C22.327 15.5788 22.327 16.4477 22.863 16.9837L24.804 15.0427ZM26.5232 20.6438C27.0592 21.1799 27.9281 21.1799 28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029L26.5232 20.6438ZM28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029C27.9281 18.1669 27.0592 18.1669 26.5232 18.7029L28.4642 20.6438ZM22.863 22.363C22.327 22.899 22.327 23.7679 22.863 24.304C23.399 24.84 24.2679 24.84 24.804 24.304L22.863 22.363ZM24.804 9.66339L28.4642 6.00326L26.5232 4.06217L22.863 7.72233L24.804 9.66339ZM28.4642 4.06217L24.804 0.402009L22.863 2.3431L26.5232 6.00326L28.4642 4.06217ZM27.4937 3.66015H23.2845L23.2832 6.40528H27.4937V3.66015ZM23.2845 3.66015C19.7398 3.65671 16.4327 5.43824 14.4844 8.3997L16.7779 9.90839C18.2178 7.71951 20.6631 6.40273 23.2832 6.40528L23.2845 3.66015ZM14.4844 8.3997L12.3798 11.5987L14.6732 13.1074L16.7779 9.90839L14.4844 8.3997ZM12.3798 11.5987L10.2753 14.7977L12.5687 16.3063L14.6732 13.1074L12.3798 11.5987ZM10.2753 14.7977C8.83678 16.9842 6.39496 18.3008 3.77763 18.3008L3.77767 21.0459C7.31877 21.0457 10.6224 19.2647 12.5687 16.3063L10.2753 14.7977ZM3.77763 18.3008H1.87256V21.0459H3.77767L3.77763 18.3008ZM12.3798 13.1074L14.4844 16.3063L16.7779 14.7977L14.6732 11.5987L12.3798 13.1074ZM14.4844 16.3063C16.4327 19.2678 19.7411 21.0494 23.2858 21.0459L23.2845 18.3008C20.6644 18.3034 18.2178 16.9866 16.7779 14.7977L14.4844 16.3063ZM23.2858 21.0459H27.4937V18.3008H23.2845L23.2858 21.0459ZM14.6732 11.5987L12.5687 8.39968L10.2753 9.90839L12.3798 13.1074L14.6732 11.5987ZM12.5687 8.39968C10.6224 5.44136 7.3188 3.66025 3.77771 3.66015L3.77763 6.40528C6.39496 6.40535 8.83676 7.72181 10.2753 9.90839L12.5687 8.39968ZM3.77771 3.66015H1.87256V6.40528H3.77763L3.77771 3.66015ZM22.863 16.9837L26.5232 20.6438L28.4642 18.7029L24.804 15.0427L22.863 16.9837ZM26.5232 18.7029L22.863 22.363L24.804 24.304L28.4642 20.6438L26.5232 18.7029Z" fill="#9EE07E"/>
+</g>
+<defs>
+<clipPath id="clip0_170_535">
+<rect width="28.5714" height="25" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/static/icons/shuffle-off-icon.svg b/static/icons/shuffle-off-icon.svg
index 03db1ee..90bbfe7 100644
--- a/static/icons/shuffle-off-icon.svg
+++ b/static/icons/shuffle-off-icon.svg
@@ -1,8 +1,11 @@
-<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1_145_812" fill="white">
-<path d="M22.3311 9.7113C21.7958 10.2465 21.7958 11.1143 22.3311 11.6496C22.8664 12.1848 23.734 12.1848 24.2693 11.6496L22.3311 9.7113ZM27.9242 7.99469C28.4595 7.45944 28.4595 6.59162 27.9242 6.05637C27.389 5.52112 26.5213 5.52112 25.986 6.05637L27.9242 7.99469ZM25.986 7.99469C26.5213 8.52994 27.389 8.52994 27.9242 7.99469C28.4595 7.45944 28.4595 6.59162 27.9242 6.05637L25.986 7.99469ZM24.2693 2.40144C23.734 1.86619 22.8664 1.86619 22.3311 2.40144C21.7958 2.93668 21.7958 3.80451 22.3311 4.33976L24.2693 2.40144ZM26.9551 8.39613C27.7121 8.39613 28.3257 7.78248 28.3257 7.02553C28.3257 6.26857 27.7121 5.65493 26.9551 5.65493V8.39613ZM11.8628 13.5821C11.4469 14.2144 11.6221 15.0644 12.2546 15.4805C12.8869 15.8964 13.7369 15.7212 14.153 15.0887L11.8628 13.5821ZM14.153 15.0887C14.5689 14.4564 14.3937 13.6064 13.7612 13.1903C13.1289 12.7744 12.2789 12.9496 11.8628 13.5821L14.153 15.0887ZM1.3706 20.2747C0.613645 20.2747 0 20.8883 0 21.6453C0 22.4022 0.613645 23.0159 1.3706 23.0159V20.2747ZM14.153 13.5821C13.7369 12.9496 12.8869 12.7744 12.2546 13.1903C11.6221 13.6064 11.4469 14.4564 11.8628 15.0887L14.153 13.5821ZM26.9551 23.0159C27.7121 23.0159 28.3257 22.4022 28.3257 21.6453C28.3257 20.8883 27.7121 20.2747 26.9551 20.2747V23.0159ZM11.8628 15.0887C12.2789 15.7212 13.1289 15.8964 13.7612 15.4805C14.3937 15.0644 14.5689 14.2144 14.153 13.5821L11.8628 15.0887ZM1.3706 5.65493C0.613645 5.65493 0 6.26857 0 7.02553C0 7.78248 0.613645 8.39613 1.3706 8.39613V5.65493ZM24.2693 17.0212C23.734 16.486 22.8664 16.486 22.3311 17.0212C21.7958 17.5565 21.7958 18.4242 22.3311 18.9594L24.2693 17.0212ZM25.986 22.6144C26.5213 23.1496 27.389 23.1496 27.9242 22.6144C28.4595 22.0791 28.4595 21.2114 27.9242 20.6762L25.986 22.6144ZM27.9242 22.6144C28.4595 22.0791 28.4595 21.2114 27.9242 20.6762C27.389 20.1409 26.5213 20.1409 25.986 20.6762L27.9242 22.6144ZM22.3311 24.3311C21.7958 24.8664 21.7958 25.734 22.3311 26.2693C22.8664 26.8046 23.734 26.8046 24.2693 26.2693L22.3311 24.3311ZM24.2693 11.6496L27.9242 7.99469L25.986 6.05637L22.3311 9.7113L24.2693 11.6496ZM27.9242 6.05637L24.2693 2.40144L22.3311 4.33976L25.986 7.99469L27.9242 6.05637ZM26.9551 5.65493H22.752L22.7507 8.39613H26.9551V5.65493ZM22.752 5.65493C19.2123 5.65149 15.9099 7.43048 13.9644 10.3877L16.2546 11.8943C17.6924 9.70849 20.1343 8.39359 22.7507 8.39613L22.752 5.65493ZM13.9644 10.3877L11.8628 13.5821L14.153 15.0887L16.2546 11.8943L13.9644 10.3877ZM11.8628 13.5821L9.7613 16.7765L12.0514 18.2831L14.153 15.0887L11.8628 13.5821ZM9.7613 16.7765C8.32488 18.96 5.88654 20.2747 3.27296 20.2747L3.27299 23.0159C6.80903 23.0157 10.108 21.2372 12.0514 18.2831L9.7613 16.7765ZM3.27296 20.2747H1.3706V23.0159H3.27299L3.27296 20.2747ZM11.8628 15.0887L13.9644 18.2831L16.2546 16.7765L14.153 13.5821L11.8628 15.0887ZM13.9644 18.2831C15.9099 21.2403 19.2136 23.0193 22.7532 23.0159L22.752 20.2747C20.1356 20.2772 17.6924 18.9624 16.2546 16.7765L13.9644 18.2831ZM22.7532 23.0159H26.9551V20.2747H22.752L22.7532 23.0159ZM14.153 13.5821L12.0514 10.3877L9.76128 11.8943L11.8628 15.0887L14.153 13.5821ZM12.0514 10.3877C10.108 7.43358 6.80907 5.65502 3.27303 5.65493L3.27296 8.39613C5.88654 8.3962 8.32486 9.71079 9.76128 11.8943L12.0514 10.3877ZM3.27303 5.65493H1.3706V8.39613H3.27296L3.27303 5.65493ZM22.3311 18.9594L25.986 22.6144L27.9242 20.6762L24.2693 17.0212L22.3311 18.9594ZM25.986 20.6762L22.3311 24.3311L24.2693 26.2693L27.9242 22.6144L25.986 20.6762Z"/>
-</mask>
-<path d="M22.3311 9.7113C21.7958 10.2465 21.7958 11.1143 22.3311 11.6496C22.8664 12.1848 23.734 12.1848 24.2693 11.6496L22.3311 9.7113ZM27.9242 7.99469C28.4595 7.45944 28.4595 6.59162 27.9242 6.05637C27.389 5.52112 26.5213 5.52112 25.986 6.05637L27.9242 7.99469ZM25.986 7.99469C26.5213 8.52994 27.389 8.52994 27.9242 7.99469C28.4595 7.45944 28.4595 6.59162 27.9242 6.05637L25.986 7.99469ZM24.2693 2.40144C23.734 1.86619 22.8664 1.86619 22.3311 2.40144C21.7958 2.93668 21.7958 3.80451 22.3311 4.33976L24.2693 2.40144ZM26.9551 8.39613C27.7121 8.39613 28.3257 7.78248 28.3257 7.02553C28.3257 6.26857 27.7121 5.65493 26.9551 5.65493V8.39613ZM11.8628 13.5821C11.4469 14.2144 11.6221 15.0644 12.2546 15.4805C12.8869 15.8964 13.7369 15.7212 14.153 15.0887L11.8628 13.5821ZM14.153 15.0887C14.5689 14.4564 14.3937 13.6064 13.7612 13.1903C13.1289 12.7744 12.2789 12.9496 11.8628 13.5821L14.153 15.0887ZM1.3706 20.2747C0.613645 20.2747 0 20.8883 0 21.6453C0 22.4022 0.613645 23.0159 1.3706 23.0159V20.2747ZM14.153 13.5821C13.7369 12.9496 12.8869 12.7744 12.2546 13.1903C11.6221 13.6064 11.4469 14.4564 11.8628 15.0887L14.153 13.5821ZM26.9551 23.0159C27.7121 23.0159 28.3257 22.4022 28.3257 21.6453C28.3257 20.8883 27.7121 20.2747 26.9551 20.2747V23.0159ZM11.8628 15.0887C12.2789 15.7212 13.1289 15.8964 13.7612 15.4805C14.3937 15.0644 14.5689 14.2144 14.153 13.5821L11.8628 15.0887ZM1.3706 5.65493C0.613645 5.65493 0 6.26857 0 7.02553C0 7.78248 0.613645 8.39613 1.3706 8.39613V5.65493ZM24.2693 17.0212C23.734 16.486 22.8664 16.486 22.3311 17.0212C21.7958 17.5565 21.7958 18.4242 22.3311 18.9594L24.2693 17.0212ZM25.986 22.6144C26.5213 23.1496 27.389 23.1496 27.9242 22.6144C28.4595 22.0791 28.4595 21.2114 27.9242 20.6762L25.986 22.6144ZM27.9242 22.6144C28.4595 22.0791 28.4595 21.2114 27.9242 20.6762C27.389 20.1409 26.5213 20.1409 25.986 20.6762L27.9242 22.6144ZM22.3311 24.3311C21.7958 24.8664 21.7958 25.734 22.3311 26.2693C22.8664 26.8046 23.734 26.8046 24.2693 26.2693L22.3311 24.3311ZM24.2693 11.6496L27.9242 7.99469L25.986 6.05637L22.3311 9.7113L24.2693 11.6496ZM27.9242 6.05637L24.2693 2.40144L22.3311 4.33976L25.986 7.99469L27.9242 6.05637ZM26.9551 5.65493H22.752L22.7507 8.39613H26.9551V5.65493ZM22.752 5.65493C19.2123 5.65149 15.9099 7.43048 13.9644 10.3877L16.2546 11.8943C17.6924 9.70849 20.1343 8.39359 22.7507 8.39613L22.752 5.65493ZM13.9644 10.3877L11.8628 13.5821L14.153 15.0887L16.2546 11.8943L13.9644 10.3877ZM11.8628 13.5821L9.7613 16.7765L12.0514 18.2831L14.153 15.0887L11.8628 13.5821ZM9.7613 16.7765C8.32488 18.96 5.88654 20.2747 3.27296 20.2747L3.27299 23.0159C6.80903 23.0157 10.108 21.2372 12.0514 18.2831L9.7613 16.7765ZM3.27296 20.2747H1.3706V23.0159H3.27299L3.27296 20.2747ZM11.8628 15.0887L13.9644 18.2831L16.2546 16.7765L14.153 13.5821L11.8628 15.0887ZM13.9644 18.2831C15.9099 21.2403 19.2136 23.0193 22.7532 23.0159L22.752 20.2747C20.1356 20.2772 17.6924 18.9624 16.2546 16.7765L13.9644 18.2831ZM22.7532 23.0159H26.9551V20.2747H22.752L22.7532 23.0159ZM14.153 13.5821L12.0514 10.3877L9.76128 11.8943L11.8628 15.0887L14.153 13.5821ZM12.0514 10.3877C10.108 7.43358 6.80907 5.65502 3.27303 5.65493L3.27296 8.39613C5.88654 8.3962 8.32486 9.71079 9.76128 11.8943L12.0514 10.3877ZM3.27303 5.65493H1.3706V8.39613H3.27296L3.27303 5.65493ZM22.3311 18.9594L25.986 22.6144L27.9242 20.6762L24.2693 17.0212L22.3311 18.9594ZM25.986 20.6762L22.3311 24.3311L24.2693 26.2693L27.9242 22.6144L25.986 20.6762Z" fill="#9EE07E"/>
-<path d="M27.9242 7.99469L16.1388 19.7795L27.9237 31.565L39.7091 19.78L27.9242 7.99469ZM27.9242 6.05637L39.7091 -5.72894L27.9237 -17.514L16.1388 -5.72841L27.9242 6.05637ZM22.7507 8.39613L6.08402 8.38835L39.4173 8.41168L22.7507 8.39613ZM9.7613 16.7765L18.9212 2.85267L0.601193 30.7003L9.7613 16.7765ZM3.27299 23.0159L-13.3937 23.0161L19.9397 23.0159H3.27299ZM22.752 20.2747L39.4186 20.2669L6.08529 20.2747H22.752ZM27.9242 22.6144L16.1391 34.3995L27.9242 46.1846L39.7093 34.3995L27.9242 22.6144ZM27.9242 20.6762L39.7093 8.89105L27.9242 -2.89407L16.1391 8.89105L27.9242 20.6762ZM36.0546 -0.135379L34.1164 -2.07364L10.5458 21.4963L12.484 23.4345L36.0546 -0.135379ZM39.7091 19.78C46.7534 12.736 46.7534 1.31509 39.7091 -5.72894L16.1393 17.8417C10.1656 11.8681 10.1656 2.18291 16.1393 -3.79062L39.7091 19.78ZM14.2006 17.8411L16.1388 19.7795L39.7097 -3.79009L37.7715 -5.72841L14.2006 17.8411ZM16.1388 -5.72841L14.2006 -3.79009L37.7715 19.7795L39.7097 17.8411L16.1388 -5.72841ZM34.1165 16.1245L36.0548 14.1862L12.4839 -9.38334L10.5456 -7.44502L34.1165 16.1245ZM10.2885 5.65493V8.39613H43.6218V5.65493H10.2885ZM6.0853 7.00997L6.08402 8.38057L39.4173 8.41168L39.4186 7.04108L6.0853 7.00997ZM5.94979 25.065L7.09488 25.8183L25.4143 -2.02973L24.2692 -2.78301L5.94979 25.065ZM23.3127 1.16468L21.0225 -0.341881L2.70311 27.5061L4.9933 29.0127L23.3127 1.16468ZM20.0664 3.60608L18.9214 2.8528L0.601193 30.7003L1.74621 31.4535L20.0664 3.60608ZM-13.3937 21.6453V23.0159H19.9397V21.6453H-13.3937ZM18.0373 23.0159V20.2747H-15.2961V23.0159H18.0373ZM21.0225 29.0127L23.3127 27.5061L4.9933 -0.341881L2.70311 1.16468L21.0225 29.0127ZM24.2692 31.4538L25.4143 30.7005L7.09488 2.85253L5.94979 3.60581L24.2692 31.4538ZM39.4186 21.6453V20.2747H6.08529V21.6453H39.4186ZM10.2885 20.2747V23.0159H43.6218V20.2747H10.2885ZM1.74632 -2.78281L0.601281 -2.02953L18.9213 25.8181L20.0663 25.0648L1.74632 -2.78281ZM19.9397 7.02597L19.9397 5.65537L-13.3936 5.65448L-13.3937 7.02508L19.9397 7.02597ZM18.0373 8.39613V5.65493H-15.2961V8.39613H18.0373ZM34.1162 30.7445L36.0544 28.8063L12.4842 5.23611L10.546 7.17432L34.1162 30.7445ZM39.7093 34.3995C46.7534 27.3555 46.7534 15.935 39.7093 8.89105L16.1391 32.4613C10.1657 26.4878 10.1657 16.8027 16.1391 10.8293L39.7093 34.3995ZM16.1391 8.89105L14.2009 10.8293L37.7711 34.3995L39.7093 32.4613L16.1391 8.89105ZM14.2009 32.4613L16.1391 34.3995L39.7093 10.8293L37.7711 8.89105L14.2009 32.4613ZM36.0544 14.4842L34.1162 12.546L10.546 36.1162L12.4842 38.0544L36.0544 14.4842ZM6.08529 5.64715L6.08402 8.38835L39.4173 8.40391L39.4186 5.66271L6.08529 5.64715ZM4.8047 24.3117L7.09488 25.8183L25.4143 -2.02973L23.1241 -3.53629L4.8047 24.3117ZM0.601393 30.7004L2.8915 32.2069L21.2113 4.35923L18.9212 2.85267L0.601393 30.7004ZM-13.3937 20.2749L-13.3937 23.0161L19.9397 23.0156L19.9396 20.2744L-13.3937 20.2749ZM23.1241 32.2071L25.4143 30.7005L7.09488 2.85254L4.8047 4.3591L23.1241 32.2071ZM39.4199 23.0081L39.4186 20.2669L6.08529 20.2824L6.08657 23.0236L39.4199 23.0081ZM2.89148 -3.53616L0.601353 -2.02958L18.9212 25.8181L21.2113 24.3115L2.89148 -3.53616ZM-13.3936 5.65448L-13.3937 8.39568L19.9396 8.39657L19.9397 5.65537L-13.3936 5.65448ZM22.3311 9.7113L45.9009 33.2819L45.9013 33.2815L22.3311 9.7113ZM24.2693 11.6496L0.699251 -11.9208L0.699077 -11.9207L24.2693 11.6496ZM27.9242 7.99469L51.4943 31.5651L4.35441 -15.5759L27.9242 7.99469ZM27.9242 6.05637L4.35441 29.627L51.4945 -17.5139L27.9242 6.05637ZM25.986 6.05637L2.4162 -17.5143L2.4158 -17.5139L25.986 6.05637ZM25.986 7.99469L2.4158 31.5649L2.4162 31.5653L25.986 7.99469ZM24.2693 2.40144L47.8395 -21.1688L47.8391 -21.1692L24.2693 2.40144ZM22.3311 4.33976L45.9013 -19.2305L45.9009 -19.2309L22.3311 4.33976ZM22.7507 8.39613L22.7183 41.7294L22.7345 41.7295H22.7507V8.39613ZM16.2546 11.8943L44.1018 30.2148L44.1028 30.2134L16.2546 11.8943ZM11.8628 13.5821L-15.9844 -4.73844L-15.9847 -4.73798L11.8628 13.5821ZM12.2546 15.4805L-6.06607 43.3276L-6.06415 43.3289L12.2546 15.4805ZM14.153 15.0887L42.0002 33.4092L42.0002 33.4092L14.153 15.0887ZM13.7612 13.1903L32.0819 -14.6568L32.08 -14.6581L13.7612 13.1903ZM9.7613 16.7765L-18.0862 -1.54357L-18.0863 -1.54349L9.7613 16.7765ZM3.27299 23.0159L3.27299 56.3492L3.27471 56.3492L3.27299 23.0159ZM12.2546 13.1903L-6.06415 -14.6581L-6.06607 -14.6568L12.2546 13.1903ZM11.8628 15.0887L-15.9846 33.4089L-15.9843 33.4094L11.8628 15.0887ZM16.2546 16.7765L44.103 -1.54227L44.1018 -1.54401L16.2546 16.7765ZM22.752 20.2747V-13.0587H22.7357L22.7194 -13.0587L22.752 20.2747ZM13.7612 15.4805L32.08 43.3289L32.0819 43.3276L13.7612 15.4805ZM9.76128 11.8943L-18.0864 30.2142L-18.0862 30.2145L9.76128 11.8943ZM3.27303 5.65493L3.27389 -27.6784H3.27303V5.65493ZM22.752 5.65493L22.7196 38.9882L22.7358 38.9883H22.752V5.65493ZM13.9644 10.3877L41.8116 28.7083L41.8117 28.7081L13.9644 10.3877ZM12.0514 18.2831L-15.7958 -0.0374587L-15.796 -0.0372543L12.0514 18.2831ZM13.9644 18.2831L41.8117 -0.037394L41.8116 -0.0374587L13.9644 18.2831ZM22.7532 23.0159V-10.3175H22.7369L22.7205 -10.3175L22.7532 23.0159ZM12.0514 10.3877L-15.796 28.708L-15.7959 28.7082L12.0514 10.3877ZM3.27296 8.39613L3.27389 -24.9372H3.27296V8.39613ZM-1.23873 -13.8593C-14.7922 -0.306287 -14.7917 21.6673 -1.23913 35.2198L45.9013 -11.9207C58.3833 0.561334 58.3839 20.7994 45.9009 33.2819L-1.23873 -13.8593ZM-1.23913 35.2198C12.3136 48.7725 34.2868 48.7725 47.8395 35.2198L0.699077 -11.9207C13.1813 -24.4029 33.4191 -24.4029 45.9013 -11.9207L-1.23913 35.2198ZM51.4941 -17.5143C37.9414 -31.0664 15.9688 -31.0664 2.4162 -17.5143L49.5558 29.627C37.0737 42.1087 16.8365 42.1087 4.35441 29.627L51.4941 -17.5143ZM2.4162 31.5653C15.9688 45.1175 37.9414 45.1175 51.4941 31.5653L4.35441 -15.5759C16.8365 -28.0576 37.0737 -28.0576 49.5558 -15.5759L2.4162 31.5653ZM47.8391 -21.1692C34.2865 -34.7214 12.3139 -34.7214 -1.23873 -21.1692L45.9009 25.9721C33.4188 38.4538 13.1816 38.4538 0.699478 25.9721L47.8391 -21.1692ZM-1.23873 -21.1692C-14.792 -7.61638 -14.792 14.3576 -1.23873 27.9104L45.9009 -19.2309C58.3837 -6.74855 58.3837 13.4897 45.9009 25.9721L-1.23873 -21.1692ZM26.9551 41.7295C46.1213 41.7295 61.6591 26.1923 61.6591 7.02553H-5.0076C-5.0076 -10.6273 9.30286 -24.9372 26.9551 -24.9372V41.7295ZM61.6591 7.02553C61.6591 -12.1412 46.1213 -27.6784 26.9551 -27.6784V38.9883C9.30287 38.9883 -5.0076 24.6784 -5.0076 7.02553H61.6591ZM-15.9856 -4.73666C-26.5166 11.2727 -22.0798 32.7921 -6.06607 43.3276L30.5753 -12.3666C45.3241 -2.66339 49.4103 17.1562 39.7112 31.9009L-15.9856 -4.73666ZM-6.06415 43.3289C9.94518 53.8599 31.4646 49.4231 42.0001 33.4094L-13.6941 -3.23202C-3.99088 -17.9808 15.8287 -22.067 30.5734 -12.3679L-6.06415 43.3289ZM42.0014 33.4075C52.5324 17.3981 48.0956 -4.12134 32.0819 -14.6568L-4.55951 41.0374C-19.3083 31.3342 -23.3945 11.5146 -13.6954 -3.2301L42.0014 33.4075ZM32.08 -14.6581C16.0706 -25.1891 -5.44883 -20.7523 -15.9843 -4.73858L39.71 31.9028C30.0067 46.6516 10.1871 50.7378 -4.55759 41.0387L32.08 -14.6581ZM1.3706 -13.0587C-17.7961 -13.0587 -33.3333 2.47913 -33.3333 21.6453H33.3333C33.3333 39.2975 19.0234 53.608 1.3706 53.608V-13.0587ZM-33.3333 21.6453C-33.3333 40.8114 -17.7961 56.3492 1.3706 56.3492V-10.3175C19.0234 -10.3175 33.3333 3.993 33.3333 21.6453H-33.3333ZM42.0001 -4.73858C31.4646 -20.7523 9.94518 -25.1891 -6.06415 -14.6581L30.5734 41.0387C15.8287 50.7378 -3.99088 46.6516 -13.6941 31.9028L42.0001 -4.73858ZM-6.06607 -14.6568C-22.0798 -4.12134 -26.5166 17.3981 -15.9856 33.4075L39.7112 -3.2301C49.4103 11.5146 45.3241 31.3342 30.5753 41.0374L-6.06607 -14.6568ZM26.9551 56.3492C46.1216 56.3492 61.6591 40.8117 61.6591 21.6453H-5.0076C-5.0076 3.99271 9.30257 -10.3175 26.9551 -10.3175V56.3492ZM61.6591 21.6453C61.6591 2.47884 46.1216 -13.0587 26.9551 -13.0587V53.608C9.30257 53.608 -5.0076 39.2978 -5.0076 21.6453H61.6591ZM-15.9843 33.4094C-5.44883 49.4231 16.0706 53.8599 32.08 43.3289L-4.55759 -12.3679C10.1871 -22.067 30.0067 -17.9808 39.71 -3.23202L-15.9843 33.4094ZM32.0819 43.3276C48.0956 32.7921 52.5324 11.2727 42.0014 -4.73666L-13.6954 31.9009C-23.3945 17.1562 -19.3083 -2.66339 -4.55951 -12.3666L32.0819 43.3276ZM1.3706 -27.6784C-17.7958 -27.6784 -33.3333 -12.1409 -33.3333 7.02553H33.3333C33.3333 24.6781 19.0231 38.9883 1.3706 38.9883V-27.6784ZM-33.3333 7.02553C-33.3333 26.192 -17.7959 41.7295 1.3706 41.7295V-24.9372C19.0231 -24.9372 33.3333 -10.627 33.3333 7.02553H-33.3333ZM47.8395 -6.549C34.2868 -20.1017 12.3136 -20.1017 -1.23913 -6.549L45.9013 40.5914C33.4191 53.0737 13.1813 53.0737 0.699077 40.5914L47.8395 -6.549ZM-1.23913 -6.549C-14.7919 7.00374 -14.7919 28.9769 -1.23913 42.5297L45.9013 -4.61079C58.3835 7.87142 58.3835 28.1092 45.9013 40.5914L-1.23913 -6.549ZM2.4158 46.1846C15.9685 59.7373 37.9417 59.7373 51.4945 46.1846L4.35401 -0.955854C16.8362 -13.4381 37.074 -13.4381 49.5563 -0.955854L2.4158 46.1846ZM51.4945 -2.89407C37.9417 -16.4468 15.9685 -16.4468 2.4158 -2.89407L49.5563 44.2464C37.074 56.7286 16.8362 56.7286 4.35401 44.2464L51.4945 -2.89407ZM-1.23913 0.760868C-14.7919 14.3136 -14.7919 36.2868 -1.23913 49.8395L45.9013 2.69908C58.3835 15.1813 58.3835 35.4191 45.9013 47.9013L-1.23913 0.760868ZM-1.23913 49.8395C12.3136 63.3923 34.2868 63.3923 47.8395 49.8395L0.699077 2.69908C13.1813 -9.78313 33.4191 -9.78313 45.9013 2.69908L-1.23913 49.8395ZM47.8394 35.22L51.4943 31.5651L4.35418 -15.5757L0.699251 -11.9208L47.8394 35.22ZM2.4158 -17.5139L-1.23914 -13.8589L45.9013 33.2815L49.5563 29.6266L2.4158 -17.5139ZM51.4945 -17.5139L47.8395 -21.1688L0.699077 25.9717L4.35401 29.6266L51.4945 -17.5139ZM-1.23913 27.91L2.4158 31.5649L49.5562 -15.5755L45.9013 -19.2305L-1.23913 27.91ZM26.9551 -27.6784H22.752V38.9883H26.9551V-27.6784ZM22.7507 41.7295H26.9551V-24.9372H22.7507V41.7295ZM22.7843 -27.6784C8.01137 -27.6927 -5.76854 -20.2667 -13.8829 -7.9327L41.8117 28.7081C37.5884 35.1277 30.4133 38.9957 22.7196 38.9882L22.7843 -27.6784ZM44.1028 30.2134C39.3688 37.4098 31.3302 41.7378 22.7183 41.7294L22.783 -24.9372C8.93842 -24.9506 -3.98392 -17.9929 -11.5936 -6.42485L44.1028 30.2134ZM-13.8828 -7.93285L-15.9844 -4.73844L39.71 31.9027L41.8116 28.7083L-13.8828 -7.93285ZM42.0002 33.4092L44.1018 30.2148L-11.5927 -6.42628L-13.6942 -3.23186L42.0002 33.4092ZM-15.9847 -4.73798L-18.0862 -1.54357L37.6088 35.0966L39.7104 31.9022L-15.9847 -4.73798ZM39.8986 36.6036L42.0002 33.4092L-13.6942 -3.23187L-15.7958 -0.0374587L39.8986 36.6036ZM-18.0863 -1.54349C-13.3582 -8.73052 -5.3318 -13.0587 3.27296 -13.0587V53.608C17.1049 53.608 30.0079 46.6505 37.6089 35.0965L-18.0863 -1.54349ZM3.27471 56.3492C18.0266 56.3484 31.7901 48.9288 39.8988 36.6034L-15.796 -0.0372543C-11.5742 -6.4544 -4.40854 -10.3171 3.27127 -10.3175L3.27471 56.3492ZM3.27296 -13.0587H1.3706V53.608H3.27296V-13.0587ZM1.3706 56.3492H3.27299V-10.3175H1.3706V56.3492ZM-15.9844 33.4092L-13.8828 36.6036L41.8116 -0.0374587L39.7101 -3.23187L-15.9844 33.4092ZM44.1018 -1.54401L42.0002 -4.73842L-13.6942 31.9027L-11.5927 35.0971L44.1018 -1.54401ZM-13.8829 36.6036C-5.76625 48.9409 8.01685 56.3637 22.7859 56.3492L22.7205 -10.3175C30.4104 -10.325 37.5861 -6.46032 41.8117 -0.037394L-13.8829 36.6036ZM22.7194 -13.0587C31.3251 -13.0671 39.3655 -8.74419 44.103 -1.54227L-11.5938 35.0953C-3.98065 46.6689 8.94603 53.6215 22.7846 53.608L22.7194 -13.0587ZM22.7532 56.3492H26.9551V-10.3175H22.7532V56.3492ZM26.9551 -13.0587H22.752V53.608H26.9551V-13.0587ZM42.0003 -4.73837L39.8987 -7.9328L-15.7959 28.7082L-13.6943 31.9026L42.0003 -4.73837ZM-18.0862 30.2145L-15.9846 33.4089L39.7103 -3.23154L37.6087 -6.42595L-18.0862 30.2145ZM39.8988 -7.93266C31.7905 -20.2575 18.027 -27.678 3.27389 -27.6784L3.27217 38.9883C-4.40891 38.9881 -11.5746 35.1246 -15.796 28.708L39.8988 -7.93266ZM3.27202 41.7295C-5.33134 41.7292 -13.3578 37.4019 -18.0864 30.2142L37.6089 -6.42564C30.0076 -17.9803 17.1044 -24.9368 3.27389 -24.9372L3.27202 41.7295ZM3.27303 -27.6784H1.3706V38.9883H3.27303V-27.6784ZM1.3706 41.7295H3.27296V-24.9372H1.3706V41.7295ZM-1.23913 42.5297L2.4158 46.1846L49.5563 -0.955854L45.9013 -4.61079L-1.23913 42.5297ZM51.4945 -2.89407L47.8395 -6.549L0.699077 40.5914L4.35401 44.2464L51.4945 -2.89407ZM2.4158 -2.89407L-1.23913 0.760868L45.9013 47.9013L49.5563 44.2464L2.4158 -2.89407ZM47.8395 49.8395L51.4945 46.1846L4.35401 -0.955854L0.699077 2.69908L47.8395 49.8395Z" fill="#9EE07E" mask="url(#path-1-inside-1_145_812)"/>
-<rect x="1.35051" y="1.3506" width="1.64359" height="34.5" rx="0.821795" transform="rotate(-37.4791 1.35051 1.3506)" fill="#9EE07E" stroke="white" stroke-width="0.5"/>
+<svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_170_535)">
+<path d="M22.863 7.72233C22.327 8.25834 22.327 9.12732 22.863 9.66339C23.399 10.1994 24.2679 10.1994 24.804 9.66339L22.863 7.72233ZM28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217C27.9281 3.52616 27.0592 3.52616 26.5232 4.06217L28.4642 6.00326ZM26.5232 6.00326C27.0592 6.53928 27.9281 6.53928 28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217L26.5232 6.00326ZM24.804 0.402009C24.2679 -0.134003 23.399 -0.134003 22.863 0.402009C22.327 0.938018 22.327 1.80709 22.863 2.3431L24.804 0.402009ZM27.4937 6.40528C28.2517 6.40528 28.8663 5.79075 28.8663 5.03271C28.8663 4.27468 28.2517 3.66015 27.4937 3.66015V6.40528ZM12.3798 11.5987C11.9632 12.2319 12.1387 13.083 12.7721 13.4997C13.4054 13.9163 14.2565 13.7408 14.6732 13.1074L12.3798 11.5987ZM14.6732 13.1074C15.0897 12.4742 14.9143 11.623 14.2809 11.2063C13.6477 10.7898 12.7965 10.9653 12.3798 11.5987L14.6732 13.1074ZM1.87256 18.3008C1.11452 18.3008 0.5 18.9154 0.5 19.6734C0.5 20.4313 1.11452 21.0459 1.87256 21.0459V18.3008ZM14.6732 11.5987C14.2565 10.9653 13.4054 10.7898 12.7721 11.2063C12.1387 11.623 11.9632 12.4742 12.3798 13.1074L14.6732 11.5987ZM27.4937 21.0459C28.2517 21.0459 28.8663 20.4313 28.8663 19.6734C28.8663 18.9154 28.2517 18.3008 27.4937 18.3008V21.0459ZM12.3798 13.1074C12.7965 13.7408 13.6477 13.9163 14.2809 13.4997C14.9143 13.083 15.0897 12.2319 14.6732 11.5987L12.3798 13.1074ZM1.87256 3.66015C1.11452 3.66015 0.5 4.27468 0.5 5.03271C0.5 5.79075 1.11452 6.40528 1.87256 6.40528V3.66015ZM24.804 15.0427C24.2679 14.5067 23.399 14.5067 22.863 15.0427C22.327 15.5788 22.327 16.4477 22.863 16.9837L24.804 15.0427ZM26.5232 20.6438C27.0592 21.1799 27.9281 21.1799 28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029L26.5232 20.6438ZM28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029C27.9281 18.1669 27.0592 18.1669 26.5232 18.7029L28.4642 20.6438ZM22.863 22.363C22.327 22.899 22.327 23.7679 22.863 24.304C23.399 24.84 24.2679 24.84 24.804 24.304L22.863 22.363ZM24.804 9.66339L28.4642 6.00326L26.5232 4.06217L22.863 7.72233L24.804 9.66339ZM28.4642 4.06217L24.804 0.402009L22.863 2.3431L26.5232 6.00326L28.4642 4.06217ZM27.4937 3.66015H23.2845L23.2832 6.40528H27.4937V3.66015ZM23.2845 3.66015C19.7398 3.65671 16.4327 5.43824 14.4844 8.3997L16.7779 9.90839C18.2178 7.71951 20.6631 6.40273 23.2832 6.40528L23.2845 3.66015ZM14.4844 8.3997L12.3798 11.5987L14.6732 13.1074L16.7779 9.90839L14.4844 8.3997ZM12.3798 11.5987L10.2753 14.7977L12.5687 16.3063L14.6732 13.1074L12.3798 11.5987ZM10.2753 14.7977C8.83678 16.9842 6.39496 18.3008 3.77763 18.3008L3.77767 21.0459C7.31877 21.0457 10.6224 19.2647 12.5687 16.3063L10.2753 14.7977ZM3.77763 18.3008H1.87256V21.0459H3.77767L3.77763 18.3008ZM12.3798 13.1074L14.4844 16.3063L16.7779 14.7977L14.6732 11.5987L12.3798 13.1074ZM14.4844 16.3063C16.4327 19.2678 19.7411 21.0494 23.2858 21.0459L23.2845 18.3008C20.6644 18.3034 18.2178 16.9866 16.7779 14.7977L14.4844 16.3063ZM23.2858 21.0459H27.4937V18.3008H23.2845L23.2858 21.0459ZM14.6732 11.5987L12.5687 8.39968L10.2753 9.90839L12.3798 13.1074L14.6732 11.5987ZM12.5687 8.39968C10.6224 5.44136 7.3188 3.66025 3.77771 3.66015L3.77763 6.40528C6.39496 6.40535 8.83676 7.72181 10.2753 9.90839L12.5687 8.39968ZM3.77771 3.66015H1.87256V6.40528H3.77763L3.77771 3.66015ZM22.863 16.9837L26.5232 20.6438L28.4642 18.7029L24.804 15.0427L22.863 16.9837ZM26.5232 18.7029L22.863 22.363L24.804 24.304L28.4642 20.6438L26.5232 18.7029Z" fill="#9EE07E"/>
+<path d="M5.48209 0.57385C5.23909 0.256924 4.72487 0.24324 4.33355 0.543285C3.94223 0.843329 3.82199 1.34348 4.06499 1.66041L21.6565 24.6034C21.8995 24.9203 22.4137 24.934 22.805 24.634C23.1963 24.3339 23.3166 23.8338 23.0736 23.5168L5.48209 0.57385Z" fill="#9EE07E" stroke="white" stroke-width="0.5"/>
+</g>
+<defs>
+<clipPath id="clip0_170_535">
+<rect width="28.5714" height="25" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/static/js/player.js b/static/js/player.js
index 70803d1..3648729 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -353,7 +353,7 @@ shuffleEl.addEventListener("click", toggleShuffle);
 
 loopEl.addEventListener("click", (event) => {
   currentLoopIdx = (currentLoopIdx + 1) % loopModes.length;
-  event.target.src = "/static/images/" + loopModes[currentLoopIdx].icon;
+  event.target.src = "/static/icons/" + loopModes[currentLoopIdx].icon;
 });
 
 songSeekBarEl.addEventListener("change", (event) => {
diff --git a/views/components/popover/popover.templ b/views/components/popover/popover.templ
index d463df7..285240a 100644
--- a/views/components/popover/popover.templ
+++ b/views/components/popover/popover.templ
@@ -7,7 +7,10 @@ import (
 templ Popover(id string, button, child templ.Component) {
 	<div class={ "popover-container", "relative" }>
 		<button
-			class={ "popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20" }
+			class={
+				"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
+				"flex", "justify-center", "items-center",
+			}
 			onClick={ toggleTheThing(id) }
 		>
 			@button
diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index 19a1f7a..186a39c 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -39,8 +39,8 @@ templ themeSwitch() {
 }
 
 templ themeSwitchButton() {
-	<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path d="M6.3125 1V5.22222M12.6875 1V4.16667M1 8.38889H18M9.5 20C7.62331 20 6.22284 18.2834 6.61141 16.4594L6.67728 16.1502C6.90831 15.0657 6.35912 13.9656 5.35029 13.4921L3.11406 12.4423C1.8233 11.8364 1 10.5454 1 9.12714V2.72213C1 1.77102 1.77609 1 2.73346 1H16.2665C17.2239 1 18 1.77102 18 2.72213V9.12714C18 10.5454 17.1767 11.8364 15.8859 12.4423L13.6497 13.4921C12.6409 13.9656 12.0917 15.0657 12.3227 16.1502L12.3886 16.4594C12.7772 18.2834 11.3767 20 9.5 20Z" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+	<svg width="25" height="27" viewBox="0 0 25 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M7.99013 1V6.55556M16.3783 1V5.16667M1 10.7222H23.3684M12.1842 26C9.71488 26 7.87215 23.7412 8.38344 21.3412L8.4701 20.9344C8.77409 19.5075 8.05148 18.06 6.72406 17.4369L3.78165 16.0557C2.08329 15.2585 1 13.5597 1 11.6936V3.26596C1 2.0145 2.02117 1 3.28087 1H21.0875C22.3473 1 23.3684 2.0145 23.3684 3.26596V11.6936C23.3684 13.5597 22.2851 15.2585 20.5868 16.0557L17.6443 17.4369C16.3169 18.06 15.5943 19.5075 15.8983 20.9344L15.985 21.3412C16.4963 23.7412 14.6535 26 12.1842 26Z" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
 	</svg>
 }
 

From eeccc0de342e6650aeb217a5fdbf55bf9786fc09 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 19:59:18 +0300
Subject: [PATCH 69/97] chore(bg): increase opacity for dankground-dark

---
 static/images/dankground-dark.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/images/dankground-dark.svg b/static/images/dankground-dark.svg
index 1f76e58..d2b587b 100644
--- a/static/images/dankground-dark.svg
+++ b/static/images/dankground-dark.svg
@@ -1,6 +1,6 @@
 <svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <rect width="1920" height="1080" fill="url(#pattern0_100_2568)"/>
-<rect width="1920" height="1080" fill="black" fill-opacity="0.85"/>
+<rect width="1920" height="1080" fill="black" fill-opacity="0.9"/>
 <defs>
 <pattern id="pattern0_100_2568" patternContentUnits="objectBoundingBox" width="1" height="1">
 <use xlink:href="#image0_100_2568" transform="scale(0.000520833 0.000925926)"/>

From adc4a50a3dcae59d1c1ba7830ec32650d617ae8d Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 20:30:45 +0300
Subject: [PATCH 70/97] chore(deps): add static minifier

---
 go.mod | 2 ++
 go.sum | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/go.mod b/go.mod
index b91d1e9..6b6d5b1 100644
--- a/go.mod
+++ b/go.mod
@@ -7,6 +7,7 @@ require (
 	github.com/go-sql-driver/mysql v1.8.1
 	github.com/golang-jwt/jwt/v4 v4.5.0
 	github.com/google/uuid v1.6.0
+	github.com/tdewolff/minify/v2 v2.20.24
 	golang.org/x/crypto v0.22.0
 	golang.org/x/oauth2 v0.19.0
 	google.golang.org/api v0.175.0
@@ -29,6 +30,7 @@ require (
 	github.com/googleapis/gax-go/v2 v2.12.3 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
+	github.com/tdewolff/parse/v2 v2.7.14 // indirect
 	go.opencensus.io v0.24.0 // indirect
 	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.50.0 // indirect
 	go.opentelemetry.io/otel v1.25.0 // indirect
diff --git a/go.sum b/go.sum
index 401a064..a44374d 100644
--- a/go.sum
+++ b/go.sum
@@ -80,6 +80,11 @@ github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO
 github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
 github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/tdewolff/minify/v2 v2.20.24 h1:I4FCC5Q2YdGnmXNokZ1OkGpkO+Weao/62y5/2eQ19vo=
+github.com/tdewolff/minify/v2 v2.20.24/go.mod h1:1TJni7+mATKu24cBQQpgwakrYRD27uC1/rdJOgdv8ns=
+github.com/tdewolff/parse/v2 v2.7.14 h1:100KJ+QAO3PpMb3uUjzEU/NpmCdbBYz6KPmCIAfWpR8=
+github.com/tdewolff/parse/v2 v2.7.14/go.mod h1:3FbJWZp3XT9OWVN3Hmfp0p/a08v4h8J9W1aghka0soA=
+github.com/tdewolff/test v1.0.11-0.20231101010635-f1265d231d52/go.mod h1:6DAvZliBAAnD7rhVgwaM7DE5/d9NMOAJ09SqYqeK4QE=
 go.opencensus.io v0.24.0 h1:y73uSU6J157QMP2kn2r30vwW1A2W2WFwSCGnAVxeaD0=
 go.opencensus.io v0.24.0/go.mod h1:vNK8G9p7aAivkbmorf4v+7Hgx+Zs0yY+0fOtgBfjQKo=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.50.0 h1:cEPbyTSEHlQR89XVlyo78gqluF8Y3oMeBkXGWzQsfXY=

From 254b909fe741473dfaead33ba90d0412a06ac5b7 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 20:31:36 +0300
Subject: [PATCH 71/97] chore(static): minify minifiable static files

---
 cmd/server/server.go | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/cmd/server/server.go b/cmd/server/server.go
index 7b6b74b..c239bf5 100644
--- a/cmd/server/server.go
+++ b/cmd/server/server.go
@@ -16,6 +16,15 @@ import (
 	"dankmuzikk/services/youtube/search"
 	"embed"
 	"net/http"
+	"regexp"
+
+	"github.com/tdewolff/minify/v2"
+	"github.com/tdewolff/minify/v2/css"
+	"github.com/tdewolff/minify/v2/html"
+	"github.com/tdewolff/minify/v2/js"
+	"github.com/tdewolff/minify/v2/json"
+	"github.com/tdewolff/minify/v2/svg"
+	"github.com/tdewolff/minify/v2/xml"
 )
 
 func StartServer(staticFS embed.FS) error {
@@ -42,7 +51,15 @@ func StartServer(staticFS embed.FS) error {
 
 	///////////// Pages and files /////////////
 	pagesHandler := http.NewServeMux()
-	pagesHandler.Handle("/static/", http.FileServer(http.FS(staticFS)))
+
+	m := minify.New()
+	m.AddFunc("text/css", css.Minify)
+	m.AddFunc("text/html", html.Minify)
+	m.AddFunc("image/svg+xml", svg.Minify)
+	m.AddFuncRegexp(regexp.MustCompile("^(application|text)/(x-)?(java|ecma)script$"), js.Minify)
+	m.AddFuncRegexp(regexp.MustCompile("[/+]json$"), json.Minify)
+	m.AddFuncRegexp(regexp.MustCompile("[/+]xml$"), xml.Minify)
+	pagesHandler.Handle("/static/", m.Middleware(http.FileServer(http.FS(staticFS))))
 	pagesHandler.Handle("/music/", http.StripPrefix("/music", http.FileServer(http.Dir(config.Env().YouTube.MusicDir))))
 
 	pagesRouter := pages.NewPagesHandler(profileRepo, playlistsService, jwtUtil)

From 1e59b1157a67233af14654bf5eb5b22fe8af7cb8 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 20:40:23 +0300
Subject: [PATCH 72/97] chore(seo): use webp logo

---
 static/images/logo.webp              | Bin 0 -> 8630 bytes
 views/components/header/header.templ |   2 +-
 views/pages/about.templ              |   2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 static/images/logo.webp

diff --git a/static/images/logo.webp b/static/images/logo.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6f24b1a761261cdced9577ec476b9aaac5a5f725
GIT binary patch
literal 8630
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
IC5~nQ01Z#dQvd(}

literal 0
HcmV?d00001

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index bf0fde1..3662372 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -10,7 +10,7 @@ import (
 templ homeLinkContainer() {
 	<div class={ "flex", "justify-center", "items-center", "flex-col", "md:flex-row", "gap-3", "h-min" }>
 		<img
-			src="/static/android-chrome-512x512.png"
+			src="/static/images/logo.webp"
 			alt="DankMuzikk Logo"
 			class={ "w-[55px]", "rounded-md" }
 		/>
diff --git a/views/pages/about.templ b/views/pages/about.templ
index 2ac417d..39b73e6 100644
--- a/views/pages/about.templ
+++ b/views/pages/about.templ
@@ -18,7 +18,7 @@ templ About() {
 					>
 						<img
 							class={ "w-[200px]", "h-[200px]", "rounded-[100px]" }
-							src="/static/android-chrome-512x512.png"
+							src="/static/images/logo.webp"
 							alt="DrankMuzikk Logo"
 						/>
 						<h2 class={ "text-3xl" }>DankMuzikk</h2>

From d3c928077d8d217136fecb5d16365d373b50fb7f Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 20:47:44 +0300
Subject: [PATCH 73/97] chore(seo): add width and height to images

---
 views/components/header/header.templ   | 2 ++
 views/components/info/links.templ      | 2 ++
 views/components/navlink/navlink.templ | 7 ++++++-
 views/pages/about.templ                | 2 ++
 views/pages/login.templ                | 8 +++++++-
 views/pages/playlists.templ            | 8 +++++++-
 views/pages/profile.templ              | 2 ++
 views/pages/signup.templ               | 8 +++++++-
 8 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index 3662372..cb92da9 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -10,6 +10,8 @@ import (
 templ homeLinkContainer() {
 	<div class={ "flex", "justify-center", "items-center", "flex-col", "md:flex-row", "gap-3", "h-min" }>
 		<img
+			width="55"
+			height="55"
 			src="/static/images/logo.webp"
 			alt="DankMuzikk Logo"
 			class={ "w-[55px]", "rounded-md" }
diff --git a/views/components/info/links.templ b/views/components/info/links.templ
index 9599b04..6de4379 100644
--- a/views/components/info/links.templ
+++ b/views/components/info/links.templ
@@ -38,6 +38,8 @@ templ link(l linkT) {
 		target="_blank"
 	>
 		<img
+			width="25"
+			height="25"
 			class={ "w-[25px]", "w-[25px]", "rounded-xl" }
 			src={ l.logoUrl }
 			alt={ l.alt }
diff --git a/views/components/navlink/navlink.templ b/views/components/navlink/navlink.templ
index 2640f94..c225705 100644
--- a/views/components/navlink/navlink.templ
+++ b/views/components/navlink/navlink.templ
@@ -13,7 +13,12 @@ templ NavLink(title, imageUrl, path string, showTilte ...bool) {
 	>
 		if imageUrl != "" {
 			<div class={ "flex", "gap-x-3", "items-center" }>
-				<img src={ imageUrl } alt={ title }/>
+				<img
+					width="20"
+					height="20"
+					src={ imageUrl }
+					alt={ title }
+				/>
 				if len(showTilte) > 0 && showTilte[0] {
 					{ title }
 				}
diff --git a/views/pages/about.templ b/views/pages/about.templ
index 39b73e6..d86a9b4 100644
--- a/views/pages/about.templ
+++ b/views/pages/about.templ
@@ -17,6 +17,8 @@ templ About() {
 						class={ "flex", "flex-col", "justify-center", "items-center", "gap-y-3", }
 					>
 						<img
+							width="200"
+							height="200"
 							class={ "w-[200px]", "h-[200px]", "rounded-[100px]" }
 							src="/static/images/logo.webp"
 							alt="DrankMuzikk Logo"
diff --git a/views/pages/login.templ b/views/pages/login.templ
index 51171a0..0f33b6e 100644
--- a/views/pages/login.templ
+++ b/views/pages/login.templ
@@ -91,7 +91,13 @@ templ loginForm() {
 					class={ "w-full", "bg-secondary", "rounded-[50px]", "p-[10px]", "flex", "justify-center", "items-center" }
 				>
 					<span class={ "font-Ubuntu" }>
-						<img class={ "w-[25px]", "h-[25px]" } src="/static/images/google.webp" alt="Login with Google"/>
+						<img
+							width="25"
+							height="25"
+							class={ "w-[25px]", "h-[25px]" }
+							src="/static/images/google.webp"
+							alt="Login with Google"
+						/>
 					</span>
 				</button>
 			</a>
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index 806ac1e..bc17a8a 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -54,7 +54,13 @@ templ singlePlaylist(pl entities.Playlist) {
 			"flex", "flex-row", "lg:flex-col", "lg:justify-center", "items-center", "gap-x-5", "lg:gap-x-0",
 		}
 	>
-		<img src="/static/images/album-cover-icon.svg" class={ "w-[70px] h-[70px] lg:w-[125px]", "lg:h-[125px]" } alt=""/>
+		<img
+			width="100"
+			height="100"
+			src="/static/images/album-cover-icon.svg"
+			class={ "w-[70px] h-[70px] lg:w-[125px]", "lg:h-[125px]" }
+			alt=""
+		/>
 		<div class={ "lg:text-center" }>
 			<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ pl.Title }</p>
 			<p class={ "text-lg", "max-w-[190px]", "overflow-hidden", "text-nowrap", "text-ellipsis" }>{ fmt.Sprint(pl.SongsCount) } Songs</p>
diff --git a/views/pages/profile.templ b/views/pages/profile.templ
index 5f39a42..dd81ad5 100644
--- a/views/pages/profile.templ
+++ b/views/pages/profile.templ
@@ -20,6 +20,8 @@ templ Profile(prfl entities.Profile) {
 						class={ "flex", "flex-col", "justify-center", "items-center", "gap-y-3", }
 					>
 						<img
+							width="200"
+							height="200"
 							class={ "w-[200px]", "h-[200px]", "rounded-[100px]" }
 							if prfl.PfpLink != "" {
 								src={ prfl.PfpLink }
diff --git a/views/pages/signup.templ b/views/pages/signup.templ
index 888f29d..1532c8f 100644
--- a/views/pages/signup.templ
+++ b/views/pages/signup.templ
@@ -100,7 +100,13 @@ templ signupForm() {
 					class={ "w-full", "bg-secondary", "rounded-[50px]", "p-[10px]", "flex", "justify-center", "items-center" }
 				>
 					<span class={ "font-Ubuntu" }>
-						<img class={ "w-[25px]", "h-[25px]" } src="/static/images/google.webp" alt="Sign up with Google"/>
+						<img
+							width="25"
+							height="25"
+							class={ "w-[25px]", "h-[25px]" }
+							src="/static/images/google.webp"
+							alt="Sign up with Google"
+						/>
 					</span>
 				</button>
 			</a>

From e5e1a75b0ad643dc44d7bc85b0d45790130335b7 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 21:29:23 +0300
Subject: [PATCH 74/97] chore(seo): add title for popover's button

---
 views/components/playlist/new_playlis_popover.templ | 2 +-
 views/components/playlist/popover.templ             | 2 +-
 views/components/popover/popover.templ              | 4 +++-
 views/components/themeswitch/themeswitch.templ      | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/views/components/playlist/new_playlis_popover.templ b/views/components/playlist/new_playlis_popover.templ
index 70f4a77..0c1aa28 100644
--- a/views/components/playlist/new_playlis_popover.templ
+++ b/views/components/playlist/new_playlis_popover.templ
@@ -3,7 +3,7 @@ package playlist
 import "dankmuzikk/views/components/popover"
 
 templ NewPlaylistPopover() {
-	@popover.Popover("new-playlist", newPlaylistPopoverButton(), newPlaylistPopover())
+	@popover.Popover("new-playlist", "New playlist", newPlaylistPopoverButton(), newPlaylistPopover())
 }
 
 templ newPlaylistPopover() {
diff --git a/views/components/playlist/popover.templ b/views/components/playlist/popover.templ
index ec00c9b..17b4a7b 100644
--- a/views/components/playlist/popover.templ
+++ b/views/components/playlist/popover.templ
@@ -7,7 +7,7 @@ import (
 )
 
 templ PlaylistsPopover(index int, songId string, playlists []entities.Playlist, songsInPlaylists map[string]string) {
-	@popover.Popover(fmt.Sprint(index), popoverButton(), playlistsSelector(songId, playlists, songsInPlaylists))
+	@popover.Popover(fmt.Sprint(index), "Add to playlist", popoverButton(), playlistsSelector(songId, playlists, songsInPlaylists))
 }
 
 templ playlistsSelector(songId string, playlists []entities.Playlist, songsInPlaylists map[string]string) {
diff --git a/views/components/popover/popover.templ b/views/components/popover/popover.templ
index 285240a..cba290f 100644
--- a/views/components/popover/popover.templ
+++ b/views/components/popover/popover.templ
@@ -4,13 +4,15 @@ import (
 	"fmt"
 )
 
-templ Popover(id string, button, child templ.Component) {
+templ Popover(id, title string, button, child templ.Component) {
 	<div class={ "popover-container", "relative" }>
 		<button
 			class={
 				"popover-trigger", "p-2", "rounded-md", "hover:bg-accent-trans-20",
 				"flex", "justify-center", "items-center",
 			}
+			title={ title }
+			type="button"
 			onClick={ toggleTheThing(id) }
 		>
 			@button
diff --git a/views/components/themeswitch/themeswitch.templ b/views/components/themeswitch/themeswitch.templ
index 186a39c..93d52ce 100644
--- a/views/components/themeswitch/themeswitch.templ
+++ b/views/components/themeswitch/themeswitch.templ
@@ -21,7 +21,7 @@ var themes = []struct {
 }
 
 templ ThemeSwitch() {
-	@popover.Popover("theme-switcher", themeSwitchButton(), themeSwitch())
+	@popover.Popover("theme-switcher", "Change theme", themeSwitchButton(), themeSwitch())
 }
 
 templ themeSwitch() {

From 5f9921c74b35b7069958305787f2ca30bb3a639f Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 21:30:04 +0300
Subject: [PATCH 75/97] chore(seo): they said `async` OR `defer` NOT BOTH

---
 views/layouts/default.templ | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/views/layouts/default.templ b/views/layouts/default.templ
index 3717011..fb51dae 100644
--- a/views/layouts/default.templ
+++ b/views/layouts/default.templ
@@ -28,14 +28,12 @@ templ Default(children ...templ.Component) {
 				content="dankmuzikk,dank,dank music,music,music playlist,share playlist,group playlist"
 			/>
 			<link
-				async
 				defer
 				rel="stylesheet"
 				type="text/css"
 				href="/static/css/player-seeker.css"
 			/>
 			<link
-				async
 				defer
 				rel="stylesheet"
 				type="text/css"
@@ -44,8 +42,8 @@ templ Default(children ...templ.Component) {
 			<link href="/static/css/tailwind.css" rel="stylesheet"/>
 			<link href={ fmt.Sprintf("/static/css/themes/%s.css", ctx.Value("theme-name").(string)) } rel="stylesheet"/>
 			<script src="/static/js/htmx/htmx.min.js"></script>
-			<script async defer src="/static/js/htmx/json-enc.js"></script>
-			<script async defer src="/static/js/htmx/loading-states.js"></script>
+			<script defer src="/static/js/htmx/json-enc.js"></script>
+			<script defer src="/static/js/htmx/loading-states.js"></script>
 		</head>
 		<body
 			hx-ext="loading-states"

From 80eb0e4189e23bb3ad2ee406288d14a7e7193c82 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 21:44:58 +0300
Subject: [PATCH 76/97] chore(seo): links title

---
 views/components/header/header.templ       | 6 +++---
 views/components/mobilenav/mobilenav.templ | 6 +++---
 views/components/navlink/navlink.templ     | 3 ++-
 views/pages/index.templ                    | 2 +-
 views/pages/playlist.templ                 | 2 +-
 views/pages/playlists.templ                | 2 +-
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/views/components/header/header.templ b/views/components/header/header.templ
index cb92da9..47d8b99 100644
--- a/views/components/header/header.templ
+++ b/views/components/header/header.templ
@@ -22,12 +22,12 @@ templ homeLinkContainer() {
 
 templ mobileHeader() {
 	<div class={ "md:hidden", "h-[250px]", "flex", "flex-col", "justify-between" }>
-		@navlink.LinkContainer("/about", icons.About())
+		@navlink.LinkContainer("/about", "About", icons.About())
 		<div class={ "absolute", "top-[15px]", "right-[15px]" }>
 			@themeswitch.ThemeSwitch()
 		</div>
 		<div class={ "font-Ubuntu", "text-secondary" }>
-			@navlink.LinkContainer("/", homeLinkContainer())
+			@navlink.LinkContainer("/", "Home", homeLinkContainer())
 		</div>
 		<div class={  }>
 			<p class={ "text-secondary", "font-Ubuntu", "text-xl" }>
@@ -48,7 +48,7 @@ templ mobileHeader() {
 
 templ desktopHeader() {
 	<div class={ "hidden", "md:flex", "justify-between", "font-Ubuntu", "text-secondary" }>
-		@navlink.LinkContainer("/", homeLinkContainer())
+		@navlink.LinkContainer("/", "Home", homeLinkContainer())
 		<div class={ "flex", "justify-center", "items-center" }>
 			@search.Search()
 		</div>
diff --git a/views/components/mobilenav/mobilenav.templ b/views/components/mobilenav/mobilenav.templ
index 02755e2..e270368 100644
--- a/views/components/mobilenav/mobilenav.templ
+++ b/views/components/mobilenav/mobilenav.templ
@@ -18,13 +18,13 @@ templ MobileNav() {
 					<li><a href="/profile">Profile</a></li>
 				</div>
 				<li>
-					@navlink.LinkContainer("/", icons.Home())
+					@navlink.LinkContainer("/", "Home", icons.Home())
 				</li>
 				<li>
-					@navlink.LinkContainer("/playlists", icons.Playlist())
+					@navlink.LinkContainer("/playlists", "Playlists", icons.Playlist())
 				</li>
 				<li>
-					@navlink.LinkContainer("/profile", icons.Profile())
+					@navlink.LinkContainer("/profile", "Profile", icons.Profile())
 				</li>
 			</ul>
 		</nav>
diff --git a/views/components/navlink/navlink.templ b/views/components/navlink/navlink.templ
index c225705..e473675 100644
--- a/views/components/navlink/navlink.templ
+++ b/views/components/navlink/navlink.templ
@@ -29,9 +29,10 @@ templ NavLink(title, imageUrl, path string, showTilte ...bool) {
 	</a>
 }
 
-templ LinkContainer(path string, child templ.Component) {
+templ LinkContainer(path, title string, child templ.Component) {
 	<a
 		href={ templ.SafeURL(path) }
+		title={ title }
 		class={ "cursor-pointer" }
 		hx-get={ path + "?no_layout=true" }
 		hx-target="#main-contents"
diff --git a/views/pages/index.templ b/views/pages/index.templ
index b8d0e74..1f8a262 100644
--- a/views/pages/index.templ
+++ b/views/pages/index.templ
@@ -19,7 +19,7 @@ templ Index() {
 					DankMuzikk is music player that plays music from YouTube but without actually using YouTube, start by typing a song's name into the search bar.
 					<br/>
 					More details&nbsp;
-					@navlink.NavLink("here", "", "/about")
+					@navlink.NavLink("in about page", "", "/about")
 					<br/>
 					<br/>
 					And you can check the beta features <a class={ "cursor-pointer", "underline", "hover:no-underline" } href="https://beta.dankmuzikk.com">here</a>
diff --git a/views/pages/playlist.templ b/views/pages/playlist.templ
index bf631b8..ff49d21 100644
--- a/views/pages/playlist.templ
+++ b/views/pages/playlist.templ
@@ -17,7 +17,7 @@ templ Playlist(pl entities.Playlist) {
 				}
 			>
 				<div class={ "mb-4" }>
-					@navlink.LinkContainer("/playlists", backButton())
+					@navlink.LinkContainer("/playlists", "Playlists", backButton())
 				</div>
 				<div
 					class={ "flex", "flex-col", "gap-y-4", "lg:gap-y-0", }
diff --git a/views/pages/playlists.templ b/views/pages/playlists.templ
index bc17a8a..e8d9f59 100644
--- a/views/pages/playlists.templ
+++ b/views/pages/playlists.templ
@@ -42,7 +42,7 @@ templ JustPlaylists(pls []entities.Playlist) {
 		}
 	>
 		for _, playlist := range pls {
-			@navlink.LinkContainer(fmt.Sprintf("/playlist/%s", playlist.PublicId), singlePlaylist(playlist))
+			@navlink.LinkContainer(fmt.Sprintf("/playlist/%s", playlist.PublicId), playlist.Title, singlePlaylist(playlist))
 		}
 	</div>
 }

From 98edee5c5f5109273affe4f40e4c74cf1b59ad93 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 21:56:46 +0300
Subject: [PATCH 77/97] chore(seo): reduce logo's size

---
 static/images/logo.webp | Bin 8630 -> 1114 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/static/images/logo.webp b/static/images/logo.webp
index 6f24b1a761261cdced9577ec476b9aaac5a5f725..7e0d4e38a747943ec0649d63ff83469230ca6621 100644
GIT binary patch
literal 1114
zcmV-g1f}~@Nk&Fe1ONb6MM6+kP&gn)1ONcg69An7DmMT(06vjCl}M$dA)zo73jnYZ
z31R@tn}AMOdcGds%en{?Z8j10;yt~-tibp`rY9brjXD+76Q!Xb(*KJI9O~pOef*n?
zTj*Sm1Rk7RTI@MFtPrr}DTFOvz2~l|o^T9OPqc#Lz=uvuRhPY#yJOj&l_8L{fEzL`
z;n8yY#&>K@pF98*b1VWf{>2W|)7kGjoS~8qyDS@QCQCn4L;wK(@j%!wcAD=Nlw@AD
zs`=*JRHW>+gxFDqp&gj~)<4@fCswW_)qi#`X0vdK-?Iji3K2Qw_Ktt;fqNsDVF(gv
zkIWjn<b0UuGElWXK8#;t$F{LQhpBm)NM}yD!0ZJ*ZM5`A{1?M%r@7eqkyVW{<lD#R
zJ_&Z2NoSnKR=+_R$3`ePJ$=+(4VP`bTl=ko4W&iGJ;2jY&^Qt0SdT=Uz<p6|pn$I&
zHdvS7l7=c%(j-)N=I!o**dYM3hjPL?8F_E4g9fC#%7rZ23w!9ABGzn3nj5P1^)(aY
zwFv&0&cY2wxc7IH4t4w$1;RK&=wFONo`t;rJ3Cj?qZGTnH8EUsK=!nNQm*{@apB<d
z7NlehZn>|9{didaFE+0O$T4Kx`{X#sn-u00Eg*ce$kBWZaP5pmqte~JTJIWB<;NNw
z_zR@;&0iweJp2U@Au_L~&n?<BW8J>q(b|(TXM|FS0*<+%nkFogAgO{9KS<RkY^tY4
zNQEl~-HI%)BM{f0^9J{33yMoCmz{~ZT|%?2C&#q%V*{SG4bP$o=A=;~^tXc1XZmlp
z1{@_z&5!Dhmq@kEDahYJx*u(TIKm!@h;uXVu8MV`jQ;wsOKwsUKYvWw#-9MAA?(tD
z>z8!s{XQ~0(fD7yMZbC?Xv$ETCUZO)>Of*w1~BxR@U04C*5C$KgkLXhgd&JeyKvb7
zB>wF;K*VFclKGi980!9XIF^-0KNlc(lJ#p1D07>l77Yu58t(f1M|W+=nYew*U|lff
zpjJJr2xu7}O5fb4J4v-xQ>#l|qL5@>0+Rl0N(MkY#0BceKPKG*Ag5?I>v8}V5I~-t
zT@QRqY{-^sQo2G5FBy(U*_k9Hy!f2Mx!69wSj>;qY?}L)=U}D*=BhNu{S8lksyJl-
zXp2eX(13Te1^mK+taBxTR<X}s+%EDw7?mP>ZU~CiS0=VUGIho26n3w*4c8kt>AMK`
zNx8!#;|uw8PrF9CaS8lq`hDR{lrc6VtV2O({>&fqWfdFM@62d^D@wQoDI|?)9;R;c
zUXqou`FQFO3SLnVR-mFa*hll+yW6UHdIVfM6i{=b1TIyl$*32Qr;~;MrJ|I$tJcsE
z@F;j7q_xcZf4wc@y1DWQpFj{=!7B%s9nwgn7f_!CDakN(rs8Q_$92k1`-KVS;4d^V
g;tP7q|LH>?_LxyI2Cd@*$d)=^AI5J6^B4dC09fN1X8-^I

literal 8630
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
IC5~nQ01Z#dQvd(}


From 4771a3795c8dd957f83212f740fd8a0c9c318191 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 21:58:57 +0300
Subject: [PATCH 78/97] chore(seo): update the raw layout

---
 views/layouts/raw.templ | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/views/layouts/raw.templ b/views/layouts/raw.templ
index efc610f..7e11365 100644
--- a/views/layouts/raw.templ
+++ b/views/layouts/raw.templ
@@ -25,14 +25,12 @@ templ Raw(children ...templ.Component) {
 				content="dankmuzikk,dank,dank music,music,music playlist,share playlist,group playlist"
 			/>
 			<link
-				async
 				defer
 				rel="stylesheet"
 				type="text/css"
 				href="/static/css/player-seeker.css"
 			/>
 			<link
-				async
 				defer
 				rel="stylesheet"
 				type="text/css"
@@ -41,8 +39,8 @@ templ Raw(children ...templ.Component) {
 			<link href="/static/css/tailwind.css" rel="stylesheet"/>
 			<link href={ fmt.Sprintf("/static/css/themes/%s.css", ctx.Value("theme-name").(string)) } rel="stylesheet"/>
 			<script src="/static/js/htmx/htmx.min.js"></script>
-			<script async defer src="/static/js/htmx/json-enc.js"></script>
-			<script async defer src="/static/js/htmx/loading-states.js"></script>
+			<script defer src="/static/js/htmx/json-enc.js"></script>
+			<script defer src="/static/js/htmx/loading-states.js"></script>
 		</head>
 		<body
 			hx-ext="loading-states"

From 3a022f3020d85ca8e5d9f17a394f938b9b33d52d Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 22:02:07 +0300
Subject: [PATCH 79/97] chore(seo): add robots.txt to root path

---
 cmd/server/server.go | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/cmd/server/server.go b/cmd/server/server.go
index c239bf5..3b284c2 100644
--- a/cmd/server/server.go
+++ b/cmd/server/server.go
@@ -60,6 +60,11 @@ func StartServer(staticFS embed.FS) error {
 	m.AddFuncRegexp(regexp.MustCompile("[/+]json$"), json.Minify)
 	m.AddFuncRegexp(regexp.MustCompile("[/+]xml$"), xml.Minify)
 	pagesHandler.Handle("/static/", m.Middleware(http.FileServer(http.FS(staticFS))))
+	pagesHandler.HandleFunc("/robots.txt", func(w http.ResponseWriter, r *http.Request) {
+		robotsFile, _ := staticFS.ReadFile("static/robots.txt")
+		w.Header().Set("Content-Type", "text/plain")
+		_, _ = w.Write(robotsFile)
+	})
 	pagesHandler.Handle("/music/", http.StripPrefix("/music", http.FileServer(http.Dir(config.Env().YouTube.MusicDir))))
 
 	pagesRouter := pages.NewPagesHandler(profileRepo, playlistsService, jwtUtil)

From a416e4f6017a9cd305c4138e9e5339f6d8adc0cb Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 22:47:09 +0300
Subject: [PATCH 80/97] chore(player): fix shuffle and loop on the end of
 playlist

---
 static/js/player.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/static/js/player.js b/static/js/player.js
index 3648729..7be634f 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -89,8 +89,10 @@ class PlaylistPlayer {
   next(shuffle = false, loop = false) {
     if (
       !loop &&
+      !shuffle &&
       this.#currentSongIndex + 1 >= this.#currentPlaylist.songs.length
     ) {
+      stopMuzikk();
       return;
     }
 
@@ -99,6 +101,7 @@ class PlaylistPlayer {
       : loop && this.#currentSongIndex + 1 >= this.#currentPlaylist.songs.length
         ? 0
         : this.#currentSongIndex + 1;
+
     const songToPlay = this.#currentPlaylist.songs[this.#currentSongIndex];
     playYTSong(
       songToPlay.yt_id,
@@ -111,7 +114,8 @@ class PlaylistPlayer {
   }
 
   previous(shuffle = false, loop = false) {
-    if (!loop && this.#currentSongIndex - 1 < 0) {
+    if (!loop && !shuffle && this.#currentSongIndex - 1 < 0) {
+      stopMuzikk();
       return;
     }
     this.#currentSongIndex = shuffle

From 321df913628475a3ea6a093c74b9e40cd85808f4 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 23:08:36 +0300
Subject: [PATCH 81/97] chore(entities): merge SongDownloadRequest and Song

---
 entities/song_download.go             |  8 -------
 handlers/apis/songs.go                | 16 ++++++-------
 services/playlists/playlists.go       | 13 +---------
 services/youtube/download/download.go | 34 +++++++++++++--------------
 4 files changed, 26 insertions(+), 45 deletions(-)

diff --git a/entities/song_download.go b/entities/song_download.go
index 038d920..1899b98 100644
--- a/entities/song_download.go
+++ b/entities/song_download.go
@@ -1,9 +1 @@
 package entities
-
-type SongDownloadRequest struct {
-	Id           string `json:"id"`
-	ThumbnailUrl string `json:"thumbnailUrl"`
-	Title        string `json:"title"`
-	Artist       string `json:"artist"`
-	Duration     string `json:"duration"`
-}
diff --git a/handlers/apis/songs.go b/handlers/apis/songs.go
index 55c958c..2603aeb 100644
--- a/handlers/apis/songs.go
+++ b/handlers/apis/songs.go
@@ -73,30 +73,30 @@ func (s *songDownloadHandler) HandleDownloadSongToQueue(w http.ResponseWriter, r
 	}
 }
 
-func (s *songDownloadHandler) extractSongFromQuery(query url.Values) (entities.SongDownloadRequest, error) {
+func (s *songDownloadHandler) extractSongFromQuery(query url.Values) (entities.Song, error) {
 	id := query.Get("id")
 	if id == "" {
-		return entities.SongDownloadRequest{}, errors.New("missing song's yt id")
+		return entities.Song{}, errors.New("missing song's yt id")
 	}
 	thumbnailUrl := query.Get("thumbnailUrl")
 	if thumbnailUrl == "" {
-		return entities.SongDownloadRequest{}, errors.New("missing song's thumbnailUrl")
+		return entities.Song{}, errors.New("missing song's thumbnailUrl")
 	}
 	title := query.Get("title")
 	if title == "" {
-		return entities.SongDownloadRequest{}, errors.New("missing song's title")
+		return entities.Song{}, errors.New("missing song's title")
 	}
 	artist := query.Get("artist")
 	if artist == "" {
-		return entities.SongDownloadRequest{}, errors.New("missing song's artist name")
+		return entities.Song{}, errors.New("missing song's artist name")
 	}
 	duration := query.Get("duration")
 	if duration == "" {
-		return entities.SongDownloadRequest{}, errors.New("missing song's duration")
+		return entities.Song{}, errors.New("missing song's duration")
 	}
 
-	return entities.SongDownloadRequest{
-		Id:           id,
+	return entities.Song{
+		YtId:         id,
 		Title:        title,
 		Artist:       artist,
 		ThumbnailUrl: thumbnailUrl,
diff --git a/services/playlists/playlists.go b/services/playlists/playlists.go
index 2c10446..d86e854 100644
--- a/services/playlists/playlists.go
+++ b/services/playlists/playlists.go
@@ -273,18 +273,7 @@ func (p *Service) GetAllMappedForAddPopover(songs []entities.Song, ownerId uint)
 		}
 	}
 
-	songRequests := make([]entities.SongDownloadRequest, len(songs))
-	for i, song := range songs {
-		songRequests[i] = entities.SongDownloadRequest{
-			Id:           song.YtId,
-			ThumbnailUrl: song.ThumbnailUrl,
-			Title:        song.Title,
-			Artist:       song.Artist,
-			Duration:     song.Duration,
-		}
-	}
-
-	err = p.downloadService.DownloadYoutubeSongsMetadata(songRequests)
+	err = p.downloadService.DownloadYoutubeSongsMetadata(songs)
 	if err != nil {
 		return nil, nil, err
 	}
diff --git a/services/youtube/download/download.go b/services/youtube/download/download.go
index 4ef02ca..43959c7 100644
--- a/services/youtube/download/download.go
+++ b/services/youtube/download/download.go
@@ -26,23 +26,23 @@ func New(repo db.CreatorRepo[models.Song]) *Service {
 // DownloadYoutubeSong downloads a YouTube music file into the path specified by the environment variable
 // YOUTUBE_MUSIC_DOWNLOAD_PATH, where the file name will be <video_id.mp3> to be served under /music/{id}
 // and returns an occurring error
-func (d *Service) DownloadYoutubeSong(req entities.SongDownloadRequest) error {
-	path := fmt.Sprintf("%s/%s.mp3", config.Env().YouTube.MusicDir, req.Id)
+func (d *Service) DownloadYoutubeSong(req entities.Song) error {
+	path := fmt.Sprintf("%s/%s.mp3", config.Env().YouTube.MusicDir, req.YtId)
 	if _, err := os.Stat(path); err == nil {
-		log.Infof("The song with id %s is already downloaded\n", req.Id)
+		log.Infof("The song with id %s is already downloaded\n", req.YtId)
 		return nil
 	}
 
-	resp, err := http.Get(fmt.Sprintf("%s/download/%s", config.Env().YouTube.DownloaderUrl, req.Id))
+	resp, err := http.Get(fmt.Sprintf("%s/download/%s", config.Env().YouTube.DownloaderUrl, req.YtId))
 	if err != nil {
 		return err
 	}
 	if resp.StatusCode != http.StatusOK {
-		return errors.New("something went wrong when downloading a song; id: " + req.Id)
+		return errors.New("something went wrong when downloading a song; id: " + req.YtId)
 	}
 
 	err = d.repo.Add(&models.Song{
-		YtId:         req.Id,
+		YtId:         req.YtId,
 		Title:        req.Title,
 		Artist:       req.Artist,
 		ThumbnailUrl: req.ThumbnailUrl,
@@ -56,23 +56,23 @@ func (d *Service) DownloadYoutubeSong(req entities.SongDownloadRequest) error {
 }
 
 // DownloadYoutubeSongQueue same as DownloadYoutubeSong but it downloads the song in the background
-func (d *Service) DownloadYoutubeSongQueue(req entities.SongDownloadRequest) error {
-	path := fmt.Sprintf("%s/%s.mp3", config.Env().YouTube.MusicDir, req.Id)
+func (d *Service) DownloadYoutubeSongQueue(req entities.Song) error {
+	path := fmt.Sprintf("%s/%s.mp3", config.Env().YouTube.MusicDir, req.YtId)
 	if _, err := os.Stat(path); err == nil {
-		log.Infof("The song with id %s is already downloaded\n", req.Id)
+		log.Infof("The song with id %s is already downloaded\n", req.YtId)
 		return nil
 	}
 
-	resp, err := http.Get(fmt.Sprintf("%s/download/queue/%s", config.Env().YouTube.DownloaderUrl, req.Id))
+	resp, err := http.Get(fmt.Sprintf("%s/download/queue/%s", config.Env().YouTube.DownloaderUrl, req.YtId))
 	if err != nil {
 		return err
 	}
 	if resp.StatusCode != http.StatusOK {
-		return errors.New("something went wrong when downloading a song; id: " + req.Id)
+		return errors.New("something went wrong when downloading a song; id: " + req.YtId)
 	}
 
 	err = d.repo.Add(&models.Song{
-		YtId:         req.Id,
+		YtId:         req.YtId,
 		Title:        req.Title,
 		Artist:       req.Artist,
 		ThumbnailUrl: req.ThumbnailUrl,
@@ -86,17 +86,17 @@ func (d *Service) DownloadYoutubeSongQueue(req entities.SongDownloadRequest) err
 }
 
 // DownloadYoutubeSongsMetadata same as DownloadYoutubeSong but it downloads the song in the background
-func (d *Service) DownloadYoutubeSongsMetadata(req []entities.SongDownloadRequest) error {
+func (d *Service) DownloadYoutubeSongsMetadata(songs []entities.Song) error {
 	newSongs := make([]*models.Song, 0)
-	for _, song := range req {
-		path := fmt.Sprintf("%s/%s.mp3", config.Env().YouTube.MusicDir, song.Id)
+	for _, song := range songs {
+		path := fmt.Sprintf("%s/%s.mp3", config.Env().YouTube.MusicDir, song.YtId)
 		if _, err := os.Stat(path); err == nil {
-			log.Infof("The song with id %s is already downloaded\n", song.Id)
+			log.Infof("The song with id %s is already downloaded\n", song.YtId)
 			continue
 		}
 
 		newSongs = append(newSongs, &models.Song{
-			YtId:         song.Id,
+			YtId:         song.YtId,
 			Title:        song.Title,
 			Artist:       song.Artist,
 			ThumbnailUrl: song.ThumbnailUrl,

From c477ce5845c9f8d6cc7814a22626408bb40061d2 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 23:10:59 +0300
Subject: [PATCH 82/97] chore(entities): remove song_download

---
 entities/song_download.go | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 entities/song_download.go

diff --git a/entities/song_download.go b/entities/song_download.go
deleted file mode 100644
index 1899b98..0000000
--- a/entities/song_download.go
+++ /dev/null
@@ -1 +0,0 @@
-package entities

From c65be664c13b33bf0928ad8971bad549dcabaf3f Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 23:19:51 +0300
Subject: [PATCH 83/97] chore(entities): replace results with song

---
 handlers/pages/pages.go                   | 13 +------------
 services/youtube/search/search_api.go     | 10 +++++-----
 services/youtube/search/search_scraper.go | 10 +++++-----
 services/youtube/search/youtube.go        | 13 ++-----------
 views/pages/search_results.templ          | 13 +++++--------
 5 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/handlers/pages/pages.go b/handlers/pages/pages.go
index a359ac9..110ab5c 100644
--- a/handlers/pages/pages.go
+++ b/handlers/pages/pages.go
@@ -145,23 +145,12 @@ func (p *pagesHandler) HandleSearchResultsPage(ytSearch search.Service) http.Han
 			return
 		}
 
-		songs := make([]entities.Song, len(results))
-		for i, result := range results {
-			songs[i] = entities.Song{
-				YtId:         result.Id,
-				Title:        result.Title,
-				Artist:       result.ChannelTitle,
-				ThumbnailUrl: result.ThumbnailUrl,
-				Duration:     result.Duration,
-			}
-		}
-
 		var songsInPlaylists map[string]string
 		var playlists []entities.Playlist
 		profileId, profileIdCorrect := r.Context().Value(handlers.ProfileIdKey).(uint)
 		if profileIdCorrect {
 			log.Info("downloading songs from search")
-			playlists, songsInPlaylists, _ = p.playlistsService.GetAllMappedForAddPopover(songs, profileId)
+			playlists, songsInPlaylists, _ = p.playlistsService.GetAllMappedForAddPopover(results, profileId)
 		}
 
 		if handlers.IsNoLayoutPage(r) {
diff --git a/services/youtube/search/search_api.go b/services/youtube/search/search_api.go
index 80b0c17..7efc574 100644
--- a/services/youtube/search/search_api.go
+++ b/services/youtube/search/search_api.go
@@ -2,6 +2,7 @@ package search
 
 import (
 	"context"
+	"dankmuzikk/entities"
 	"dankmuzikk/log"
 	"encoding/json"
 
@@ -31,7 +32,7 @@ type apiSearchResult struct {
 // ApiSearch is a YouTube enabled YouTube search, using the official YouTube API.
 type ApiSearch struct{}
 
-func (y *ApiSearch) Search(query string) (results []Result, err error) {
+func (y *ApiSearch) Search(query string) (results []entities.Song, err error) {
 	ctx := context.Background()
 	youtubeService, err := youtube.NewService(ctx)
 	if err != nil {
@@ -73,11 +74,10 @@ func (y *ApiSearch) Search(query string) (results []Result, err error) {
 			continue
 		}
 
-		results = append(results, Result{
+		results = append(results, entities.Song{
 			Title:        responseObj.Items[0].Snippet.Title,
-			ChannelTitle: responseObj.Items[0].Snippet.ChannelTitle,
-			Description:  responseObj.Items[0].Snippet.Description,
-			Id:           responseObj.Items[0].Id,
+			Artist:       responseObj.Items[0].Snippet.ChannelTitle,
+			YtId:         responseObj.Items[0].Id,
 			ThumbnailUrl: responseObj.Items[0].Snippet.Thumbnails.Default.Url,
 			Duration:     duration,
 		})
diff --git a/services/youtube/search/search_scraper.go b/services/youtube/search/search_scraper.go
index e5f48c7..d3556dc 100644
--- a/services/youtube/search/search_scraper.go
+++ b/services/youtube/search/search_scraper.go
@@ -2,6 +2,7 @@ package search
 
 import (
 	"dankmuzikk/config"
+	"dankmuzikk/entities"
 	"encoding/json"
 	"fmt"
 	"net/http"
@@ -28,7 +29,7 @@ type scrapSearchResult struct {
 // ScraperSearch is a scrapper enabled YouTube search, using the search service under ~/ytscraper
 type ScraperSearch struct{}
 
-func (y *ScraperSearch) Search(query string) (results []Result, err error) {
+func (y *ScraperSearch) Search(query string) (results []entities.Song, err error) {
 	// TODO: write a proper scraper instead of this hacky node js api
 	resp, err := http.Get(fmt.Sprintf("%s/api/search?q=%s", config.Env().YouTube.ScraperUrl, url.QueryEscape(query)))
 	if err != nil {
@@ -50,11 +51,10 @@ func (y *ScraperSearch) Search(query string) (results []Result, err error) {
 			duration[0] = "0" + duration[0]
 		}
 
-		results = append(results, Result{
-			Id:           res.Video.Id,
+		results = append(results, entities.Song{
+			YtId:         res.Video.Id,
 			Title:        res.Video.Title,
-			ChannelTitle: res.Uploader.Username,
-			Description:  "",
+			Artist:       res.Uploader.Username,
 			ThumbnailUrl: res.Video.ThumbnailUrl,
 			Duration:     strings.Join(duration, ":"),
 		})
diff --git a/services/youtube/search/youtube.go b/services/youtube/search/youtube.go
index bdd3895..57db100 100644
--- a/services/youtube/search/youtube.go
+++ b/services/youtube/search/youtube.go
@@ -1,6 +1,7 @@
 package search
 
 import (
+	"dankmuzikk/entities"
 	"fmt"
 	"strings"
 	"time"
@@ -11,21 +12,11 @@ const (
 	maxSearchResults = 7
 )
 
-// Result represents a common search result object.
-type Result struct {
-	Id           string
-	Title        string
-	ChannelTitle string // or artist idk
-	Description  string
-	ThumbnailUrl string
-	Duration     string
-}
-
 // Service is an interface that represents a YouTube search behavior.
 type Service interface {
 	// Search searches YouTube for the given query,
 	// and returns a SearchResult slice, and an occurring error.
-	Search(query string) (results []Result, err error)
+	Search(query string) (results []entities.Song, err error)
 }
 
 func getTime(isoDuration string) (string, error) {
diff --git a/views/pages/search_results.templ b/views/pages/search_results.templ
index d926615..f00963e 100644
--- a/views/pages/search_results.templ
+++ b/views/pages/search_results.templ
@@ -1,14 +1,11 @@
 package pages
 
 import (
-	"dankmuzikk/services/youtube/search"
 	"dankmuzikk/views/components/playlist"
 	"dankmuzikk/entities"
 )
 
-type SearchResult = search.Result
-
-templ SearchResults(results []SearchResult, playlists []entities.Playlist, songsInPlaylists map[string]string) {
+templ SearchResults(results []entities.Song, playlists []entities.Playlist, songsInPlaylists map[string]string) {
 	<main class={ "w-full", "h-full", "flex", "justify-center" }>
 		<section
 			class={
@@ -30,7 +27,7 @@ templ SearchResults(results []SearchResult, playlists []entities.Playlist, songs
 					>
 						<div
 							class={ "w-[120px]",  "h-[80px]", "md:w-[300px]", "md:h-[170px]", "relative", "cursor-pointer" }
-							onClick={ playSong(res.Id, res.ThumbnailUrl, res.Title, res.ChannelTitle, res.Duration) }
+							onClick={ playSong(res.YtId, res.ThumbnailUrl, res.Title, res.Artist, res.Duration) }
 						>
 							<img
 								class={ "w-full", "h-full", "rounded-lg" }
@@ -51,16 +48,16 @@ templ SearchResults(results []SearchResult, playlists []entities.Playlist, songs
 							<h3
 								class={ "w-full", "text-md", "md:text-lg", "font-bold", "cursor-pointer", "overflow-hidden", "text-nowrap", "text-ellipsis" }
 								title={ res.Title }
-								onClick={ playSong(res.Id, res.ThumbnailUrl, res.Title, res.ChannelTitle, res.Duration) }
+								onClick={ playSong(res.YtId, res.ThumbnailUrl, res.Title, res.Artist, res.Duration) }
 							>
 								{ res.Title }
 							</h3>
-							<p class={ "w-full", "text-sm", "font-normal" }>{ res.ChannelTitle }</p>
+							<p class={ "w-full", "text-sm", "font-normal" }>{ res.Artist }</p>
 						</div>
 					</div>
 					<!-- actions -->
 					<div class={ "w-[30px]", "h-[30px]", "relative" }>
-						@playlist.PlaylistsPopover(idx, res.Id, playlists, songsInPlaylists)
+						@playlist.PlaylistsPopover(idx, res.YtId, playlists, songsInPlaylists)
 					</div>
 				</div>
 			}

From 095c403da31ea62f26d99d398d222115d66b5baa Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 23:27:27 +0300
Subject: [PATCH 84/97] chore(player): update play song's call

---
 handlers/apis/songs.go           |   8 +--
 static/js/player.js              | 111 ++++++++++++++++++++++---------
 views/pages/search_results.templ |   8 +--
 3 files changed, 88 insertions(+), 39 deletions(-)

diff --git a/handlers/apis/songs.go b/handlers/apis/songs.go
index 2603aeb..ee347d5 100644
--- a/handlers/apis/songs.go
+++ b/handlers/apis/songs.go
@@ -74,13 +74,13 @@ func (s *songDownloadHandler) HandleDownloadSongToQueue(w http.ResponseWriter, r
 }
 
 func (s *songDownloadHandler) extractSongFromQuery(query url.Values) (entities.Song, error) {
-	id := query.Get("id")
+	id := query.Get("yt_id")
 	if id == "" {
-		return entities.Song{}, errors.New("missing song's yt id")
+		return entities.Song{}, errors.New("missing song's yt_id")
 	}
-	thumbnailUrl := query.Get("thumbnailUrl")
+	thumbnailUrl := query.Get("thumbnail_url")
 	if thumbnailUrl == "" {
-		return entities.Song{}, errors.New("missing song's thumbnailUrl")
+		return entities.Song{}, errors.New("missing song's thumbnail_url")
 	}
 	title := query.Get("title")
 	if title == "" {
diff --git a/static/js/player.js b/static/js/player.js
index 7be634f..f7436b5 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -46,13 +46,17 @@ let currentPlaylistPlayer;
  * @property {string} thumbnail_url
  * @property {string} yt_id
  * @property {number} play_times
- *
+ * @property {string} added_at
+ */
+
+/**
  * @typedef {object} Playlist
  * @property {string} public_id
  * @property {string} title
  * @property {string} songs_count
  * @property {Song[]} songs
  */
+
 class PlaylistPlayer {
   #currentPlaylist;
   #currentSongIndex;
@@ -134,6 +138,29 @@ class PlaylistPlayer {
     this.#updateSongPlays();
   }
 
+  /**
+   * nextSong returns the next song if applicable
+   * @returns{Song}
+   */
+  nextSong(shuffle = false, loop = false) {
+    if (
+      !loop &&
+      !shuffle &&
+      this.#currentSongIndex + 1 >= this.#currentPlaylist.songs.length
+    ) {
+      stopMuzikk();
+      return;
+    }
+
+    const nextIndex = shuffle
+      ? Math.floor(Math.random() * this.#currentPlaylist.songs.length)
+      : loop && this.#currentSongIndex + 1 >= this.#currentPlaylist.songs.length
+        ? 0
+        : this.#currentSongIndex + 1;
+
+    return this.#currentPlaylist.songs[nextIndex];
+  }
+
   async #updateSongPlays() {
     await fetch(
       "/api/increment-song-plays?" +
@@ -166,17 +193,17 @@ function playSongFromPlaylist(songId, playlist) {
 }
 
 /**
- * @param {{id: string, artist: string, thumbnailUrl: string, title: string}} videoData
+ * @param {Song} song
  */
-function setMediaSession(videoData) {
+function setMediaSession(song) {
   if (!("mediaSession" in navigator)) {
     console.error("Browser doesn't support mediaSession");
     return;
   }
   navigator.mediaSession.metadata = new MediaMetadata({
-    title: videoData.title,
-    artist: videoData.artist,
-    album: videoData.artist,
+    title: song.title,
+    artist: song.artist,
+    album: song.artist,
     artwork: [
       "96x96",
       "128x128",
@@ -186,7 +213,7 @@ function setMediaSession(videoData) {
       "512x512",
     ].map((i) => {
       return {
-        src: videoData.thumbnailUrl,
+        src: song.thumbnail_url,
         sizes: i,
         type: "image/png",
       };
@@ -295,42 +322,51 @@ function toggleShuffle() {
   shuffleSongs = !shuffleSongs;
 }
 
-async function fetchMusic(videoData) {
+/**
+ * @param {Song} song
+ */
+async function downloadSong(song) {
+  return await fetch(
+    "/api/song/download?" + new URLSearchParams(song).toString(),
+  ).catch((err) => console.error(err));
+}
+
+/**
+ * @param {Song} song
+ */
+async function fetchMusic(song) {
   playPauseToggleEl.innerHTML = playerButtonsIcons.loading;
   document.body.style.cursor = "progress";
   Utils.showLoading();
 
-  await fetch("/api/song/download?" + new URLSearchParams(videoData).toString())
-    .then((res) => {
-      if (audioPlayerEl) {
-        stopMuzikk();
-      }
-      audioPlayerEl.src = `/music/${videoData.id}.mp3`;
-      audioPlayerEl.load();
-      console.log(res);
-    })
-    .catch((err) => console.error(err));
+  await downloadSong(song).then(() => {
+    stopMuzikk();
+    audioPlayerEl.src = `/music/${song.yt_id}.mp3`;
+    audioPlayerEl.load();
+  });
 }
 
-async function playYTSong(id, thumbnailUrl, title, artist, duration) {
-  const videoData = { id, thumbnailUrl, title, artist, duration };
-  await fetchMusic(videoData);
-  setMediaSession(videoData);
+/**
+ * @param {Song} song
+ */
+async function playYTSong(song) {
+  await fetchMusic(song);
+  setMediaSession(song);
   showPlayer();
 
-  if (videoData.title) {
-    songNameEl.innerHTML = videoData.title;
-    songNameEl.title = videoData.title;
-    if (videoData.title.length > Utils.getTextWidth()) {
+  if (song.title) {
+    songNameEl.innerHTML = song.title;
+    songNameEl.title = song.title;
+    if (song.title.length > Utils.getTextWidth()) {
       songNameEl.parentElement.classList.add("marquee");
     } else {
       songNameEl.parentElement.classList.remove("marquee");
     }
   }
-  if (videoData.artist) {
-    artistNameEl.innerHTML = videoData.artist;
-    artistNameEl.title = videoData.artist;
-    if (videoData.artist.length > Utils.getTextWidth()) {
+  if (song.artist) {
+    artistNameEl.innerHTML = song.artist;
+    artistNameEl.title = song.artist;
+    if (song.artist.length > Utils.getTextWidth()) {
       artistNameEl.parentElement.classList.add("marquee");
     } else {
       artistNameEl.parentElement.classList.remove("marquee");
@@ -338,7 +374,7 @@ async function playYTSong(id, thumbnailUrl, title, artist, duration) {
   }
 
   playMuzikk();
-  songImageEl.style.backgroundImage = `url("${videoData.thumbnailUrl}")`;
+  songImageEl.style.backgroundImage = `url("${song.thumbnail_url}")`;
 }
 
 function showPlayer() {
@@ -394,6 +430,19 @@ audioPlayerEl.addEventListener("timeupdate", (event) => {
   if (songSeekBarEl) {
     songSeekBarEl.value = Math.ceil(currentTime);
   }
+
+  if (
+    !!currentPlaylistPlayer &&
+    event.target.currentTime >= event.target.duration * 0.8
+  ) {
+    return;
+    downloadSong(
+      currentPlaylistPlayer.nextSong(
+        shuffleSongs,
+        loopModes[currentLoopIdx].mode === "ALL",
+      ),
+    );
+  }
 });
 
 audioPlayerEl.addEventListener("ended", () => {
diff --git a/views/pages/search_results.templ b/views/pages/search_results.templ
index f00963e..e1f813e 100644
--- a/views/pages/search_results.templ
+++ b/views/pages/search_results.templ
@@ -27,7 +27,7 @@ templ SearchResults(results []entities.Song, playlists []entities.Playlist, song
 					>
 						<div
 							class={ "w-[120px]",  "h-[80px]", "md:w-[300px]", "md:h-[170px]", "relative", "cursor-pointer" }
-							onClick={ playSong(res.YtId, res.ThumbnailUrl, res.Title, res.Artist, res.Duration) }
+							onClick={ playSong(res) }
 						>
 							<img
 								class={ "w-full", "h-full", "rounded-lg" }
@@ -48,7 +48,7 @@ templ SearchResults(results []entities.Song, playlists []entities.Playlist, song
 							<h3
 								class={ "w-full", "text-md", "md:text-lg", "font-bold", "cursor-pointer", "overflow-hidden", "text-nowrap", "text-ellipsis" }
 								title={ res.Title }
-								onClick={ playSong(res.YtId, res.ThumbnailUrl, res.Title, res.Artist, res.Duration) }
+								onClick={ playSong(res) }
 							>
 								{ res.Title }
 							</h3>
@@ -65,6 +65,6 @@ templ SearchResults(results []entities.Song, playlists []entities.Playlist, song
 	</main>
 }
 
-script playSong(id, thumbnailUrl, title, artist, duration string) {
-    window.Player.playYTSong(id, thumbnailUrl, title, artist, duration);
+script playSong(song entities.Song) {
+    window.Player.playYTSong(song);
 }

From c05af3fd28e1a45d7b85a02fee76b4280239d54b Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 23:37:27 +0300
Subject: [PATCH 85/97] um um um um uaaam

---
 static/js/player.js              | 19 ++++++-------------
 views/pages/search_results.templ |  2 +-
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/static/js/player.js b/static/js/player.js
index f7436b5..ead344c 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -80,7 +80,7 @@ class PlaylistPlayer {
       this.#currentSongIndex = 0;
     }
     const songToPlay = this.#currentPlaylist.songs[this.#currentSongIndex];
-    playYTSong(
+    playNewSong(
       songToPlay.yt_id,
       songToPlay.thumbnail_url,
       songToPlay.title,
@@ -107,7 +107,7 @@ class PlaylistPlayer {
         : this.#currentSongIndex + 1;
 
     const songToPlay = this.#currentPlaylist.songs[this.#currentSongIndex];
-    playYTSong(
+    playNewSong(
       songToPlay.yt_id,
       songToPlay.thumbnail_url,
       songToPlay.title,
@@ -128,7 +128,7 @@ class PlaylistPlayer {
         ? this.#currentPlaylist.songs.length - 1
         : this.#currentSongIndex - 1;
     const songToPlay = this.#currentPlaylist.songs[this.#currentSongIndex];
-    playYTSong(
+    playNewSong(
       songToPlay.yt_id,
       songToPlay.thumbnail_url,
       songToPlay.title,
@@ -334,7 +334,7 @@ async function downloadSong(song) {
 /**
  * @param {Song} song
  */
-async function fetchMusic(song) {
+async function playNewSong(song) {
   playPauseToggleEl.innerHTML = playerButtonsIcons.loading;
   document.body.style.cursor = "progress";
   Utils.showLoading();
@@ -344,13 +344,7 @@ async function fetchMusic(song) {
     audioPlayerEl.src = `/music/${song.yt_id}.mp3`;
     audioPlayerEl.load();
   });
-}
 
-/**
- * @param {Song} song
- */
-async function playYTSong(song) {
-  await fetchMusic(song);
   setMediaSession(song);
   showPlayer();
 
@@ -433,9 +427,8 @@ audioPlayerEl.addEventListener("timeupdate", (event) => {
 
   if (
     !!currentPlaylistPlayer &&
-    event.target.currentTime >= event.target.duration * 0.8
+    event.target.currentTime >= event.target.duration * 0.9
   ) {
-    return;
     downloadSong(
       currentPlaylistPlayer.nextSong(
         shuffleSongs,
@@ -474,9 +467,9 @@ audioPlayerEl.addEventListener("progress", () => {
 });
 
 window.Player = {
-  playYTSong,
   showPlayer,
   hidePlayer,
   playPlaylist,
   playSongFromPlaylist,
+  playNewSong,
 };
diff --git a/views/pages/search_results.templ b/views/pages/search_results.templ
index e1f813e..e048bd4 100644
--- a/views/pages/search_results.templ
+++ b/views/pages/search_results.templ
@@ -66,5 +66,5 @@ templ SearchResults(results []entities.Song, playlists []entities.Playlist, song
 }
 
 script playSong(song entities.Song) {
-    window.Player.playYTSong(song);
+    window.Player.playNewSong(song);
 }

From 23ee5a65580f9dca8fe625c4dcaade2ee2231ff2 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 23:41:23 +0300
Subject: [PATCH 86/97] chore(ytdl): increase download interval

---
 ytdl/main.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ytdl/main.py b/ytdl/main.py
index de38bdd..6f0c555 100644
--- a/ytdl/main.py
+++ b/ytdl/main.py
@@ -99,7 +99,7 @@ def stop_thread(t):
 
 @app.on_event("startup")
 def on_startup():
-    ticker_thread = Thread(target=download_songs_in_background, args=(1,))
+    ticker_thread = Thread(target=download_songs_in_background, args=(30,))
     ticker_thread.start()
     signal.signal(signal.SIGINT, lambda: stop_thread(ticker_thread))
     signal.signal(signal.SIGTERM, lambda: stop_thread(ticker_thread))

From fb9672abca5ca9a6314ab70842592ddeffb1f2ec Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Fri, 17 May 2024 23:47:20 +0300
Subject: [PATCH 87/97] docs(ytdl): add docs to floating functions

---
 ytdl/main.py | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/ytdl/main.py b/ytdl/main.py
index 6f0c555..3d18fe5 100644
--- a/ytdl/main.py
+++ b/ytdl/main.py
@@ -52,6 +52,10 @@ def length(self):
 
 
 def download_songs(ids: [str]) -> int:
+    """
+        download_songs downloads the given songs' ids using yt_dlp,
+        and returns the operation's status code.
+    """
     try:
         new_ids = []
         for id in ids:
@@ -70,21 +74,32 @@ def download_songs(ids: [str]) -> int:
 
 
 def download_songs_from_queue():
+    """
+        download_songs_from_queue fetches the current songs in the download queue,
+        and starts the download process.
+    """
     if mutex_array.length() == 0:
         return
     download_songs(mutex_array.get_array_and_clear())
 
 
-def add_song_to_queue(id):
+def add_song_to_queue(id: str):
+    """
+        add_song_to_queue adds a song's id to the download queue.
+    """
     mutex_array.append(id)
 
 
 ## BG downloader thread
 
 def download_songs_in_background(interval=1):
-  while True:
-    download_songs_from_queue()
-    time.sleep(interval)
+    """
+        download_songs_in_background runs every given interval time in seconds (default is 1),
+        and downloads the songs in the queue in the background.
+    """
+    while True:
+        download_songs_from_queue()
+        time.sleep(interval)
 
 def stop_thread(t):
     t.join()

From 1b2da27ce34ded8b46b4e4fb7c229d4989a41630 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 01:51:46 +0300
Subject: [PATCH 88/97] chore(ytdl): add mariadb connector dependency

---
 ytdl/Dockerfile       | 6 ++++--
 ytdl/requirements.txt | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ytdl/Dockerfile b/ytdl/Dockerfile
index a3df49b..1ad415f 100644
--- a/ytdl/Dockerfile
+++ b/ytdl/Dockerfile
@@ -3,14 +3,16 @@ FROM python:3.11-alpine AS build
 WORKDIR /app
 
 ADD requirements.txt /tmp
-RUN pip install --upgrade pip && \
+RUN apk install mariadb && \
+    pip install --upgrade pip && \
     pip install -r /tmp/requirements.txt
+
 COPY . /app
 
 
 FROM python:3.11-alpine
 
-RUN apk add ffmpeg
+RUN apk add ffmpeg mariadb
 
 WORKDIR /app
 
diff --git a/ytdl/requirements.txt b/ytdl/requirements.txt
index fb8e05a..12c3b63 100644
--- a/ytdl/requirements.txt
+++ b/ytdl/requirements.txt
@@ -14,11 +14,13 @@ httptools==0.6.1
 httpx==0.27.0
 idna==3.7
 Jinja2==3.1.4
+mariadb==1.1.10
 markdown-it-py==3.0.0
 MarkupSafe==2.1.5
 mdurl==0.1.2
 mutagen==1.47.0
 orjson==3.10.3
+packaging==24.0
 pycryptodomex==3.20.0
 pydantic==2.7.1
 pydantic_core==2.18.2

From 7ada1fb9a8003d6015b2ab46c91f22434f6ab233 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 02:46:11 +0300
Subject: [PATCH 89/97] chore(song): add fully downloaded field

---
 models/song.go | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/models/song.go b/models/song.go
index 191e559..4761c63 100644
--- a/models/song.go
+++ b/models/song.go
@@ -7,14 +7,15 @@ import (
 type Song struct {
 	Id uint `gorm:"primaryKey;autoIncrement"`
 
-	YtId         string `gorm:"unique;not null;index"`
-	Title        string
-	Artist       string
-	ThumbnailUrl string
-	Duration     string
-	Playlists    []*Playlist `gorm:"many2many:playlist_songs;"`
-	CreatedAt    time.Time
-	UpdatedAt    time.Time
+	YtId            string `gorm:"unique;not null;index"`
+	Title           string
+	Artist          string
+	ThumbnailUrl    string
+	Duration        string
+	Playlists       []*Playlist `gorm:"many2many:playlist_songs;"`
+	FullyDownloaded bool
+	CreatedAt       time.Time
+	UpdatedAt       time.Time
 }
 
 func (s Song) GetId() uint {

From 88f6c63bdb19550b50decccb0d7a8d6222d257bd Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 02:46:36 +0300
Subject: [PATCH 90/97] chore(ytdl): update fully_downloaded status

---
 ytdl/main.py | 61 ++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/ytdl/main.py b/ytdl/main.py
index 3d18fe5..28da6c6 100644
--- a/ytdl/main.py
+++ b/ytdl/main.py
@@ -6,8 +6,40 @@
 from threading import Lock, Thread
 import time
 import signal
+import mariadb
+import sys
 
 DOWNLOAD_PATH = os.environ.get("YOUTUBE_MUSIC_DOWNLOAD_PATH")
+DB_NAME     = os.environ.get("DB_NAME")
+DB_HOST     = os.environ.get("DB_HOST")
+DB_USERNAME = os.environ.get("DB_USERNAME")
+DB_PASSWORD = os.environ.get("DB_PASSWORD")
+
+## DB stuff
+conn = None
+
+def open_db_conn():
+    try:
+        global conn
+        conn = mariadb.connect(
+            user=DB_USERNAME,
+            password=DB_PASSWORD,
+            host=DB_HOST[:DB_HOST.index(":")],
+            port=3307,
+            database=DB_NAME
+        )
+    except mariadb.Error as e:
+        print(f"Error connecting to MariaDB Platform: {e}")
+        return 1
+
+
+def update_song_status(id: str):
+    cur = conn.cursor()
+    cur.execute("UPDATE songs SET fully_downloaded=1 WHERE yt_id=?", (id,))
+    conn.commit()
+
+
+## Download Video stuff
 
 class MutexArray:
     def __init__(self, initial_array: []):
@@ -36,6 +68,8 @@ def length(self):
         with self._lock:
             return len(self._array)
 
+    def release(self):
+        self._lock.release()
 
 mutex_array = MutexArray([])
 
@@ -65,7 +99,9 @@ def download_songs(ids: [str]) -> int:
         if len(new_ids) == 0:
             return
 
-        ytdl.download([f"https://www.youtube.com/watch?v={id}" for id in new_ids])
+        for id in new_ids:
+            ytdl.download(f"https://www.youtube.com/watch?v={id}")
+            update_song_status(id)
         return 0
     except DownloadError:
         return 1
@@ -101,9 +137,8 @@ def download_songs_in_background(interval=1):
         download_songs_from_queue()
         time.sleep(interval)
 
-def stop_thread(t):
-    t.join()
 
+download_thread = Thread(target=download_songs_in_background, args=(30,))
 
 ## FastAPI Stuff
 
@@ -112,12 +147,24 @@ def stop_thread(t):
     description="Apparently the CLI's overhead and limitation has got the best of me.",
 )
 
+
 @app.on_event("startup")
 def on_startup():
-    ticker_thread = Thread(target=download_songs_in_background, args=(30,))
-    ticker_thread.start()
-    signal.signal(signal.SIGINT, lambda: stop_thread(ticker_thread))
-    signal.signal(signal.SIGTERM, lambda: stop_thread(ticker_thread))
+    open_db_conn()
+    global download_thread
+    download_thread.start()
+
+
+@app.on_event("shutdown")
+def on_shutdown():
+    print("Stopping background download thread...")
+    global mutex_array
+    mutex_array.release()
+    global download_thread
+    download_thread.join()
+    print("Closing MariaDB's connection...")
+    global conn
+    conn.close()
 
 
 @app.get("/download/queue/{id}", status_code=status.HTTP_200_OK)

From 8363839e0feab357e7fc6aa5b161d7767c8ee288 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 04:30:12 +0300
Subject: [PATCH 91/97] chore(ytdl): fix mariadb stuff

---
 ytdl/Dockerfile | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/ytdl/Dockerfile b/ytdl/Dockerfile
index 1ad415f..0311dac 100644
--- a/ytdl/Dockerfile
+++ b/ytdl/Dockerfile
@@ -1,18 +1,22 @@
-FROM python:3.11-alpine AS build
+FROM python:3.11-slim-bookworm AS build
 
 WORKDIR /app
 
 ADD requirements.txt /tmp
-RUN apk install mariadb && \
+RUN apt-get update -y && \
+    apt-get install -y gcc libmariadb-dev mariadb-client && \
     pip install --upgrade pip && \
-    pip install -r /tmp/requirements.txt
+    pip install --no-cache-dir -r /tmp/requirements.txt
 
 COPY . /app
 
 
 FROM python:3.11-alpine
 
-RUN apk add ffmpeg mariadb
+FROM python:3.11-slim-bookworm
+
+RUN apt-get update -y && \
+    apt-get install -y mariadb-client ffmpeg
 
 WORKDIR /app
 

From 59b32fcf3393587d867512a49d30ea24537551ed Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 04:30:34 +0300
Subject: [PATCH 92/97] chore(ytdl): fix db and other optimizations

---
 ytdl/main.py | 79 ++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 55 insertions(+), 24 deletions(-)

diff --git a/ytdl/main.py b/ytdl/main.py
index 28da6c6..745cd5c 100644
--- a/ytdl/main.py
+++ b/ytdl/main.py
@@ -20,12 +20,17 @@
 
 def open_db_conn():
     try:
+        db_host = DB_HOST
+        db_port = 3306
+        if ":" in db_host:
+            db_host = DB_HOST[:DB_HOST.index(":")]
+            db_port = int(DB_HOST[DB_HOST.index(":")+1:])
         global conn
         conn = mariadb.connect(
             user=DB_USERNAME,
             password=DB_PASSWORD,
-            host=DB_HOST[:DB_HOST.index(":")],
-            port=3307,
+            host=db_host,
+            port=db_port,
             database=DB_NAME
         )
     except mariadb.Error as e:
@@ -39,6 +44,12 @@ def update_song_status(id: str):
     conn.commit()
 
 
+def song_exists(id: str) -> bool:
+    cur = conn.cursor()
+    cur.execute("SELECT id FROM songs WHERE yt_id=? AND fully_downloaded=1", (id,))
+    result = cur.fetchone()
+    return result[0] if result else False
+
 ## Download Video stuff
 
 class MutexArray:
@@ -46,6 +57,10 @@ def __init__(self, initial_array: []):
         self._lock = Lock()
         self._array = initial_array.copy()
 
+    def exists(self, item) -> bool:
+        with self._lock:
+            return item in self._array
+
     def get(self, index):
         with self._lock:
             return self._array[index]
@@ -58,6 +73,10 @@ def append(self, value):
         with self._lock:
             self._array.append(value)
 
+    def remove(self, value):
+        with self._lock:
+            self._array.remove(value)
+
     def get_array_and_clear(self):
         with self._lock:
             clone = self._array.copy()
@@ -71,7 +90,8 @@ def length(self):
     def release(self):
         self._lock.release()
 
-mutex_array = MutexArray([])
+background_download_list = MutexArray([])
+to_be_downloaded = MutexArray([])
 
 
 ytdl = YoutubeDL({
@@ -85,23 +105,32 @@ def release(self):
 })
 
 
-def download_songs(ids: [str]) -> int:
+def download_song(id: str) -> int:
     """
-        download_songs downloads the given songs' ids using yt_dlp,
+        download_song downloads the given song's ids using yt_dlp,
         and returns the operation's status code.
     """
     try:
-        new_ids = []
-        for id in ids:
-            if not os.path.isfile(id+".mp3"):
-                new_ids.append(id)
-
-        if len(new_ids) == 0:
+        if id is None or len(id) == 0:
             return
 
-        for id in new_ids:
-            ytdl.download(f"https://www.youtube.com/watch?v={id}")
-            update_song_status(id)
+        ## wait list
+        while to_be_downloaded.exists(id):
+            print(f"the song with the yt id {id} is being downloaded in the background...")
+            time.sleep(1)
+            pass
+
+
+        print("preparing to download")
+
+        ## download the stuff
+        if song_exists(id):
+            to_be_downloaded.remove(id)
+            return 0
+        to_be_downloaded.append(id)
+        ytdl.download(f"https://www.youtube.com/watch?v={id}")
+        update_song_status(id)
+        to_be_downloaded.remove(id)
         return 0
     except DownloadError:
         return 1
@@ -114,16 +143,17 @@ def download_songs_from_queue():
         download_songs_from_queue fetches the current songs in the download queue,
         and starts the download process.
     """
-    if mutex_array.length() == 0:
+    if background_download_list.length() == 0:
         return
-    download_songs(mutex_array.get_array_and_clear())
+    for id in background_download_list.get_array_and_clear():
+        download_song(id)
 
 
 def add_song_to_queue(id: str):
     """
         add_song_to_queue adds a song's id to the download queue.
     """
-    mutex_array.append(id)
+    background_download_list.append(id)
 
 
 ## BG downloader thread
@@ -138,7 +168,7 @@ def download_songs_in_background(interval=1):
         time.sleep(interval)
 
 
-download_thread = Thread(target=download_songs_in_background, args=(30,))
+download_thread = Thread(target=download_songs_in_background, args=(5,))
 
 ## FastAPI Stuff
 
@@ -158,8 +188,8 @@ def on_startup():
 @app.on_event("shutdown")
 def on_shutdown():
     print("Stopping background download thread...")
-    global mutex_array
-    mutex_array.release()
+    global background_download_list
+    background_download_list.release()
     global download_thread
     download_thread.join()
     print("Closing MariaDB's connection...")
@@ -174,16 +204,17 @@ def handle_add_download_song_to_queue(id: str, response: Response):
 
 @app.get("/download/{id}", status_code=status.HTTP_200_OK)
 def handle_download_song(id: str, response: Response):
-    err = download_songs([id])
+    err = download_song(id)
     if err != 0:
         response.status_code = status.HTTP_400_BAD_REQUEST
 
 
 @app.get("/download/multi/{ids}",  status_code=status.HTTP_200_OK)
 def handle_download_songs(ids: str, response: Response):
-    err = download_songs(ids.split(","))
-    if err != 0:
-        response.status_code = status.HTTP_400_BAD_REQUEST
+    for id in ids.split(","):
+        err = download_song(id)
+        if err != 0:
+            response.status_code = status.HTTP_400_BAD_REQUEST
 
 
 @app.get("/download/queue/multi/{ids}",  status_code=status.HTTP_200_OK)

From 9bae9116aeeae01cb095bd6e37496a6366c351e5 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 04:31:21 +0300
Subject: [PATCH 93/97] fix(player): wrong download call

---
 static/js/player.js | 24 +++---------------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/static/js/player.js b/static/js/player.js
index ead344c..99e0e8a 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -80,13 +80,7 @@ class PlaylistPlayer {
       this.#currentSongIndex = 0;
     }
     const songToPlay = this.#currentPlaylist.songs[this.#currentSongIndex];
-    playNewSong(
-      songToPlay.yt_id,
-      songToPlay.thumbnail_url,
-      songToPlay.title,
-      songToPlay.artist,
-      songToPlay.duration,
-    );
+    playNewSong(songToPlay);
     this.#updateSongPlays();
   }
 
@@ -107,13 +101,7 @@ class PlaylistPlayer {
         : this.#currentSongIndex + 1;
 
     const songToPlay = this.#currentPlaylist.songs[this.#currentSongIndex];
-    playNewSong(
-      songToPlay.yt_id,
-      songToPlay.thumbnail_url,
-      songToPlay.title,
-      songToPlay.artist,
-      songToPlay.duration,
-    );
+    playNewSong(songToPlay);
     this.#updateSongPlays();
   }
 
@@ -128,13 +116,7 @@ class PlaylistPlayer {
         ? this.#currentPlaylist.songs.length - 1
         : this.#currentSongIndex - 1;
     const songToPlay = this.#currentPlaylist.songs[this.#currentSongIndex];
-    playNewSong(
-      songToPlay.yt_id,
-      songToPlay.thumbnail_url,
-      songToPlay.title,
-      songToPlay.artist,
-      songToPlay.duration,
-    );
+    playNewSong(songToPlay);
     this.#updateSongPlays();
   }
 

From fd416e29fb61e3849f93d17c0c5f1f8c8a0843de Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 04:31:58 +0300
Subject: [PATCH 94/97] chore(download): reorder calls for optimization

---
 services/youtube/download/download.go | 56 ++++++++++-----------------
 1 file changed, 20 insertions(+), 36 deletions(-)

diff --git a/services/youtube/download/download.go b/services/youtube/download/download.go
index 43959c7..e38b879 100644
--- a/services/youtube/download/download.go
+++ b/services/youtube/download/download.go
@@ -14,24 +14,30 @@ import (
 
 // Service represents the YouTube downloader service.
 type Service struct {
-	repo db.CreatorRepo[models.Song]
+	repo db.CRUDRepo[models.Song]
 }
 
 // New accepts a models.Song creator repo to store songs' meta-data,
 // and returns a new instance of the YouTube downloader service.
-func New(repo db.CreatorRepo[models.Song]) *Service {
+func New(repo db.CRUDRepo[models.Song]) *Service {
 	return &Service{repo}
 }
 
 // DownloadYoutubeSong downloads a YouTube music file into the path specified by the environment variable
 // YOUTUBE_MUSIC_DOWNLOAD_PATH, where the file name will be <video_id.mp3> to be served under /music/{id}
 // and returns an occurring error
+//
+// Used when playing a new song (usually from search).
+// TODO: optimize select query, maybe?
 func (d *Service) DownloadYoutubeSong(req entities.Song) error {
-	path := fmt.Sprintf("%s/%s.mp3", config.Env().YouTube.MusicDir, req.YtId)
-	if _, err := os.Stat(path); err == nil {
+	song, err := d.repo.GetByConds("yt_id = ?", req.YtId)
+	if err == nil && len(song) != 0 && song[0].FullyDownloaded {
 		log.Infof("The song with id %s is already downloaded\n", req.YtId)
 		return nil
 	}
+	if err != nil {
+		return err
+	}
 
 	resp, err := http.Get(fmt.Sprintf("%s/download/%s", config.Env().YouTube.DownloaderUrl, req.YtId))
 	if err != nil {
@@ -41,51 +47,29 @@ func (d *Service) DownloadYoutubeSong(req entities.Song) error {
 		return errors.New("something went wrong when downloading a song; id: " + req.YtId)
 	}
 
-	err = d.repo.Add(&models.Song{
-		YtId:         req.YtId,
-		Title:        req.Title,
-		Artist:       req.Artist,
-		ThumbnailUrl: req.ThumbnailUrl,
-		Duration:     req.Duration,
-	})
-	if err != nil {
-		return err
-	}
-
 	return nil
 }
 
-// DownloadYoutubeSongQueue same as DownloadYoutubeSong but it downloads the song in the background
-func (d *Service) DownloadYoutubeSongQueue(req entities.Song) error {
-	path := fmt.Sprintf("%s/%s.mp3", config.Env().YouTube.MusicDir, req.YtId)
-	if _, err := os.Stat(path); err == nil {
-		log.Infof("The song with id %s is already downloaded\n", req.YtId)
-		return nil
-	}
-
-	resp, err := http.Get(fmt.Sprintf("%s/download/queue/%s", config.Env().YouTube.DownloaderUrl, req.YtId))
+// DownloadYoutubeSongQueue same as DownloadYoutubeSong but it downloads the song in the background,
+// and only downloads the song's file (since the meta was already downloaded before).
+//
+// Used when adding a song to a playlist.
+func (d *Service) DownloadYoutubeSongQueue(songYtId string) error {
+	resp, err := http.Get(fmt.Sprintf("%s/download/queue/%s", config.Env().YouTube.DownloaderUrl, songYtId))
 	if err != nil {
 		return err
 	}
 	if resp.StatusCode != http.StatusOK {
-		return errors.New("something went wrong when downloading a song; id: " + req.YtId)
-	}
-
-	err = d.repo.Add(&models.Song{
-		YtId:         req.YtId,
-		Title:        req.Title,
-		Artist:       req.Artist,
-		ThumbnailUrl: req.ThumbnailUrl,
-		Duration:     req.Duration,
-	})
-	if err != nil {
-		return err
+		return errors.New("something went wrong when downloading a song; id: " + songYtId)
 	}
 
 	return nil
 }
 
 // DownloadYoutubeSongsMetadata same as DownloadYoutubeSong but it downloads the song in the background
+//
+// Used when searching for a query.
+// TODO: move this logic out of here, since it doesn't fit in here :)
 func (d *Service) DownloadYoutubeSongsMetadata(songs []entities.Song) error {
 	newSongs := make([]*models.Song, 0)
 	for _, song := range songs {

From 26ef7001c3022e8643b0d63cb5d9e9684348f29e Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 04:33:45 +0300
Subject: [PATCH 95/97] chore(playlist): add song to download queue when added
 to playlist

---
 services/playlists/songs/songs.go | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/services/playlists/songs/songs.go b/services/playlists/songs/songs.go
index 0d3700b..df90500 100644
--- a/services/playlists/songs/songs.go
+++ b/services/playlists/songs/songs.go
@@ -3,6 +3,7 @@ package songs
 import (
 	"dankmuzikk/db"
 	"dankmuzikk/models"
+	"dankmuzikk/services/youtube/download"
 )
 
 // Service represents songs in platlists management service,
@@ -11,6 +12,7 @@ type Service struct {
 	playlistSongRepo db.UnsafeCRUDRepo[models.PlaylistSong]
 	songRepo         db.UnsafeCRUDRepo[models.Song]
 	playlistRepo     db.UnsafeCRUDRepo[models.Playlist]
+	downloadService  *download.Service
 }
 
 // New accepts repos lol, and returns a new instance to the songs playlists service.
@@ -18,8 +20,14 @@ func New(
 	playlistSongRepo db.UnsafeCRUDRepo[models.PlaylistSong],
 	songRepo db.UnsafeCRUDRepo[models.Song],
 	playlistRepo db.UnsafeCRUDRepo[models.Playlist],
+	downloadService *download.Service,
 ) *Service {
-	return &Service{playlistSongRepo, songRepo, playlistRepo}
+	return &Service{
+		playlistSongRepo: playlistSongRepo,
+		songRepo:         songRepo,
+		playlistRepo:     playlistRepo,
+		downloadService:  downloadService,
+	}
 }
 
 // AddSongToPlaylist adds a given song to the given playlist,
@@ -35,11 +43,15 @@ func (s *Service) AddSongToPlaylist(songId, playlistPubId string) error {
 	if err != nil {
 		return err
 	}
-
-	return s.playlistSongRepo.Add(&models.PlaylistSong{
+	err = s.playlistSongRepo.Add(&models.PlaylistSong{
 		PlaylistId: playlist[0].Id,
 		SongId:     song[0].Id,
 	})
+	if err != nil {
+		return err
+	}
+
+	return s.downloadService.DownloadYoutubeSongQueue(songId)
 }
 
 // IncrementSongPlays increases the song's play times in the given playlist.

From a17b485e92be89fe48c6f0a23da2385d494e9b56 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 04:34:14 +0300
Subject: [PATCH 96/97] chore(apis): remove un-used download to queue api

---
 cmd/server/server.go   |  3 +--
 handlers/apis/songs.go | 17 -----------------
 2 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/cmd/server/server.go b/cmd/server/server.go
index 3b284c2..c9173a7 100644
--- a/cmd/server/server.go
+++ b/cmd/server/server.go
@@ -43,7 +43,7 @@ func StartServer(staticFS embed.FS) error {
 
 	downloadService := download.New(songRepo)
 	playlistsService := playlists.New(playlistRepo, playlistOwnersRepo, playlistSongssRepo, downloadService)
-	songsService := songs.New(playlistSongssRepo, songRepo, playlistRepo)
+	songsService := songs.New(playlistSongssRepo, songRepo, playlistRepo, downloadService)
 
 	jwtUtil := jwt.NewJWTImpl()
 
@@ -95,7 +95,6 @@ func StartServer(staticFS embed.FS) error {
 	apisHandler.HandleFunc("GET /logout", apis.HandleLogout)
 	apisHandler.HandleFunc("GET /search-suggestion", apis.HandleSearchSuggestions)
 	apisHandler.HandleFunc("GET /song/download", songDownloadApi.HandleDownloadSong)
-	apisHandler.HandleFunc("GET /song/download/queue", songDownloadApi.HandleDownloadSongToQueue)
 	apisHandler.HandleFunc("POST /playlist", gHandler.AuthApi(playlistsApi.HandleCreatePlaylist))
 	apisHandler.HandleFunc("PUT /toggle-song-in-playlist", gHandler.AuthApi(playlistsApi.HandleToggleSongInPlaylist))
 	apisHandler.HandleFunc("PUT /increment-song-plays", gHandler.AuthApi(songDownloadApi.HandleIncrementSongPlaysInPlaylist))
diff --git a/handlers/apis/songs.go b/handlers/apis/songs.go
index ee347d5..1e228a6 100644
--- a/handlers/apis/songs.go
+++ b/handlers/apis/songs.go
@@ -56,23 +56,6 @@ func (s *songDownloadHandler) HandleDownloadSong(w http.ResponseWriter, r *http.
 	}
 }
 
-func (s *songDownloadHandler) HandleDownloadSongToQueue(w http.ResponseWriter, r *http.Request) {
-	song, err := s.extractSongFromQuery(r.URL.Query())
-	if err != nil {
-		w.WriteHeader(http.StatusBadRequest)
-		w.Write([]byte(err.Error()))
-		log.Errorln(err)
-		return
-	}
-
-	err = s.service.DownloadYoutubeSongQueue(song)
-	if err != nil {
-		log.Errorln(err)
-		w.WriteHeader(http.StatusInternalServerError)
-		return
-	}
-}
-
 func (s *songDownloadHandler) extractSongFromQuery(query url.Values) (entities.Song, error) {
 	id := query.Get("yt_id")
 	if id == "" {

From 866e79350a9f7cebe6dd498e31b0f4fa758f197c Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Sat, 18 May 2024 04:38:27 +0300
Subject: [PATCH 97/97] fix(player): premature optimization

---
 static/js/player.js | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/static/js/player.js b/static/js/player.js
index 99e0e8a..7914537 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -308,6 +308,9 @@ function toggleShuffle() {
  * @param {Song} song
  */
 async function downloadSong(song) {
+  if (!song) {
+    return;
+  }
   return await fetch(
     "/api/song/download?" + new URLSearchParams(song).toString(),
   ).catch((err) => console.error(err));
@@ -406,18 +409,6 @@ audioPlayerEl.addEventListener("timeupdate", (event) => {
   if (songSeekBarEl) {
     songSeekBarEl.value = Math.ceil(currentTime);
   }
-
-  if (
-    !!currentPlaylistPlayer &&
-    event.target.currentTime >= event.target.duration * 0.9
-  ) {
-    downloadSong(
-      currentPlaylistPlayer.nextSong(
-        shuffleSongs,
-        loopModes[currentLoopIdx].mode === "ALL",
-      ),
-    );
-  }
 });
 
 audioPlayerEl.addEventListener("ended", () => {