<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, RouterView } from 'vue-router';
import BottomTabBar from './components/navigation/BottomTabBar.vue';
import QuickAddButton from './components/actions/QuickAddButton.vue';

const route = useRoute();
const showAppShell = computed(() => !route.path.startsWith('/auth'));
</script>

<template>
  <div class="min-h-screen bg-gray-100 text-gray-900">
    <div
      class="max-w-sm mx-auto min-h-screen relative w-full"
      :class="showAppShell ? 'pb-24' : 'pb-0'"
    >
      <RouterView />
      <QuickAddButton v-if="showAppShell" />
    </div>
    <BottomTabBar v-if="showAppShell" />
  </div>
</template>
