added history to queue, added see all to recently played to show all history, added .md-btn-small

src/renderer/style.less

@@ -2254,6 +2254,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     border-top: 1px solid rgb(220 53 69 / 50%);
   }
 
+  &.md-btn-small {
+    padding: 6px 8px;
+    font-size: 13px;
+  }
+
   &:hover {
     filter: brightness(125%);
   }
@@ -2280,6 +2285,27 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.btn-group {
+  display:inline-flex;
+  justify-content: center;
+  align-items: center;
+  > .md-btn {
+    border-radius:0px;
+    width:100%;
+  }
+  > .md-btn:first-child {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  > .md-btn:last-child {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  > .md-btn:not(:first-child):not(:last-child) {
+    border-radius: 0px;
+  }
+}
+
 .md-ico-play {
   content: url("./assets/play.svg");
   width: 10px;

src/renderer/views/components/queue.ejs

@@ -8,7 +8,10 @@
                 <button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"> <img class="infinity"></button>
             </div>
         </div>
-        <div class="queue-body">
+        <div class="queue-body" v-if="page == 'history'">
+            <mediaitem-list-item v-for="item in history" :item="item"></mediaitem-list-item>
+        </div>
+        <div class="queue-body" v-if="page == 'queue'">
             <draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
                 <template v-for="(queueItem, position) in queueItems">
                     <div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
@@ -33,7 +36,11 @@
             </draggable>
         </div>
         <div class="queue-footer">
-            <button class="md-btn" style="width:100%;" v-if="queueItems.length > 1" @click="app.mk.clearQueue();updateQueue()">{{app.getLz('term.clearAll')}}</button>
+            <div class="btn-group" style="width:100%;">
+                <button class="md-btn md-btn-small" :class="{'md-btn-primary': (page == 'queue')}" @click="page = 'queue'">Queue</button>
+                <button class="md-btn md-btn-small" :class="{'md-btn-primary': (page == 'history')}" @click="getHistory();page = 'history'">History</button>
+            </div>
+            <button class="md-btn md-btn-small" style="width:100%;margin-top:6px;" v-if="queueItems.length > 1" @click="app.mk.clearQueue();updateQueue()">{{app.getLz('term.clearAll')}}</button>
         </div>
     </div>
 </script>
@@ -49,6 +56,8 @@
                 queueItems: [],
                 selected: -1,
                 selectedItems: [],
+                history: [],
+                page: "queue",
                 app: this.$root
             }
         },
@@ -56,6 +65,10 @@
             this.updateQueue()
         },
         methods: {
+            async getHistory() {
+                let history = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`)
+                this.history = history.data.data
+            },
             select(e, position) {
                 if(e.ctrlKey || e.shiftKey) {
                     if(this.selectedItems.indexOf(position) == -1) {

src/renderer/views/pages/home.ejs

@@ -3,7 +3,14 @@
         <div v-if="page == 'main'">
             <div class="row">
                 <div class="col">
+                    <div class="row nopadding">
+                        <div class="col nopadding">
                             <h3>{{app.getLz('home.recentlyPlayed')}}</h3>
+                        </div>
+                        <div class="col-auto nopadding flex-center">
+                            <button class="cd-btn-seeall" @click="seeAllHistory()">{{app.getLz('term.seeAll')}}</button>
+                        </div>
+                    </div>
                     <div class="well artistfeed-well">
                         <template v-if="isSectionReady('recentlyPlayed')">
                             <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)"
@@ -104,6 +111,10 @@
             await this.getFavorites()
         },
         methods: {
+            async seeAllHistory() {
+                let hist = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`)
+                app.showCollection(hist.data, "History")
+            },
             isSectionReady(section) {
                 return this.sectionsReady.includes(section)
             },