save point

matterofabstract · Jul 16, 2023 · 8fa372a · 8fa372a
1 parent e79407b
commit 8fa372a
Show file tree

Hide file tree

Showing 13 changed files with 164 additions and 131 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 *.DS_Store
 node_modules
+dist
diff --git a/dist/index.html b/dist/index.html
diff --git a/index.html b/index.html
@@ -2,12 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta name="description" content="the note-taking app for creative professionals" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
     <link
       rel="icon"
       type="image/svg+xml"
       href="data:image/svg+xml,%3Csvg width='332px' height='332px' viewBox='0 0 332 332' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3CradialGradient cx='50%25' cy='0%25' fx='50%25' fy='0%25' r='100%25' id='radialGradient-1'%3E%3Cstop stop-color='%234B6D8D' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23310550' offset='100%25'%3E%3C/stop%3E%3C/radialGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cpath d='M80.7623838,-6.89023353e-15 L251.237616,3.26289697e-15 C279.320457,-1.8958371e-15 289.503973,2.92400675 299.77064,8.41468017 C310.037306,13.9053536 318.094646,21.9626937 323.58532,32.2293603 C329.075993,42.496027 332,52.6795435 332,80.7623838 L332,251.237616 C332,279.320457 329.075993,289.503973 323.58532,299.77064 C318.094646,310.037306 310.037306,318.094646 299.77064,323.58532 C289.503973,329.075993 279.320457,332 251.237616,332 L80.7623838,332 C52.6795435,332 42.496027,329.075993 32.2293603,323.58532 C21.9626937,318.094646 13.9053536,310.037306 8.41468017,299.77064 C2.92400675,289.503973 3.3714784e-15,279.320457 -5.8026012e-15,251.237616 L2.17526465e-15,80.7623838 C-1.2638914e-15,52.6795435 2.92400675,42.496027 8.41468017,32.2293603 C13.9053536,21.9626937 21.9626937,13.9053536 32.2293603,8.41468017 C42.496027,2.92400675 52.6795435,4.0034241e-15 80.7623838,-6.89023353e-15 Z' id='Rectangle' fill='url(%23radialGradient-1)'%3E%3C/path%3E%3Cpath d='M36.052459,205 L36.052459,151.157895 C36.052459,147.578947 36.6295082,144.842105 37.7836066,142.947368 C38.9377049,141.052632 41.0360656,140.105263 44.0786885,140.105263 C46.5967213,140.105263 48.5377049,140.947368 49.9016393,142.631579 C51.2655738,144.315789 51.947541,146.631579 51.947541,149.578947 L51.947541,149.578947 L51.947541,205 L68,205 L68,143.578947 C68,140 67.5278689,136.973684 66.5836066,134.5 C65.6393443,132.026316 64.3803279,130 62.8065574,128.421053 C61.2327869,126.842105 59.4491803,125.710526 57.4557377,125.026316 C55.4622951,124.342105 53.4688525,124 51.4754098,124 C47.8032787,124 44.7868852,124.815789 42.4262295,126.447368 C40.0655738,128.078947 38.0459016,130.157895 36.3672131,132.684211 L36.3672131,132.684211 L36.052459,132.684211 L36.052459,124.947368 L20,124.947368 L20,205 L36.052459,205 Z M110.118644,205 L131,125 L113.915254,125 L103.158192,176.12426 L102.841808,176.12426 L92.0847458,125 L75,125 L95.8813559,205 L110.118644,205 Z M147.198511,205 L151.962779,180.717697 L174.037221,180.717697 L178.801489,205 L195,205 L169.74938,92 L156.25062,92 L131,205 L147.198511,205 Z M171,165 L155,165 L162.843137,124 L163.156863,124 L171,165 Z M218.52459,206 C222.196721,206 225.213115,205.184211 227.57377,203.552632 C229.934426,201.921053 231.954098,199.842105 233.632787,197.315789 L233.632787,197.315789 L233.947541,197.315789 L233.947541,205.052632 L250,205.052632 L250,125 L233.947541,125 L233.947541,178.842105 C233.947541,182.421053 233.370492,185.157895 232.216393,187.052632 C231.062295,188.947368 228.963934,189.894737 225.921311,189.894737 C223.403279,189.894737 221.462295,189.052632 220.098361,187.368421 C218.734426,185.684211 218.052459,183.368421 218.052459,180.421053 L218.052459,180.421053 L218.052459,125 L202,125 L202,186.421053 C202,190 202.472131,193.026316 203.416393,195.5 C204.360656,197.973684 205.619672,200 207.193443,201.578947 C208.767213,203.157895 210.55082,204.289474 212.544262,204.973684 C214.537705,205.657895 216.531148,206 218.52459,206 Z M272.084746,205 L283,180.542406 L293.915254,205 L311,205 L290.909605,164.13215 L310.050847,125 L292.966102,125 L283,147.721893 L273.033898,125 L255.949153,125 L274.774011,164.13215 L255,205 L272.084746,205 Z' id='nvAux' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"
     />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
     <title>nvAux</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "url": "https://github.com/matterofabstract/nvAux"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },

