save point

.gitignore

@@ -1,3 +1,2 @@
 *.DS_Store
 node_modules
-dist

src/lib/ImportNotesZip.svelte

@@ -14,14 +14,9 @@
       .then((zip) => {
         zip.forEach(async (relativePath, file) => {
           if (relativePath.startsWith('__MACOSX')) { return };
-
-          console.log('file @@@@@@@@@@@@@ ', file);
-
           const date = file.date.getTime();
-
           file.async('string')
             .then(async (body) => {
-              console.log('body @@@@@@@@@@@@@ ', body);
               await db$.notes.insert({
                 guid: uuidv4(),
                 name: file.name.split('/').pop().replace(/\.[^/.]+$/, ''),

src/lib/NoteDetail.svelte

@@ -3,7 +3,7 @@
   import { onMount } from 'svelte';
   import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
 
-  import { selectedNote, bodyText, noteListHeight } from './store';
+  import { selectedNote, bodyText } from './store';
 
   import { debounce } from '../utils/debounce';
   import { isEmptyObject } from '../utils/isEmptyObject';
@@ -22,24 +22,22 @@
       },
     });
   };
-
-  $: noteEditorHeightOffset = 80 + $noteListHeight;
 </script>
 
 <svelte:window bind:innerHeight />
 
-<div class="relative overflow-hidden" >
-  {#if !isEmptyObject($selectedNote)}
+<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>
+    </div>
+  {:else}
     <textarea
       id="body-editor"
       class="block w-full h-full relative no-resize border-0 outline-none border-box"
       bind:value={$bodyText}
       on:keydown={handleDebounceSave}
     />
-  {:else}
-    <div class="placeholder relative">
-      <h2>No Note Selected</h2>
-    </div>
   {/if}
 </div>
 
@@ -49,14 +47,13 @@
     color: #808080;
   }
   textarea {
-    padding: 6px;
-    background: #1a1a1a;
+    padding: 0 1rem;
+    background: #131313;
     color: rgba(255, 255, 255, 0.831);
-    font-size: 16px;
+    font-size: 14px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
+    line-height: 1.3;
     border-radius: none;
     height: 100%;
   }
-  .placeholder {
-    top: -20%;
-  }
 </style>

src/lib/NoteList.svelte

@@ -112,16 +112,18 @@
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-    list-style-type: none;
-    border-bottom: none;
+    background-color: #181a1c;
   }
   li {
-    padding: 4px 8px;
     display: flex;
+    align-items: center;
     font-size: 14px;
+    height: 35px;
+    padding: 10px;
     justify-content: space-between;
     font-family: Helvetica, sans-serif;
     user-select: none;
+    box-sizing: border-box;
     color: rgb(205, 205, 205);
   }
   li:nth-child(odd) {

src/lib/ResizeHandle.svelte

@@ -7,9 +7,11 @@
   const startResize = () => (dragging = true);
   const stopResize = () => (dragging = false);
 
+  $:console.log('ddd', $noteListHeight)
+
   const handleResize = () => {
     if (!dragging) return;
-    noteListHeight.set($mousePosition.y >= 55 && $mousePosition.y - 55);
+    $noteListHeight = $mousePosition.y >= 42 && $mousePosition.y - 42;
     // TODO now check for page size and never allow the resize bar to go past the floor!
     return;
   };
@@ -25,15 +27,7 @@
 <div
   on:mousedown={startResize}
   on:touchstart={startResize}
-  class="w-full resize-bar select-none"
+  class="w-full resize-bar select-none row-resize h-[10px]"
   role="button"
   tabindex="-1"
 />
-
-<style>
-  .resize-bar {
-    height: 10px;
-    cursor: row-resize;
-    background: #1f1f1f;
-  }
-</style>

src/lib/store.js

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { v4 as uuidv4 } from 'uuid';
 
 import { addRxPlugin, createRxDatabase } from 'rxdb';
 import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie';
@@ -24,9 +25,35 @@ const _create = async () => {
   const db = await createRxDatabase({
     name: 'nvauxdb',
     storage: getRxStorageDexie(),
-    ignoreDuplicate: true
+    // ignoreDuplicate: true
   });
+
   await db.addCollections({ notes: { schema } });
+
+//   const date = new Date().getTime();
+//   if (db.notes) {
+//     await db.notes.insert({
+//       guid: uuidv4(),
+//       name: '🚀 Welcome to nvAux!',
+//       body: `
+// Welcome aboard! nvAux is your new personal command center, designed to capture your thoughts and ideas swiftly and securely. Inspired by the principles of OmniFocus and David Allen's 'Getting Things Done', nvAux is more than just a note-taking app—it's a productivity powerhouse.
+
+// Here's a quick rundown of what you can do with nvAux:
+
+// Omni-Modal Input: Type or draw your thoughts into existence.
+// Offline-First: Your notes are always available, online or offline.
+// Encrypted Data: Your privacy is our priority. All your notes are encrypted.
+// Single HTML File: Carry nvAux in your pocket, on any device.
+// Dark/Light Theme: Work in the environment you prefer.
+// Dive into our User Guide to explore these features in detail, or check out our FAQs if you have any questions. Happy note-taking!
+
+// The nvAux Team
+//   `,
+//       createdAt: date,
+//       updatedAt: date
+//     });
+//   };
+
   dbPromise = db;
   return db;
 };

src/lib/style.css

@@ -12,7 +12,7 @@ a { color: inherit; text-decoration: inherit; }
 button, input, optgroup, select, textarea { padding: 0; line-height: inherit; color: inherit; }
 pre, code, kbd, samp { font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
 
-html, body { background-color: #262728; margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 0.9rem; height: 100%; width: 100%; overflow: hidden;}
+html, body { background-color: #151618; margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 0.9rem; height: 100%; width: 100%; overflow: hidden;}
 .w-screen {  width: 100vw; }
 .h-screen {  height: 100vh; }
 .flex { display: flex; }
@@ -54,3 +54,5 @@ html, body { background-color: #262728; margin: 0; padding: 0; font-family: Verd
 .bg-transparent { background-color: transparent; }
 .overflow-hidden { overflow: hidden; }
 .elipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }
+.row-resize { cursor: row-resize; }
+.h-\[10px\] { height: 10px; }

src/utils/isEmptyObject.js

@@ -1 +1,10 @@
-export const isEmptyObject = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
+// export const isEmptyObject = (/** @type {{ constructor?: any; }} */ obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
+
+export const isEmptyObject = (obj) => {
+  for (const prop in obj) {
+    if (Object.hasOwn(obj, prop)) {
+      return false;
+    }
+  }
+  return true;
+}