From 025dc8ed13b583d7dd039cd24ddd857da7cd4e12 Mon Sep 17 00:00:00 2001
From: John <john.connor.sec7@gmail.com>
Date: Tue, 31 Dec 2024 20:04:59 -0500
Subject: [PATCH] !NOTEDRAWER IS NOW CENTERED IN VIEWPORT!

---
 .../ui/noteDrawer/NoteDrawer.svelte           | 56 +++++++++++--------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/web/src/lib/components/ui/noteDrawer/NoteDrawer.svelte b/web/src/lib/components/ui/noteDrawer/NoteDrawer.svelte
index 5f88eeb8..8b3c37af 100644
--- a/web/src/lib/components/ui/noteDrawer/NoteDrawer.svelte
+++ b/web/src/lib/components/ui/noteDrawer/NoteDrawer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Drawer, getDrawerStore, getToastStore } from '@skeletonlabs/skeleton';
-  import type { DrawerSettings, DrawerStore } from '@skeletonlabs/skeleton';
+  import type { DrawerStore } from '@skeletonlabs/skeleton';
   import { onMount } from 'svelte';
   import { noteStore } from '$lib/store/note-store';
   import { afterNavigate, beforeNavigate } from '$app/navigation'; 
@@ -80,10 +80,10 @@
   });
 </script>
 
-<Drawer width="w-[40%]" padding="p-4">
+<Drawer width="w-[40%]" class="flex flex-col h-[calc(100vh-theme(spacing.32))] p-4 mt-16">
   {#if $drawerStore.open}
-    <div class="space-y-4">
-      <header class="flex justify-between items-center">
+    <div class="flex flex-col h-full">
+      <header class="flex-none flex justify-between items-center">
         <h2 class="m-2 p-1 h2">Notes</h2>
         <p class="p-2 opacity-70">Notes are saved to <code>`src/lib/content/inbox`</code></p>
         <p class="p-2 opacity-70">Ctrl + S to save</p>
@@ -93,33 +93,43 @@
           </span>
         {/if}
       </header>
-      <div class="m-4">
+      <div class="overflow-auto">
+      <div class="flex-1 p-4 justify-center items-center m-4">
         <textarea
           bind:this={textareaEl}
           bind:value={$noteStore.content}
           on:input={adjustTextareaHeight}
           on:keydown={handleKeydown}
-          class="w-full min-h-screen p-2 rounded-container-token text-primary-800 resize-none"
+          class="w-full min-h-96 p-2 rounded-container-token text-primary-800"
           placeholder="Enter your text here..."
         />
       </div>
-      <footer class="flex justify-between pb-4 items-center">
-        <span class="text-sm opacity-70">
-          {#if $noteStore.isDirty}
-            Unsaved changes
-          {/if}
-        </span>
-        <button
-          class="btn px-4 variant-filled-primary"
-          on:click={saveContent}
-        >
-          {#if saving}
-            Saving...
-          {:else}
-            Save
-          {/if}
-        </button>
-      </footer>
+      </div>
+        <footer class="flex justify-between p-4 items-center">
+          <span class="text-sm opacity-70">
+            {#if $noteStore.isDirty}
+              Unsaved changes
+            {/if}
+          </span>
+          <div class="flex gap-2 mr-5">
+            <button
+              class="btn px-4 variant-filled-primary"
+              on:click={noteStore.reset}
+            >
+              Reset
+            </button>
+            <button
+              class="btn px-4 variant-filled-primary"
+              on:click={saveContent}
+            >
+              {#if saving}
+                Saving...
+              {:else}
+                Save
+              {/if}
+            </button>
+          </div>
+        </footer>
     </div>
   {/if}
 </Drawer>