save point

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

Hide file tree

Showing 11 changed files with 145 additions and 164 deletions.
diff --git a/index.html b/index.html
diff --git a/src/App.svelte b/src/App.svelte
@@ -3,11 +3,13 @@
   import NoteList from './lib/NoteList.svelte';
   import ResizeHandle from './lib/ResizeHandle.svelte';
   import NoteDetail from './lib/NoteDetail.svelte';
+  import StatusBar from './lib/StatusBar.svelte';
 </script>
 
 <main class="w-screen h-screen overflow-hidden flex flex-col">
   <OmniBar />
   <NoteList />
   <ResizeHandle />
   <NoteDetail />
+  <StatusBar />
 </main>
diff --git a/src/lib/DownloadNotesZip.svelte b/src/lib/DownloadNotesZip.svelte
@@ -16,6 +16,6 @@
   };
 </script>
 
-<button on:click={handleDownloadZip} class="bg-transparent">
-    Download Notes (.zip)
+<button on:click={handleDownloadZip} class="btn bg-gray-800" style="font-size: 14px;">
+    Download Notes
 </button>
diff --git a/src/lib/ImportNotesZip.svelte b/src/lib/ImportNotesZip.svelte
@@ -34,18 +34,13 @@
   };
 </script>
 
-<div>
-  <label for="file-upload">
-    Import Notes...
+  <label for="file-upload" class="btn bg-gray-800">
+    Import Notes
   </label>
-  <input id="file-upload" type="file" bind:files on:change={handleImport} />
-</div>
-
-<style>
-  input {
-    display: none;
-  }
-  label {
-    display: inline-block;
-  }
-</style>
+  <input
+    bind:files
+    on:change={handleImport}
+    id="file-upload"
+    type="file"
+    class="hidden"
+  />
diff --git a/src/lib/NoteDetail.svelte b/src/lib/NoteDetail.svelte
@@ -3,11 +3,13 @@
   import { onMount } from 'svelte';
   import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
 
-  import { selectedNote } from './store';
+  import { db, selectedNote } from './store';
 
   import { debounce } from '../utils/debounce';
   import { isEmptyObject } from '../utils/isEmptyObject';
 
+  import Settings from './Settings.svelte';
+
   let innerHeight;
 
   onMount(() => addRxPlugin(RxDBUpdatePlugin));
@@ -31,6 +33,8 @@
     <div class="relative w-full h-full flex items-center justify-center">
       <h2>No Note Selected</h2>
     </div>
+  {:else if $selectedNote.guid === '00000000-0000-0000-0000-000000000000'}
+    <Settings />
   {:else}
     <textarea
       id="body-editor"

diff --git a/src/lib/NoteList.svelte b/src/lib/NoteList.svelte
@@ -14,44 +14,36 @@
       db$.notes
         .find({
           selector: {
-            $or: [
-              { name: { $regex: `.*${$omniText}.*` } },
-              { body: { $regex: `.*${$omniText}.*` } }
-            ]
+            $or: [{ name: { $regex: `.*${$omniText}.*` } }, { body: { $regex: `.*${$omniText}.*` } }],
           },
-          sort: [
-            { updatedAt: 'desc'}
-          ]
+          sort: [{ updatedAt: 'desc' }],
         })
         .$.subscribe((notes) => (noteList = notes));
     };
     getNoteList();
   });
 
