Some Fixes and Improvements

android/app/capacitor.build.gradle

@@ -9,6 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-community-keep-awake')
     implementation project(':capacitor-app')
     implementation project(':capacitor-status-bar')
 

android/capacitor.settings.gradle

@@ -2,6 +2,9 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-community-keep-awake'
+project(':capacitor-community-keep-awake').projectDir = new File('../node_modules/@capacitor-community/keep-awake/android')
+
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 

src/components/EbookReader.vue

@@ -288,11 +288,13 @@ function toggleChapters() {
 		:show="!isReady"
 		class="z-50"
 	>
-		<div class="absolute z-50 flex h-full w-full bg-md-dark-surface">
+		<div
+			class="absolute z-50 flex h-full w-full bg-md-light-surface dark:bg-md-dark-surface"
+		>
 			<div class="my-auto mx-auto flex flex-col text-center">
 				<p class="text-xl">Processing Book</p>
-				<p class="mb-3">It may take a while the fist time</p>
-				<kPreloader size="w-12 h-12 mx-auto"></kPreloader>
+				<p class="mb-4">It may take a while the fist time</p>
+				<kPreloader size="w-8 h-8 mx-auto"></kPreloader>
 			</div>
 		</div>
 	</TransitionRoot>

src/components/Popups/StatsPopup.vue

@@ -7,6 +7,7 @@ import {
 	kPage,
 	kPopup,
 	kBlock,
+	kLink,
 } from 'konsta/vue';
 // eslint-disable-next-line no-unused-vars
 import { DateTime, Duration, Interval } from 'luxon';
@@ -47,7 +48,7 @@ onMounted(() => {
 		<kPage>
 			<kNavbar large title="Stats">
 				<template #right>
-					<div class="fixed right-0 mr-1 md:mr-3">
+					<div class="fixed right-0 mr-1">
 						<kLink @click="$router.replace('/')" navbar>Cancel</kLink>
 					</div></template
 				>

src/pages/BookPage.vue

@@ -6,6 +6,7 @@ import { useAppStore } from '../stores/AppStore';
 import { DateTime, Duration, Interval } from 'luxon';
 import { kPage } from 'konsta/vue';
 import { StatusBar } from '@capacitor/status-bar';
+import { KeepAwake } from '@capacitor-community/keep-awake';
 
 /* App Store */
 const store = useAppStore();
@@ -46,6 +47,9 @@ onMounted(() => {
 	/* Hide Status Bar */
 	StatusBar.hide();
 	StatusBar.setOverlaysWebView({ overlay: true });
+
+	/* Enable Keep Awake */
+	KeepAwake.keepAwake();
 });
 
 onUnmounted(() => {

src/pages/HomePage.vue

@@ -33,6 +33,7 @@ import BookList from '../components/BookList.vue';
 import StatsPopup from '../components/Popups/StatsPopup.vue';
 import SpinnerItem from '../components/SpinnerItem.vue';
 import { useAppStore } from '../stores/AppStore';
+import { KeepAwake } from '@capacitor-community/keep-awake';
 
 const store = useAppStore();
 const router = useRouter();
@@ -136,6 +137,9 @@ watch(message, () => {
 onMounted(() => {
 	StatusBar.show();
 	StatusBar.setOverlaysWebView({ overlay: false });
+
+	/* Disable Keep Awake */
+	KeepAwake.allowSleep();
 });
 </script>
 
@@ -237,7 +241,7 @@ onMounted(() => {
 
 				<kBlock>
 					<div
-						class="flex w-full gap-2 rounded-full bg-md-light-surface-3 px-3 dark:bg-md-dark-surface-1"
+						class="flex max-h-12 w-full rounded-full bg-md-light-surface-3 px-3 dark:bg-md-dark-surface-1"
 					>
 						<div class="ml-2 flex w-full">
 							<kSearchbar
@@ -353,7 +357,7 @@ onMounted(() => {
 				<!-- Search Bar -->
 				<kBlock class="hidden gap-2 md:flex">
 					<div
-						class="flex w-full gap-2 rounded-full bg-md-light-surface-3 px-3 dark:bg-md-dark-surface-1"
+						class="flex max-h-14 w-full gap-2 rounded-full bg-md-light-surface-3 px-3 dark:bg-md-dark-surface-1"
 					>
 						<div class="ml-2 flex w-full">
 							<kSearchbar