From 56a70aefaf6737448bb025af770550140b999504 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 16 Oct 2021 15:50:13 -0500
Subject: [PATCH] Add: bookshelf list view, add: sort by most recent

---
 android/app/build.gradle            |   4 +-
 assets/fonts.css                    |   8 +-
 components/app/Bookshelf.vue        |  12 +--
 components/app/BookshelfList.vue    | 138 ++++++++++++++++++++++++++++
 components/app/BookshelfListRow.vue | 124 +++++++++++++++++++++++++
 components/app/StreamContainer.vue  |  15 ++-
 components/cards/BookCard.vue       |  22 ++---
 components/modals/OrderModal.vue    |   5 +
 layouts/default.vue                 |   2 +-
 nuxt.config.js                      |   2 +-
 package.json                        |   2 +-
 pages/index.vue                     |  30 +++++-
 plugins/store.js                    |  19 +++-
 store/audiobooks.js                 |  29 ++++--
 store/user.js                       |  13 +++
 tailwind.config.js                  |   2 +-
 16 files changed, 377 insertions(+), 50 deletions(-)
 create mode 100644 components/app/BookshelfList.vue
 create mode 100644 components/app/BookshelfListRow.vue

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 932cd907..259299ac 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -13,8 +13,8 @@ android {
         applicationId "com.audiobookshelf.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 21
-        versionName "0.9.5-beta"
+        versionCode 22
+        versionName "0.9.6-beta"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
diff --git a/assets/fonts.css b/assets/fonts.css
index 188624eb..d515b05b 100644
--- a/assets/fonts.css
+++ b/assets/fonts.css
@@ -10,8 +10,8 @@
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;
   line-height: 1;
+  font-size: 1.5rem;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
@@ -21,6 +21,12 @@
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 }
+.material-icons.text-icon {
+  font-size: 1.15rem;
+}
+.material-icons.text-base {
+  font-size: 1rem;
+}
 
 @font-face {
   font-family: 'Gentium Book Basic';
diff --git a/components/app/Bookshelf.vue b/components/app/Bookshelf.vue
index b7f82431..d7850545 100644
--- a/components/app/Bookshelf.vue
+++ b/components/app/Bookshelf.vue
@@ -3,7 +3,7 @@
     <template v-for="(shelf, index) in groupedBooks">
       <div :key="index" class="border-b border-opacity-10 w-full bookshelfRow py-4 flex justify-around relative">
         <template v-for="audiobook in shelf">
-          <cards-book-card :key="audiobook.id" :audiobook="audiobook" :width="cardWidth" :user-progress="userAudiobooks[audiobook.id]" :local-user-progress="localUserAudiobooks[audiobook.id]" />
+          <cards-book-card :key="audiobook.id" :audiobook="audiobook" :width="cardWidth" />
         </template>
         <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
       </div>
@@ -41,19 +41,13 @@ export default {
       return this.$store.getters['user/getFilterOrderKey']
     },
     hasFilters() {
-      return this.$store.getters['user/getUserSetting']('filterBy') !== 'all'
-    },
-    userAudiobooks() {
-      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
-    },
-    localUserAudiobooks() {
-      return this.$store.state.user.localUserAudiobooks || {}
+      return this.$store.getters['user/getUserSetting']('mobileFilterBy') !== 'all'
     }
   },
   methods: {
     clearFilter() {
       this.$store.dispatch('user/updateUserSettings', {
-        filterBy: 'all'
+        mobileFilterBy: 'all'
       })
     },
     calcShelves() {
diff --git a/components/app/BookshelfList.vue b/components/app/BookshelfList.vue
new file mode 100644
index 00000000..9db8e510
--- /dev/null
+++ b/components/app/BookshelfList.vue
@@ -0,0 +1,138 @@
+<template>
+  <div id="bookshelf" ref="wrapper" class="w-full overflow-y-auto">
+    <template v-for="(ab, index) in audiobooks">
+      <div :key="index" class="border-b border-opacity-10 w-full bookshelfRow py-4 px-2 flex relative">
+        <app-bookshelf-list-row :audiobook="ab" :card-width="cardWidth" :page-width="pageWidth" />
+        <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
+      </div>
+    </template>
+    <div v-show="!audiobooks.length" class="w-full py-16 text-center text-xl">
+      <div class="py-4">No Audiobooks</div>
+      <ui-btn v-if="hasFilters" @click="clearFilter">Clear Filter</ui-btn>
+    </div>
+    <div v-show="isLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-70 z-20">
+      <div class="py-4">Loading...</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currFilterOrderKey: null,
+      pageWidth: 0,
+      audiobooks: []
+    }
+  },
+  computed: {
+    isLoading() {
+      return this.$store.state.audiobooks.isLoading
+    },
+    cardWidth() {
+      return 75
+    },
+    cardHeight() {
+      return this.cardWidth * 2
+    },
+    contentRowWidth() {
+      return this.pageWidth - 16 - this.cardWidth
+    },
+    filterOrderKey() {
+      return this.$store.getters['user/getFilterOrderKey']
+    },
+    hasFilters() {
+      return this.$store.getters['user/getUserSetting']('mobileFilterBy') !== 'all'
+    }
+  },
+  methods: {
+    clearFilter() {
+      this.$store.dispatch('user/updateUserSettings', {
+        mobileFilterBy: 'all'
+      })
+    },
+    calcShelves() {
+      this.audiobooks = this.$store.getters['audiobooks/getFilteredAndSorted']()
+    },
+    audiobooksUpdated() {
+      this.calcShelves()
+    },
+    init() {
+      if (this.$refs.wrapper) {
+        this.pageWidth = this.$refs.wrapper.clientWidth
+        this.calcShelves()
+      }
+    },
+    resize() {
+      this.init()
+    },
+    settingsUpdated() {
+      if (this.currFilterOrderKey !== this.filterOrderKey) {
+        this.calcShelves()
+      }
+    },
+    async loadAudiobooks() {
+      var currentLibrary = await this.$localStore.getCurrentLibrary()
+      if (currentLibrary) {
+        this.$store.commit('libraries/setCurrentLibrary', currentLibrary.id)
+      }
+      this.$store.dispatch('audiobooks/load')
+    },
+    socketConnected(isConnected) {
+      if (isConnected) {
+        console.log('Connected - Load from server')
+        this.loadAudiobooks()
+      } else {
+        console.log('Disconnected - Reset to local storage')
+        this.$store.commit('audiobooks/reset')
+        this.$store.dispatch('audiobooks/useDownloaded')
+        // this.calcShelves()
+        // this.$store.dispatch('downloads/loadFromStorage')
+      }
+    }
+  },
+  mounted() {
+    this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
+    this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
+    window.addEventListener('resize', this.resize)
+
+    if (!this.$server) {
+      console.error('Bookshelf mounted no server')
+      return
+    }
+
+    this.$server.on('connected', this.socketConnected)
+    if (this.$server.connected) {
+      this.loadAudiobooks()
+    } else {
+      console.log('Bookshelf - Server not connected using downloaded')
+    }
+    this.init()
+  },
+  beforeDestroy() {
+    this.$store.commit('audiobooks/removeListener', 'bookshelf')
+    this.$store.commit('user/removeSettingsListener', 'bookshelf')
+    window.removeEventListener('resize', this.resize)
+
+    if (!this.$server) {
+      console.error('Bookshelf beforeDestroy no server')
+      return
+    }
+    this.$server.off('connected', this.socketConnected)
+  }
+}
+</script>
+
+<style>
+#bookshelf {
+  height: calc(100% - 48px);
+}
+.bookshelfRow {
+  background-image: url(/wood_panels.jpg);
+}
+.bookshelfDivider {
+  background: rgb(149, 119, 90);
+  background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
+  box-shadow: 2px 14px 8px #111111aa;
+}
+</style>
\ No newline at end of file
diff --git a/components/app/BookshelfListRow.vue b/components/app/BookshelfListRow.vue
new file mode 100644
index 00000000..9cdc2c34
--- /dev/null
+++ b/components/app/BookshelfListRow.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="w-full h-full flex">
+    <cards-book-card :audiobook="audiobook" :width="cardWidth" class="self-end" />
+    <div class="relative px-2" :style="{ width: contentRowWidth + 'px' }">
+      <div class="flex">
+        <nuxt-link :to="`/audiobook/${audiobook.id}`">
+          <p class="leading-6" style="font-size: 1.1rem">{{ audiobook.book.title }}</p>
+        </nuxt-link>
+        <div class="flex-grow" />
+        <div class="flex items-center">
+          <!-- <button class="mx-1" @click="editAudiobook(ab)">
+                <span class="material-icons text-icon pb-px">edit</span>
+              </button> -->
+          <button v-if="!isPlaying" class="mx-1 rounded-full w-6 h-6" @click="playAudiobook">
+            <span class="material-icons">play_arrow</span>
+          </button>
+        </div>
+      </div>
+      <p v-if="audiobook.book.subtitle" class="text-gray-200 leading-6 truncate" style="font-size: 0.9rem">{{ audiobook.book.subtitle }}</p>
+      <p class="text-sm text-gray-200">by {{ audiobook.book.author }}</p>
+      <div class="flex items-center py-1">
+        <p class="text-xs text-gray-300">{{ $elapsedPretty(audiobook.duration) }}</p>
+        <span class="px-3 text-xs text-gray-300">•</span>
+        <p class="text-xs text-gray-300 font-mono">{{ $bytesPretty(audiobook.size, 0) }}</p>
+        <span class="px-3 text-xs text-gray-300">•</span>
+        <p class="text-xs text-gray-300">{{ numTracks }} tracks</p>
+      </div>
+      <div class="flex">
+        <div v-if="userProgressPercent && !userIsRead" class="w-min my-1">
+          <div class="bg-primary bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">Progress: {{ Math.floor(userProgressPercent * 100) }}%</div>
+        </div>
+        <div v-if="isDownloadPlayable" class="w-min my-1 mx-1">
+          <div class="bg-success bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">Downloaded</div>
+        </div>
+        <div v-else-if="isDownloading" class="w-min my-1 mx-1">
+          <div class="bg-warning bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">Downloading...</div>
+        </div>
+        <div v-if="isPlaying" class="w-min my-1 mx-1">
+          <div class="bg-info bg-opacity-70 text-sm px-2 py-px rounded-full whitespace-nowrap">{{ isStreaming ? 'Streaming' : 'Playing' }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    },
+    cardWidth: {
+      type: Number,
+      default: 75
+    },
+    pageWidth: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    audiobookId() {
+      return this.audiobook.id
+    },
+    mostRecentUserProgress() {
+      return this.$store.getters['user/getMostRecentAudiobookProgress'](this.audiobookId)
+    },
+    userProgressPercent() {
+      return this.mostRecentUserProgress ? this.mostRecentUserProgress.progress || 0 : 0
+    },
+    userIsRead() {
+      return this.mostRecentUserProgress ? !!this.mostRecentUserProgress.isRead : false
+    },
+    contentRowWidth() {
+      return this.pageWidth - 16 - this.cardWidth
+    },
+    isDownloading() {
+      return this.downloadObj ? this.downloadObj.isDownloading : false
+    },
+    isDownloadPreparing() {
+      return this.downloadObj ? this.downloadObj.isPreparing : false
+    },
+    isDownloadPlayable() {
+      return this.downloadObj && !this.isDownloading && !this.isDownloadPreparing
+    },
+    downloadedCover() {
+      return this.downloadObj ? this.downloadObj.cover : null
+    },
+    downloadObj() {
+      return this.$store.getters['downloads/getDownload'](this.audiobookId)
+    },
+    isStreaming() {
+      return this.$store.getters['isAudiobookStreaming'](this.audiobookId)
+    },
+    isPlaying() {
+      return this.$store.getters['isAudiobookPlaying'](this.audiobookId)
+    },
+    numTracks() {
+      if (this.audiobook.tracks) return this.audiobook.tracks.length
+      return this.audiobook.numTracks || 0
+    }
+  },
+  methods: {
+    playAudiobook() {
+      if (this.isPlaying) {
+        return
+      }
+      this.$store.commit('setPlayOnLoad', true)
+      if (!this.isDownloadPlayable) {
+        // Stream
+        console.log('[PLAYCLICK] Set Playing STREAM ' + this.audiobook.book.title)
+        this.$store.commit('setStreamAudiobook', this.audiobook)
+        this.$server.socket.emit('open_stream', this.audiobook.id)
+      } else {
+        // Local
+        console.log('[PLAYCLICK] Set Playing Local Download ' + this.audiobook.book.title)
+        this.$store.commit('setPlayingDownload', this.downloadObj)
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
\ No newline at end of file
diff --git a/components/app/StreamContainer.vue b/components/app/StreamContainer.vue
index 54a28708..9413e78a 100644
--- a/components/app/StreamContainer.vue
+++ b/components/app/StreamContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full p-4 pointer-events-none fixed bottom-0 left-0 right-0 z-20">
-    <div v-if="audiobook" class="w-full bg-primary absolute bottom-0 left-0 right-0 z-50 p-2 pointer-events-auto" @click.stop @mousedown.stop @mouseup.stop>
+    <div v-if="audiobook" id="streamContainer" class="w-full bg-primary absolute bottom-0 left-0 right-0 z-50 p-2 pointer-events-auto" @click.stop @mousedown.stop @mouseup.stop>
       <div class="pl-16 pr-2 flex items-center pb-2">
         <div>
           <p class="px-2">{{ title }}</p>
@@ -12,7 +12,7 @@
         </div>
         <span class="material-icons" @click="cancelStream">close</span>
       </div>
-      <div class="absolute left-2 -top-10">
+      <div class="absolute left-2 -top-10 bookCoverWrapper">
         <cards-book-cover :audiobook="audiobook" :download-cover="downloadedCover" :width="64" />
       </div>
       <audio-player-mini ref="audioPlayerMini" :loading="isLoading" @updateTime="updateTime" @selectPlaybackSpeed="showPlaybackSpeedModal = true" @hook:mounted="audioPlayerMounted" />
@@ -379,4 +379,13 @@ export default {
     this.$store.commit('removeStreamListener')
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.bookCoverWrapper {
+  box-shadow: 3px -2px 5px #00000066;
+}
+#streamContainer {
+  box-shadow: 0px -8px 8px #11111177;
+}
+</style>
\ No newline at end of file
diff --git a/components/cards/BookCard.vue b/components/cards/BookCard.vue
index bde1cf52..675aecc0 100644
--- a/components/cards/BookCard.vue
+++ b/components/cards/BookCard.vue
@@ -17,9 +17,9 @@
             <span class="material-icons text-success" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">download_done</span>
           </div>
 
-          <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>
+          <div class="absolute bottom-0 left-0 h-1.5 shadow-sm" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
 
-          <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+          <div v-if="showError" :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem', bottom: sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300 absolute left-0">
             <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
           </div>
         </div>
@@ -35,14 +35,6 @@ export default {
       type: Object,
       default: () => null
     },
-    userProgress: {
-      type: Object,
-      default: () => null
-    },
-    localUserProgress: {
-      type: Object,
-      default: () => null
-    },
     width: {
       type: Number,
       default: 140
@@ -87,16 +79,17 @@ export default {
       return this.orderBy === 'book.authorLF' ? this.authorLF : this.authorFL
     },
     orderBy() {
-      return this.$store.getters['user/getUserSetting']('orderBy')
+      return this.$store.getters['user/getUserSetting']('mobileOrderBy')
     },
     mostRecentUserProgress() {
-      if (!this.localUserProgress) return this.userProgress
-      if (!this.userProgress) return this.localUserProgress
-      return this.localUserProgress.lastUpdate > this.userProgress.lastUpdate ? this.localUserProgress : this.userProgress
+      return this.$store.getters['user/getMostRecentAudiobookProgress'](this.audiobookId)
     },
     userProgressPercent() {
       return this.mostRecentUserProgress ? this.mostRecentUserProgress.progress || 0 : 0
     },
+    userIsRead() {
+      return this.mostRecentUserProgress ? !!this.mostRecentUserProgress.isRead : false
+    },
     showError() {
       return this.hasMissingParts || this.hasInvalidParts
     },
@@ -110,7 +103,6 @@ export default {
       return this.download ? this.download.cover : null
     },
     download() {
-      return null
       return this.$store.getters['downloads/getDownloadIfReady'](this.audiobookId)
     },
     errorText() {
diff --git a/components/modals/OrderModal.vue b/components/modals/OrderModal.vue
index 60600bfd..c3a3c5f7 100644
--- a/components/modals/OrderModal.vue
+++ b/components/modals/OrderModal.vue
@@ -54,6 +54,10 @@ export default {
         {
           text: 'Size',
           value: 'size'
+        },
+        {
+          text: 'Last Read',
+          value: 'recent'
         }
       ]
     }
@@ -89,6 +93,7 @@ export default {
       if (this.selected === val) {
         this.selectedDesc = !this.selectedDesc
       } else {
+        if (val === 'recent' || val === 'addedAt') this.selectedDesc = true // Progress defaults to descending
         this.selected = val
       }
       this.show = false
diff --git a/layouts/default.vue b/layouts/default.vue
index 2610cf4f..2dde7a0b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -415,6 +415,6 @@ export default {
   height: calc(100vh - 64px);
 }
 #content.playerOpen {
-  height: calc(100vh - 240px);
+  height: calc(100vh - 236px);
 }
 </style>
\ No newline at end of file
diff --git a/nuxt.config.js b/nuxt.config.js
index 1003aafd..32b068b5 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -26,7 +26,7 @@ export default {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Open+Sans:wght@400;600' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Source+Sans+Pro:wght@300;400;600' },
     ]
   },
 
diff --git a/package.json b/package.json
index bfb567e7..85112d56 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-app",
-  "version": "v0.9.5-beta",
+  "version": "v0.9.6-beta",
   "author": "advplyr",
   "scripts": {
     "dev": "nuxt --hostname localhost --port 1337",
diff --git a/pages/index.vue b/pages/index.vue
index 0fbecc7c..a59e5fd7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,6 +6,7 @@
         <p class="font-book">{{ numAudiobooks }} Audiobooks</p>
 
         <div class="flex-grow" />
+        <span class="material-icons px-2" @click="changeView">{{ viewIcon }}</span>
         <div class="relative flex items-center px-2">
           <span class="material-icons" @click="showFilterModal = true">filter_alt</span>
           <div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
@@ -13,10 +14,13 @@
         <span class="material-icons px-2" @click="showSortModal = true">sort</span>
       </div>
     </div>
-    <app-bookshelf />
+    <template v-if="bookshelfReady">
+      <app-bookshelf v-if="!isListView" />
+      <app-bookshelf-list v-else />
+    </template>
 
-    <modals-order-modal v-model="showSortModal" :order-by.sync="settings.orderBy" :descending.sync="settings.orderDesc" @change="updateOrder" />
-    <modals-filter-modal v-model="showFilterModal" :filter-by.sync="settings.filterBy" @change="updateFilter" />
+    <modals-order-modal v-model="showSortModal" :order-by.sync="settings.mobileOrderBy" :descending.sync="settings.mobileOrderDesc" @change="updateOrder" />
+    <modals-filter-modal v-model="showFilterModal" :filter-by.sync="settings.mobileFilterBy" @change="updateFilter" />
     <modals-search-modal v-model="showSearchModal" />
   </div>
 </template>
@@ -28,7 +32,9 @@ export default {
       showSortModal: false,
       showFilterModal: false,
       showSearchModal: false,
-      settings: {}
+      settings: {},
+      isListView: false,
+      bookshelfReady: false
     }
   },
   computed: {
@@ -37,9 +43,18 @@ export default {
     },
     numAudiobooks() {
       return this.$store.getters['audiobooks/getFiltered']().length
+    },
+    viewIcon() {
+      return this.isListView ? 'grid_view' : 'view_stream'
     }
   },
   methods: {
+    changeView() {
+      this.isListView = !this.isListView
+
+      var bookshelfView = this.isListView ? 'list' : 'grid'
+      this.$localStore.setBookshelfView(bookshelfView)
+    },
     updateOrder() {
       this.saveSettings()
     },
@@ -50,8 +65,13 @@ export default {
       this.$store.commit('user/setSettings', this.settings) // Immediate update
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
-    init() {
+    async init() {
       this.settings = { ...this.$store.state.user.settings }
+
+      var bookshelfView = await this.$localStore.getBookshelfView()
+      this.isListView = bookshelfView === 'list'
+      this.bookshelfReady = true
+      console.log('Bookshelf view', bookshelfView)
     },
     settingsUpdated(settings) {
       for (const key in settings) {
diff --git a/plugins/store.js b/plugins/store.js
index c9988695..64fa53b2 100644
--- a/plugins/store.js
+++ b/plugins/store.js
@@ -442,7 +442,6 @@ class LocalStorage {
       this.userAudiobooks = val ? JSON.parse(val) : {}
       this.userAudiobooksLoaded = true
       this.vuexStore.commit('user/setLocalUserAudiobooks', this.userAudiobooks)
-      console.log('[LocalStorage] Loaded Local USER Audiobooks ' + JSON.stringify(this.userAudiobooks))
     } catch (error) {
       console.error('[LocalStorage] Failed to load user audiobooks', error)
     }
@@ -600,6 +599,24 @@ class LocalStorage {
       return null
     }
   }
+
+  async setBookshelfView(view) {
+    try {
+      await Storage.set({ key: 'bookshelfView', value: view })
+    } catch (error) {
+      console.error('[LocalStorage] Failed to set bookshelf view', error)
+    }
+  }
+
+  async getBookshelfView() {
+    try {
+      var view = await Storage.get({ key: 'bookshelfView' }) || {}
+      return view.value || null
+    } catch (error) {
+      console.error('[LocalStorage] Failed to get bookshelf view', error)
+      return null
+    }
+  }
 }
 
 export default ({ app, store }, inject) => {
diff --git a/store/audiobooks.js b/store/audiobooks.js
index dcace2ac..2fda4aad 100644
--- a/store/audiobooks.js
+++ b/store/audiobooks.js
@@ -22,7 +22,7 @@ export const getters = {
   getFiltered: (state, getters, rootState, rootGetters) => () => {
     var filtered = state.audiobooks
     var settings = rootState.user.settings || {}
-    var filterBy = settings.filterBy || ''
+    var filterBy = settings.mobileFilterBy || ''
 
     var searchGroups = ['genres', 'tags', 'series', 'authors', 'progress']
     var group = searchGroups.find(_group => filterBy.startsWith(_group + '.'))
@@ -45,18 +45,27 @@ export const getters = {
     }
     return filtered
   },
-  getFilteredAndSorted: (state, getters, rootState) => () => {
+  getFilteredAndSorted: (state, getters, rootState, rootGetters) => () => {
     var settings = rootState.user.settings
-    var direction = settings.orderDesc ? 'desc' : 'asc'
+    var direction = settings.mobileOrderDesc ? 'desc' : 'asc'
 
     var filtered = getters.getFiltered()
-    var orderByNumber = settings.orderBy === 'book.volumeNumber'
-    return sort(filtered)[direction]((ab) => {
-      // Supports dot notation strings i.e. "book.title"
-      var value = settings.orderBy.split('.').reduce((a, b) => a[b], ab)
-      if (orderByNumber && !isNaN(value)) return Number(value)
-      return value
-    })
+
+    if (settings.mobileOrderBy === 'recent') {
+      return sort(filtered)[direction]((ab) => {
+        var abprogress = rootGetters['user/getMostRecentAudiobookProgress'](ab.id)
+        if (!abprogress) return 0
+        return abprogress.lastUpdate
+      })
+    } else {
+      var orderByNumber = settings.mobileOrderBy === 'book.volumeNumber'
+      return sort(filtered)[direction]((ab) => {
+        // Supports dot notation strings i.e. "book.title"
+        var value = settings.mobileOrderBy.split('.').reduce((a, b) => a[b], ab)
+        if (orderByNumber && !isNaN(value)) return Number(value)
+        return value
+      })
+    }
   },
   getUniqueAuthors: (state) => {
     var _authors = state.audiobooks.filter(ab => !!(ab.book && ab.book.author)).map(ab => ab.book.author)
diff --git a/store/user.js b/store/user.js
index a43dfc27..a4cc310f 100644
--- a/store/user.js
+++ b/store/user.js
@@ -2,6 +2,9 @@ export const state = () => ({
   user: null,
   localUserAudiobooks: {},
   settings: {
+    mobileOrderBy: 'recent',
+    mobileOrderDesc: true,
+    mobileFilterBy: 'all',
     orderBy: 'book.title',
     orderDesc: false,
     filterBy: 'all',
@@ -19,6 +22,16 @@ export const getters = {
   getUserAudiobook: (state) => (audiobookId) => {
     return state.user && state.user.audiobooks ? state.user.audiobooks[audiobookId] || null : null
   },
+  getLocalUserAudiobook: (state) => (audiobookId) => {
+    return state.user && state.user.localUserAudiobooks ? state.user.localUserAudiobooks[audiobookId] || null : null
+  },
+  getMostRecentAudiobookProgress: (state, getters) => (audiobookId) => {
+    var userAb = getters.getUserAudiobook(audiobookId)
+    var localUserAb = getters.getLocalUserAudiobook(audiobookId)
+    if (!localUserAb) return userAb
+    if (!userAb) return localUserAb
+    return localUserAb.lastUpdate > userAb.lastUpdate ? localUserAb : userAb
+  },
   getUserSetting: (state) => (key) => {
     return state.settings ? state.settings[key] || null : null
   },
diff --git a/tailwind.config.js b/tailwind.config.js
index bc4b1001..94c186e5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -30,7 +30,7 @@ module.exports = {
         none: 'none'
       },
       fontFamily: {
-        sans: ['Open Sans', ...defaultTheme.fontFamily.sans],
+        sans: ['Source Sans Pro', ...defaultTheme.fontFamily.sans],
         mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
         book: ['Gentium Book Basic', 'serif']
       }