From efb647d013917e921c102b8024acbd326c9bfd07 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Thu, 8 Oct 2020 06:01:17 +0200
Subject: [PATCH] [web-src] Artists/albums list sort + filter

---
 web-src/src/components/DropdownMenu.vue     | 50 ++++++++++++
 web-src/src/components/ListAlbums.vue       | 79 +++++++++++++-----
 web-src/src/components/ListArtists.vue      | 49 ++++++++---
 web-src/src/components/ListItemArtist.vue   |  2 +-
 web-src/src/lib/Albums.js                   | 74 +++++++++++++++++
 web-src/src/lib/Artists.js                  | 62 ++++++++++++++
 web-src/src/main.js                         |  1 +
 web-src/src/mystyles.scss                   |  7 +-
 web-src/src/pages/PageAlbums.vue            | 90 +++++++++++++++------
 web-src/src/pages/PageArtists.vue           | 89 ++++++++++++++------
 web-src/src/pages/PageAudiobooksAlbums.vue  | 15 ++--
 web-src/src/pages/PageAudiobooksArtists.vue | 15 ++--
 web-src/src/router/index.js                 |  4 +-
 web-src/src/store/index.js                  | 12 +++
 web-src/src/store/mutation_types.js         |  3 +
 15 files changed, 455 insertions(+), 97 deletions(-)
 create mode 100644 web-src/src/components/DropdownMenu.vue
 create mode 100644 web-src/src/lib/Albums.js
 create mode 100644 web-src/src/lib/Artists.js

