Release v0.2.36.

Make logo link point to homepage.

Tweak the homepage.

Tweak the about pages.

Dynamic import the apex charts component.

Fix missing alert action styles.

Make labels not selectable.

Tweak book card badges.

Fix bad colors book cover loading icon.

Fix weird opacity behavior in book cover.

Make the dialog overlay darker in light theme.

Move book owner badge into a component.

Make YouTube embeds have shadow.

Fix linting error in Tailwind file.

Add dashboard link in about pages.

Fix ghost button hover and animate stat card icon.

Remove the usage of idMap.

Bump the version to release.

package.json

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

src/components/Alert.vue

@@ -125,10 +125,11 @@ export default {
 }
 </script>
 
-<style lang="postcss" scoped>
-.alert-actions a,
-.alert-actions button {
-  @apply font-semibold rounded-md px-2.5 py-1.5 motion-safe:transition-shadow;
+<style lang="postcss">
+.alert-actions > a,
+.alert-actions > button {
+  @apply font-semibold rounded-md px-2.5 py-1.5
+    motion-safe:transition-shadow;
 }
 
 .alert-actions a:hover,

src/components/AppNavbar.vue

@@ -10,7 +10,7 @@
       <div class="relative flex items-center justify-between h-16">
         <div class="flex-1 flex items-center justify-start md:items-stretch">
           <router-link
-            :to="{ name: 'DashboardHome' }"
+            :to="{ name: 'Home' }"
             :class="isOnTop ? 'opacity-95' : ''"
             class="shrink-0 flex items-center rounded-md transition-shadow motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-800"
           >

src/components/BasicBarChart.vue

@@ -32,8 +32,7 @@
 </template>
 
 <script>
-import { computed, toRefs } from 'vue'
-import { useStore } from 'vuex'
+import { computed, defineAsyncComponent, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import colors from 'tailwindcss/colors'
@@ -43,8 +42,6 @@ import useMotionSafe from '@/composables/useMotionSafe'
 
 import { ChartBarIcon } from '@heroicons/vue/solid'
 
-import VueApexCharts from 'vue3-apexcharts'
-
 import apexEnUs from 'apexcharts/dist/locales/en.json'
 import apexPtBr from 'apexcharts/dist/locales/pt-br.json'
 
@@ -55,7 +52,7 @@ const apexLocales = {
 
 export default {
   components: {
-    ApexChart: VueApexCharts,
+    ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
     ChartBarIcon
   },
 
@@ -67,8 +64,6 @@ export default {
   },
 
   setup (props) {
-    const store = useStore()
-
     const { locale } = useI18n()
 
     const { darkMode } = useDarkMode()

src/components/Content.vue

@@ -6,6 +6,6 @@
 
 <style lang="postcss" scoped>
 .content {
-  @apply max-w-prose mx-auto py-16 px-6 lg:px-0;
+  @apply max-w-prose mx-auto pb-8 px-6 lg:px-0;
 }
 </style>

src/components/ContentTitle.vue

@@ -6,6 +6,8 @@
 
 <style lang="postcss" scoped>
 .content-title {
-  @apply pb-16 text-center font-display font-bold leading-6 text-3xl text-gray-800 dark:text-gray-100;
+  @apply py-20 md:py-24 text-center font-display
+    font-bold leading-7 text-3xl md:text-4xl
+    text-gray-800 dark:text-gray-100;
 }
 </style>

src/components/HomeFooter.vue

@@ -31,40 +31,24 @@
 
     <div class="text-center">
       <p>
-        {{ t('footer.version', { version: appVersion }) }}
-      </p>
-
-      <p v-if="isDev">
-        {{ t('footer.dev') }}
+        {{ t('footer.copyright', { year: new Date().getFullYear() }) }}
       </p>
     </div>
   </footer>
 </template>
 
 <script>
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import LocaleSelector from '@/components/LocaleSelector.vue'
 
-import useAppInfo from '@/composables/useAppInfo'
-
 export default {
   components: { LocaleSelector },
 
   setup () {
-    const { appVersion } = useAppInfo()
-
-    const isDev = ref(import.meta.env.DEV)
-
     const { t, locale } = useI18n({ useScope: 'global' })
 
-    return {
-      appVersion,
-      isDev,
-      t,
-      locale
-    }
+    return { t, locale }
   }
 }
 </script>

src/components/MonthlyBoughtsChart.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, defineAsyncComponent } from 'vue'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 
@@ -46,8 +46,6 @@ import useMotionSafe from '@/composables/useMotionSafe'
 
 import { ChartBarIcon } from '@heroicons/vue/solid'
 
-import VueApexCharts from 'vue3-apexcharts'
-
 import apexEnUs from 'apexcharts/dist/locales/en.json'
 import apexPtBr from 'apexcharts/dist/locales/pt-br.json'
 
@@ -58,7 +56,7 @@ const apexLocales = {
 
 export default {
   components: {
-    ApexChart: VueApexCharts,
+    ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
     ChartBarIcon
   },
 

src/components/MonthlyExpenseChart.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, defineAsyncComponent } from 'vue'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 
@@ -46,8 +46,6 @@ import useMotionSafe from '@/composables/useMotionSafe'
 
 import { ChartBarIcon } from '@heroicons/vue/solid'
 
-import VueApexCharts from 'vue3-apexcharts'
-
 import apexEnUs from 'apexcharts/dist/locales/en.json'
 import apexPtBr from 'apexcharts/dist/locales/pt-br.json'
 
@@ -58,7 +56,7 @@ const apexLocales = {
 
 export default {
   components: {
-    ApexChart: VueApexCharts,
+    ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
     ChartBarIcon
   },
 

src/components/PageHeader.vue

@@ -1,9 +1,9 @@
 <template>
   <header class="h-16">
-    <div class="max-w-prose mx-auto px-4 sm:px-6 lg:px-0 flex items-center h-full">
+    <div class="max-w-prose mx-auto px-4 sm:px-6 lg:px-0 flex items-center justify-between h-full">
       <router-link
         :to="{ name: 'Home' }"
-        class="flex items-center rounded-md transition-shadow motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900"
+        class="inline-flex shrink-0 items-center rounded-md transition-shadow motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900"
       >
         <span aria-hidden="true">
           <LibraryIcon class="h-9 w-9 text-primary-500" />
@@ -13,22 +13,39 @@
           {{ t('app.name') }}
         </span>
       </router-link>
+      <div class="inline-flex shrink-0">
+        <ThemeToggle light />
+        <router-link
+          :to="{ name: 'DashboardHome' }"
+          class="button is-primary is-rounded ml-3"
+          v-if="signedIn"
+        >
+          {{ t('home.header.dashboard') }}
+        </router-link>
+      </div>
     </div>
   </header>
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 
 import { LibraryIcon } from '@heroicons/vue/solid'
 
+import ThemeToggle from '@/components/ThemeToggle.vue'
+
 export default {
-  components: { LibraryIcon },
+  components: { LibraryIcon, ThemeToggle },
 
   setup () {
     const { t } = useI18n()
 
-    return { t }
+    const store = useStore()
+    const signedIn = computed(() => store.state.auth.signedIn)
+
+    return { t, signedIn }
   }
 }
 </script>

src/components/StatCard.vue

@@ -34,17 +34,17 @@
     <button
       v-if="sensitive && !alwaysHidden"
       type="button"
-      class="button is-ghost is-darker is-icon-only -mr-2 p-2"
+      class="button is-ghost is-icon-only -mr-2 p-2"
       @click.stop="showValue = !showValue"
     >
       <transition
         mode="out-in"
         leave-active-class="transition motion-reduce:transition-none duration-100 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
+        leave-from-class="opacity-100 rotate-0"
+        leave-to-class="opacity-0 rotate-180"
         enter-active-class="transition motion-reduce:transition-none duration-200 ease-out"
-        enter-from-class="opacity-0"
-        enter-to-class="opacity-100"
+        enter-from-class="opacity-0 -rotate-180"
+        enter-to-class="opacity-100 rotate-0"
       >
         <EyeIcon class="text-gray-500" v-if="!showValue" />
         <EyeOffIcon class="text-gray-500" v-else />

src/components/book/BookCard.vue

@@ -70,23 +70,23 @@
         v-if="book.isRead || current || book.isFuture"
         class="badge-wrapper"
       >
-        <template v-if="!current && !book.isFuture">
+        <span v-if="current" class="current-volume">
+          {{ t('book.currentVolume') }}
+        </span>
+        <template v-if="!book.isFuture && book.isRead">
           <span class="sr-only">{{ t('book.read') }}</span>
-          <div class="bg-white dark:bg-primary-50 dark:bg-opacity-95 rounded p-0.5">
+          <div class="bg-white dark:bg-primary-50 dark:bg-opacity-95 rounded p-0.5 self-end ml-auto">
             <BookmarkIcon class="w-5 h-5 text-primary-500" />
           </div>
         </template>
-        <span v-else-if="!current" class="future-item">
+        <span v-else-if="!current && book.isFuture" class="future-item">
           <span aria-hidden="true">
             <ClockIcon class="w-3.5 h-3.5" />
           </span>
           <span>
             {{ t('book.future') }}
           </span>
         </span>
-        <span v-else class="current-volume">
-          {{ t('book.currentVolume') }}
-        </span>
       </div>
 
       <div v-if="mode === 'compact'" class="book-gradient text-white absolute top-0 left-0 w-full h-full flex items-start justify-end flex-col pb-2 px-2 lg:pb-3 lg:px-3">
@@ -247,10 +247,9 @@ export default {
 
 .current-volume,
 .future-item {
-  @apply px-1.5 py-px rounded
-    text-xxs uppercase font-bold tracking-wide
-    bg-primary-100 dark:bg-gray-850
-    text-primary-600 dark:text-gray-300;
+  @apply px-1.5 py-0.5 rounded backdrop-blur
+    text-xs font-semibold tracking-wide
+    bg-gray-800/80 text-gray-100;
 }
 
 .future-item {

src/components/book/BookCover.vue

@@ -73,12 +73,11 @@
           :class="blurCover ? 'md:filter md:blur-sm md:hover:blur-none motion-safe:transition-all duration-200 ease-in-out' : ''"
           class="max-w-xs md:max-w-full max-h-full shadow-lg rounded"
         >
-        <span
-          v-else
-          aria-hidden="true"
-          :class="(loading || imageLoading) ? 'motion-safe:animate-pulse' : ''"
-        >
-          <BookOpenIcon class="w-12 h-12 text-gray-400 dark:text-gray-600" />
+        <span v-else aria-hidden="true">
+          <BookOpenIcon
+            :class="(loading || imageLoading) ? 'motion-safe:animate-pulse' : ''"
+            class="w-12 h-12 text-gray-500/80 dark:text-gray-400/90"
+          />
         </span>
       </transition>
     </div>