save point

matterofabstract · Jul 18, 2023 · ac90d1a · ac90d1a
1 parent 7b2622e
commit ac90d1a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 18 deletions.
diff --git a/src/lib/NoteDetail.svelte b/src/lib/NoteDetail.svelte
@@ -3,7 +3,7 @@
   import { onMount } from 'svelte';
   import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
 
-  import { db, selectedNote } from './store';
+  import { selectedNote, bodyText } from './store';
 
   import { debounce } from '../utils/debounce';
   import { isEmptyObject } from '../utils/isEmptyObject';
@@ -12,14 +12,17 @@
 
   let innerHeight;
 
-  onMount(() => addRxPlugin(RxDBUpdatePlugin));
+  onMount(() => {
+    addRxPlugin(RxDBUpdatePlugin);
+    if ($selectedNote.body) $bodyText = $selectedNote.body;
+  });
 
-  const handleDebounceSave = debounce(() => !isEmptyObject($selectedNote) && updateNote(), 230);
+  const handleDebounceSave = debounce(() => !isEmptyObject($selectedNote) && updateNote(), 500);
 
   const updateNote = async () => {
     await $selectedNote.update({
       $set: {
-        body: $selectedNote.body,
+        body: $bodyText,
         updatedAt: new Date().getTime(),
       },
     });
@@ -31,31 +34,27 @@
 <div class="relative overflow-hidden h-full">
   {#if isEmptyObject($selectedNote)}
     <div class="relative w-full h-full flex items-center justify-center">
-      <h2>No Note Selected</h2>
+      <h2 style="font-size: 18px; color: #525962">No Note Selected</h2>
     </div>
   {:else if $selectedNote.guid === '00000000-0000-0000-0000-000000000000'}
     <Settings />
   {:else}
     <textarea
       id="body-editor"
       class="block w-full h-full relative no-resize border-0 outline-none border-box"
-      bind:value={$selectedNote.body}
+      bind:value={$bodyText}
       on:keydown={handleDebounceSave}
     />
   {/if}
 </div>
 
 <style>
-  h2 {
-    font-size: 18px;
-    color: #808080;
-  }
   textarea {
-    padding: 0 1rem;
+    padding: 4px 15px;
     background: #131313;
     color: rgba(255, 255, 255, 0.831);
     font-size: 14px;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
     line-height: 1.3;
     border-radius: none;
     height: 100%;

diff --git a/src/lib/NoteList.svelte b/src/lib/NoteList.svelte
@@ -111,6 +111,8 @@
     overflow-y: auto;
     overflow-x: hidden;
     background-color: #1c1f21;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
   }
   li {
     display: flex;

diff --git a/src/lib/OmniBar.svelte b/src/lib/OmniBar.svelte
@@ -42,8 +42,8 @@
 <svelte:window on:keydown={clearSelection} />
 
 <div
-  class="omnibar flex items-center border-box border-b"
-  style="border-color: #2e3338; background-color: #181a1c; height: 42px; padding-left: 10px;"
+  class="omnibar flex items-center border-box"
+  style="background-color: #181a1c; height: 42px; padding-left: 10px;"
 >
   <div class="input-wrapper flex-grow flex items-center">
     <input

diff --git a/src/lib/Settings.svelte b/src/lib/Settings.svelte
@@ -11,7 +11,7 @@
   };
 </script>
 
-<div class="px-2 text-white">
+<div class="text-white" style="padding: 0 15px;">
   <h2 style="font-size: 20px; line-height: 0;">nvAux Settings</h2>
   <div class="relative">
     {#await db().notes.find().exec()}
@@ -30,4 +30,5 @@
       style="background: #b41111;">Reset Database</button
     >
   </div>
+  <p>Hack on <a href="https://github.com/matterofabstract/nvaux" target="_blank" style="color: #ed0078; text-decoration: underline;">nvAux @ GitHub</a></p>
 </div>
diff --git a/src/lib/store.js b/src/lib/store.js
@@ -33,12 +33,11 @@ const _create = async () => {
   const notes = await db.notes.find().exec();
 
   if (notes.length === 0) {
-    const date = new Date().getTime();
     await db.notes.insert({
       guid: '00000000-0000-0000-0000-000000000000',
       name: '⚙️ nvAux Settings...',
-      createdAt: date,
-      updatedAt: date
+      createdAt: new Date().getTime(),
+      updatedAt: new Date().getTime()
     });
 
     setTimeout (() => {