From 08e38763fa3aa0df218813d61ed1debd6b8ce011 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 8 Apr 2022 00:58:28 -0700
Subject: [PATCH] Sidebar sections are now collapsible, added create new button
 above playlists

---
 src/i18n/en_US.json                |   1 +
 src/i18n/source/en_US.json         |   1 +
 src/main/base/store.ts             |   7 ++
 src/renderer/style.less            |  21 +++-
 src/renderer/views/app/sidebar.ejs | 194 +++++++++++++++++------------
 5 files changed, 140 insertions(+), 84 deletions(-)

diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index e6a94d3f..5fe70200 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -256,6 +256,7 @@
   "action.cast.airplay.underdevelopment": "AirPlay is still under development",
   "action.cast.scan": "Scan",
   "action.cast.scanning": "Scanning...",
+  "action.createNew": "Create New...",
   "settings.header.general": "General",
   "settings.header.general.description": "Adjust the general settings for Cider.",
   "settings.option.general.language": "Language",
diff --git a/src/i18n/source/en_US.json b/src/i18n/source/en_US.json
index e6a94d3f..5fe70200 100644
--- a/src/i18n/source/en_US.json
+++ b/src/i18n/source/en_US.json
@@ -256,6 +256,7 @@
   "action.cast.airplay.underdevelopment": "AirPlay is still under development",
   "action.cast.scan": "Scan",
   "action.cast.scanning": "Scanning...",
+  "action.createNew": "Create New...",
   "settings.header.general": "General",
   "settings.header.general.description": "Adjust the general settings for Cider.",
   "settings.option.general.language": "Language",
diff --git a/src/main/base/store.ts b/src/main/base/store.ts
index d5ed855a..e359a559 100644
--- a/src/main/base/store.ts
+++ b/src/main/base/store.ts
@@ -30,6 +30,13 @@ export class Store {
                 "videos": true,
                 "podcasts": true
             },
