Lesstime/frontend/app/layouts/default.vue

<template>
    <div class="h-screen overflow-hidden">
        <div class="flex h-full">
            <!-- Mobile sidebar overlay -->
            <Transition name="sidebar-overlay">
                <div
                    v-if="ui.sidebarOpen"
                    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
                    @click="ui.closeMobileSidebar()"
                />
            </Transition>

            <aside
                class="fixed inset-y-0 left-0 z-50 flex h-full flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500 transition-transform duration-300 lg:static lg:z-auto lg:translate-x-0"
                :class="[
                    ui.sidebarCollapsed ? 'lg:w-16' : 'lg:w-64',
                    ui.sidebarOpen ? 'w-64 translate-x-0' : '-translate-x-full',
                ]"
            >
                <div class="flex items-center overflow-hidden" :class="sidebarIsCollapsed ? 'justify-center p-3' : 'justify-between'">
                    <img
                        v-if="!sidebarIsCollapsed"
                        src="/malio.png"
                        alt="Logo"
                        class="w-auto"
                    />
                    <img
                        v-else
                        src="/LOGO_CARRE.png"
                        alt="Logo"
                        class="w-[46px] h-[55px]"
                    />
                    <button
                        class="mr-2 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors lg:hidden"
                        @click="ui.closeMobileSidebar()"
                    >
                        <Icon name="mdi:close" size="20" />
                    </button>
                </div>
                <nav class="flex-1 overflow-hidden" :class="sidebarIsCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
                    <!-- Sections dynamiques (/api/sidebar) : navigation globale + sections gated par rôle -->
                    <template v-for="(section, sIndex) in translatedSections" :key="section.label">
                        <p v-if="!sidebarIsCollapsed" class="px-4 pt-5 pb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400">
                            {{ section.label }}
                        </p>
                        <div v-else class="mx-2 my-3 border-t border-secondary-500" />
                        <SidebarLink
                            v-for="item in section.items"
                            :key="item.to"
                            :to="item.to"
                            :icon="item.icon"
                            :label="item.label"
                            :collapsed="sidebarIsCollapsed"
                            @click="ui.closeMobileSidebar()"
                        />

                        <!-- Items conservés côté client, insérés après la 1re section (cf. décision 3) -->
                        <template v-if="sIndex === 0">
                            <!-- Contextuel projet -->
                            <template v-if="currentProjectId">
                                <SidebarLink :to="`/projects/${currentProjectId}`" icon="mdi:view-column-outline" label="Kanban" :collapsed="sidebarIsCollapsed" sub exact @click="ui.closeMobileSidebar()" />
                                <SidebarLink :to="`/projects/${currentProjectId}/groups`" icon="mdi:tag-multiple-outline" label="Groupes" :collapsed="sidebarIsCollapsed" sub @click="ui.closeMobileSidebar()" />
                                <SidebarLink :to="`/projects/${currentProjectId}/archives`" icon="mdi:archive-outline" label="Archives" :collapsed="sidebarIsCollapsed" sub @click="ui.closeMobileSidebar()" />
                            </template>
                            <!-- Feature-flag : Documents -->
                            <SidebarLink v-if="isDocumentsVisible" to="/documents" icon="mdi:folder-network-outline" :label="$t('sharedFiles.sidebar.title')" :collapsed="sidebarIsCollapsed" @click="ui.closeMobileSidebar()" />
                            <!-- Feature-flag : Mail + badge -->
                            <div v-if="isMailVisible" class="relative">
                                <SidebarLink to="/mail" icon="mdi:email-outline" :label="$t('mail.sidebar.title')" :collapsed="sidebarIsCollapsed" @click="ui.closeMobileSidebar()" />
                                <span
                                    v-if="mailStore.globalUnreadCount > 0"
                                    class="pointer-events-none absolute right-3 top-1/2 flex h-5 min-w-5 -translate-y-1/2 items-center justify-center rounded-full bg-red-500 px-1 text-xs font-bold text-white"
                                    :class="{ 'right-1 top-1 translate-y-0': sidebarIsCollapsed }"
                                    :aria-label="`${mailStore.globalUnreadCount} messages non lus`"
                                >
                                    {{ mailStore.globalUnreadCount > 99 ? '99+' : mailStore.globalUnreadCount }}
                                </span>
                            </div>
                            <!-- User-flag : Mes absences (isEmployee — non couvert par le gate rôle) -->
                            <SidebarLink v-if="isEmployee" to="/absences" icon="mdi:umbrella-beach-outline" label="Mes absences" :collapsed="sidebarIsCollapsed" @click="ui.closeMobileSidebar()" />
                        </template>
                    </template>
                </nav>

                <div class="px-4 py-3">
                    <SidebarTimer :collapsed="sidebarIsCollapsed" />
                </div>

                <div class="flex items-center justify-center p-4">
                    <p v-if="!sidebarIsCollapsed" class="font-bold">v {{ version }}</p>
                </div>

                <!-- Collapse toggle button centered vertically on the sidebar edge -->
                <button
                    class="absolute top-1/2 -right-4 z-10 hidden h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-400 shadow-sm hover:text-neutral-700 transition-colors lg:flex"
                    :title="ui.sidebarCollapsed ? 'Ouvrir le menu' : 'Réduire le menu'"
                    @click="ui.toggleSidebar()"
                >
                    <Icon
                        :name="ui.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
                        size="18"
                    />
                </button>
            </aside>

            <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                <AppTopNav :user="auth.user" />
                <main class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
                    <div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12" />
                    <slot/>
                </main>
            </div>
        </div>

        <TimeEntryDrawer
            v-model="completeDrawerOpen"
            :entry="timerStore.pendingCompleteEntry"
            :users="refData.users"
            :projects="refData.projects"
            :tags="refData.tags"
            @saved="onCompleteSaved"
        />
    </div>
