Release v0.2.23.

Fix some UI issues in mobile.

Optimize totalResults request.

Bump the version to release.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "toshokan",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "private": true,
   "scripts": {
     "dev": "vite",

src/components/BookCreateDialog.vue

@@ -154,8 +154,11 @@
                 v-model:cover-url="book.coverUrl"
                 :book="book"
               />
-              <div v-else class="grid grid-cols-3 gap-4 md:gap-6 lg:gap-8 w-full">
-                <div v-if="book.coverUrl.length > 0">
+              <div v-else class="grid grid-cols-1 sm:grid-cols-3 sm:gap-4 md:gap-6 lg:gap-8 w-full">
+                <div
+                  v-if="book.coverUrl.length > 0"
+                  class="w-48 sm:w-auto max-w-full sm:max-w-none mb-8 sm:mb-0 mt-3 sm:mt-0"
+                >
                   <transition
                     mode="out-in"
                     leave-active-class="transition motion-reduce:transition-none duration-200 ease-in"

src/components/BookEditDialog.vue

@@ -344,12 +344,15 @@ export default {
 }
 
 .tab-list {
-  @apply flex px-4 md:px-6 space-x-6
+  @apply flex flex-nowrap w-full flex-shrink-0
+    overflow-x-auto md:overflow-x-visible overflow-y-visible
+    px-4 md:px-6 space-x-6
     border-b border-gray-300 dark:border-gray-600;
 }
 
 .tab-button {
-  @apply flex items-center justify-center px-1 py-3 -mb-px
+  @apply flex flex-shrink-0 items-center justify-center
+    px-1 py-2.5 -mb-px
     text-sm font-medium border-b-2 border-transparent
     text-gray-600 dark:text-gray-400;
 }

src/components/BookSelector.vue

@@ -17,7 +17,7 @@
           checked
             ? 'border-primary-600 dark:border-primary-400 shadow bg-primary-50 dark:bg-transparent'
             : 'border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700',
-          'cursor-pointer group rounded-md border flex flex-col md:flex-row items-start text-sm px-4 py-4 has-input-focus'
+          'cursor-pointer group rounded-md border flex items-start text-sm px-4 py-4 has-input-focus'
         ]"
       >
         <div

src/components/SearchHistoryItem.vue

@@ -57,9 +57,10 @@ export default {
 <style lang="postcss" scoped>
 .history-item {
   @apply flex items-center relative
+    text-sm sm:text-base
     text-gray-800 dark:text-gray-200
     bg-gray-50 dark:bg-gray-700
-    px-4 py-4 sm:px-7 md:px-4
+    pl-4 pr-10 py-3 sm:py-4
     space-x-4 rounded-md font-medium;
 }
 
@@ -83,7 +84,7 @@ export default {
 }
 
 .remove-button {
-  @apply absolute right-3 sm:right-6 md:right-3 p-1 rounded
+  @apply absolute right-3 p-1 rounded
     text-gray-500 dark:text-gray-400;
 }
 

src/composables/useBookDeleter.js

@@ -14,7 +14,7 @@ export default function useBookDeleter (book) {
     store.commit(MutationTypes.SHEET_UPDATE_LOADING, true)
 
     await sheetDeleteBook(store.state.sheet.sheetId, book.value)
-    await store.dispatch('sheet/loadSheetData')
+    await store.dispatch('sheet/loadSheetData', true)
     await store.dispatch('collection/fetchGroups')
     await store.dispatch('collection/fetchIdMap')
     store.commit(MutationTypes.COLLECTION_UPDATE_LAST_ADDED, { items: [] })

src/composables/useBookEditor.js

@@ -28,7 +28,7 @@ export default function useBookEditor (book) {
     }
 
     const bookId = await sheetUpdateBook(store.state.sheet.sheetId, bookToUpdate)
-    await store.dispatch('sheet/loadSheetData')
+    await store.dispatch('sheet/loadSheetData', true)
     await store.dispatch('collection/fetchGroups')
     store.commit(MutationTypes.COLLECTION_UPDATE_LAST_ADDED, { items: [] })
     store.commit(MutationTypes.COLLECTION_UPDATE_LATEST_READINGS, { items: [] })

src/composables/useBookInserter.js

@@ -50,13 +50,11 @@ export default function useBookInserter (book) {
     }
 
     const bookId = await sheetInsertBook(store.state.sheet.sheetId, bookToInsert)
-    await store.dispatch('sheet/loadSheetData')
+    await store.dispatch('sheet/loadSheetData', true)
     await store.dispatch('collection/fetchGroups')
     await store.dispatch('collection/fetchIdMap')
     await store.dispatch('collection/fetchBooks')
     await store.dispatch('collection/fetchLastAdded')
-    // store.commit(MutationTypes.COLLECTION_UPDATE_LAST_ADDED, { items: [] })
-    // store.commit(MutationTypes.COLLECTION_UPDATE_BOOKS, { items: [] })
 
     inserting.value = false
     store.commit(MutationTypes.SHEET_UPDATE_LOADING, false)

src/services/sheet.js

@@ -200,7 +200,9 @@ export async function getBooks (sheetId, idMap, page = 1, options = {}) {
     limit ${limit} offset ${offset}
   `
 
-  const totalResults = await countTotalResults(sheetId, queryStr)
+  const totalResults = options.dontCount
+    ? null
+    : await countTotalResults(sheetId, queryStr)
 
   const query = new window.google.visualization.Query(sheetUrl)
   query.setQuery(queryStr)
@@ -236,7 +238,8 @@ export async function getLatestReadings (sheetId, idMap, options = {}) {
     select *
     where ${CollectionColumns.READ_AT} is not null
       and ${CollectionColumns.STATUS} = "${BookStatus.READ}"
-    order by ${CollectionColumns.READ_AT} desc
+    order by ${CollectionColumns.READ_AT} desc,
+      ${CollectionColumns.UPDATED_AT} desc
     limit ${limit}
   `)
 

src/store/modules/collection.js

@@ -286,7 +286,10 @@ export default {
           await dispatch('fetchIdMap')
         }
 
-        const lastAdded = await getBooks(sheetId, state.idMap, 1, { limit: 6 })
+        const lastAdded = await getBooks(sheetId, state.idMap, 1, {
+          limit: 6,
+          dontCount: true
+        })
         commit(CollectionMutations.UPDATE_LAST_ADDED, { items: lastAdded.books })
       } finally {
         commit(CollectionMutations.UPDATE_LAST_ADDED, { loading: false })

src/views/dashboard/Home.vue

@@ -15,7 +15,7 @@
         </div>
         <div class="flex mt-5 md:mt-0 md:ml-4 space-x-4">
           <button
-            class="button flex-1 md:flex-initial justify-center md:justify-start"
+            class="button flex-grow sm:flex-1 md:flex-initial justify-center md:justify-start"
             @click="reload"
             :disabled="loading"
           >
@@ -26,7 +26,7 @@
           </button>
           <button
             v-if="canChange"
-            class="button flex-1 md:flex-initial justify-center md:justify-start"
+            class="button flex-grow sm:flex-1 md:flex-initial justify-center md:justify-start"
             @click="openSheetChooser"
             :disabled="loading"
           >