-  $: omniText.subscribe(v => {
-    db$ && !$selectedNote && db$.notes
-      .find({
-        selector: {
-          $or: [
-            { name: { $regex: `.*${v}.*` } },
-            { body: { $regex: `.*${v}.*` } }
-          ]
-        },
-        sort: [
-          { updatedAt: 'desc'}
-        ]
-      })
-    .$.subscribe((notes) => (noteList = notes))
+  $: omniText.subscribe((v) => {
+    db$ &&
+      !$selectedNote &&
+      db$.notes
+        .find({
+          selector: {
+            $or: [{ name: { $regex: `.*${v}.*` } }, { body: { $regex: `.*${v}.*` } }],
+          },
+          sort: [{ updatedAt: 'desc' }],
+        })
+        .$.subscribe((notes) => (noteList = notes));
   });
 
   // const deleteNote = async (note) => await note.remove();
-  const formatDate = (str) => formatDistanceToNow(new Date(str).getTime(), {addSuffix: true});
+  const formatDate = (str) => formatDistanceToNow(new Date(str).getTime(), { addSuffix: true });
   const handleSelectNoteMouseOver = (id) => isMouseDown && handleSelectNote(id);
 
   const handleDeleteNote = async (note) => {
     await note.remove();
     selectedNote.set({});
-      omniText.set('');
+    omniText.set('');
   };
 
   const handleSelectNote = (note) => {
@@ -70,6 +62,7 @@
       });
   };
 </script>
+
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <ul
   id="noteList"
@@ -88,7 +81,12 @@
         on:mouseover={() => handleSelectNoteMouseOver(note)}
         style={$selectedNote === note && 'background: #2252a0; color: white;'}
       >
-        <span class="elipsis" role="button" tabindex="-1" on:dblclick={() => document.getElementById('body-editor').focus()}>
+        <span
+          class="elipsis"
+          role="button"
+          tabindex="-1"
+          on:dblclick={() => document.getElementById('body-editor').focus()}
+        >
           {note.name}
           {#if note.body !== ''}<span style="color: #505050">—</span>{/if}
           <span class="mute" style={$selectedNote === note && 'color: #fff;'}>
@@ -112,7 +110,7 @@
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
-    background-color: #181a1c;
+    background-color: #1c1f21;
   }
   li {
     display: flex;
@@ -127,10 +125,10 @@
     color: rgb(205, 205, 205);
   }
   li:nth-child(odd) {
-    background: #21262a;
+    background: #2b2e31;
   }
   li:nth-child(even) {
-    background: #1d2225;
+    background: #222426;
   }
   .meta {
     color: #43484f;

diff --git a/src/lib/OmniBar.svelte b/src/lib/OmniBar.svelte
@@ -2,12 +2,7 @@
   import { onMount } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
 
-  import DownloadNotesZip from './DownloadNotesZip.svelte';
-  import ImportNotesZip from './ImportNotesZip.svelte';
-  import IconSearch from './IconSearch.svelte';
-  import IconEdit from './IconEdit.svelte';
   import IconXcircle from './IconXcircle.svelte';
-  import IconSettings from './IconSettings.svelte';
 
   import { omniMode, omniText, selectedNote, db } from './store';
 
@@ -42,59 +37,14 @@
       })
       .then(() => document.getElementById('body-editor').focus());
   };
-
-  const toggleMenu = () => {
-    showMenu = !showMenu;
-  };
-
-  const handleDeleteCollection = async () => {
-    const db$ = await db();
-    // db$.notes.destroy();
-    db$.notes.remove();
-  };
 </script>
 
 <svelte:window on:keydown={clearSelection} />
 
 <div
   class="omnibar flex items-center border-box border-b"
-  style="border-color: #2e3338; background-color: #181a1c; height: 42px"
+  style="border-color: #2e3338; background-color: #181a1c; height: 42px; padding-left: 10px;"
 >
