From e58a8b166ccbfe0f2f565fb5d2e654ce2e6ae7c4 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 6 Jan 2022 18:55:05 -0800
Subject: [PATCH] Added feather icons to the sidebar

---
 src/renderer/assets/feather/disc.svg          |  1 +
 src/renderer/assets/feather/globe.svg         |  1 +
 src/renderer/assets/feather/home.svg          |  1 +
 src/renderer/assets/feather/list.svg          |  1 +
 src/renderer/assets/feather/music.svg         |  1 +
 src/renderer/assets/feather/play-circle.svg   |  1 +
 src/renderer/assets/feather/plus-circle.svg   |  1 +
 src/renderer/assets/feather/radio.svg         |  1 +
 src/renderer/assets/feather/user.svg          |  1 +
 src/renderer/index.js                         | 33 +++++++++++++++++--
 src/renderer/style.less                       | 15 ++++++++-
 .../views/components/sidebar-playlist.ejs     |  8 +++--
 src/renderer/views/main.ejs                   | 18 +++++-----
 .../views/pages/new/library-songs.ejs         | 16 +++++++++
 14 files changed, 85 insertions(+), 14 deletions(-)
 create mode 100644 src/renderer/assets/feather/disc.svg
 create mode 100644 src/renderer/assets/feather/globe.svg
 create mode 100644 src/renderer/assets/feather/home.svg
 create mode 100644 src/renderer/assets/feather/list.svg
 create mode 100644 src/renderer/assets/feather/music.svg
 create mode 100644 src/renderer/assets/feather/play-circle.svg
 create mode 100644 src/renderer/assets/feather/plus-circle.svg
 create mode 100644 src/renderer/assets/feather/radio.svg
 create mode 100644 src/renderer/assets/feather/user.svg
 create mode 100644 src/renderer/views/pages/new/library-songs.ejs

