improvements to add to playlist popup

docs/app-win/ameframework.css

@@ -108,6 +108,7 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
     font-size: 15px;
     border: 1px solid rgb(100 100 100 / 35%);
     box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
+    color: #eee;
 }
 
 .md-btn.md-btn-block {
@@ -167,18 +168,6 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
     font-size: 1.25em;
 }
 
-@media (prefers-color-scheme: light) {
-    .md-btn {
-        background: rgb(255 255 255);
-        box-shadow: rgb(0 0 0 / 10%) 0px 0px 1px, rgb(0 0 0 / 20%) 0px 1px 1px;
-        border: 1px solid rgb(0 0 0 / 15%);
-    }
-
-    .md-close-btn {
-        background-color: #000;
-    }
-}
-
 /* Vue transitions */
 .fade_simple-enter-active, .fade_simple-leave-active {
     transition: all .5s;

src/renderer/style.less

@@ -174,7 +174,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .md-btn {
   font-family: inherit;
   font-size: 14px;
-  margin-bottom: 5px;
 }
 
 #app-main {
@@ -1533,10 +1532,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   z-index: 9999;
   .modal-window {
     background: #333;
-    border-radius: var(--mediaItemRadius);
+    border-radius: 10px;
     box-shadow: var(--mediaItemShadow-Shadow);
     display:flex;
     flex-flow: column;
+
+    max-height: 500px;
+    max-width: 360px;
+    background: #121212;
+    width: 100%;
+
     .modal-header {
       width:100%;
       padding: 6px;
@@ -1545,7 +1550,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       width:100%;
       height:100%;
       overflow: hidden;
-      overflow-y: scroll;
+      overflow-y: overlay;
     }
     .modal-footer {
 
@@ -1554,12 +1559,75 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .addtoplaylist-panel {
+  .modal-window {
+    max-height: 600px;
+    max-width: 400px;
+    background: #121212;
+    overflow: hidden;
+
     .modal-header {
       padding: 16px;
+      position:relative;
+  
+      .modal-title {
+        text-align: center;
+      }
+      .close-btn {
+        width: 50px;
+        height: 100%;
+        background-image: var(--gfx-closeBtn);
+        background-position: center;
+        background-repeat: no-repeat;
+        -webkit-app-region: no-drag;
+        appearance: none;
+        border: 0;
+        background-color: transparent;
+        position: absolute;
+        top: 0;
+        right: 0;
+      
+        &:hover {
+          background-color: rgb(196, 43, 28)
+        }
+      }
+    }
+
+    .modal-search {
+      width: 100%;
+      padding: 0px 16px;
+      position: relative;
+    }
+
+    .playlist-item {
+      appearance: none;
+      border: 0px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+      text-align: left;
+      width: 100%;
+      margin: 0;
+      display: block;
+      background: rgba(200, 200, 200, 0.02);
+      color: #eee;
+      font-family: inherit;
+      font-size: 0.98em;
+      padding: 12px 12px;
+
+      &:hover {
+        background: rgb(200 200 200 / 4%);
+      }
+
+      &:active {
+        background: var(--selected-click);
+      }
+
+      &.focused {
+        background: var(--keyColor);
+      }
+    }
+
+    .playlist-item:last-child {
+      border-bottom: 0px;
     }
-  .modal-window {
-    max-height: 500px;
-    max-width: 300px;
   }
 }
 
@@ -2727,9 +2795,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     --gfx-restoreBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAIn2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgZGM6Zm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTAiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEyOjU1OjM3WiIKICAgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiCiAgIHhtcDpNb2RpZnlEYXRlPSIyMDIxLTEwLTA1VDE0OjI3OjI0LTA3OjAwIgogICB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTk5OWM2NWYtNDhhOS0wNjQyLWI2MTktZmJlYTExMmUxOGZiIgogICB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY5MzMyOWNhLWNkNjctMzY0Zi04MzU1LTY5N2ZmYzI0ZDdlZCIKICAgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjgyZjQwYmU3LTE0YzItZjc0Ni1hZmE1LWQxYmIxNzAyMjM4OCIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjEwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSI+CiAgIDxwaG90b3Nob3A6VGV4dExheWVycz4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgcGhvdG9zaG9wOkxheWVyTmFtZT0i7qSiIgogICAgICBwaG90b3Nob3A6TGF5ZXJUZXh0PSLupKIiLz4KICAgIDwvcmRmOlNlcT4KICAgPC9waG90b3Nob3A6VGV4dExheWVycz4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0iY3JlYXRlZCIKICAgICAgeG1wTU06aW5zdGFuY2VJRD0ieG1wLmlpZDo4MmY0MGJlNy0xNGMyLWY3NDYtYWZhNS1kMWJiMTcwMjIzODgiCiAgICAgIHhtcE1NOnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIKICAgICAgeG1wTU06d2hlbj0iMjAyMC0wMi0xN1QxMjo1NTozN1oiLz4KICAgICA8cmRmOmxpCiAgICAgIHhtcE1NOmFjdGlvbj0ic2F2ZWQiCiAgICAgIHhtcE1NOmNoYW5nZWQ9Ii8iCiAgICAgIHhtcE1NOmluc3RhbmNlSUQ9InhtcC5paWQ6NjkzMzI5Y2EtY2Q2Ny0zNjRmLTgzNTUtNjk3ZmZjMjRkN2VkIgogICAgICB4bXBNTTpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiCiAgICAgIHhtcE1NOndoZW49IjIwMjAtMDItMTdUMTI6NTU6MzdaIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InByb2R1Y2VkIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZmZpbml0eSBQaG90byAxLjEwLjEiCiAgICAgIHN0RXZ0OndoZW49IjIwMjEtMTAtMDVUMTQ6Mjc6MjQtMDc6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PqiFCFwAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRv0tCURTHP2lhmGFRQUODhDVZlELU0qD0C6pBDbJa9OWPQO3xnhHRGrQKBVFLv4b6C2oNmoOgKIJoC5qLWkpe56mgRJ7Luedzv/eew73ngiWcVjJ6/QBksjktOOF3zUcWXLZX7DTQQSu+qKKrM6HxMDXt64E6M971mbVqn/vXmpbjugJ1jcKjiqrlhCeFp9dzqsm7wu1KKrosfC7s0eSCwvemHivxm8nJEv+YrIWDAbC0CLuSVRyrYiWlZYTl5bgz6TWlfB/zJY54di4ksVu8C50gE/hxMcUYAYYYZETmIfrw0i8rauQPFPNnWZVcRWaVDTRWSJIih0fUNakel5gQPS4jzYbZ/7991RM+b6m6ww8NL4bx0QO2HSjkDeP72DAKJ2B9hqtsJX/1CIY/Rc9XNPchOLfg4rqixfbgchs6n9SoFi1KVnFLIgHvZ9AcgbZbsC+Welbe5/QRwpvyVTewfwC9ct659At2bGftHD0UJwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAHNJREFUGJWtkKEOwlAMRc+QM5AwQYJFoPjZCWb2YRPIaeRTLwfTLQs0UxzX3tumtxCog78UdVTbZmM8AmsdXIABeKH2ak221dDuamnUCjyA+WtbB0zAGXgT0ycSFk31kBky/moUeBLpbsl91wi6Nnbfs/g+7XOQq6ifjfkAAAAASUVORK5CYII=');
     --gfx-minBtn: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGOmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMi0xN1QxMzowMDozMloiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAyLTE3VDEzOjAwOjMyWiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NWQwZWRiMC1mZDAwLWI2NGYtOWVmYi1hMmI0NTg3MDVhOGEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMzAwMWUxYS0yOTE5LWU0NDktYjk0Yy1jMjEyMjQ4YTlmOGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ODdmNzk5Yy00YjExLWU1NGEtYjIwZC02ODYxN2VkOWM1ZTIiIHN0RXZ0OndoZW49IjIwMjAtMDItMTdUMTM6MDA6MzJaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjg1ZDBlZGIwLWZkMDAtYjY0Zi05ZWZiLWEyYjQ1ODcwNWE4YSIgc3RFdnQ6d2hlbj0iMjAyMC0wMi0xN1QxMzowMDozMloiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSLupKEiIHBob3Rvc2hvcDpMYXllclRleHQ9Iu6koSIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FwvRXAAAABdJREFUGNNj/P//PwMxgHGIKPw/XDwDAOr1HuzlELLnAAAAAElFTkSuQmCC');
   }
-  .md-btn{
-    color : white
-  }
 }
 
 

src/renderer/views/components/add-to-playlist.ejs

@@ -3,17 +3,25 @@
         <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()">
             <div class="modal-window">
                 <div class="modal-header">
-                    <div class="row">
+                    <div class="modal-title">Add to Playlist</div>
-                        <div class="col flex-center">
+                    <button class="close-btn" @click="app.resetState()"></button>
-                            Add To Playlist
-                        </div>
-                        <div class="col-auto">
-                            <button class="md-btn" @click="app.resetState()">Close</button>
-                        </div>
-                    </div>
                 </div>
+                <div class="modal-search">
+                    <div class="search-input-container" style="width:100%;margin: 16px 0px;">
+                        <div class="search-input--icon"></div>
+                        <input type="search"
+                               ref="searchInput"
+                               style="width:100%;"
+                               spellcheck="false"
+                               placeholder="Search..."
+                               v-model="searchQuery"
+                               @input="search()"
+                               class="search-input">
+                    </div>                </div>
                 <div class="modal-content">
-                    <button class="md-btn" @click="app.addSelectedToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlists" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">{{ playlist.attributes.name }}</button>
+                    <button class="playlist-item" 
+                    :class="{ focused: playlist.id == focused }"
+                    @click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">{{ playlist.attributes.name }}</button>
                 </div>
             </div>
         </div>
@@ -23,14 +31,47 @@
 <script>
     Vue.component('add-to-playlist', {
         template: '#add-to-playlist',
+        data: function () {
+            return {
+                playlistSorted: [],
+                searchQuery: "",
+                focused: ""
+            }
+        },
         props: {
             playlists: {
                 type: Array,
                 required: true
             }
         },
+        mounted() {
+            this.search()
+            this.$refs.searchInput.focus()
+            this.$refs.searchInput.addEventListener('keydown', (e)=>{
+                if(e.keyCode == 13){
+                    if(this.focused != "") {
+                        this.addToPlaylist(this.focused)
+                    }
+                }
+            })
+        },
         methods: {
-
+            addToPlaylist(id) {
+                app.addSelectedToPlaylist(id)
+            },
+            search() {
+                this.focused = ""
+                if (this.searchQuery == "") {
+                    this.playlistSorted = this.playlists
+                } else {
+                    this.playlistSorted = this.playlists.filter(playlist => {
+                        return playlist.attributes.name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1
+                    })
+                    if(this.playlistSorted.length == 1) {
+                        this.focused = this.playlistSorted[0].id
+                    }
+                }
+            },
         }
     });
 </script>

src/renderer/views/main.ejs

@@ -183,7 +183,24 @@
                     <div class="usermenu-container" v-if="chrome.menuOpened">
                         <div class="usermenu-body">
                             <button class="usermenu-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
-                                Toggle Personal Info
+                                <div class="row nopadding">
+                                    <div class="col nopadding">
+                                        Show Personal Info
+                                    </div>
+                                    <div class="col-auto nopadding" v-if="!chrome.hideUserInfo">
+                                        ✔️
+                                    </div>
+                                </div>
+                            </button>
+                            <button class="usermenu-item" @click="mk.privateEnabled = !mk.privateEnabled">
+                                <div class="row nopadding">
+                                    <div class="col nopadding">
+                                        Private Session
+                                    </div>
+                                    <div class="col-auto nopadding" v-if="mk.privateEnabled">
+                                        ✔️
+                                    </div>
+                                </div>
                             </button>
                             <button class="usermenu-item">
                                 About