Displaying files as well.

src/lib/layouts/HeaderMain.svelte

@@ -1,8 +1,10 @@
-<div class="py-6 px-12">
+<div class="py-6 px-12 w-full h-full">
   <header>
-    <h3 class="text-xl font-bold mb-4 uppercase"><slot name="header" /></h3>
+    <h3 class="text-xl font-bold mb-4 uppercase">
+      <slot name="header" />
+    </h3>
   </header>
-  <main>
+  <main class="w-full h-full overflow-hidden">
     <slot name="main" />
   </main>
 </div>

src/routes/me/documents/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import HeaderMain from "$lib/layouts/HeaderMain.svelte";
   import { createQuery } from "../../../lib/wundergraph";
-
+  import HeaderMain from "$lib/layouts/HeaderMain.svelte";
   const filesQuery = createQuery({
     operationName: "Files",
   });
@@ -12,18 +11,47 @@
     <h1>Files</h1>
   </div>
 
-  <div slot="main">
-    <div class="w-full h-full overflow-y-auto">
-      <div class="w-full h-full results">
-        {#if $filesQuery.isLoading}
-          <p>Loading...</p>
-        {:else if $filesQuery.error}
-          <pre>Error: {JSON.stringify($filesQuery.error, null, 2)}</pre>
-        {:else}
-          <pre>{JSON.stringify($filesQuery.data, null, 2)}</pre>
-          {#each $filesQuery.data.system_db_files as file}{/each}
-        {/if}
-      </div>
+  <div slot="main" class="h-full w-full overflow-scroll">
+    <div class="w-full h-full overflow-scroll">
+      {#if $filesQuery.isLoading}
+        <p>Loading...</p>
+      {:else if $filesQuery.error}
+        <pre>Error: {JSON.stringify($filesQuery.error, null, 2)}</pre>
+      {:else}
+        <div class="space-y-4">
+          {#each $filesQuery.data.system_db_files as file}
+            <div class="flex">
+              <div class="w-1/4">
+                {#if file.type === "application/pdf"}
+                  <object
+                    data={`https://directus.andert.me/assets/${
+                      file.id
+                    }?access_token=${
+                      import.meta.env.VITE_DIRECTUS_TEMPORARY_ACCESS_TOKEN
+                    }`}
+                    type="application/pdf"
+                    width="100%"
+                    height="200px"
+                  />
+                {:else}
+                  <img
+                    src={`https://directus.andert.me/assets/${
+                      file.id
+                    }?access_token=${
+                      import.meta.env.VITE_DIRECTUS_TEMPORARY_ACCESS_TOKEN
+                    }`}
+                    width="200"
+                  />
+                {/if}
+              </div>
+              <div class="w-3/4 p-4">
+                <h2>{file.title}</h2>
+                <p>{file.id}</p>
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
     </div>
   </div>
 </HeaderMain>

src/routes/me/projects/+page.svelte

@@ -12,17 +12,15 @@
     <h1>Projects</h1>
   </div>
 
-  <div slot="main">
-    <div class="w-full h-full overflow-y-auto">
-      <div class="w-full h-full results">
-        {#if $projectsQuery.isLoading}
-          <p>Loading...</p>
-        {:else if $projectsQuery.error}
-          <pre>Error: {JSON.stringify($projectsQuery.error, null, 2)}</pre>
-        {:else}
-          <pre>{JSON.stringify($projectsQuery.data, null, 2)}</pre>
-        {/if}
-      </div>
+  <div slot="main" class="h-full w-full overflow-scroll">
+    <div class="w-full h-full overflow-scroll">
+      {#if $projectsQuery.isLoading}
+        <p>Loading...</p>
+      {:else if $projectsQuery.error}
+        <pre>Error: {JSON.stringify($projectsQuery.error, null, 2)}</pre>
+      {:else}
+        <pre>{JSON.stringify($projectsQuery.data, null, 2)}</pre>
+      {/if}
     </div>
   </div>
 </HeaderMain>