diff --git a/src/renderer/assets/feather/disc.svg b/src/renderer/assets/feather/disc.svg
new file mode 100644
index 00000000..2595b444
--- /dev/null
+++ b/src/renderer/assets/feather/disc.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-disc"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/globe.svg b/src/renderer/assets/feather/globe.svg
new file mode 100644
index 00000000..0a0586d3
--- /dev/null
+++ b/src/renderer/assets/feather/globe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/home.svg b/src/renderer/assets/feather/home.svg
new file mode 100644
index 00000000..7bb31b23
--- /dev/null
+++ b/src/renderer/assets/feather/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/list.svg b/src/renderer/assets/feather/list.svg
new file mode 100644
index 00000000..5ce38eaa
--- /dev/null
+++ b/src/renderer/assets/feather/list.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/music.svg b/src/renderer/assets/feather/music.svg
new file mode 100644
index 00000000..7bee2f7e
--- /dev/null
+++ b/src/renderer/assets/feather/music.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/play-circle.svg b/src/renderer/assets/feather/play-circle.svg
new file mode 100644
index 00000000..8766dc7b
--- /dev/null
+++ b/src/renderer/assets/feather/play-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play-circle"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/plus-circle.svg b/src/renderer/assets/feather/plus-circle.svg
new file mode 100644
index 00000000..4291ff05
--- /dev/null
+++ b/src/renderer/assets/feather/plus-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/radio.svg b/src/renderer/assets/feather/radio.svg
new file mode 100644
index 00000000..5abfcd13
--- /dev/null
+++ b/src/renderer/assets/feather/radio.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-radio"><circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/user.svg b/src/renderer/assets/feather/user.svg
new file mode 100644
index 00000000..7bb5f291
--- /dev/null
+++ b/src/renderer/assets/feather/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
\ No newline at end of file
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 114cc94e..b2621936 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -311,6 +311,11 @@ const app = new Vue({
         },
     },
     methods: {
+        async getSvgIcon(url) {
+            let response = await fetch(url);
+            let data = await response.text();
+            return data;
+        },
         getSocialBadges(cb = () => {
         }) {
             let self = this
@@ -2929,10 +2934,34 @@ const app = new Vue({
 
 Vue.component('sidebar-library-item', {
     template: '#sidebar-library-item',
-    props: ['name', 'page', 'cd-click'],
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        page: {
+            type: String,
+            required: true
+        },
+        svgIcon: {
+            type: String,
+            required: false,
+            default: ''
+        },
+        cdClick: {
+            type: Function,
+            required: false
+        }
+    },
     data: function () {
         return {
-            app: app
+            app: app,
+            svgIconData: ""
+        }
+    },
+    async mounted() {
+        if (this.svgIcon) {
+            this.svgIconData = await this.app.getSvgIcon(this.svgIcon)
         }
     },
     methods: {}
diff --git a/src/renderer/style.less b/src/renderer/style.less
index e963a857..9ccd74d8 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -682,7 +682,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   border: 1px solid transparent;
   border-radius: 6px;
   background: transparent;
-  color: white;
+  color: #eee;
   transition: transform .1s;
   text-align: left;
 
@@ -3715,6 +3715,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Cider */
 
+// sidebar icon
+.sidebar-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+
+  >svg {
+    width: 100%;
+    height: 100%;
+    color: #aaa;
+  }
+}
+
 // Modular
 .modular-fs {
   .app-drawer {
diff --git a/src/renderer/views/components/sidebar-playlist.ejs b/src/renderer/views/components/sidebar-playlist.ejs
index 5eba133f..b5ba0271 100644
--- a/src/renderer/views/components/sidebar-playlist.ejs
+++ b/src/renderer/views/components/sidebar-playlist.ejs
@@ -9,7 +9,7 @@
                 :href="item.href"
                 @click='$root.appRoute(`playlist_` + item.id); $root.showingPlaylist = [];$root.getPlaylistFromID($root.page.substring(9))'>
             <template v-if="!renaming">
-                {{ item.attributes.name }}
+                <div class="sidebar-icon" v-html="icon"></div> {{ item.attributes.name }}
             </template>
             <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
         </button>
@@ -53,9 +53,13 @@
                 folderOpened: false,
                 children: [],
                 playlistRoot: "p.playlistsroot",
-                renaming: false
+                renaming: false,
+                icon: ""
             }
         },
+        async mounted() {
+            this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
+        },
         methods: {
             rename() {
                 this.renaming = false
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 41fa1a4b..144da55c 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -172,18 +172,17 @@
                         <div class="app-sidebar-header-text">
                             Apple Music
                         </div>
-                        <sidebar-library-item name="Home" page="home"></sidebar-library-item>
-                        <sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
-                        <sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
-                        <sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
+                        <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home"></sidebar-library-item>
+                        <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg" page="listen_now"></sidebar-library-item>
+                        <sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse"></sidebar-library-item>
+                        <sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio"></sidebar-library-item>
                         <div class="app-sidebar-header-text">
                             Library
                         </div>
-                        <sidebar-library-item name="Recently Added" page="library-recentlyadded"></sidebar-library-item>
-                        <sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
-                        <sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
-                        <sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
-                        <sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
+                        <sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg" page="library-recentlyadded"></sidebar-library-item>
+                        <sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg" page="library-songs"></sidebar-library-item>
+                        <sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg" page="library-albums"></sidebar-library-item>
+                        <sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg" page="library-artists"></sidebar-library-item>
                         <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
                             Playlists
                         </div>
@@ -563,6 +562,7 @@
 <script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
             :class="$parent.getSidebarItemClass(page)" @click="$root.appRoute(page)">
+        <div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
         {{ name }}
     </button>
 </script>
diff --git a/src/renderer/views/pages/new/library-songs.ejs b/src/renderer/views/pages/new/library-songs.ejs
new file mode 100644
index 00000000..a739868f
--- /dev/null
+++ b/src/renderer/views/pages/new/library-songs.ejs
@@ -0,0 +1,16 @@
+<script type="text/x-template" id="hello-world">
+    <div class="content-inner">
+
+    </div>
+</script>
+
+<script>
+    Vue.component('library-songs', {
+        template: '#library-songs',
+        methods: {
+            sayHello: function () {
+                alert('Hello world!');
+            }
+        }
+    });
+</script>
\ No newline at end of file