From 07c5370426d6814e70b968e2dabc8b5de037bf67 Mon Sep 17 00:00:00 2001 From: sreeshanth-soma1 Date: Tue, 17 Feb 2026 07:57:24 +0530 Subject: [PATCH 1/3] feat: enhance playlist search with type filtering and badge styles --- core/models/playlists_model.php | 33 ++++++++++++++++++++++++- public/js/sidebar.js | 43 +++++++++++++++++++++++++++++++++ public/scss/_sidebar.scss | 39 ++++++++++++++++++++++++++++++ 3 files changed, 114 insertions(+), 1 deletion(-) diff --git a/core/models/playlists_model.php b/core/models/playlists_model.php index 86649a37..6c439d82 100644 --- a/core/models/playlists_model.php +++ b/core/models/playlists_model.php @@ -299,7 +299,38 @@ public function search($query, $limit, $offset, $sort_by, $sort_dir, $my = false $where_strings = []; if ($query !== '' && $query !== false && $query !== null) { - $where_strings[] = '(name LIKE "%' . $this->db->escape($query) . '%" OR description LIKE "%' . $this->db->escape($query) . '%")'; + $query = trim($query); + $query_escape = $this->db->escape($query); + + $type_query = null; + $type_query_map = [ + 'b' => 'standard', + 'basic' => 'standard', + 'pl b' => 'standard', + 'playlist basic' => 'standard', + 'a' => 'advanced', + 'advanced' => 'advanced', + 'pl a' => 'advanced', + 'playlist advanced' => 'advanced', + 'la' => 'live_assist', + 'live assist' => 'live_assist', + 'liveassist' => 'live_assist', + 'live_assist' => 'live_assist', + 'pl la' => 'live_assist', + 'playlist live assist' => 'live_assist', + ]; + + $query_normalized = strtolower($query); + if (isset($type_query_map[$query_normalized])) { + $type_query = $this->db->escape($type_query_map[$query_normalized]); + } + + $where = '(name LIKE "%' . $query_escape . '%" OR description LIKE "%' . $query_escape . '%")'; + if ($type_query !== null) { + $where .= ' OR type = "' . $type_query . '"'; + } + + $where_strings[] = '(' . $where . ')'; } if (!$this->user->check_permission('manage_playlists')) { $where_strings[] = '(status = "public" or status = "visible" or owner_id = "' . $this->db->escape($this->user->param('id')) . '")'; diff --git a/public/js/sidebar.js b/public/js/sidebar.js index 7565691b..05366751 100644 --- a/public/js/sidebar.js +++ b/public/js/sidebar.js @@ -10,7 +10,25 @@ OB.Sidebar.init = function () { OB.Sidebar.mediaSearchQuery = ""; OB.Sidebar.playlistSearchQuery = ""; +OB.Sidebar.ensurePlaylistTypeBadgeStyles = function () { + if (document.getElementById("ob-playlist-type-badge-styles")) return; + + $("head").append( + '", + ); +}; + OB.Sidebar.sidebarInit = function () { + OB.Sidebar.ensurePlaylistTypeBadgeStyles(); + if (parseInt(OB.Account.userdata.sidebar_display_left)) { $("body").addClass("sidebar-left"); } else { @@ -850,6 +868,27 @@ OB.Sidebar.playlistSearchSort = function (sortby) { OB.Sidebar.playlistSearch(); }; +OB.Sidebar.playlistTypeShort = function (playlistType) { + if (playlistType == "advanced") return "A"; + if (playlistType == "live_assist") return "LA"; + return "B"; +}; + +OB.Sidebar.playlistTypeBadges = function (playlistType) { + var playlistTypeShort = OB.Sidebar.playlistTypeShort(playlistType); + + return ( + '' + + 'PL' + + '' + + playlistTypeShort + + "" + + "" + ); +}; + OB.Sidebar.playlistSearch = function (more) { // if not the result of pagination (new search), reset offset to 0 if (!more) { @@ -913,7 +952,10 @@ OB.Sidebar.playlistSearch = function (more) { playlist[i]["id"] + '" data-mode="playlist">\ ' + + OB.Sidebar.playlistTypeBadges(playlist[i]["type"]) + + '' + htmlspecialchars(playlist[i]["name"]) + + "" + '\ ' + playlist_description + @@ -948,6 +990,7 @@ OB.Sidebar.playlistSearch = function (more) { "data-can_edit", playlist[i]["can_edit"], ); + $("#sidebar_search_playlist_result_" + playlist[i]["id"]).attr("data-type", playlist[i]["type"]); // set up context menu var menuOptions = new Object(); diff --git a/public/scss/_sidebar.scss b/public/scss/_sidebar.scss index 4173a3a7..66fa97cb 100755 --- a/public/scss/_sidebar.scss +++ b/public/scss/_sidebar.scss @@ -412,6 +412,45 @@ body.sidebar-left .sidebar_search_media_container_detailed #media_detailed_toggl width: 90px; } +.sidebar_search_playlist_name_text { + vertical-align: middle; +} + +.sidebar_search_playlist_type_badges { + display: inline-flex; + gap: 4px; + margin-right: 6px; + vertical-align: middle; +} + +.sidebar_search_playlist_type_badge { + display: inline-block; + min-width: 18px; + padding: 0 4px; + border-radius: 10px; + font-size: 0.7rem; + font-weight: 700; + line-height: 1.4; + text-align: center; + color: #fff; +} + +.sidebar_search_playlist_type_badge_pl { + background: #56606f; +} + +.sidebar_search_playlist_type_badge_b { + background: #2f8f83; +} + +.sidebar_search_playlist_type_badge_a { + background: #426cc6; +} + +.sidebar_search_playlist_type_badge_la { + background: #c7772d; +} + .sidebar_search_playlist_description { width: 240px; /* see sidebar.js $(document).ready() */ From 83fbfac7309fcfd708b5610da029889298417cba Mon Sep 17 00:00:00 2001 From: sreeshanth-soma1 Date: Wed, 18 Feb 2026 19:02:26 +0530 Subject: [PATCH 2/3] style: update playlist type badge styles for improved visibility and layout --- public/js/sidebar.js | 12 +++++------- public/scss/_sidebar.scss | 20 ++++++++------------ 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/public/js/sidebar.js b/public/js/sidebar.js index 05366751..0785c222 100644 --- a/public/js/sidebar.js +++ b/public/js/sidebar.js @@ -16,12 +16,11 @@ OB.Sidebar.ensurePlaylistTypeBadgeStyles = function () { $("head").append( '", ); }; @@ -879,7 +878,6 @@ OB.Sidebar.playlistTypeBadges = function (playlistType) { return ( '' + - 'PL' + '' + diff --git a/public/scss/_sidebar.scss b/public/scss/_sidebar.scss index 66fa97cb..67822efb 100755 --- a/public/scss/_sidebar.scss +++ b/public/scss/_sidebar.scss @@ -418,37 +418,33 @@ body.sidebar-left .sidebar_search_media_container_detailed #media_detailed_toggl .sidebar_search_playlist_type_badges { display: inline-flex; - gap: 4px; margin-right: 6px; vertical-align: middle; } .sidebar_search_playlist_type_badge { display: inline-block; - min-width: 18px; - padding: 0 4px; + min-width: 22px; + padding: 0 6px; border-radius: 10px; + border: 1px solid currentColor; + background: rgba(0, 0, 0, 0.15); font-size: 0.7rem; font-weight: 700; - line-height: 1.4; + line-height: 1.5; text-align: center; - color: #fff; -} - -.sidebar_search_playlist_type_badge_pl { - background: #56606f; } .sidebar_search_playlist_type_badge_b { - background: #2f8f83; + color: #66d1b6; } .sidebar_search_playlist_type_badge_a { - background: #426cc6; + color: #87aeea; } .sidebar_search_playlist_type_badge_la { - background: #c7772d; + color: #f0b36c; } .sidebar_search_playlist_description { From aff36c023e8a0f51d3ce8fb6ed1ef8e5be94512e Mon Sep 17 00:00:00 2001 From: sreeshanth-soma1 Date: Sun, 22 Feb 2026 09:48:02 +0530 Subject: [PATCH 3/3] style: use Font Awesome icons for playlist type badges Add standard/playlist standard search aliases, consolidate badge styles into SCSS --- core/models/playlists_model.php | 2 ++ public/js/sidebar.js | 45 ++++++++++++--------------------- public/scss/_sidebar.scss | 17 +++++-------- 3 files changed, 24 insertions(+), 40 deletions(-) diff --git a/core/models/playlists_model.php b/core/models/playlists_model.php index 6c439d82..58264028 100644 --- a/core/models/playlists_model.php +++ b/core/models/playlists_model.php @@ -306,8 +306,10 @@ public function search($query, $limit, $offset, $sort_by, $sort_dir, $my = false $type_query_map = [ 'b' => 'standard', 'basic' => 'standard', + 'standard' => 'standard', 'pl b' => 'standard', 'playlist basic' => 'standard', + 'playlist standard' => 'standard', 'a' => 'advanced', 'advanced' => 'advanced', 'pl a' => 'advanced', diff --git a/public/js/sidebar.js b/public/js/sidebar.js index 0785c222..299777b8 100644 --- a/public/js/sidebar.js +++ b/public/js/sidebar.js @@ -10,24 +10,8 @@ OB.Sidebar.init = function () { OB.Sidebar.mediaSearchQuery = ""; OB.Sidebar.playlistSearchQuery = ""; -OB.Sidebar.ensurePlaylistTypeBadgeStyles = function () { - if (document.getElementById("ob-playlist-type-badge-styles")) return; - - $("head").append( - '", - ); -}; OB.Sidebar.sidebarInit = function () { - OB.Sidebar.ensurePlaylistTypeBadgeStyles(); - if (parseInt(OB.Account.userdata.sidebar_display_left)) { $("body").addClass("sidebar-left"); } else { @@ -867,22 +851,25 @@ OB.Sidebar.playlistSearchSort = function (sortby) { OB.Sidebar.playlistSearch(); }; -OB.Sidebar.playlistTypeShort = function (playlistType) { - if (playlistType == "advanced") return "A"; - if (playlistType == "live_assist") return "LA"; - return "B"; -}; - OB.Sidebar.playlistTypeBadges = function (playlistType) { - var playlistTypeShort = OB.Sidebar.playlistTypeShort(playlistType); + if (!playlistType) playlistType = "standard"; + + var iconClass = "fa-list"; + var title = "Standard Playlist"; + + if (playlistType == "advanced") { + iconClass = "fa-cogs"; + title = "Advanced Playlist"; + } else if (playlistType == "live_assist") { + iconClass = "fa-microphone"; + title = "Live Assist Playlist"; + } return ( - '' + - '' + - playlistTypeShort + - "" + + '' + + '' + "" ); }; diff --git a/public/scss/_sidebar.scss b/public/scss/_sidebar.scss index 67822efb..2b1cfa23 100755 --- a/public/scss/_sidebar.scss +++ b/public/scss/_sidebar.scss @@ -424,26 +424,21 @@ body.sidebar-left .sidebar_search_media_container_detailed #media_detailed_toggl .sidebar_search_playlist_type_badge { display: inline-block; - min-width: 22px; - padding: 0 6px; - border-radius: 10px; - border: 1px solid currentColor; - background: rgba(0, 0, 0, 0.15); - font-size: 0.7rem; - font-weight: 700; - line-height: 1.5; + padding: 0 2px; + font-size: 1.1rem; text-align: center; } -.sidebar_search_playlist_type_badge_b { +.sidebar_search_playlist_type_badge_standard, +.sidebar_search_playlist_type_badge_basic { color: #66d1b6; } -.sidebar_search_playlist_type_badge_a { +.sidebar_search_playlist_type_badge_advanced { color: #87aeea; } -.sidebar_search_playlist_type_badge_la { +.sidebar_search_playlist_type_badge_live_assist { color: #f0b36c; }