oysqn.app/app/app.vue

<template>
  <IonApp>
    <!-- Offline indicator — floats above all pages -->
    <div v-if="!isOnline" class="offline-chip">
      <IonIcon :icon="cloudOfflineOutline" />
      <span>Offline</span>
    </div>

    <IonSplitPane content-id="main-content">
    <IonMenu v-if="authStore.user" content-id="main-content" menu-id="main-menu">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>OYS Borrow a Boat</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList lines="none">
          <!-- All authenticated users -->
          <IonItem button router-link="/" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="homeOutline" />
            <IonLabel>Home</IonLabel>
          </IonItem>
          <IonItem button router-link="/schedule" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="calendarOutline" />
            <IonLabel>Schedule</IonLabel>
          </IonItem>
          <IonItem button router-link="/boat" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="boatOutline" />
            <IonLabel>Boats</IonLabel>
          </IonItem>
          <IonItem button router-link="/reference" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="bookOutline" />
            <IonLabel>Reference</IonLabel>
          </IonItem>
          <IonItem button router-link="/profile" router-direction="root" @click="closeMenu">
            <IonIcon slot="start" :icon="personOutline" />
            <IonLabel>Profile</IonLabel>
          </IonItem>

          <!-- Boatswain + Admin: schedule management -->
          <template v-if="authStore.isBoatswain">
            <IonItemDivider>
              <IonLabel>Management</IonLabel>
            </IonItemDivider>
            <IonItem button router-link="/admin/intervals" router-direction="root" @click="closeMenu">
              <IonIcon slot="start" :icon="calendarNumberOutline" />
              <IonLabel>Manage Slots</IonLabel>
            </IonItem>
            <IonItem button router-link="/admin/templates" router-direction="root" @click="closeMenu">
              <IonIcon slot="start" :icon="layersOutline" />
              <IonLabel>Templates</IonLabel>
            </IonItem>
            <IonItem button router-link="/admin/reservations" router-direction="root" @click="closeMenu">
              <IonIcon slot="start" :icon="bookmarkOutline" />
              <IonLabel>Manage Bookings</IonLabel>
            </IonItem>
          </template>

          <!-- Admin only -->
          <template v-if="authStore.isAdmin">
            <IonItem button router-link="/admin/user" router-direction="root" @click="closeMenu">
              <IonIcon slot="start" :icon="peopleOutline" />
              <IonLabel>Users</IonLabel>
            </IonItem>
            <IonItem button router-link="/admin/boat" router-direction="root" @click="closeMenu">
              <IonIcon slot="start" :icon="constructOutline" />
              <IonLabel>Manage Boats</IonLabel>
            </IonItem>
            <IonItem button router-link="/admin/config" router-direction="root" @click="closeMenu">
              <IonIcon slot="start" :icon="settingsOutline" />
              <IonLabel>Booking Rules</IonLabel>
            </IonItem>
          </template>

          <!-- Sign out -->
          <IonItemDivider />
          <IonItem button @click="signOut">
            <IonIcon slot="start" :icon="logOutOutline" />
            <IonLabel>Sign Out</IonLabel>
            <IonNote slot="end">{{ authStore.displayName }}</IonNote>
          </IonItem>
        </IonList>
      </IonContent>
    </IonMenu>

    <IonRouterOutlet id="main-content" />
    </IonSplitPane>
  </IonApp>
</template>

<script setup lang="ts">
import {
  IonApp, IonSplitPane, IonMenu, IonHeader, IonToolbar, IonTitle,
  IonContent, IonList, IonItem, IonItemDivider, IonIcon, IonLabel, IonNote,
  IonRouterOutlet, menuController,
} from '@ionic/vue'
import {
  homeOutline, calendarOutline, boatOutline, personOutline,
  bookOutline, calendarNumberOutline, peopleOutline, constructOutline, logOutOutline,
  layersOutline, settingsOutline, bookmarkOutline, cloudOfflineOutline,
} from 'ionicons/icons'
import { useAuthStore } from '~/stores/auth'
import { useOfflineStatus } from '~/composables/useOfflineStatus'
import { useAppCache } from '~/composables/useAppCache'

const authStore = useAuthStore()
const { isOnline } = useOfflineStatus()
const cache = useAppCache()

async function closeMenu() {
  await menuController.close('main-menu')
}

async function signOut() {
  await closeMenu()
  await authStore.signOut()
}

// Fetch member profile on app load (populates role for menu visibility)
onMounted(() => {
  if (authStore.user) authStore.fetchMember()
})

// Re-fetch when user changes (e.g., after login)
watch(() => authStore.user, (u) => {
  if (u) authStore.fetchMember()
  else authStore.member = null
})

// ── Realtime: keep cache fresh while online ──────────────────────────────────
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const supabase = useSupabaseClient() as any

type ReservationPayload = {
  eventType: 'INSERT' | 'UPDATE' | 'DELETE'
  new: { id: string; boat_id: string; start_time: string; end_time: string; status: string } | null
  old: { id: string; boat_id: string; start_time: string; end_time: string; status: string } | null
}

onMounted(() => {
  supabase
    .channel('app-cache-sync')
    .on('postgres_changes', { event: '*', schema: 'public', table: 'reservations' },
      (payload: ReservationPayload) => {
        const row = payload.new ?? payload.old
        if (!row?.start_time) return
        const wk = cache.weekKey(row.start_time)
        const slotsKey = `slots:${wk}`
        type SlotRow = { id: string; boat_id: string; start_time: string; end_time: string; status: string }
        const cached = cache.peek<SlotRow[]>(slotsKey) ?? []
        let updated: SlotRow[]
        if (payload.eventType === 'INSERT' && payload.new) {
          const { id, boat_id, start_time, end_time, status } = payload.new
          updated = [...cached, { id, boat_id, start_time, end_time, status }]
        } else if (payload.eventType === 'UPDATE' && payload.new) {
          updated = cached.map(s => s.id === payload.new!.id ? { ...s, status: payload.new!.status } : s)
        } else {
          updated = cached.filter(s => s.id !== (payload.old?.id))
        }
        cache.set(slotsKey, updated)
      })
    .on('postgres_changes', { event: '*', schema: 'public', table: 'intervals' },
      () => cache.invalidatePrefix('intervals:'))
    .on('postgres_changes', { event: '*', schema: 'public', table: 'boats' },
      async () => {
        cache.invalidate('boats')
        const { data } = await supabase.from('boats').select('*').order('name')
        if (data) cache.set('boats', data)
      })
    .subscribe()
})
</script>

<style scoped>
.offline-chip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: 12px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--ion-color-warning);
  color: var(--ion-color-warning-contrast);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
</style>