60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<script setup>
|
|
import { onMounted, onBeforeUnmount } from 'vue'
|
|
import { RouterView } from 'vue-router'
|
|
import { App } from '@capacitor/app'
|
|
import BottomDock from './components/BottomDock.vue'
|
|
import AddEntryView from './views/AddEntryView.vue'
|
|
import { bootstrapApp } from './services/appBootstrap.js'
|
|
import { useUiStore } from './stores/ui'
|
|
|
|
const uiStore = useUiStore()
|
|
|
|
let backButtonListener = null
|
|
|
|
void bootstrapApp()
|
|
|
|
onMounted(() => {
|
|
if (typeof App?.addListener === 'function') {
|
|
App.addListener('backButton', ({ canGoBack }) => {
|
|
if (uiStore.addEntryVisible) {
|
|
uiStore.closeAddEntry()
|
|
} else if (!canGoBack) {
|
|
// Keep Capacitor default back behavior.
|
|
}
|
|
})
|
|
.then((handle) => {
|
|
backButtonListener = handle
|
|
})
|
|
.catch(() => {
|
|
backButtonListener = null
|
|
})
|
|
}
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (backButtonListener && typeof backButtonListener.remove === 'function') {
|
|
backButtonListener.remove()
|
|
backButtonListener = null
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-warmOffwhite text-stone-800 flex items-center justify-center">
|
|
<div
|
|
class="h-screen max-h-[844px] max-w-md w-full mx-auto bg-warmOffwhite shadow-2xl relative overflow-hidden flex flex-col"
|
|
style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);"
|
|
>
|
|
<main class="flex-1 overflow-y-auto hide-scrollbar px-5 pt-2 pb-28 relative">
|
|
<RouterView />
|
|
</main>
|
|
|
|
<BottomDock />
|
|
|
|
<transition name="slide-up">
|
|
<AddEntryView v-if="uiStore.addEntryVisible" />
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</template>
|