-  <div class="relative" style="padding: 0 4px 0 8px;">
-    <button on:click={toggleMenu} class="bg-transparent flex items-center" style="color: #444953;">
-      <IconSettings />
-    </button>
-    {#if showMenu}
-      <ul
-        class="absolute"
-        style="min-width: 180px; border: 1px solid rgba(255,255,255,0.1); z-index: 9999; border-radius: 6px; background: #0e0f11c4; top: 33px; left: 10px; color: white; list-style-type: none; margin: 0; padding: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);"
-      >
-        <li><div style="width: 10spx;" /> About nvAux</li>
-        <li><div style="width: 10spx;" /> Leave Feedback...</li>
-        <li class="break" />
-
-        <li><div style="width: 10spx;" /> <ImportNotesZip /></li>
-        <li><div style="width: 10spx;" /> <DownloadNotesZip /></li>
-        <li class="break" />
-        <li><div style="width: 10spx;" /> <button on:click={handleDeleteCollection} class="bg-transparent">Reset Database</button></li>
-      </ul>
-    {/if}
-  </div>
-  <!-- <div
-    on:click={() => omniInput.focus()}
-    on:keyup={() => omniInput.focus()}
-    role="button"
-    tabindex="-1"
-    class="px-2"
-    style="color: #444953;"
-  >
-    {#if $omniMode === 'search'}
-      <IconSearch />
-    {:else}
-      <IconEdit />
-    {/if}
-  </div> -->
-
   <div class="input-wrapper flex-grow flex items-center">
     <input
       bind:this={omniInput}
@@ -134,32 +84,6 @@
     outline: none;
   }
   input::placeholder {
-    color: #3e464d;
-  }
-
-  ul li:first-child {
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-  }
-  ul li:last-child {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-  }
-
-  li {
-    height: 30px;
-    display: flex;
-    align-items: center;
-    padding: 6px 10px;
-    margin-bottom: 1px;
-    box-sizing: border-box;
-    color: #adadad;
-  }
-  li:hover {
-    background: #602661;
-    color: white;
-  }
-  li.break {
-    height: 1px; padding: 0; margin: 0; border-bottom: 1px solid rgba(255,255,255,0.05);
+    color: #88959f;
   }
 </style>
diff --git a/src/lib/Settings.svelte b/src/lib/Settings.svelte
@@ -0,0 +1,33 @@
+<script>
+  import { db } from './store';
+
+  import DownloadNotesZip from './DownloadNotesZip.svelte';
+  import ImportNotesZip from './ImportNotesZip.svelte';
+
+  const handleDeleteCollection = async () => {
+    const db$ = await db();
+    // db$.notes.destroy();
+    db$.notes.remove();
+  };
+</script>
+
+<div class="px-2 text-white">
+  <h2 style="font-size: 20px; line-height: 0;">nvAux Settings</h2>
+  <div class="relative">
+    {#await db().notes.find().exec()}
+      <p>...waiting</p>
+    {:then notes}
+      <p><span class="text-gray-600">Total Notes: </span>{notes.length}</p>
+    {:catch error}
+      <p style="color: red">{error.message}</p>
+    {/await}
+
+    <ImportNotesZip />
+    <DownloadNotesZip />
+    <button
+      on:click={handleDeleteCollection}
+      class="btn"
+      style="background: #b41111;">Reset Database</button
+    >
+  </div>
+</div>
diff --git a/src/lib/StatusBar.svelte b/src/lib/StatusBar.svelte
@@ -0,0 +1,3 @@
+<div class="px-2 flex items-center absolute w-full flex-grow-0" style="height: 30px; background: #181a1c; bottom: 0; left: 0; color: #606060; ">
+nvAux v0.1.5
+</div>
diff --git a/src/lib/store.js b/src/lib/store.js
@@ -25,20 +25,27 @@ const _create = async () => {
   const db = await createRxDatabase({
     name: 'nvauxdb',
     storage: getRxStorageDexie(),
-    // ignoreDuplicate: true
+    ignoreDuplicate: true
   });
 
   await db.addCollections({ notes: { schema } });
 
   const notes = await db.notes.find().exec();
 
-
   if (notes.length === 0) {
     const date = new Date().getTime();
     await db.notes.insert({
-      guid: uuidv4(),
-      name: '🚀 Welcome to nvAux!',
-      body: `
+      guid: '00000000-0000-0000-0000-000000000000',
+      name: '⚙️ nvAux Settings...',
+      createdAt: date,
+      updatedAt: date
+    });
+
+    setTimeout (() => {
+      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:
@@ -52,9 +59,10 @@ Dive into our User Guide to explore these features in detail, or check out our F
 
 The nvAux Team
   `,
-      createdAt: date,
-      updatedAt: date
-    });
+        createdAt: new Date().getTime(),
+        updatedAt: new Date().getTime()
+      });
+    }, 500)
   };
 
   dbPromise = db;