<script setup lang="ts">
import { activeNote, updateNote } from '@/composables/useNotes'
import { viewModes, activeViewMode } from '@/composables/useViewMode'
const sideBarCollapsed = ref(false)
</script>

<template>
  <TopBar
    :side-bar-collapsed="sideBarCollapsed"
    @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
  />
  <div class="mx-auto flex min-h-full w-full max-w-app flex-grow">
    <SideBar
      :view-modes="viewModes"
      :active-view-mode="activeViewMode"
      @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
      class="mt-[50px] px-3 py-6"
    />
    <main
      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
      :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
    >
      <Note
        v-if="activeNote"
        :key="activeNote.id"
        :note="activeNote"
        class=""
        @update="(note) => updateNote(note.id, note)"
      />
    </main>
  </div>
</template>
