<script setup lang="ts">
// Default portal chrome: persistent sidebar + topbar + scrollable content.
// Pages that should render without chrome (auth pages) set
// `definePageMeta({ layout: 'blank' })`.

const { toggle } = useSidebar()
const launcher = useAppLauncher()
const drawer = useNotificationDrawer()

// Touch tweaks composable so persisted theme/density/accent/role hydrate on
// first paint.
usePortalTweaks()
const partnerMode = usePartnerMode()
onMounted(() => partnerMode.hydrate())

// Keyboard shortcuts
onMounted(() => {
  const onKey = (e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === '[') {
      e.preventDefault()
      toggle()
    }
    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
      e.preventDefault()
      launcher.toggle()
    }
    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'n') {
      e.preventDefault()
      drawer.toggle()
    }
  }
  document.addEventListener('keydown', onKey)
  onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
})
</script>

<template>
  <div class="shell">
    <CustomerModeBanner />
    <div class="cols">
      <PortalSidebar />
      <main>
        <PortalTopbar />
        <div class="content">
          <slot />
        </div>
      </main>
    </div>

    <AppLauncher />
    <NotificationDrawer />
    <PortalTweaksPanel />
    <ToastStack />
  </div>
</template>

<style scoped>
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}
.cols { display: flex; flex: 1; min-height: 0; }

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { flex: 1; min-width: 0; overflow-y: auto; }
</style>
