Added FileExplorer component

src/components/App/Search.astro

@@ -6,7 +6,6 @@ import PageFindSearch from 'astro-pagefind/components/Search'
   id="search-dialog"
   class:list={[
     'pagefind',
-    'animate-in fade-in',
     'backdrop:backdrop-blur backdrop:backdrop-saturate-150',
     'rounded-xl bg-base w-full md:max-w-2xl mt-0 sm:mt-28',
   ]}

src/components/FileExplorer/FileExplorer.astro

@@ -0,0 +1,38 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import fetchFileList from '../../utils/fetchFileList.ts'
+import type { File } from '../../utils/fetchFileList.ts'
+import FileListing from './FileListing.astro'
+import { Icon } from 'astro-icon/components'
+
+interface Props {
+  noteId: CollectionEntry<'notes'>['id']
+}
+
+const { noteId } = Astro.props
+
+let files: File[] = []
+const fileListResponse = await fetchFileList(noteId)
+
+if (fileListResponse && fileListResponse.status === 200) {
+  files = (await fileListResponse.json()) ?? []
+
+  // Remove index.md from the list
+  files = files.filter((file) => file.name !== 'index.md')
+
+  // Sort directories first
+  files.sort((a, z) => (a.type === 'dir' && z.type !== 'dir' ? -1 : 1))
+}
+---
+
+<span class="flex items-center gap-2 py-1 ml-2 font-light">
+  <Icon name="material-symbols:file-copy-rounded" class="w-6 h-6" />
+  <p>EXPLORER</p>
+</span>
+{
+  files.length > 0 ? (
+    <FileListing {files} />
+  ) : (
+    <p class="p-2 text-sm italic">No files for this note</p>
+  )
+}

src/components/FileExplorer/FileListing.astro

@@ -0,0 +1,37 @@
+---
+import { Icon } from 'astro-icon/components'
+import type { File } from '../../utils/fetchFileList.ts'
+
+interface Props {
+  files: File[]
+}
+
+const { files } = Astro.props
+---
+
+<ul class="ml-4 py-2">
+  {
+    files.map((file) => (
+      <li class="px-2">
+        <a
+          class="group/file inline-flex mb-2 transition-all line-clamp-1 hover:hover:no-underline"
+          href={file.html_url}
+          target="_blank"
+          title={file.name}
+        >
+          <Icon
+            class="w-5 h-5 mr-2 shrink-0"
+            name={
+              file.type === 'dir'
+                ? 'material-symbols:folder'
+                : 'material-symbols:lab-profile-outline'
+            }
+          />
+          <p class="basis-full underline group-hover/file:no-underline leading-5">
+            {file.name}
+          </p>
+        </a>
+      </li>
+    ))
+  }
+</ul>

src/components/Notes/Note.astro

@@ -3,10 +3,10 @@ import { render } from 'astro:content'
 import getTitle from '../../utils/getTitle'
 import type { CollectionEntry } from 'astro:content'
 import PageLayout from '../../layouts/PageLayout.astro'
-import FileListing from './FileListing.astro'
 import Image from '../../components/Notes/Image.astro'
 import SubHeader from './SubHeader.astro'
 import Tags from './Tags.astro'
+import NotesAside from './NotesAside.astro'
 
 interface Props {
   note: CollectionEntry<'notes'>
@@ -19,11 +19,7 @@ const { Content } = await render(note)
 
 <PageLayout title={getTitle(data.title)} description={data.description}>
   <div class="flex items-start">
-    <aside
-      class="basis-64 shrink-0 sticky top-20 mr-4 bg-base transition-all rounded-xl p-2"
-    >
-      <FileListing {note} />
-    </aside>
+    <NotesAside {note} />
 
     <section data-pagefind-body>
       <article class="article base-card grow mb-4">
@@ -45,3 +41,12 @@ const { Content } = await render(note)
     </section>
   </div>
 </PageLayout>
+
+<script>
+  const drawerTrigger = document.getElementById(
+    'trigger-explorer-drawer'
+  ) as HTMLButtonElement
+  const drawer = document.getElementById('explorer-drawer') as HTMLDialogElement
+
+  drawerTrigger.addEventListener('click', () => drawer.showModal())
+</script>

src/components/Notes/NotesAside.astro

@@ -0,0 +1,35 @@
+---
+import type { CollectionEntry } from 'astro:content'
+import FileExplorer from '../FileExplorer/FileExplorer.astro'
+import { Icon } from 'astro-icon/components'
+import Drawer from '../Drawer/Drawer.astro'
+import IconButton from '../Buttons/IconButton.astro'
+
+interface Props {
+  note: CollectionEntry<'notes'>
+}
+
+const { note } = Astro.props
+---
+
+<aside
+  class:list={[
+    'pt-2 sticky top-20 bg-base mr-2 rounded-r-xl',
+    'sm:mr-4',
+    'md:basis-64 md:shrink-0 md:mr-4 md:p-2 md:rounded-xl',
+  ]}
+>
+  <IconButton id="trigger-explorer-drawer" class="md:hidden">
+    <Icon
+      name="material-symbols:drag-handle-rounded"
+      class="w-8 h-8 rotate-90 text-secondary"
+    />
+  </IconButton>
+  <Drawer id="explorer-drawer">
+    <FileExplorer noteId={note.id} />
+  </Drawer>
+
+  <section class="hidden md:block">
+    <FileExplorer noteId={note.id} />
+  </section>
+</aside>

src/utils/fetchFileList.ts

@@ -8,7 +8,7 @@ export interface File {
   url: string
   html_url: string
   git_url: string
-  download_url: string
+  download_url: string | null
   type: string
   _links: {
     self: string