export const useUiStore = defineStore('ui', () => {
    const sidebarCollapsed = ref(false)
    const sidebarOpen = ref(false)

    if (import.meta.client) {
        const saved = localStorage.getItem('ui-sidebar-collapsed')
        if (saved !== null) {
            sidebarCollapsed.value = saved === 'true'
        }
    }

    watch(sidebarCollapsed, (val) => {
        if (import.meta.client) {
            localStorage.setItem('ui-sidebar-collapsed', String(val))
        }
    })

    function toggleSidebar() {
        sidebarCollapsed.value = !sidebarCollapsed.value
    }

    function openMobileSidebar() {
        sidebarOpen.value = true
    }

    function closeMobileSidebar() {
        sidebarOpen.value = false
    }

    return { sidebarCollapsed, sidebarOpen, toggleSidebar, openMobileSidebar, closeMobileSidebar }
})