reverse toggle

index.html

@@ -33,6 +33,7 @@
   <div class="container">
     <div class="sidebar">
       <div class="searchbar-container">
+        <input id="reverse-toggle" type="checkbox" checked="true"> Reverse
         <input type="search" name="note-search" id="note-searchbar" placeholder="Search...">
       </div>
       <div class="note-sidebar-container" id="note-sidebar-container">

src/main.ts

@@ -9,12 +9,15 @@ let createNoteTagEl: HTMLInputElement | null;
 
 let searchbarEl: HTMLInputElement | null;
 let noteSidebarContainerEl: HTMLDivElement | null;
+let noteSidebarReverseCheckboxEl: HTMLInputElement | null;
 let searchbarContents = "";
 
 let noteArray: Note[] = []
 
 /** ID of current note, if we're editing an existing note */
 let currentNoteId: number | null = null;
+/** reverse the order of note by id in the sidebar */
+let reversed = true;
 
 
 enum EditorState {
@@ -83,7 +86,7 @@ async function showNotes() {
         tag: jsonObj.tag
       }));
 
-      fillNoteSidebar(noteArray);
+      fillNoteSidebar(noteArray, reversed);
     } else {
       searchNote(searchbarContents);
     }
@@ -159,6 +162,16 @@ window.addEventListener("DOMContentLoaded", () => {
     searchNote(input);
   })
 
+  // sidebar reverse toggle
+  noteSidebarReverseCheckboxEl = document.querySelector('#reverse-toggle');
+  if (noteSidebarReverseCheckboxEl) {
+    console.log(noteSidebarReverseCheckboxEl.value);
+    noteSidebarReverseCheckboxEl.addEventListener("click", (e: Event) => {
+      const target = e.target as HTMLInputElement
+      toggleReverse(target.checked);
+    })
+  }
+
   refreshContextMenuElements();
 });
 
@@ -209,7 +222,7 @@ function refreshContextMenuElements() {
   }
 }
 
-function fillNoteSidebar(noteArray: Note[]) {
+function fillNoteSidebar(noteArray: Note[], reverse: boolean) {
 
   noteSidebarContainerEl = document.querySelector("#note-sidebar-container");
 
@@ -217,6 +230,8 @@ function fillNoteSidebar(noteArray: Note[]) {
     // clear previously existing elements
     noteSidebarContainerEl.innerHTML = "";
 
+    reverse ? noteArray.reverse() : noteArray;
+
     noteArray.forEach((note) => {
       // Create HTML elements for each note
       const noteEl: HTMLDivElement = document.createElement('div');
@@ -413,3 +428,7 @@ async function refreshSidebarAndOpenLatestNote() {
   openNote(latestNote);
 }
 
+function toggleReverse(val: boolean) {
+  reversed = val;
+  showNotes();
+}