From 670efd81ebeba2818f1805cd641208be1b1844cf Mon Sep 17 00:00:00 2001
From: Pedro Galhardo <pedromgalhardo@tecnico.ulisboa.pt>
Date: Tue, 21 Jun 2022 18:18:59 +0100
Subject: [PATCH] Album/Playlist page search bar improvements

---
 src/i18n/en_US.json                         |  2 ++
 src/i18n/pt_PT.json                         |  2 ++
 src/i18n/source/en_US.json                  |  2 ++
 src/renderer/assets/search-alt.svg          |  5 +++
 src/renderer/less/pages.less                | 35 ++++++++++++++++++
 src/renderer/views/pages/cider-playlist.ejs | 40 +++++++++++++++------
 6 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 src/renderer/assets/search-alt.svg

diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index 33831002..b279e6b9 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -31,6 +31,8 @@
   "term.miniplayer": "MiniPlayer",
   "term.history": "History",
   "term.search": "Search",
+  "term.showSearch": "Show search bar",
+  "term.hideSearch": "Hide search bar",
   "term.library": "Library",
   "term.listenNow": "Listen Now",
   "term.browse": "Browse",
diff --git a/src/i18n/pt_PT.json b/src/i18n/pt_PT.json
index b499d775..54496abe 100644
--- a/src/i18n/pt_PT.json
+++ b/src/i18n/pt_PT.json
@@ -31,6 +31,8 @@
   "term.miniplayer": "Mini-leitor",
   "term.history": "Histórico",
   "term.search": "Pesquisa",
+  "term.showSearch": "Mostrar a barra de pesquisa",
+  "term.hideSearch": "Esconder a barar de pesquisa",
   "term.library": "Biblioteca",
   "term.listenNow": "Ouvir agora",
   "term.browse": "Explorar",
diff --git a/src/i18n/source/en_US.json b/src/i18n/source/en_US.json
index 7c9a36cb..9218ebc2 100644
--- a/src/i18n/source/en_US.json
+++ b/src/i18n/source/en_US.json
@@ -31,6 +31,8 @@
   "term.miniplayer": "MiniPlayer",
   "term.history": "History",
   "term.search": "Search",
+  "term.showSearch": "Show search bar",
+  "term.hideSearch": "Hide search bar",
   "term.library": "Library",
   "term.listenNow": "Listen Now",
   "term.browse": "Browse",
diff --git a/src/renderer/assets/search-alt.svg b/src/renderer/assets/search-alt.svg
new file mode 100644
index 00000000..241be14f
--- /dev/null
+++ b/src/renderer/assets/search-alt.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <path fill="white" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
+  <ellipse style="fill: rgb(255, 255, 255);" cx="209.791" cy="207.093" rx="79.599" ry="79.599"/>
+</svg>
\ No newline at end of file
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 859565b7..b29dc0b7 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -598,6 +598,18 @@
         }
       }
     }
+
+    .search-input-container {
+      height: 2.5rem;
+      margin: 1rem;
+      margin-top: 0;
+      scroll-margin-top: 1rem;
+
+      .search-input {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
   .floating-header {
@@ -779,6 +791,29 @@
             text-transform  : uppercase;
           }
         }
+
+        .search-btn {
+          display: flex;
+          width: 32px;
+          align-items: center;
+          margin-right: 1rem;
+          background: transparent;
+          border: none;
+          cursor: pointer;
+
+          > img {
+            width: 18px;
+            height: 18px;
+            margin: auto;
+            opacity: 0.5
+          }
+        }
+
+        .search-btn.active {
+          > img {
+            opacity: 0.85
+          }
+        }
       }
     }
 
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 7d2cfd04..ca2e3e6b 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -102,16 +102,11 @@
                                     {{app.getLz('term.confirm')}}
                                 </button>
                                 <div style="display: flex; float: right;">
-                                    <div class="search-input-container" style="margin-right: 8px;">
-                                        <div class="search-input--icon"></div>
-                                        <input type="search"
-                                            style="width:100%;"
-                                            spellcheck="false"
-                                            :placeholder="$root.getLz('term.search') + '...'"
-                                            @input="search()"
-                                            v-model="searchQuery"
-                                            class="search-input">
-                                    </div>
+                                    <button :class="['search-btn', showSearch ? 'active' : '']"
+                                            @click="toggleSearch()"
+                                            :aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
+                                        <img :src="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
+                                    </button>
                                     <button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
                                         <div class="svg-icon"></div>
                                     </button>
@@ -176,6 +171,15 @@
                         <div @wheel="minClass(true)" @scroll="minClass(true)">
                         <div class="">
                             <div style="width:100%" @click="minClass(true)">
+                                <div v-if="showSearch" class="search-input-container" ref="playlist-search">
+                                    <div class="search-input--icon"></div>
+                                    <input type="search"
+                                        spellcheck="false"
+                                        :placeholder="$root.getLz('term.search') + '...'"
+                                        @input="search()"
+                                        v-model="searchQuery"
+                                        class="search-input">
+                                </div>
                                 <draggable :options="{disabled: !editing}"
                                            v-model="data.relationships.tracks.data" @start="drag=true"
                                            @end="drag=false;put()">
@@ -287,6 +291,7 @@
                 searchQuery: "",
                 displayListing: [],
                 hasNestedPlaylist: false,
+                showSearch: false,
             }
         },
         mounted: function () {
@@ -790,7 +795,7 @@
                             type: "songs",
                         })
                     })
-                    
+
                     this.app.mk.api.v3.music(`/v1/me/library/playlists/${this.data.id}/tracks`, {}, {
                         fetchOptions: {
                             method: "POST",
@@ -807,6 +812,19 @@
                     })
                 }
             },
+            toggleSearch() {
+                this.showSearch = !this.showSearch;
+                if (!this.showSearch && this.searchQuery != "") {
+                    // Clear search query if the search bar becomes hidden
+                    this.searchQuery = "";
+                    this.search();
+                } else if (this.showSearch) {
+                    this.$nextTick(() => {
+                        // Ensure search bar is visible
+                        this.$refs["playlist-search"].scrollIntoView({ behavior: 'smooth' });
+                    })
+                }
+            },
             search() {
                 let filtered = [];