+            "sidebarCollapsed": {
+                "cider": false,
+                "applemusic": false,
+                "library": false,
+                "amplaylists": false,
+                "playlists": false
+            },
             "onStartup": {
                 "enabled": false,
                 "hidden": false,
diff --git a/src/renderer/style.less b/src/renderer/style.less
index dcb8c28e..df2ec9d6 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -471,9 +471,26 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 .app-sidebar-header-text {
   font-size: 11px;
-  margin: 6px 3px;
+  padding: 6px 6px;
   font-weight: 600;
-  opacity: 0.50;
+  opacity: 0.5;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNiA5IDYgNiA2LTYiPjwvcGF0aD4KPC9zdmc+");
+  background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: 98%;
+  border-radius: 3px;
+
+  &.collapsed {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtMTggMTUtNi02LTYgNiI+PC9wYXRoPgo8L3N2Zz4=");
+  }
+
+  &:hover {
+    background-color: var(--selected);
+  }
+
+  &:active {
+    background-color: var(--selected-click);
+  }
 }
 
 .app-sidebar-footer {
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index f01194fe..d47b6b39 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -2,77 +2,101 @@
     <div class="app-sidebar-header">
         <div class="search-input-container">
             <div class="search-input--icon"></div>
-            <input type="search" spellcheck="false" @click="showSearch()"
-                   @focus="search.showHints = true"
-                   @blur="setTimeout(()=>{search.showHints = false}, 300)"
-                   v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
-                   @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'"
-                   v-model="search.term"
-                   ref="searchInput" class="search-input">
+            <input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true"
+                @blur="setTimeout(()=>{search.showHints = false}, 300)"
+                v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
+                @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
+                ref="searchInput" class="search-input">
         </div>
     </div>
     <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
         <div class="search-hints">
             <button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
-                    @click="search.term = hint;search.showHints = false;searchQuery(hint)">
+                @click="search.term = hint;search.showHints = false;searchQuery(hint)">
                 {{ hint }}
             </button>
         </div>
     </div>
     <div class="app-sidebar-content" scrollaxis="y">
-        <div class="app-sidebar-header-text">
+        <div class="app-sidebar-header-text"
+        @click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider"
+        :class="{collapsed: cfg.general.sidebarCollapsed.cider}">
             {{$root.getLz('app.name')}}
         </div>
-        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg"
-                              page="home">
-        </sidebar-library-item>
-        <div class="app-sidebar-header-text">
+        <template v-if="!cfg.general.sidebarCollapsed.cider">
+            <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
+            </sidebar-library-item>
+        </template>
+
+        <div class="app-sidebar-header-text"
+        @click="cfg.general.sidebarCollapsed.applemusic = !cfg.general.sidebarCollapsed.applemusic"
+        :class="{collapsed: cfg.general.sidebarCollapsed.applemusic}">
             {{$root.getLz('term.appleMusic')}}
         </div>
-        <sidebar-library-item :name="$root.getLz('term.listenNow')"
-                              svg-icon="./assets/feather/play-circle.svg"
-                              page="listen_now"></sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg"
-                              page="browse">
-        </sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg"
-                              page="radio">
-        </sidebar-library-item>
-        <div class="app-sidebar-header-text">
+        <template v-if="!cfg.general.sidebarCollapsed.applemusic">
+            <sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
+                page="listen_now"></sidebar-library-item>
+            <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg"
+                page="browse">
+            </sidebar-library-item>
+            <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio">
+            </sidebar-library-item>
+        </template>
+
+        <div class="app-sidebar-header-text" 
+        @click="cfg.general.sidebarCollapsed.library = !cfg.general.sidebarCollapsed.library"
+        :class="{collapsed: cfg.general.sidebarCollapsed.library}">
             {{$root.getLz('term.library')}}
         </div>
-        <sidebar-library-item :name="$root.getLz('term.recentlyAdded')"
-                              svg-icon="./assets/feather/plus-circle.svg"
-                              v-if="cfg.general.sidebarItems.recentlyAdded"
-                              page="library-recentlyadded"></sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
-                              v-if="cfg.general.sidebarItems.songs"
-                              page="library-songs"></sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
-                              v-if="cfg.general.sidebarItems.albums"
-                              page="library-albums"></sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
-                              v-if="cfg.general.sidebarItems.artists"
-                              page="library-artists"></sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg"
-                              v-if="cfg.general.sidebarItems.videos"
-                              page="library-videos"></sidebar-library-item>
-        <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
-                              v-if="cfg.general.sidebarItems.podcasts"
-                              page="podcasts">
-        </sidebar-library-item>
+        <template v-if="!cfg.general.sidebarCollapsed.library">
+            <sidebar-library-item :name="$root.getLz('term.recentlyAdded')" svg-icon="./assets/feather/plus-circle.svg"
+                v-if="cfg.general.sidebarItems.recentlyAdded" page="library-recentlyadded"></sidebar-library-item>
+            <sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
+                v-if="cfg.general.sidebarItems.songs" page="library-songs"></sidebar-library-item>
+            <sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
+                v-if="cfg.general.sidebarItems.albums" page="library-albums"></sidebar-library-item>
+            <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
+                v-if="cfg.general.sidebarItems.artists" page="library-artists"></sidebar-library-item>
+            <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg"
+                v-if="cfg.general.sidebarItems.videos" page="library-videos"></sidebar-library-item>
+            <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
+                v-if="cfg.general.sidebarItems.podcasts" page="podcasts">
+            </sidebar-library-item>
+        </template>
+
         <template v-if="getPlaylistFolderChildren('p.applemusic').length != 0">
-            <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
+            <div class="app-sidebar-header-text" 
+            @click="cfg.general.sidebarCollapsed.amplaylists = !cfg.general.sidebarCollapsed.amplaylists"
+            @contextmenu="playlistHeaderContextMenu"
+                :class="{collapsed: cfg.general.sidebarCollapsed.amplaylists}">
                 {{ $root.getLz('term.appleMusic') }} {{ $root.getLz('term.playlists') }}
             </div>
-            <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.applemusic')" :item="item">
-            </sidebar-playlist>
+            <template v-if="!cfg.general.sidebarCollapsed.amplaylists">
+                <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.applemusic')" :item="item">
+                </sidebar-playlist>
+            </template>
         </template>
-        <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
+        <div class="app-sidebar-header-text" 
+        @click="cfg.general.sidebarCollapsed.playlists = !cfg.general.sidebarCollapsed.playlists"
+        @contextmenu="playlistHeaderContextMenu"
+            :class="{collapsed: cfg.general.sidebarCollapsed.playlists}">
             {{ $root.getLz('term.playlists') }}
         </div>
-        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
-        </sidebar-playlist>
+        <template v-if="!cfg.general.sidebarCollapsed.playlists">
+            <button class="app-sidebar-item" @click="playlistHeaderContextMenu">
+                <div class="sidebar-icon">
+                    <svg width="46" height="46" fill="none" stroke="currentColor" stroke-linecap="round"
+                        stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M12 5v14"></path>
+                        <path d="M5 12h14"></path>
+                    </svg>
+                </div>
+                {{ getLz('action.createNew') }}
+            </button>
+            <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
+            </sidebar-playlist>
+        </template>
+
     </div>
     <transition name="wpfade">
         <div class="usermenu-container" v-if="chrome.menuOpened">
@@ -80,7 +104,7 @@
                 <button class="app-sidebar-button" style="width:100%" @click="appRoute('apple-account-settings')">
 
                     <img class="sidebar-user-icon" loading="lazy"
-                         :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"/>
+                        :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)" />
 
                     <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
                         <template v-if="chrome.userinfo.id || mk.isAuthorized">
@@ -106,34 +130,45 @@
                     </div>
                 </button>
                 <button class="usermenu-item" @click="appRoute('remote-pair')">
-                            <span class="usermenu-item-icon"><%- include("../svg/smartphone.svg") %></span>
-                            <span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
+                    <span class="usermenu-item-icon">
+                        <%- include("../svg/smartphone.svg") %>
+                    </span>
+                    <span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
                 </button>
                 <button class="usermenu-item" v-if="cfg.advanced.AudioContext" @click="modals.castMenu = true">
-                    <span class="usermenu-item-icon"><%- include("../svg/cast.svg") %></span>
+                    <span class="usermenu-item-icon">
+                        <%- include("../svg/cast.svg") %>
+                    </span>
                     <span class="usermenu-item-name">{{$root.getLz('term.cast')}}</span>
                 </button>
-                <button class="usermenu-item" v-if="cfg.advanced.AudioContext"
-                        @click="modals.audioSettings = true">
-                    <span class="usermenu-item-icon"><%- include("../svg/headphones.svg") %></span>
+                <button class="usermenu-item" v-if="cfg.advanced.AudioContext" @click="modals.audioSettings = true">
+                    <span class="usermenu-item-icon">
+                        <%- include("../svg/headphones.svg") %>
+                    </span>
                     <span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
                 </button>
-                <button class="usermenu-item" v-if="pluginInstalled" 
-                        @click="modals.pluginMenu = true">
-                    <span class="usermenu-item-icon"><%- include("../svg/grid.svg") %></span>
+                <button class="usermenu-item" v-if="pluginInstalled" @click="modals.pluginMenu = true">
+                    <span class="usermenu-item-icon">
+                        <%- include("../svg/grid.svg") %>
+                    </span>
                     <span class="usermenu-item-name">{{$root.getLz('term.plugin')}}</span>
                 </button>
                 <button class="usermenu-item" @click="appRoute('about')">
-                    <span class="usermenu-item-icon"><%- include("../svg/info.svg") %></span>
+                    <span class="usermenu-item-icon">
+                        <%- include("../svg/info.svg") %>
+                    </span>
                     <span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
                 </button>
                 <button class="usermenu-item" @click="appRoute('settings')">
-                    <span class="usermenu-item-icon"><%- include("../svg/settings.svg") %></span>
+                    <span class="usermenu-item-icon">
+                        <%- include("../svg/settings.svg") %>
+                    </span>
                     <span class="usermenu-item-name">{{$root.getLz('term.settings')}}</span>
                 </button>
                 <button class="usermenu-item" @click="unauthorize()">
-                    <span class="usermenu-item-icon"
-                            style="right:2.5px;"><%- include("../svg/log-out.svg") %></span>
+                    <span class="usermenu-item-icon" style="right:2.5px;">
+                        <%- include("../svg/log-out.svg") %>
+                    </span>
                     <span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
                 </button>
             </div>
@@ -141,21 +176,18 @@
     </transition>
     <div class="app-sidebar-footer display--small app-sidebar-footer--controls">
 
-        <div class="app-playback-controls " v-if="mkReady()"
-             @contextmenu="nowPlayingContextMenu">
+        <div class="app-playback-controls " v-if="mkReady()" @contextmenu="nowPlayingContextMenu">
             <div class="control-buttons">
                 <div class="app-chrome-item">
                     <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
-                            @click="mk.shuffleMode = 1"></button>
-                    <button class="playback-button--small shuffle active" v-else
-                            @click="mk.shuffleMode = 0"></button>
+                        @click="mk.shuffleMode = 1"></button>
+                    <button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
                 </div>
                 <div class="app-chrome-item">
                     <button class="playback-button previous" @click="prevButton()"></button>
                 </div>
                 <div class="app-chrome-item">
-                    <button class="playback-button pause" @click="mk.pause()"
-                            v-if="mk.isPlaying"></button>
+                    <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
                     <button class="playback-button play" @click="mk.play()" v-else></button>
                 </div>
                 <div class="app-chrome-item">
@@ -163,30 +195,28 @@
                 </div>
                 <div class="app-chrome-item">
                     <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
-                            @click="mk.repeatMode = 1"></button>
+                        @click="mk.repeatMode = 1"></button>
                     <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
-                            v-else-if="mk.repeatMode == 1"></button>
-                    <button class="playback-button--small repeat active"
-                            @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
+                        v-else-if="mk.repeatMode == 1"></button>
+                    <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
+                        v-else-if="mk.repeatMode == 2"></button>
                 </div>
             </div>
             <div class="app-chrome-item volume">
                 <div class="input-container">
                     <button class="volume-button--small volume" @click="muteButtonPressed()"
-                            :class="{'active': this.cfg.audio.volume == 0}"></button>
+                        :class="{'active': this.cfg.audio.volume == 0}"></button>
                     <input type="range" class="" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
-                           :max="cfg.audio.maxVolume"
-                           v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
-                           @change="checkMuteChange()"
-                           v-b-tooltip.hover :title="`${(Math.log10(mk.volume) * 20).toFixed(2)} dB`">
+                        :max="cfg.audio.maxVolume" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
+                        @change="checkMuteChange()" v-b-tooltip.hover
+                        :title="`${(Math.log10(mk.volume) * 20).toFixed(2)} dB`">
                 </div>
             </div>
         </div>
     </div>
-    <div class="app-sidebar-notification backgroundNotification"
-         v-if="library.backgroundNotification.show">
+    <div class="app-sidebar-notification backgroundNotification" v-if="library.backgroundNotification.show">
         <div class="message">{{ library.backgroundNotification.message }} ({{
             library.backgroundNotification.progress }} / {{ library.backgroundNotification.total }})
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file