webapp/app/layouts/topnav.vue

<template>
  <div class="min-h-screen flex flex-col bg-base-200">
    <!-- Main Navigation (Logo + Tabs + User) -->
    <MainNavigation
      :session-checked="sessionChecked"
      :logged-in="isLoggedIn"
      :user-avatar-svg="userAvatarSvg"
      :user-name="userName"
      :user-initials="userInitials"
      :theme="theme"
      :user-data="userData"
      :is-seller="isSeller"
      @toggle-theme="toggleTheme"
      @sign-out="onClickSignOut"
      @sign-in="signIn()"
      @switch-team="switchToTeam"
    />

    <!-- Global Search Bar -->
    <GlobalSearchBar v-if="showSearch" class="border-b border-base-300" />

    <!-- Sub Navigation (section-specific tabs) -->
    <SubNavigation :section="currentSection" />

    <!-- Page content -->
    <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6 py-4">
      <slot />
    </main>
  </div>
</template>

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
const siteUrl = runtimeConfig.public.siteUrl || 'https://optovia.ru/'
const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
const route = useRoute()

// Theme state
const theme = useState<'default' | 'night'>('theme', () => 'default')

// User data state (shared across layouts)
const userData = useState<{
  id?: string
  firstName?: string
  lastName?: string
  avatarId?: string
  activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: any }
  activeTeamId?: string
  teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
} | null>('me', () => null)

const sessionChecked = ref(false)
const userAvatarSvg = useState('user-avatar-svg', () => '')
const lastAvatarSeed = useState('user-avatar-seed', () => '')

const isSeller = computed(() => {
  return userData.value?.activeTeam?.teamType === 'SELLER'
})

const isLoggedIn = computed(() => loggedIn.value || !!userData.value?.id)

const userName = computed(() => {
  return userData.value?.firstName || 'User'
})

const userInitials = computed(() => {
  const first = userData.value?.firstName?.charAt(0) || ''
  const last = userData.value?.lastName?.charAt(0) || ''
  if (first || last) return (first + last).toUpperCase()
  return '?'
})

// Determine current section from route
const currentSection = computed(() => {
  const path = route.path
  if (path.startsWith('/catalog') || path === '/') return 'catalog'
  if (path.includes('/clientarea/offers')) return 'seller'
  if (path.includes('/clientarea/orders') || path.includes('/clientarea/addresses') || path.includes('/clientarea/billing')) return 'orders'
  if (path.includes('/clientarea')) return 'settings'
  return 'catalog'
})

// Show search bar only on main page
const showSearch = computed(() => {
  return route.path === '/' || route.path === '/en' || route.path === '/ru'
})

// Avatar generation
const generateUserAvatar = async (seed: string) => {
  if (!seed) return
  try {
    const response = await fetch(`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b6e3f4,c0aede,d1d4f9`)
    if (response.ok) {
      userAvatarSvg.value = await response.text()
      lastAvatarSeed.value = seed
    }
  } catch (error) {
    console.error('Error generating avatar:', error)
  }
}

const { setActiveTeam } = useActiveTeam()
const { mutate } = useGraphQL()
const locationStore = useLocationStore()

const syncUserUi = async () => {
  if (!userData.value) {
    locationStore.clear()
    return
  }

  if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
    setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
  }

  const seed = userData.value.avatarId || userData.value.id || userData.value.firstName || 'default'

  if (!userAvatarSvg.value || lastAvatarSeed.value !== seed) {
    userAvatarSvg.value = ''
    await generateUserAvatar(seed)
  }

  locationStore.setFromUserData(userData.value.activeTeam?.selectedLocation)
}

watch(userData, () => {
  void syncUserUi()
}, { immediate: true })

// Check session
await fetchSession().catch(() => {})
sessionChecked.value = true

const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string }) => {
  if (!team?.id) return

  try {
    const { SwitchTeamDocument } = await import('~/composables/graphql/user/teams-generated')
    const result = await mutate(SwitchTeamDocument, { teamId: team.id }, 'user', 'teams')

    if (result.switchTeam?.user && userData.value) {
      userData.value.activeTeam = team as typeof userData.value.activeTeam
      userData.value.activeTeamId = team.id
      if (team.logtoOrgId) {
        setActiveTeam(team.id, team.logtoOrgId)
      }
    }
  } catch (err) {
    console.error('Failed to switch team:', err)
  }
}

const onClickSignOut = () => {
  signOut(siteUrl)
}

const applyTheme = (value: 'default' | 'night') => {
  if (import.meta.client) {
    if (value === 'default') {
      document.documentElement.removeAttribute('data-theme')
    } else {
      document.documentElement.setAttribute('data-theme', value)
    }
    localStorage.setItem('theme', value)
  }
}

onMounted(() => {
  const stored = import.meta.client ? localStorage.getItem('theme') : null
  if (stored === 'night' || stored === 'default') {
    theme.value = stored
  }
  applyTheme(theme.value)
})

watch(theme, (value) => applyTheme(value))

const toggleTheme = () => {
  theme.value = theme.value === 'night' ? 'default' : 'night'
}
</script>