<template>
  <div class="flex min-h-0 w-full flex-1 overflow-hidden">
    <AppSidebar />
    <div class="flex min-h-0 min-w-0 flex-1 flex-col">
      <main v-if="fullbleed" class="flex min-h-0 flex-1 flex-col pb-14 md:pb-0">
        <slot />
      </main>
      <main v-else class="flex-1 overflow-y-auto pb-14 md:pb-0">
        <div class="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-4 md:py-6">
          <slot />
        </div>
      </main>
      <MobileTabBar />
    </div>
  </div>
</template>

<script setup lang="ts">
// Coquille des vues authentifiées. Propriétaire unique du chargement initial et des abonnements
// temps réel (sessions/worktrees/groups) pour toute la durée de la session : fiabilise le badge
// de navigation, la palette ⌘K et la section « À traiter » quelle que soit la vue active.
import { onMounted, onUnmounted } from 'vue';
import { useSessionsStore } from '../../stores/sessions';
import { useWorktreesStore } from '../../stores/worktrees';
import { useGroupsStore } from '../../stores/groups';
import { useSettingsStore } from '../../stores/settings';
import AppSidebar from './AppSidebar.vue';
import MobileTabBar from './MobileTabBar.vue';

defineProps<{ fullbleed?: boolean }>();

const sessions = useSessionsStore();
const worktrees = useWorktreesStore();
const groups = useGroupsStore();
const settings = useSettingsStore();

onMounted(() => {
  void worktrees.fetchAll();
  void sessions.fetchSessions();
  void groups.fetchGroups();
  void settings.fetch(); // alimente l'icône de nav Gitea et la vue Réglages

  worktrees.startRealtime();
  sessions.startRealtime();
  groups.startRealtime();
});

onUnmounted(() => {
  worktrees.stopRealtime();
  sessions.stopRealtime();
  groups.stopRealtime();
});
</script>
