Add:Lazy bookshelf

pages/index.vue

@@ -1,28 +1,5 @@
 <template>
-  <div class="w-full h-full">
-    <div class="w-full h-12 relative z-20">
-      <div id="toolbar" class="asolute top-0 left-0 w-full h-full bg-bg flex items-center px-2">
-        <span class="material-icons px-2" @click="showSearchModal = true">search</span>
-        <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" />
-        </div>
-        <span class="material-icons px-2" @click="showSortModal = true">sort</span>
-      </div>
-    </div>
-    <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.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>
+  <div class="w-full h-full"></div>
 </template>
 
 <script>
@@ -31,69 +8,9 @@ export default {
     return redirect('/bookshelf')
   },
   data() {
-    return {
-      showSortModal: false,
-      showFilterModal: false,
-      showSearchModal: false,
-      settings: {},
-      isListView: false,
-      bookshelfReady: false
-    }
+    return {}
   },
-  computed: {
-    hasFilters() {
-      return this.$store.getters['user/getUserSetting']('filterBy') !== 'all'
-    },
-    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()
-    },
-    updateFilter() {
-      this.saveSettings()
-    },
-    saveSettings() {
-      this.$store.commit('user/setSettings', this.settings) // Immediate update
-      this.$store.dispatch('user/updateUserSettings', this.settings)
-    },
-    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) {
-        this.settings[key] = settings[key]
-      }
-    }
-  },
-  mounted() {
-    this.init()
-    this.$store.commit('user/addSettingsListener', { id: 'bookshelftoolbar', meth: this.settingsUpdated })
-  },
-  beforeDestroy() {
-    this.$store.commit('user/removeSettingsListener', 'bookshelftoolbar')
-  }
+  computed: {},
+  methods: {}
 }
 </script>
-
-<style>
-#toolbar {
-  box-shadow: 0px 5px 5px #11111155;
-}
-</style>