diff --git a/web-src/src/components/DropdownMenu.vue b/web-src/src/components/DropdownMenu.vue
new file mode 100644
index 00000000..3411253a
--- /dev/null
+++ b/web-src/src/components/DropdownMenu.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="dropdown" :class="{ 'is-active': is_active }" v-click-outside="onClickOutside">
+    <div class="dropdown-trigger">
+      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="is_active = !is_active">
+        <span>{{ value }}</span>
+        <span class="icon is-small">
+            <i class="mdi mdi-chevron-down" aria-hidden="true"></i>
+        </span>
+      </button>
+    </div>
+    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+      <div class="dropdown-content">
+        <a class="dropdown-item"
+            v-for="option in options" :key="option"
+            :class="{'is-active': value === option}"
+            @click="select(option)">
+          {{ option }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DropdownMenu',
+
+  props: ['value', 'options'],
+
+  data () {
+    return {
+      is_active: false
+    }
+  },
+
+  methods: {
+    onClickOutside (event) {
+      this.is_active = false
+    },
+
+    select (option) {
+      this.is_active = false
+      this.$emit('input', option)
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 1768dda9..b736dff0 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -1,25 +1,52 @@
 <template>
   <div>
-    <list-item-album v-for="album in albums"
-        :key="album.id"
-        :album="album"
-        @click="open_album(album)">
-      <template slot="artwork" v-if="is_visible_artwork">
-        <p class="image is-64x64 fd-has-shadow fd-has-action">
-        <cover-artwork
-            :artwork_url="album.artwork_url"
-            :artist="album.artist"
-            :album="album.name"
-            :maxwidth="64"
-            :maxheight="64" />
-        </p>
-      </template>
-      <template slot="actions">
-        <a @click="open_dialog(album)">
-          <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-        </a>
-      </template>
-    </list-item-album>
+    <div v-if="is_grouped">
+      <div v-for="idx in albums.indexList" :key="idx" class="mb-6">
+        <span class="tag is-info is-light is-small has-text-weight-bold" :id="'index_' + idx">{{ idx }}</span>
+        <list-item-album v-for="album in albums.grouped[idx]"
+            :key="album.id"
+            :album="album"
+            @click="open_album(album)">
+          <template slot="artwork" v-if="is_visible_artwork">
+            <p class="image is-64x64 fd-has-shadow fd-has-action">
+            <cover-artwork
+                :artwork_url="album.artwork_url"
+                :artist="album.artist"
+                :album="album.name"
+                :maxwidth="64"
+                :maxheight="64" />
+            </p>
+          </template>
+          <template slot="actions">
+            <a @click="open_dialog(album)">
+              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+            </a>
+          </template>
+        </list-item-album>
+      </div>
+    </div>
+    <div v-else>
+      <list-item-album v-for="album in albums_list"
+          :key="album.id"
+          :album="album"
+          @click="open_album(album)">
+        <template slot="artwork" v-if="is_visible_artwork">
+          <p class="image is-64x64 fd-has-shadow fd-has-action">
+          <cover-artwork
+              :artwork_url="album.artwork_url"
+              :artist="album.artist"
+              :album="album.name"
+              :maxwidth="64"
+              :maxheight="64" />
+          </p>
+        </template>
+        <template slot="actions">
+          <a @click="open_dialog(album)">
+            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+          </a>
+        </template>
+      </list-item-album>
+    </div>
     <modal-dialog-album
         :show="show_details_modal"
         :album="selected_album"
@@ -46,6 +73,7 @@ import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import ModalDialog from '@/components/ModalDialog'
 import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
+import Albums from '@/lib/Albums'
 
 export default {
   name: 'ListAlbums',
@@ -70,6 +98,17 @@ export default {
 
     media_kind_resolved: function () {
       return this.media_kind ? this.media_kind : this.selected_album.media_kind
+    },
+
+    albums_list: function () {
+      if (Array.isArray(this.albums)) {
+        return this.albums
+      }
+      return this.albums.sortedAndFiltered
+    },
+
+    is_grouped: function () {
+      return (this.albums instanceof Albums && this.albums.options.group)
     }
   },
 
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index ca32bdcd..2e380093 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -1,15 +1,32 @@
 <template>
   <div>
-    <list-item-artist v-for="artist in artists"
-        :key="artist.id"
-        :artist="artist"
-        @click="open_artist(artist)">
-        <template slot="actions">
-            <a @click="open_dialog(artist)">
-            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-        </template>
-    </list-item-artist>
+    <div v-if="is_grouped">
+      <div v-for="idx in artists.indexList" :key="idx" class="mb-6">
+        <span class="tag is-info is-light is-small has-text-weight-bold" :id="'index_' + idx">{{ idx }}</span>
+        <list-item-artist v-for="artist in artists.grouped[idx]"
+            :key="artist.id"
+            :artist="artist"
+            @click="open_artist(artist)">
+            <template slot="actions">
+                <a @click="open_dialog(artist)">
+                <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+                </a>
+            </template>
+        </list-item-artist>
+      </div>
+    </div>
+    <div v-else>
+      <list-item-artist v-for="artist in artists_list"
+          :key="artist.id"
+          :artist="artist"
+          @click="open_artist(artist)">
+          <template slot="actions">
+              <a @click="open_dialog(artist)">
+              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+              </a>
+          </template>
+      </list-item-artist>
+    </div>
     <modal-dialog-artist :show="show_details_modal" :artist="selected_artist" :media_kind="media_kind" @close="show_details_modal = false" />
   </div>
 </template>
@@ -17,6 +34,7 @@
 <script>
 import ListItemArtist from '@/components/ListItemArtist'
 import ModalDialogArtist from '@/components/ModalDialogArtist'
+import Artists from '@/lib/Artists'
 
 export default {
   name: 'ListArtists',
@@ -34,6 +52,17 @@ export default {
   computed: {
     media_kind_resolved: function () {
       return this.media_kind ? this.media_kind : this.selected_artist.media_kind
+    },
+
+    artists_list: function () {
+      if (Array.isArray(this.artists)) {
+        return this.artists
+      }
+      return this.artists.sortedAndFiltered
+    },
+
+    is_grouped: function () {
+      return (this.artists instanceof Artists && this.artists.options.group)
     }
   },
 
diff --git a/web-src/src/components/ListItemArtist.vue b/web-src/src/components/ListItemArtist.vue
index 1bddf4a4..87d60799 100644
--- a/web-src/src/components/ListItemArtist.vue
+++ b/web-src/src/components/ListItemArtist.vue
@@ -1,5 +1,5 @@
 <template functional>
-  <div class="media" :id="'index_' + props.artist.name_sort.charAt(0).toUpperCase()">
+  <div class="media">
     <div class="media-content fd-has-action is-clipped" @click="listeners.click">
       <h1 class="title is-6">{{ props.artist.name }}</h1>
     </div>
diff --git a/web-src/src/lib/Albums.js b/web-src/src/lib/Albums.js
new file mode 100644
index 00000000..47a4346d
--- /dev/null
+++ b/web-src/src/lib/Albums.js
@@ -0,0 +1,74 @@
+
+export default class Albums {
+  constructor (items, options = { hideSingles: false, hideSpotify: false, sort: 'Name', group: false }) {
+    this.items = items
+    this.options = options
+    this.grouped = {}
+    this.sortedAndFiltered = []
+    this.indexList = []
+
+    this.init()
+  }
+
+  init () {
+    this.createSortedAndFilteredList()
+    this.createGroupedList()
+    this.createIndexList()
+  }
+
+  getAlbumIndex (album) {
+    if (this.options.sort === 'Recently added') {
+      return album.time_added.substring(0, 4)
+    } else if (this.options.sort === 'Recently released') {
+      return album.date_released ? album.date_released.substring(0, 4) : 'n/a'
+    }
+    return album.name_sort.charAt(0).toUpperCase()
+  }
+
+  isAlbumVisible (album) {
+    if (this.options.hideSingles && album.track_count <= 2) {
+      return false
+    }
+    if (this.options.hideSpotify && album.data_kind === 'spotify') {
+      return false
+    }
+    return true
+  }
+
+  createIndexList () {
+    this.indexList = [...new Set(this.sortedAndFiltered
+      .map(album => this.getAlbumIndex(album)))]
+  }
+
+  createSortedAndFilteredList () {
+    var albumsSorted = this.items
+    if (this.options.hideSingles || this.options.hideSpotify || this.options.hideOther) {
+      albumsSorted = albumsSorted.filter(album => this.isAlbumVisible(album))
+    }
+    if (this.options.sort === 'Recently added') {
+      albumsSorted = [...albumsSorted].sort((a, b) => b.time_added.localeCompare(a.time_added))
+    } else if (this.options.sort === 'Recently released') {
+      albumsSorted = [...albumsSorted].sort((a, b) => {
+        if (!a.date_released) {
+          return 1
+        }
+        if (!b.date_released) {
+          return -1
+        }
+        return b.date_released.localeCompare(a.date_released)
+      })
+    }
+    this.sortedAndFiltered = albumsSorted
+  }
+
+  createGroupedList () {
+    if (!this.options.group) {
+      this.grouped = {}
+    }
+    this.grouped = this.sortedAndFiltered.reduce((r, album) => {
+      const idx = this.getAlbumIndex(album)
+      r[idx] = [...r[idx] || [], album]
+      return r
+    }, {})
+  }
+}
diff --git a/web-src/src/lib/Artists.js b/web-src/src/lib/Artists.js
new file mode 100644
index 00000000..ba4a7bd5
--- /dev/null
+++ b/web-src/src/lib/Artists.js
@@ -0,0 +1,62 @@
+
+export default class Artists {
+  constructor (items, options = { hideSingles: false, hideSpotify: false, sort: 'Name', group: false }) {
+    this.items = items
+    this.options = options
+    this.grouped = {}
+    this.sortedAndFiltered = []
+    this.indexList = []
+
+    this.init()
+  }
+
+  init () {
+    this.createSortedAndFilteredList()
+    this.createGroupedList()
+    this.createIndexList()
+  }
+
+  getArtistIndex (artist) {
+    if (this.options.sort === 'Name') {
+      return artist.name_sort.charAt(0).toUpperCase()
+    }
+    return artist.time_added.substring(0, 4)
+  }
+
+  isArtistVisible (artist) {
+    if (this.options.hideSingles && artist.track_count <= (artist.album_count * 2)) {
+      return false
+    }
+    if (this.options.hideSpotify && artist.data_kind === 'spotify') {
+      return false
+    }
+    return true
+  }
+
+  createIndexList () {
+    this.indexList = [...new Set(this.sortedAndFiltered
+      .map(artist => this.getArtistIndex(artist)))]
+  }
+
+  createSortedAndFilteredList () {
+    var artistsSorted = this.items
+    if (this.options.hideSingles || this.options.hideSpotify || this.options.hideOther) {
+      artistsSorted = artistsSorted.filter(artist => this.isArtistVisible(artist))
+    }
+    if (this.options.sort === 'Recently added') {
+      artistsSorted = [...artistsSorted].sort((a, b) => b.time_added.localeCompare(a.time_added))
+    }
+    this.sortedAndFiltered = artistsSorted
+  }
+
+  createGroupedList () {
+    if (!this.options.group) {
+      this.grouped = {}
+    }
+    this.grouped = this.sortedAndFiltered.reduce((r, artist) => {
+      const idx = this.getArtistIndex(artist)
+      r[idx] = [...r[idx] || [], artist]
+      return r
+    }, {})
+  }
+}
diff --git a/web-src/src/main.js b/web-src/src/main.js
index cf6eca58..470febea 100644
--- a/web-src/src/main.js
+++ b/web-src/src/main.js
@@ -13,6 +13,7 @@ import VueScrollTo from 'vue-scrollto'
 import 'mdi/css/materialdesignicons.css'
 import 'vue-range-slider/dist/vue-range-slider.css'
 import './mystyles.scss'
+
 Vue.config.productionTip = false
 
 Vue.use(vClickOutside)
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index ea7822ab..8ceab3c4 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -1,5 +1,6 @@
 
 @import 'bulma';
+@import '~bulma-switch';
 
 
 .slider {
@@ -80,7 +81,9 @@ a.navbar-item {
 
 .fd-is-square .button {
   height: 27px;
-  width: 27px;
+  min-width: 27px;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
 .fd-is-text-clipped {
@@ -117,7 +120,7 @@ section.hero + section.fd-content {
 
 /* Set minimum height to hide "option" section */
 .fd-content-with-option {
-  min-height: calc(100vh - 3.25rem - 3.25rem - 8rem);
+  min-height: calc(100vh - 3.25rem - 3.25rem - 5rem);
 }
 
 /* Now playing page */
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index 5355cef4..036ee282 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -4,22 +4,40 @@
 
     <content-with-heading>
       <template slot="options">
-        <index-button-list :index="index_list"></index-button-list>
+        <index-button-list :index="albums_list.indexList"></index-button-list>
+
+        <div class="columns">
+          <div class="column">
+            <p class="heading" style="margin-bottom: 24px;">Filter</p>
+            <div class="field">
+              <div class="control">
+                <input id="switchHideSingles" type="checkbox" name="switchHideSingles" class="switch" v-model="hide_singles">
+                <label for="switchHideSingles">Hide singles</label>
+              </div>
+              <p class="help">If active, hides artists that only appear on singles or playlists.</p>
+            </div>
+            <div class="field">
+              <div class="control">
+                <input id="switchHideSpotify" type="checkbox" name="switchHideSpotify" class="switch" v-model="hide_spotify">
+                <label for="switchHideSpotify">Hide artists from Spotify</label>
+              </div>
+              <p class="help">If active, hides artists that only appear in your Spotify library.</p>
+            </div>
+          </div>
+          <div class="column">
+            <p class="heading" style="margin-bottom: 24px;">Sort by</p>
+            <dropdown-menu v-model="sort" :options="sort_options"></dropdown-menu>
+          </div>
+        </div>
       </template>
       <template slot="heading-left">
         <p class="title is-4">Albums</p>
-        <p class="heading">{{ albums.total }} albums</p>
+        <p class="heading">{{ albums_list.sortedAndFiltered.length }} Albums</p>
       </template>
       <template slot="heading-right">
-        <a class="button is-small" :class="{ 'is-info': hide_singles }" @click="update_hide_singles">
-          <span class="icon">
-            <i class="mdi mdi-numeric-1-box-multiple-outline"></i>
-          </span>
-          <span>Hide singles</span>
-        </a>
       </template>
       <template slot="content">
-        <list-albums :albums="albums_filtered"></list-albums>
+        <list-albums :albums="albums_list"></list-albums>
       </template>
     </content-with-heading>
   </div>
@@ -31,8 +49,10 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import IndexButtonList from '@/components/IndexButtonList'
 import ListAlbums from '@/components/ListAlbums'
+import DropdownMenu from '@/components/DropdownMenu'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
+import Albums from '@/lib/Albums'
 
 const albumsData = {
   load: function (to) {
@@ -50,38 +70,56 @@ const albumsData = {
 export default {
   name: 'PageAlbums',
   mixins: [LoadDataBeforeEnterMixin(albumsData)],
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListAlbums },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListAlbums, DropdownMenu },
 
   data () {
     return {
       albums: { items: [] },
-      index_list: []
+      sort_options: ['Name', 'Recently added', 'Recently released']
     }
   },
 
   computed: {
-    hide_singles () {
-      return this.$store.state.hide_singles
+    albums_list () {
+      return new Albums(this.albums.items, {
+        hideSingles: this.hide_singles,
+        hideSpotify: this.hide_spotify,
+        sort: this.sort,
+        group: true
+      })
     },
 
-    albums_filtered () {
-      if (this.hide_singles) {
-        return this.albums.items.filter(album => album.track_count > 2)
+    hide_singles: {
+      get () {
+        return this.$store.state.hide_singles
+      },
+      set (value) {
+        this.$store.commit(types.HIDE_SINGLES, value)
+      }
+    },
+
+    hide_spotify: {
+      get () {
+        return this.$store.state.hide_spotify
+      },
+      set (value) {
+        this.$store.commit(types.HIDE_SPOTIFY, value)
+      }
+    },
+
+    sort: {
+      get () {
+        return this.$store.state.albums_sort
+      },
+      set (value) {
+        this.$store.commit(types.ALBUMS_SORT, value)
       }
-      return this.albums.items
     }
   },
 
   methods: {
-    update_hide_singles: function (e) {
-      this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
-    }
-  },
-
-  watch: {
-    'hide_singles' () {
-      this.index_list = [...new Set(this.albums_filtered
-        .map(album => album.name_sort.charAt(0).toUpperCase()))]
+    scrollToTop: function () {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
     }
   }
 }
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index 16091c28..40c12e72 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -4,22 +4,40 @@
 
     <content-with-heading>
       <template slot="options">
-        <index-button-list :index="index_list"></index-button-list>
+        <index-button-list :index="artists_list.indexList"></index-button-list>
+
+        <div class="columns">
+          <div class="column">
+            <p class="heading" style="margin-bottom: 24px;">Filter</p>
+            <div class="field">
+              <div class="control">
+                <input id="switchHideSingles" type="checkbox" name="switchHideSingles" class="switch" v-model="hide_singles">
+                <label for="switchHideSingles">Hide singles</label>
+              </div>
+              <p class="help">If active, hides artists that only appear on singles or playlists.</p>
+            </div>
+            <div class="field">
+              <div class="control">
+                <input id="switchHideSpotify" type="checkbox" name="switchHideSpotify" class="switch" v-model="hide_spotify">
+                <label for="switchHideSpotify">Hide artists from Spotify</label>
+              </div>
+              <p class="help">If active, hides artists that only appear in your Spotify library.</p>
+            </div>
+          </div>
+          <div class="column">
+            <p class="heading" style="margin-bottom: 24px;">Sort by</p>
+            <dropdown-menu v-model="sort" :options="sort_options"></dropdown-menu>
+          </div>
+        </div>
       </template>
       <template slot="heading-left">
         <p class="title is-4">Artists</p>
-        <p class="heading">{{ artists.total }} artists</p>
+        <p class="heading">{{ artists_list.sortedAndFiltered.length }} Artists</p>
       </template>
       <template slot="heading-right">
-        <a class="button is-small" :class="{ 'is-info': hide_singles }" @click="update_hide_singles">
-          <span class="icon">
-            <i class="mdi mdi-numeric-1-box-multiple-outline"></i>
-          </span>
-          <span>Hide singles</span>
-        </a>
       </template>
       <template slot="content">
-        <list-artists :artists="artists_filtered"></list-artists>
+        <list-artists :artists="artists_list"></list-artists>
       </template>
     </content-with-heading>
   </div>
@@ -31,8 +49,10 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import IndexButtonList from '@/components/IndexButtonList'
 import ListArtists from '@/components/ListArtists'
+import DropdownMenu from '@/components/DropdownMenu'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
+import Artists from '@/lib/Artists'
 
 const artistsData = {
   load: function (to) {
@@ -47,35 +67,56 @@ const artistsData = {
 export default {
   name: 'PageArtists',
   mixins: [LoadDataBeforeEnterMixin(artistsData)],
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListArtists },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListArtists, DropdownMenu },
 
   data () {
     return {
-      artists: { items: [] }
+      artists: { items: [] },
+      sort_options: ['Name', 'Recently added']
     }
   },
 
   computed: {
-    hide_singles () {
-      return this.$store.state.hide_singles
+    artists_list () {
+      return new Artists(this.artists.items, {
+        hideSingles: this.hide_singles,
+        hideSpotify: this.hide_spotify,
+        sort: this.sort,
+        group: true
+      })
     },
 
-    index_list () {
-      return [...new Set(this.artists_filtered
-        .map(artist => artist.name_sort.charAt(0).toUpperCase()))]
-    },
-
-    artists_filtered () {
-      if (this.hide_singles) {
-        return this.artists.items.filter(artist => artist.track_count > (artist.album_count * 2))
+    hide_singles: {
+      get () {
+        return this.$store.state.hide_singles
+      },
+      set (value) {
+        this.$store.commit(types.HIDE_SINGLES, value)
+      }
+    },
+
+    hide_spotify: {
+      get () {
+        return this.$store.state.hide_spotify
+      },
+      set (value) {
+        this.$store.commit(types.HIDE_SPOTIFY, value)
+      }
+    },
+
+    sort: {
+      get () {
+        return this.$store.state.artists_sort
+      },
+      set (value) {
+        this.$store.commit(types.ARTISTS_SORT, value)
       }
-      return this.artists.items
     }
   },
 
   methods: {
-    update_hide_singles: function (e) {
-      this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
+    scrollToTop: function () {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
     }
   }
 }
diff --git a/web-src/src/pages/PageAudiobooksAlbums.vue b/web-src/src/pages/PageAudiobooksAlbums.vue
index 3e1e8c33..d3a43410 100644
--- a/web-src/src/pages/PageAudiobooksAlbums.vue
+++ b/web-src/src/pages/PageAudiobooksAlbums.vue
@@ -4,14 +4,14 @@
 
     <content-with-heading>
       <template slot="options">
-        <index-button-list :index="index_list"></index-button-list>
+        <index-button-list :index="albums_list.indexList"></index-button-list>
       </template>
       <template slot="heading-left">
         <p class="title is-4">Audiobooks</p>
-        <p class="heading">{{ albums.total }} audiobooks</p>
+        <p class="heading">{{ albums_list.sortedAndFiltered.length }} Audiobooks</p>
       </template>
       <template slot="content">
-        <list-albums :albums="albums.items"></list-albums>
+        <list-albums :albums="albums_list"></list-albums>
       </template>
     </content-with-heading>
   </div>
@@ -24,6 +24,7 @@ import IndexButtonList from '@/components/IndexButtonList'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListAlbums from '@/components/ListAlbums'
 import webapi from '@/webapi'
+import Albums from '@/lib/Albums'
 
 const albumsData = {
   load: function (to) {
@@ -47,9 +48,11 @@ export default {
   },
 
   computed: {
-    index_list () {
-      return [...new Set(this.albums.items
-        .map(album => album.name_sort.charAt(0).toUpperCase()))]
+    albums_list () {
+      return new Albums(this.albums.items, {
+        sort: 'Name',
+        group: true
+      })
     }
   },
 
diff --git a/web-src/src/pages/PageAudiobooksArtists.vue b/web-src/src/pages/PageAudiobooksArtists.vue
index 4121c8a5..7be8ce7b 100644
--- a/web-src/src/pages/PageAudiobooksArtists.vue
+++ b/web-src/src/pages/PageAudiobooksArtists.vue
@@ -4,16 +4,16 @@
 
     <content-with-heading>
       <template slot="options">
-        <index-button-list :index="index_list"></index-button-list>
+        <index-button-list :index="artists_list.indexList"></index-button-list>
       </template>
       <template slot="heading-left">
         <p class="title is-4">Authors</p>
-        <p class="heading">{{ artists.total }} authors</p>
+        <p class="heading">{{ artists_list.sortedAndFiltered.length }} Authors</p>
       </template>
       <template slot="heading-right">
       </template>
       <template slot="content">
-        <list-artists :artists="artists.items"></list-artists>
+        <list-artists :artists="artists_list"></list-artists>
       </template>
     </content-with-heading>
   </div>
@@ -26,6 +26,7 @@ import TabsAudiobooks from '@/components/TabsAudiobooks'
 import IndexButtonList from '@/components/IndexButtonList'
 import ListArtists from '@/components/ListArtists'
 import webapi from '@/webapi'
+import Artists from '@/lib/Artists'
 
 const artistsData = {
   load: function (to) {
@@ -49,9 +50,11 @@ export default {
   },
 
   computed: {
-    index_list () {
-      return [...new Set(this.artists.items
-        .map(artist => artist.name_sort.charAt(0).toUpperCase()))]
+    artists_list () {
+      return new Artists(this.artists.items, {
+        sort: 'Name',
+        group: true
+      })
     }
   },
 
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index bb97d7f5..b7568b35 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -276,11 +276,11 @@ export const router = new VueRouter({
         }, 10)
       })
     } else if (to.path === from.path && to.hash) {
-      return { selector: to.hash, offset: { x: 0, y: 90 } }
+      return { selector: to.hash, offset: { x: 0, y: 120 } }
     } else if (to.hash) {
       return new Promise((resolve, reject) => {
         setTimeout(() => {
-          resolve({ selector: to.hash, offset: { x: 0, y: 90 } })
+          resolve({ selector: to.hash, offset: { x: 0, y: 120 } })
         }, 10)
       })
     } else if (to.meta.has_index) {
diff --git a/web-src/src/store/index.js b/web-src/src/store/index.js
index 5b120ce1..9bfb8bab 100644
--- a/web-src/src/store/index.js
+++ b/web-src/src/store/index.js
@@ -53,6 +53,9 @@ export default new Vuex.Store({
     recent_searches: [],
 
     hide_singles: false,
+    hide_spotify: false,
+    artists_sort: 'Name',
+    albums_sort: 'Name',
     show_only_next_items: false,
     show_burger_menu: false,
     show_player_menu: false
@@ -183,6 +186,15 @@ export default new Vuex.Store({
     [types.HIDE_SINGLES] (state, hideSingles) {
       state.hide_singles = hideSingles
     },
+    [types.HIDE_SPOTIFY] (state, hideSpotify) {
+      state.hide_spotify = hideSpotify
+    },
+    [types.ARTISTS_SORT] (state, sort) {
+      state.artists_sort = sort
+    },
+    [types.ALBUMS_SORT] (state, sort) {
+      state.albums_sort = sort
+    },
     [types.SHOW_ONLY_NEXT_ITEMS] (state, showOnlyNextItems) {
       state.show_only_next_items = showOnlyNextItems
     },
diff --git a/web-src/src/store/mutation_types.js b/web-src/src/store/mutation_types.js
index 57f7925f..f3b2beb3 100644
--- a/web-src/src/store/mutation_types.js
+++ b/web-src/src/store/mutation_types.js
@@ -19,6 +19,9 @@ export const DELETE_NOTIFICATION = 'DELETE_NOTIFICATION'
 export const ADD_RECENT_SEARCH = 'ADD_RECENT_SEARCH'
 
 export const HIDE_SINGLES = 'HIDE_SINGLES'
+export const HIDE_SPOTIFY = 'HIDE_SPOTIFY'
+export const ARTISTS_SORT = 'ARTISTS_SORT'
+export const ALBUMS_SORT = 'ALBUMS_SORT'
 export const SHOW_ONLY_NEXT_ITEMS = 'SHOW_ONLY_NEXT_ITEMS'
 export const SHOW_BURGER_MENU = 'SHOW_BURGER_MENU'
 export const SHOW_PLAYER_MENU = 'SHOW_PLAYER_MENU'