diff --git a/web-src/src/lib/GroupByList.js b/web-src/src/lib/GroupedList.js
similarity index 99%
rename from web-src/src/lib/GroupByList.js
rename to web-src/src/lib/GroupedList.js
index bbe8dad9..3ae6f492 100644
--- a/web-src/src/lib/GroupByList.js
+++ b/web-src/src/lib/GroupedList.js
@@ -108,13 +108,12 @@ export function byDateSinceToday(field, defaultValue = '0000') {
   }
 }
 
-export class GroupByList {
+export class GroupedList {
   constructor({ items = [], total = 0, offset = 0, limit = -1 } = {}) {
     this.items = items
     this.total = total
     this.offset = offset
     this.limit = limit
-
     this.count = items.length
     this.indexList = []
     this.group(noop())
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index a19071d3..6b125840 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -47,7 +47,7 @@
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import { GroupByList, byMedium, noop } from '@/lib/GroupByList'
+import { GroupedList, byMedium, noop } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import webapi from '@/webapi'
@@ -62,7 +62,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.album = response[0].data
-    vm.tracks = new GroupByList(response[1].data)
+    vm.tracks = new GroupedList(response[1].data)
     vm.tracks.group(byMedium('disc_number'))
     if (vm.tracks.indexList <= 1) {
       vm.tracks.group(noop())
@@ -91,7 +91,7 @@ export default {
     return {
       album: {},
       show_details_modal: false,
-      tracks: new GroupByList()
+      tracks: new GroupedList()
     }
   },
 
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index d9b95575..3d4a6683 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -41,8 +41,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.albums.sort.title')" />
             <control-dropdown
-              v-model:value="selected_groupby_option_id"
-              :options="groupby_options"
+              v-model:value="selected_grouping_option_id"
+              :options="grouping_options"
             />
           </div>
         </div>
@@ -64,7 +64,7 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byYear } from '@/lib/GroupByList'
+import { GroupedList, byName, byYear } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -78,7 +78,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.albums_list = new GroupByList(response.data)
+    vm.albums_list = new GroupedList(response.data)
   }
 }
 
@@ -112,8 +112,8 @@ export default {
 
   data() {
     return {
-      albums_list: new GroupByList(),
-      groupby_options: [
+      albums_list: new GroupedList(),
+      grouping_options: [
         {
           id: 1,
           name: this.$t('page.albums.sort.name'),
@@ -139,10 +139,10 @@ export default {
 
   computed: {
     albums() {
-      const groupBy = this.groupby_options.find(
-        (o) => o.id === this.selected_groupby_option_id
+      const grouping = this.grouping_options.find(
+        (o) => o.id === this.selected_grouping_option_id
       )
-      this.albums_list.group(groupBy.options, [
+      this.albums_list.group(grouping.options, [
         (album) => !this.hide_singles || album.track_count > 2,
         (album) => !this.hide_spotify || album.data_kind !== 'spotify'
       ])
@@ -150,7 +150,7 @@ export default {
       return this.albums_list
     },
 
-    selected_groupby_option_id: {
+    selected_grouping_option_id: {
       get() {
         return this.$store.state.albums_sort
       },
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 34d05066..72fb5b1f 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -24,8 +24,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_groupby_option_id"
-              :options="groupby_options"
+              v-model:value="selected_grouping_option_id"
+              :options="grouping_options"
             />
           </div>
         </div>
@@ -74,7 +74,7 @@
 import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
-import { GroupByList, byName, byYear } from '@/lib/GroupByList'
+import { GroupedList, byName, byYear } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 import webapi from '@/webapi'
@@ -89,7 +89,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.artist = response[0].data
-    vm.albums_list = new GroupByList(response[1].data)
+    vm.albums_list = new GroupedList(response[1].data)
   }
 }
 
@@ -118,8 +118,8 @@ export default {
   data() {
     return {
       artist: {},
-      albums_list: new GroupByList(),
-      groupby_options: [
+      albums_list: new GroupedList(),
+      grouping_options: [
         {
           id: 1,
           name: this.$t('page.artist.sort.name'),
@@ -139,10 +139,10 @@ export default {
 
   computed: {
     albums() {
-      const groupBy = this.groupby_options.find(
-        (o) => o.id === this.selected_groupby_option_id
+      const grouping = this.grouping_options.find(
+        (o) => o.id === this.selected_grouping_option_id
       )
-      this.albums_list.group(groupBy.options, [
+      this.albums_list.group(grouping.options, [
         (album) => !this.hide_spotify || album.data_kind !== 'spotify'
       ])
       return this.albums_list
@@ -155,7 +155,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_groupby_option_id: {
+    selected_grouping_option_id: {
       get() {
         return this.$store.state.artist_albums_sort
       },
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index ea59c697..063c2bb3 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -25,8 +25,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_groupby_option_id"
-              :options="groupby_options"
+              v-model:value="selected_grouping_option_id"
+              :options="grouping_options"
             />
           </div>
         </div>
@@ -73,7 +73,7 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
+import { GroupedList, byName, byRating } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -91,7 +91,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.artist = response[0].data
-    vm.tracks_list = new GroupByList(response[1].data.tracks)
+    vm.tracks_list = new GroupedList(response[1].data.tracks)
   }
 }
 
@@ -121,7 +121,7 @@ export default {
   data() {
     return {
       artist: {},
-      groupby_options: [
+      grouping_options: [
         {
           id: 1,
           name: this.$t('page.artist.sort.name'),
@@ -136,7 +136,7 @@ export default {
         }
       ],
       show_details_modal: false,
-      tracks_list: new GroupByList()
+      tracks_list: new GroupedList()
     }
   },
 
@@ -156,7 +156,7 @@ export default {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
     },
-    selected_groupby_option_id: {
+    selected_grouping_option_id: {
       get() {
         return this.$store.state.artist_tracks_sort
       },
@@ -168,10 +168,10 @@ export default {
       return this.$store.state.spotify.webapi_token_valid
     },
     tracks() {
-      const groupBy = this.groupby_options.find(
-        (o) => o.id === this.selected_groupby_option_id
+      const grouping = this.grouping_options.find(
+        (o) => o.id === this.selected_grouping_option_id
       )
-      this.tracks_list.group(groupBy.options, [
+      this.tracks_list.group(grouping.options, [
         (track) => !this.hide_spotify || track.data_kind !== 'spotify'
       ])
       return this.tracks_list
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index 0c54b7cc..c78ebfbc 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -41,8 +41,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artists.sort.title')" />
             <control-dropdown
-              v-model:value="selected_groupby_option_id"
-              :options="groupby_options"
+              v-model:value="selected_grouping_option_id"
+              :options="grouping_options"
             />
           </div>
         </div>
@@ -64,7 +64,7 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byYear } from '@/lib/GroupByList'
+import { GroupedList, byName, byYear } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -78,7 +78,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.artists_list = new GroupByList(response.data)
+    vm.artists_list = new GroupedList(response.data)
   }
 }
 
@@ -112,8 +112,8 @@ export default {
 
   data() {
     return {
-      artists_list: new GroupByList(),
-      groupby_options: [
+      artists_list: new GroupedList(),
+      grouping_options: [
         {
           id: 1,
           name: this.$t('page.artists.sort.name'),
@@ -131,16 +131,16 @@ export default {
   },
 
   computed: {
-    // Wraps GroupByList and updates it if filter or sort changes
+    // Wraps GroupedList and updates it if filter or sort changes
     artists() {
       if (!this.artists_list) {
         return []
       }
 
-      const groupBy = this.groupby_options.find(
-        (o) => o.id === this.selected_groupby_option_id
+      const grouping = this.grouping_options.find(
+        (o) => o.id === this.selected_grouping_option_id
       )
-      this.artists_list.group(groupBy.options, [
+      this.artists_list.group(grouping.options, [
         (artist) =>
           !this.hide_singles || artist.track_count > artist.album_count * 2,
         (artist) => !this.hide_spotify || artist.data_kind !== 'spotify'
@@ -149,7 +149,7 @@ export default {
       return this.artists_list
     },
 
-    selected_groupby_option_id: {
+    selected_grouping_option_id: {
       get() {
         return this.$store.state.artists_sort
       },
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index 31d092cc..c7dac18b 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -52,7 +52,7 @@
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import webapi from '@/webapi'
@@ -67,7 +67,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.album = response[0].data
-    vm.tracks = new GroupByList(response[1].data)
+    vm.tracks = new GroupedList(response[1].data)
   }
 }
 
@@ -92,7 +92,7 @@ export default {
     return {
       album: {},
       show_details_modal: false,
-      tracks: new GroupByList()
+      tracks: new GroupedList()
     }
   },
 
diff --git a/web-src/src/pages/PageAudiobooksAlbums.vue b/web-src/src/pages/PageAudiobooksAlbums.vue
index b45fabde..7b465a92 100644
--- a/web-src/src/pages/PageAudiobooksAlbums.vue
+++ b/web-src/src/pages/PageAudiobooksAlbums.vue
@@ -21,7 +21,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList, byName } from '@/lib/GroupByList'
+import { GroupedList, byName } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
@@ -33,7 +33,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.albums = new GroupByList(response.data)
+    vm.albums = new GroupedList(response.data)
     vm.albums.group(byName('name_sort', true))
   }
 }
@@ -67,7 +67,7 @@ export default {
 
   data() {
     return {
-      albums: new GroupByList()
+      albums: new GroupedList()
     }
   }
 }
diff --git a/web-src/src/pages/PageAudiobooksArtist.vue b/web-src/src/pages/PageAudiobooksArtist.vue
index ff192191..ce0a14f8 100644
--- a/web-src/src/pages/PageAudiobooksArtist.vue
+++ b/web-src/src/pages/PageAudiobooksArtist.vue
@@ -40,7 +40,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 import webapi from '@/webapi'
@@ -55,7 +55,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.artist = response[0].data
-    vm.albums = new GroupByList(response[1].data)
+    vm.albums = new GroupedList(response[1].data)
   }
 }
 
@@ -84,7 +84,7 @@ export default {
   data() {
     return {
       artist: {},
-      albums: new GroupByList(),
+      albums: new GroupedList(),
       show_details_modal: false
     }
   },
diff --git a/web-src/src/pages/PageAudiobooksArtists.vue b/web-src/src/pages/PageAudiobooksArtists.vue
index 7ea226d5..1efa2c79 100644
--- a/web-src/src/pages/PageAudiobooksArtists.vue
+++ b/web-src/src/pages/PageAudiobooksArtists.vue
@@ -22,7 +22,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList, byName } from '@/lib/GroupByList'
+import { GroupedList, byName } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
 import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
@@ -34,7 +34,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.artists_list = new GroupByList(response.data)
+    vm.artists_list = new GroupedList(response.data)
   }
 }
 
@@ -67,7 +67,7 @@ export default {
 
   data() {
     return {
-      artists_list: new GroupByList()
+      artists_list: new GroupedList()
     }
   },
 
diff --git a/web-src/src/pages/PageAudiobooksGenres.vue b/web-src/src/pages/PageAudiobooksGenres.vue
index 909512b0..b0f14551 100644
--- a/web-src/src/pages/PageAudiobooksGenres.vue
+++ b/web-src/src/pages/PageAudiobooksGenres.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { GroupByList, byName } from '@/lib/GroupByList'
+import { GroupedList, byName } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListGenres from '@/components/ListGenres.vue'
@@ -34,7 +34,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.genres = response.data
-    vm.genres = new GroupByList(response.data)
+    vm.genres = new GroupedList(response.data)
     vm.genres.group(byName('name_sort'))
   }
 }
@@ -63,7 +63,7 @@ export default {
 
   data() {
     return {
-      genres: new GroupByList()
+      genres: new GroupedList()
     }
   }
 }
diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue
index 32b30509..263f5a9e 100644
--- a/web-src/src/pages/PageComposerAlbums.vue
+++ b/web-src/src/pages/PageComposerAlbums.vue
@@ -47,7 +47,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
 import webapi from '@/webapi'
@@ -62,7 +62,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.composer = response[0].data
-    vm.albums_list = new GroupByList(response[1].data.albums)
+    vm.albums_list = new GroupedList(response[1].data.albums)
   }
 }
 
@@ -89,7 +89,7 @@ export default {
 
   data() {
     return {
-      albums_list: new GroupByList(),
+      albums_list: new GroupedList(),
       composer: {},
       show_details_modal: false
     }
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 48842759..e12c8dd7 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -7,8 +7,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.artist.sort.title')" />
             <control-dropdown
-              v-model:value="selected_groupby_option_id"
-              :options="groupby_options"
+              v-model:value="selected_grouping_option_id"
+              :options="grouping_options"
             />
           </div>
         </div>
@@ -63,7 +63,7 @@
 import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
+import { GroupedList, byName, byRating } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
@@ -79,7 +79,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.composer = response[0].data
-    vm.tracks_list = new GroupByList(response[1].data.tracks)
+    vm.tracks_list = new GroupedList(response[1].data.tracks)
   }
 }
 
@@ -109,7 +109,7 @@ export default {
   data() {
     return {
       composer: {},
-      groupby_options: [
+      grouping_options: [
         {
           id: 1,
           name: this.$t('page.composer.sort.name'),
@@ -124,7 +124,7 @@ export default {
         }
       ],
       show_details_modal: false,
-      tracks_list: new GroupByList()
+      tracks_list: new GroupedList()
     }
   },
 
@@ -132,7 +132,7 @@ export default {
     expression() {
       return `composer is "${this.composer.name}" and media_kind is music`
     },
-    selected_groupby_option_id: {
+    selected_grouping_option_id: {
       get() {
         return this.$store.state.composer_tracks_sort
       },
@@ -141,10 +141,10 @@ export default {
       }
     },
     tracks() {
-      const groupBy = this.groupby_options.find(
-        (o) => o.id === this.selected_groupby_option_id
+      const grouping = this.grouping_options.find(
+        (o) => o.id === this.selected_grouping_option_id
       )
-      this.tracks_list.group(groupBy.options)
+      this.tracks_list.group(grouping.options)
       return this.tracks_list
     }
   },
diff --git a/web-src/src/pages/PageComposers.vue b/web-src/src/pages/PageComposers.vue
index 95a230cc..51517886 100644
--- a/web-src/src/pages/PageComposers.vue
+++ b/web-src/src/pages/PageComposers.vue
@@ -21,7 +21,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList, byName } from '@/lib/GroupByList'
+import { GroupedList, byName } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListComposers from '@/components/ListComposers.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -33,7 +33,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.composers = new GroupByList(response.data)
+    vm.composers = new GroupedList(response.data)
     vm.composers.group(byName('name_sort'))
   }
 }
@@ -62,7 +62,7 @@ export default {
 
   data() {
     return {
-      composers: new GroupByList()
+      composers: new GroupedList()
     }
   }
 }
diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue
index 523e3803..6700829d 100644
--- a/web-src/src/pages/PageFiles.vue
+++ b/web-src/src/pages/PageFiles.vue
@@ -39,7 +39,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListDirectories from '@/components/ListDirectories.vue'
 import ListPlaylists from '@/components/ListPlaylists.vue'
 import ListTracks from '@/components/ListTracks.vue'
@@ -57,12 +57,12 @@ const dataObject = {
   set(vm, response) {
     if (response) {
       vm.dirs = response.data.directories
-      vm.playlists = new GroupByList(response.data.playlists)
-      vm.tracks = new GroupByList(response.data.tracks)
+      vm.playlists = new GroupedList(response.data.playlists)
+      vm.tracks = new GroupedList(response.data.tracks)
     } else {
       vm.dirs = vm.$store.state.config.directories.map((dir) => ({ path: dir }))
-      vm.playlists = new GroupByList()
-      vm.tracks = new GroupByList()
+      vm.playlists = new GroupedList()
+      vm.tracks = new GroupedList()
     }
   }
 }
@@ -93,8 +93,8 @@ export default {
   data() {
     return {
       dirs: [],
-      playlists: new GroupByList(),
-      tracks: new GroupByList(),
+      playlists: new GroupedList(),
+      tracks: new GroupedList(),
       show_details_modal: false
     }
   },
diff --git a/web-src/src/pages/PageGenreAlbums.vue b/web-src/src/pages/PageGenreAlbums.vue
index 405f96b8..d44fc05f 100644
--- a/web-src/src/pages/PageGenreAlbums.vue
+++ b/web-src/src/pages/PageGenreAlbums.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { GroupByList, byName } from '@/lib/GroupByList'
+import { GroupedList, byName } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
@@ -63,7 +63,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.genre = response[0].data
-    vm.albums_list = new GroupByList(response[1].data.albums)
+    vm.albums_list = new GroupedList(response[1].data.albums)
     vm.albums_list.group(byName('name_sort', true))
   }
 }
@@ -94,7 +94,7 @@ export default {
   },
   data() {
     return {
-      albums_list: new GroupByList(),
+      albums_list: new GroupedList(),
       genre: {},
       media_kind: this.$route.query.media_kind,
       show_details_modal: false
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index f94fa87e..8828421e 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -7,8 +7,8 @@
           <div class="column">
             <p class="heading mb-5" v-text="$t('page.genre.sort.title')" />
             <control-dropdown
-              v-model:value="selected_groupby_option_id"
-              :options="groupby_options"
+              v-model:value="selected_grouping_option_id"
+              :options="grouping_options"
             />
           </div>
         </div>
@@ -56,7 +56,7 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
+import { GroupedList, byName, byRating } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -74,7 +74,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.genre = response[0].data
-    vm.tracks_list = new GroupByList(response[1].data.tracks)
+    vm.tracks_list = new GroupedList(response[1].data.tracks)
   }
 }
 
@@ -108,7 +108,7 @@ export default {
   data() {
     return {
       genre: {},
-      groupby_options: [
+      grouping_options: [
         {
           id: 1,
           name: this.$t('page.genre.sort.name'),
@@ -124,7 +124,7 @@ export default {
       ],
       media_kind: this.$route.query.media_kind,
       show_details_modal: false,
-      tracks_list: new GroupByList()
+      tracks_list: new GroupedList()
     }
   },
 
@@ -132,7 +132,7 @@ export default {
     expression() {
       return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`
     },
-    selected_groupby_option_id: {
+    selected_grouping_option_id: {
       get() {
         return this.$store.state.genre_tracks_sort
       },
@@ -141,10 +141,10 @@ export default {
       }
     },
     tracks() {
-      const groupBy = this.groupby_options.find(
-        (o) => o.id === this.selected_groupby_option_id
+      const grouping = this.grouping_options.find(
+        (o) => o.id === this.selected_grouping_option_id
       )
-      this.tracks_list.group(groupBy.options)
+      this.tracks_list.group(grouping.options)
       return this.tracks_list
     }
   },
diff --git a/web-src/src/pages/PageGenres.vue b/web-src/src/pages/PageGenres.vue
index a911bc3c..80ea5dbb 100644
--- a/web-src/src/pages/PageGenres.vue
+++ b/web-src/src/pages/PageGenres.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { GroupByList, byName } from '@/lib/GroupByList'
+import { GroupedList, byName } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListGenres from '@/components/ListGenres.vue'
@@ -34,7 +34,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.genres = response.data
-    vm.genres = new GroupByList(response.data)
+    vm.genres = new GroupedList(response.data)
     vm.genres.group(byName('name_sort'))
   }
 }
@@ -63,7 +63,7 @@ export default {
 
   data() {
     return {
-      genres: new GroupByList()
+      genres: new GroupedList()
     }
   }
 }
diff --git a/web-src/src/pages/PageMusic.vue b/web-src/src/pages/PageMusic.vue
index 5b197ae8..feed44c5 100644
--- a/web-src/src/pages/PageMusic.vue
+++ b/web-src/src/pages/PageMusic.vue
@@ -46,7 +46,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -71,8 +71,8 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.recently_added = new GroupByList(response[0].data.albums)
-    vm.recently_played = new GroupByList(response[1].data.tracks)
+    vm.recently_added = new GroupedList(response[0].data.albums)
+    vm.recently_played = new GroupedList(response[1].data.tracks)
   }
 }
 
diff --git a/web-src/src/pages/PageMusicRecentlyAdded.vue b/web-src/src/pages/PageMusicRecentlyAdded.vue
index 7161d2bd..cf8a366b 100644
--- a/web-src/src/pages/PageMusicRecentlyAdded.vue
+++ b/web-src/src/pages/PageMusicRecentlyAdded.vue
@@ -14,7 +14,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList, byDateSinceToday } from '@/lib/GroupByList'
+import { GroupedList, byDateSinceToday } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import store from '@/store'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -32,7 +32,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.recently_added = new GroupByList(response.data.albums)
+    vm.recently_added = new GroupedList(response.data.albums)
     vm.recently_added.group(
       byDateSinceToday('time_added', {
         direction: 'desc'
@@ -65,7 +65,7 @@ export default {
 
   data() {
     return {
-      recently_added: new GroupByList()
+      recently_added: new GroupedList()
     }
   }
 }
diff --git a/web-src/src/pages/PageMusicRecentlyPlayed.vue b/web-src/src/pages/PageMusicRecentlyPlayed.vue
index 0f2b4c7d..24e092bd 100644
--- a/web-src/src/pages/PageMusicRecentlyPlayed.vue
+++ b/web-src/src/pages/PageMusicRecentlyPlayed.vue
@@ -14,7 +14,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
 import webapi from '@/webapi'
@@ -30,7 +30,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.recently_played = new GroupByList(response.data.tracks)
+    vm.recently_played = new GroupedList(response.data.tracks)
   }
 }
 
diff --git a/web-src/src/pages/PagePlaylistFolder.vue b/web-src/src/pages/PagePlaylistFolder.vue
index bd6491f9..2f12a167 100644
--- a/web-src/src/pages/PagePlaylistFolder.vue
+++ b/web-src/src/pages/PagePlaylistFolder.vue
@@ -22,7 +22,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList, noop } from '@/lib/GroupByList'
+import { GroupedList, noop } from '@/lib/GroupedList'
 import ListPlaylists from '@/components/ListPlaylists.vue'
 import webapi from '@/webapi'
 
@@ -36,7 +36,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.playlist = response[0].data
-    vm.playlists_list = new GroupByList(response[1].data)
+    vm.playlists_list = new GroupedList(response[1].data)
   }
 }
 
@@ -60,7 +60,7 @@ export default {
   data() {
     return {
       playlist: {},
-      playlists_list: new GroupByList()
+      playlists_list: new GroupedList()
     }
   },
 
diff --git a/web-src/src/pages/PagePlaylistTracks.vue b/web-src/src/pages/PagePlaylistTracks.vue
index 4f4702cc..77eb60e9 100644
--- a/web-src/src/pages/PagePlaylistTracks.vue
+++ b/web-src/src/pages/PagePlaylistTracks.vue
@@ -37,7 +37,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
 import webapi from '@/webapi'
@@ -52,7 +52,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.playlist = response[0].data
-    vm.tracks = new GroupByList(response[1].data)
+    vm.tracks = new GroupedList(response[1].data)
   }
 }
 
@@ -77,7 +77,7 @@ export default {
     return {
       playlist: {},
       show_details_modal: false,
-      tracks: new GroupByList()
+      tracks: new GroupedList()
     }
   },
 
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index 8921ae47..77a5b69d 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -68,7 +68,7 @@
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
@@ -84,7 +84,7 @@ const dataObject = {
 
   set(vm, response) {
     vm.album = response[0].data
-    vm.tracks = new GroupByList(response[1].data.tracks)
+    vm.tracks = new GroupedList(response[1].data.tracks)
   }
 }
 
@@ -117,7 +117,7 @@ export default {
       rss_playlist_to_remove: {},
       show_details_modal: false,
       show_remove_podcast_modal: false,
-      tracks: new GroupByList()
+      tracks: new GroupedList()
     }
   },
 
@@ -144,7 +144,7 @@ export default {
     },
     reload_tracks() {
       webapi.library_podcast_episodes(this.album.id).then(({ data }) => {
-        this.tracks = new GroupByList(data.tracks)
+        this.tracks = new GroupedList(data.tracks)
       })
     },
     remove_podcast() {
diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index e62313c0..9361079e 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/web-src/src/pages/PagePodcasts.vue
@@ -59,7 +59,7 @@
 <script>
 import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAddRss from '@/components/ModalDialogAddRss.vue'
@@ -74,8 +74,8 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.albums = new GroupByList(response[0].data)
-    vm.new_episodes = new GroupByList(response[1].data.tracks)
+    vm.albums = new GroupedList(response[0].data)
+    vm.new_episodes = new GroupedList(response[1].data.tracks)
   }
 }
 
@@ -131,13 +131,13 @@ export default {
 
     reload_new_episodes() {
       webapi.library_podcasts_new_episodes().then(({ data }) => {
-        this.new_episodes = new GroupByList(data.tracks)
+        this.new_episodes = new GroupedList(data.tracks)
       })
     },
 
     reload_podcasts() {
       webapi.library_albums('podcast').then(({ data }) => {
-        this.albums = new GroupByList(data)
+        this.albums = new GroupedList(data)
         this.reload_new_episodes()
       })
     },
diff --git a/web-src/src/pages/PageRadioStreams.vue b/web-src/src/pages/PageRadioStreams.vue
index 46876162..2378c041 100644
--- a/web-src/src/pages/PageRadioStreams.vue
+++ b/web-src/src/pages/PageRadioStreams.vue
@@ -17,7 +17,7 @@
 
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import webapi from '@/webapi'
 
@@ -27,7 +27,7 @@ const dataObject = {
   },
 
   set(vm, response) {
-    vm.tracks = new GroupByList(response.data.tracks)
+    vm.tracks = new GroupedList(response.data.tracks)
   }
 }
 
@@ -50,7 +50,7 @@ export default {
 
   data() {
     return {
-      tracks: new GroupByList()
+      tracks: new GroupedList()
     }
   }
 }
diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue
index 94368e43..82bcb064 100644
--- a/web-src/src/pages/PageSearchLibrary.vue
+++ b/web-src/src/pages/PageSearchLibrary.vue
@@ -258,7 +258,7 @@
 <script>
 import ContentText from '@/templates/ContentText.vue'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import { GroupByList } from '@/lib/GroupByList'
+import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ListArtists from '@/components/ListArtists.vue'
 import ListComposers from '@/components/ListComposers.vue'
@@ -282,14 +282,14 @@ export default {
 
   data() {
     return {
-      albums: new GroupByList(),
-      artists: new GroupByList(),
-      audiobooks: new GroupByList(),
-      composers: new GroupByList(),
-      playlists: new GroupByList(),
-      podcasts: new GroupByList(),
+      albums: new GroupedList(),
+      artists: new GroupedList(),
+      audiobooks: new GroupedList(),
+      composers: new GroupedList(),
+      playlists: new GroupedList(),
+      podcasts: new GroupedList(),
       search_query: '',
-      tracks: new GroupByList()
+      tracks: new GroupedList()
     }
   },
 
@@ -401,11 +401,11 @@ export default {
       }
 
       webapi.search(searchParams).then(({ data }) => {
-        this.tracks = new GroupByList(data.tracks)
-        this.artists = new GroupByList(data.artists)
-        this.albums = new GroupByList(data.albums)
-        this.composers = new GroupByList(data.composers)
-        this.playlists = new GroupByList(data.playlists)
+        this.tracks = new GroupedList(data.tracks)
+        this.artists = new GroupedList(data.artists)
+        this.albums = new GroupedList(data.albums)
+        this.composers = new GroupedList(data.composers)
+        this.playlists = new GroupedList(data.playlists)
       })
     },
 
@@ -431,7 +431,7 @@ export default {
       }
 
       webapi.search(searchParams).then(({ data }) => {
-        this.audiobooks = new GroupByList(data.albums)
+        this.audiobooks = new GroupedList(data.albums)
       })
     },
 
@@ -457,7 +457,7 @@ export default {
       }
 
       webapi.search(searchParams).then(({ data }) => {
-        this.podcasts = new GroupByList(data.albums)
+        this.podcasts = new GroupedList(data.albums)
       })
     },