</template>

<script setup lang="ts">
import type { UserData } from '~/services/dto/user-data'
import type { Project } from '~/modules/project-management/services/dto/project'
import type { TaskTag } from '~/modules/project-management/services/dto/task-tag'
import { useAppVersion } from '~/composables/useAppVersion'
import type { HydraCollection } from '~/utils/api'
import { extractHydraMembers } from '~/utils/api'

const auth = useAuthStore()
const ui = useUiStore()
const mailStore = useMailStore()
const {version} = useAppVersion()
const route = useRoute()
const { t } = useI18n()
const { sections } = useSidebar()

// `/mail` est déclaré dans config/sidebar.php pour le gating module (disabledRoutes),
// mais son rendu visuel + badge non-lus est géré manuellement ci-dessous (feature-flag Mail).
// On le filtre des sections dynamiques pour éviter un doublon dans la nav.
const translatedSections = computed(() =>
    sections.value.map((section) => ({
        label: t(section.label),
        icon: section.icon,
        items: section.items
            .filter((item) => item.to !== '/mail')
            .map((item) => ({
                label: t(item.label),
                to: item.to,
                icon: item.icon,
            })),
    })),
)

const isEmployee = computed(() => Boolean(auth.user?.isEmployee))

const isMailVisible = computed(() => {
    const roles: string[] = auth.user?.roles ?? []
    return roles.includes('ROLE_USER') || roles.includes('ROLE_ADMIN')
})

const { enabled: shareEnabled, ensureLoaded: ensureShareStatus } = useShareStatus()
const isDocumentsVisible = computed(() => shareEnabled.value === true)

// On mobile, sidebar is always expanded (not collapsed icon mode)
const sidebarIsCollapsed = computed(() => {
    if (ui.sidebarOpen) return false
    return ui.sidebarCollapsed
})

// Close mobile sidebar on route change
watch(() => route.path, () => {
    ui.closeMobileSidebar()
})

const currentProjectId = computed(() => {
    const match = route.path.match(/^\/projects\/(\d+)/)
    return match ? match[1] : null
})

const timerStore = useTimerStore()

const baseTitle = ref('Lesstime')

useHead({
    titleTemplate: (title) => {
        baseTitle.value = title || 'Lesstime'
        return title || 'Lesstime'
    },
})

watch(
    [() => timerStore.elapsedFormatted, () => timerStore.isRunning, () => timerStore.activeEntry?.title],
    ([elapsed, running, label]) => {
        if (import.meta.server) return
        const base = baseTitle.value
        if (running) {
            document.title = label ? `${base} | ${elapsed} · ${label}` : `${base} | ${elapsed}`
        } else {
            document.title = base
        }
    },
)

onMounted(() => {
    timerStore.fetchActive()
    if (isMailVisible.value) {
        mailStore.startPolling()
    }
    ensureShareStatus()
})

watch(() => auth.user, (user) => {
    if (!user) {
        mailStore.stopPolling()
    } else {
        if (isMailVisible.value) {
            mailStore.startPolling()
        }
        ensureShareStatus()
    }
})

const completeDrawerOpen = ref(false)
const refData = reactive({
    users: [] as UserData[],
    projects: [] as Project[],
    tags: [] as TaskTag[],
    loaded: false,
})

async function loadRefData() {
    if (refData.loaded) return
    const api = useApi()
    const [usersData, projectsData, typesData] = await Promise.all([
        api.get<HydraCollection<UserData>>('/users'),
        api.get<HydraCollection<Project>>('/projects'),
        api.get<HydraCollection<TaskTag>>('/task_tags'),
    ])
    refData.users = extractHydraMembers(usersData)
    refData.projects = extractHydraMembers(projectsData)
    refData.tags = extractHydraMembers(typesData)
    refData.loaded = true
}

watch(() => timerStore.pendingCompleteEntry, async (entry) => {
    if (entry) {
        await loadRefData()
        completeDrawerOpen.value = true
    }
})

watch(completeDrawerOpen, (open) => {
    if (!open) {
        nextTick(() => {
            timerStore.clearPendingEntry()
        })
    }
})

function onCompleteSaved() {
    completeDrawerOpen.value = false
    nextTick(() => {
        timerStore.clearPendingEntry()
    })
}
</script>

<style scoped>
.sidebar-overlay-enter-active,
.sidebar-overlay-leave-active {
    transition: opacity 0.3s ease;
}
.sidebar-overlay-enter-from,
.sidebar-overlay-leave-to {
    opacity: 0;
}
</style>