diff --git a/src/App.svelte b/src/App.svelte
@@ -5,7 +5,7 @@
   import NoteDetail from './lib/NoteDetail.svelte';
 </script>
 
-<main class="w-screen h-screen flex justify-center flex-col">
+<main class="w-screen h-screen overflow-hidden flex flex-col">
   <OmniBar />
   <NoteList />
   <ResizeHandle />

diff --git a/src/lib/IconSearch.svelte b/src/lib/IconSearch.svelte
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="15"
-  height="15"
+  width="20"
+  height="20"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"

diff --git a/src/lib/IconSettings.svelte b/src/lib/IconSettings.svelte
@@ -1,17 +1,18 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="15"
-  height="15"
+  width="20"
+  height="20"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
-  class="feather feather-settings"
+  class="feather feather-menu"
+  ><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line
+    x1="3"
+    y1="18"
+    x2="21"
+    y2="18"
+  /></svg
 >
-  <circle cx="12" cy="12" r="3" />
-  <path
-    d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
-  />
-</svg>
diff --git a/src/lib/IconXcircle.svelte b/src/lib/IconXcircle.svelte
@@ -1,7 +1,7 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="15"
-  height="15"
+  width="18"
+  height="18"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"

diff --git a/src/lib/NoteDetail.svelte b/src/lib/NoteDetail.svelte
@@ -10,9 +10,7 @@
 
   let innerHeight;
 
-  onMount(() => {
-    addRxPlugin(RxDBUpdatePlugin);
-  });
+  onMount(() => addRxPlugin(RxDBUpdatePlugin));
 
   const handleDebounceSave = debounce(() => !isEmptyObject($selectedNote) && updateNote(), 230);
 
@@ -30,9 +28,14 @@
 
 <svelte:window bind:innerHeight />
 
-<div class="flex items-center justify-center relative w-full h-full overflow-hidden" style="height: {innerHeight - noteEditorHeightOffset + 15}px">
-  {#if $selectedNote}
-    <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} />
+<div class="relative overflow-hidden" >
+  {#if !isEmptyObject($selectedNote)}
+    <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>
@@ -47,7 +50,11 @@
   }
   textarea {
     padding: 6px;
-    background: #f6f6f6;
+    background: #1a1a1a;
+    color: rgba(255, 255, 255, 0.831);
+    font-size: 16px;
+    border-radius: none;
+    height: 100%;
   }
   .placeholder {
     top: -20%;

diff --git a/src/lib/NoteList.svelte b/src/lib/NoteList.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { format } from 'date-fns';
+  import { formatDistanceToNow } from 'date-fns';
 
   import { selectedNote, bodyText, db, omniText, omniMode, noteListHeight } from './store';
 
@@ -45,9 +45,15 @@
   });
 
   // const deleteNote = async (note) => await note.remove();
