keep filter after done and new note, save filter to storage, only clear visible done notes

src/App.svelte

@@ -4,53 +4,55 @@
   import Actions from './lib/Actions.svelte'
 
   import Storage from './storage'
-  import {createNote, toggleDoneState} from './note'
+  import {createNote, toggleDoneState, applyFilter} from './note'
 
   const storage = new Storage()
   let notes = storage.getNotes()
-  let shownNotes = notes
-  let hasNotes = notes.length > 0
-  let filter = null
+  let filter = storage.getFilter()
   let theme = storage.getTheme()
+  let shownNotes = applyFilter(notes, filter)
+  let hasNotes = notes.length > 0
 
   $: hasFinishedNotes = notes.filter(note => !note.done).length === notes.length
   $: darkMode = theme === "dark"
   $: document.body.className = theme;
 
-  // $: filterText = filter ? `Clear '${filter}' filter` : "Clear filter"
-  // $: hasFinishedNotes = notes.filter(note => !note.done).length === notes.length
-
   function handleNewNote(e) {
     notes.push(createNote(e.detail))
     notes = notes // Trigger reactiveness
-    shownNotes = notes
+    shownNotes = applyFilter(notes, filter)
 
     storage.saveNotes(notes)
   }
 
   function handleToggle(e) {
     notes = toggleDoneState(notes, e.detail.created)
-    shownNotes = notes
+    shownNotes = applyFilter(notes, filter)
 
     storage.saveNotes(notes)
   }
 
   function handleFilter(e) {
     filter = e.detail
-    shownNotes = shownNotes.filter(note => {
-      return note.tags.includes(filter)
-    })
+    shownNotes = applyFilter(notes, filter)
+    storage.saveFilter(filter)
   }
 
   function handleClearDone(e) {
-    notes = notes.filter(note => !note.done)
-    shownNotes = notes
+    notes = notes.filter(note => {
+      const ids = shownNotes.map(note => note.created)
+      const noteShown = ids.includes(note.created)
+      const noteDone = note.done
+      return !(noteDone && noteShown)
+    })
+    shownNotes = applyFilter(notes, filter)
     storage.saveNotes(notes)
   }
 
   function handleClearFilter(e) {
     filter = null
     shownNotes = notes
+    storage.saveFilter(null)
   }
 
   function handleToggleDarkMode(e) {

src/lib/MainInput.svelte

@@ -18,7 +18,7 @@
     width: 100%;
     padding: 0.5rem;
     box-sizing: border-box;
-    border: 1px solid var(--gray-400);
+    border: 1px solid var(--gray-300);
     border-radius: 0.15rem;
     font-size: 1rem;
     color: var(--gray-800);

src/lib/Note.svelte

@@ -36,7 +36,7 @@
 
 		color: var(--gray-800);
 		padding: 0.5rem;
-		background: var(--gray-100);
+		background: var(--gray-50);
 		border: 1px solid var(--gray-300);
     border-radius: 0.15rem;
 

src/note.js

@@ -14,6 +14,14 @@ export function createNote(noteTitle) {
   }
 }
 
+export function applyFilter(notes, filter) {
+  if (!filter) return notes
+
+  return notes.filter(note => {
+    return note.tags.includes(filter)
+  })
+}
+
 export function toggleDoneState(notes, id) {
 	return notes.map(note => {
     if (note.created === id) {

src/storage.js

@@ -3,28 +3,30 @@ export default class Storage {
 		this.prefix = "notesapp"
 	}
 
-	getTheme() {
-		return localStorage.getItem(`${this.prefix}-theme`) || ""
-	}
+	getFilter = () => this.#load('filter', null)
+	saveFilter = (filter) => this.#save('filter', filter)
 
-	saveTheme(theme) {
-		localStorage.setItem(`${this.prefix}-theme`, theme)
-	}
+	getTheme = () => this.#load('theme', '')
+	saveTheme = (theme) => this.#save('theme', theme)
 
 	getNotes() {
-		const notesString = localStorage.getItem(`${this.prefix}-notes`)
-		if (notesString) {
-			try {
-				return JSON.parse(notesString)
-			} catch(e) {
-				return []
-			}
-		} else {
+		const str = this.#load('notes', [])
+		try {
+			return JSON.parse(str)
+		} catch(e) {
 			return []
 		}
 	}
+	saveNotes = (notes) => this.#save('notes', JSON.stringify(notes))
 
-	saveNotes(notes) {
-		localStorage.setItem(`${this.prefix}-notes`, JSON.stringify(notes))
+	#save(key, value) {
+		console.log(`saving key '${key}' with value '${value}'`)
+		localStorage.setItem(`${this.prefix}-${key}`, value)
+	}
+
+	#load(key, defaultValue = null) {
+		const value = localStorage.getItem(`${this.prefix}-${key}`) || defaultValue
+		console.log(`loading key '${key}' with value '${value}'`)
+		return value
 	}
 }