---
import { makeHierarchy } from '../lib/hierarchy';
import { getCollection } from 'astro:content';
import NotchedBox from './NotchedBox.astro';
import NoteHierarchy from './NoteHierarchy.astro';

const notes = await getCollection('notes');

const hierarchy = makeHierarchy(notes.map(note => [note.id, note.data.title]));

const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
const isActive = pathname.startsWith("notes");
---
<NotchedBox fillNotches={isActive ? 'left' : 'none'}>
  <div class="notes-header">Notes</div>
  <div class="note-links">
    <NoteHierarchy prefix="/notes" hierarchy={hierarchy} />
  </div>
</NotchedBox>

<style>
  .notes-header {
    color: var(--color-light-text);
    font-size: var(--font-size-lg);
  }
  .note-links {
    margin-left: 8px;
  }
</style>