-  const formatDate = (str) => format(new Date(str).getTime(), "MMM d, yyyy 'at' h:mm a");
+  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('');
+  };
+
   const handleSelectNote = (note) => {
     selectedNote.set(note);
     db$.notes
@@ -80,19 +86,19 @@
         on:click={() => handleSelectNote(note)}
         on:keydown={() => handleSelectNote(note)}
         on:mouseover={() => handleSelectNoteMouseOver(note)}
-        style={$selectedNote === note && 'background: #0363e1; color: white;'}
+        style={$selectedNote === note && 'background: #2252a0; color: white;'}
       >
         <span class="elipsis" role="button" tabindex="-1" on:dblclick={() => document.getElementById('body-editor').focus()}>
           {note.name}
-          {#if note.body !== ''}<span style="color: #757575">—</span>{/if}
+          {#if note.body !== ''}<span style="color: #505050">—</span>{/if}
           <span class="mute" style={$selectedNote === note && 'color: #fff;'}>
             {note.body ?? ''}
           </span>
         </span>
 
-        <span class="meta" style={$selectedNote === note && 'background: #0363e1; color: white;'}>
+        <span class="meta" style={$selectedNote === note && 'background: #2252a0; color: white;'}>
           {formatDate(note.updatedAt)}
-          <!-- <button on:click={() => deleteNote(note)}>[del]</button> -->
+          <!-- <button on:click={() => handleDeleteNote(note)}>[del]</button> -->
         </span>
       </li>
     {/each}
@@ -104,38 +110,33 @@
     margin: 0;
     padding: 0;
     width: 100%;
-    background: #f7f7f7;
     overflow-y: auto;
     overflow-x: hidden;
     list-style-type: none;
     border-bottom: none;
   }
   li {
-    padding: 2px 8px;
+    padding: 4px 8px;
     display: flex;
-    font-size: 12px;
+    font-size: 14px;
     justify-content: space-between;
     font-family: Helvetica, sans-serif;
     user-select: none;
+    color: rgb(205, 205, 205);
   }
   li:nth-child(odd) {
-    background: #f5f5f5;
+    background: #21262a;
   }
   li:nth-child(even) {
-    background: #f0f0f0;
+    background: #1d2225;
   }
   .meta {
-    min-width: 140px;
-    color: #444444;
-    white-space: nowrap;
-  }
-  .elipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
+    color: #43484f;
     white-space: nowrap;
-    padding-right: 10px;
+    text-align: right;
+    font-size: 13px;
   }
   .mute {
-    color: #8d8d8d;
+    color: #65676c;
   }
 </style>
diff --git a/src/lib/OmniBar.svelte b/src/lib/OmniBar.svelte
@@ -29,34 +29,58 @@
 
   const addNote = async () => {
     const db$ = await db();
-    await db$.notes.insert({
-      guid: uuidv4(),
-      name: $omniText,
-      createdAt: new Date().getTime(),
-      updatedAt: new Date().getTime(),
-    }).then((note) => {
-      selectedNote.set(note)
-      omniMode.set('edit');
-    }).then(() => document.getElementById('body-editor').focus());
+    await db$.notes
+      .insert({
+        guid: uuidv4(),
+        name: $omniText,
+        createdAt: new Date().getTime(),
+        updatedAt: new Date().getTime(),
+      })
+      .then((note) => {
+        selectedNote.set(note);
+        omniMode.set('edit');
+      })
+      .then(() => document.getElementById('body-editor').focus());
   };
 </script>
 
-<svelte:window on:keydown={clearSelection}/>
+<svelte:window on:keydown={clearSelection} />
 
-<div class="omnibar flex items-center">
+<div class="omnibar flex items-center border-box border-b" style="border-color: #2e3338; background-color: #181a1c; height: 42px">
   <!-- <ImportNotesZip />
   <DownloadNotesZip /> -->
-  <div class="input-wrapper flex-grow">
-    <div class="icon left" >
-      {#if $omniMode === 'search'}
-        <IconSearch />
-      {:else}
-        <IconEdit />
-      {/if}
-    </div>
+  <div class="flex items-center" style="padding: 0 4px 0 10px; color: #444953;">
+    <IconSettings />
+  </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}
+      bind:value={$omniText}
+      on:keydown={handleTitleEnter}
+      on:focus={omniInput.select()}
+      type="text"
+      class="flex-grow py-0.5 px-1 flex-grow"
+      placeholder="Search or Create"
+    />
     {#if $omniText !== ''}
       <button
-        class="icon right"
+        class="bg-transparent flex items-center px-2 py-1.5"
+        style="color: #404856;"
         on:click={() => {
           $omniText = '';
           $selectedNote = '';
@@ -65,56 +89,23 @@
         <IconXcircle />
       </button>
     {/if}
-
-
-  <input
-    bind:this={omniInput}
-    bind:value={$omniText}
-    on:keydown={handleTitleEnter}
-    on:focus={omniInput.select()}
-    type="text"
-    class="flex-grow py-0.5 px-1"
-    placeholder="Search or Create"
-  />
-  </div>
-  <div class="flex items-center" style="margin: 0 3px">
-    <IconSettings />
   </div>
 </div>
 
 <style>
-  .omnibar {
-    box-sizing: border-box;
-    padding-right: 3px;
-    border-bottom: 1px solid #959595;
-    background: linear-gradient(0deg, rgba(206, 206, 207, 1) 0%, rgba(228, 227, 229, 1) 100%);
-  }
-  .input-wrapper {
-    position: relative;
-    padding: 5px;
-  }
   input {
     width: 100%;
     box-sizing: border-box;
-    border: 1px solid #747474;
-    border-radius: 5px;
-    padding: 2px 4px 2px 20px;
-  }
-  .icon {
-    position: absolute;
-    color: #4b4b4b;
-  }
-  .left {
-    top: 8px;
-    left: 10px;
-  }
-  .right {
-    top: 13.5px;
-    right: 3px;
+    border-radius: 0px;
+    font-size: 17px;
     background: transparent;
-    cursor: pointer;
+    color: white;
+    height: 38px;
+  }
+  input:focus {
+    outline: none;
   }
-  .right:hover {
-    color: #202020;
+  input::placeholder {
+    color: #3e464d;
   }
 </style>