From c9e2a0eb7f12f1750799b8479b59905a6a3e78e2 Mon Sep 17 00:00:00 2001
From: catto <catto@maidsin.space>
Date: Mon, 15 Apr 2024 11:16:41 +0200
Subject: [PATCH] searchbar state

---
 index.html     |  1 -
 src/main.ts    | 43 ++++++++++++++++++++++++++++++++-----------
 src/styles.css |  2 ++
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 1128287..ec225c6 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,6 @@
     <div class="menu" id="contextMenu">
       <button id="deleteButton">Delete</button>
     </div>
-    <h1>Maid Notes</h1>
 
     <div id="button-row">
       <button class="row" id="show-notes-button">Refresh Notes</button>
diff --git a/src/main.ts b/src/main.ts
index aca2cb0..f970fb6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,6 +9,7 @@ let createNoteTagEl: HTMLInputElement | null;
 
 let searchbarEl: HTMLInputElement | null;
 let noteSidebarContainerEl: HTMLDivElement | null;
+let searchbarContents = "";
 
 let noteArray: Note[] = []
 
@@ -21,8 +22,14 @@ enum EditorState {
   EDITING
 }
 
+enum SearchState {
+  EMPTY,
+  RESULTS
+}
+
 /** Editor always initializes in the NEW state */
-let editorState = EditorState.NEW
+let editorState = EditorState.NEW;
+let searchState = SearchState.EMPTY;
 
 /**
  * Saves the note.
@@ -59,22 +66,28 @@ async function saveNote() {
 }
 
 /**
- * Retrieve Notes from DB and fill the sidebar with them
+ * Retrieve Notes from DB and fill the sidebar with them.
+ * 
+ * If there's something in the searchbar, do not clear that.
  */
 async function showNotes() {
   if (notesMsgEl) {
-    const array: Array<any> = await retrieveNotes();
+    if (searchState == SearchState.EMPTY) {
+      const array: Array<any> = await retrieveNotes();
 
-    noteArray = array.map((jsonObj) => ({
-      id: jsonObj.id,
-      content: jsonObj.content,
-      date: jsonObj.date,
-      tag: jsonObj.tag
-    }));
+      noteArray = array.map((jsonObj) => ({
+        id: jsonObj.id,
+        content: jsonObj.content,
+        date: jsonObj.date,
+        tag: jsonObj.tag
+      }));
 
-    console.log(noteArray[0])
+      console.log(noteArray[0])
 
-    fillNoteSidebar(noteArray);
+      fillNoteSidebar(noteArray);
+    } else {
+      searchNote(searchbarContents);
+    }
   }
 
 }
@@ -136,6 +149,14 @@ window.addEventListener("DOMContentLoaded", () => {
     const target = event.target as HTMLInputElement;
     const input = target.value;
 
+    if (target.value == "") {
+      searchState = SearchState.EMPTY;
+    } else {
+      searchState = SearchState.RESULTS;
+    }
+
+    searchbarContents = input;
+
     searchNote(input);
   })
 
diff --git a/src/styles.css b/src/styles.css
index c12a66e..ceed057 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -13,6 +13,8 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 
+  margin-top: 0.5em;
+
   overflow-y: hidden;
 
 }