Notes can be displayed from a JSON String

Notes can be deleted (will not save to the JSON)
Notes can be added (will not save to the JSON)
You can click on a Note to open it but /editor route is not working properly

frontend/svelte/src/routes/+layout.js

@@ -0,0 +1 @@
+export const ssr = false;

frontend/svelte/src/routes/+page.svelte

@@ -6,26 +6,28 @@
     }
 
     //TODO: TEMP!!!
-    const tempJson = "[{\"id\":0,\"title\":\"samc\",\"content\":\"SAAAAAAAAAAMC\"},{\"id\":1,\"title\":\"Push\",\"content\":\"Kollege Pusch\"},{\"id\":2,\"title\":\"Mike\",\"content\":\"C Meister\"}]";
+    const tempJson = "[{\"id\":0,\"title\":\"samc\",\"content\":\"SAAAAAAAAAAMC\"},{\"id\":1,\"title\":\"Push\",\"content\":\"Kollege Pusch\"},{\"id\":2,\"title\":\"Mike\",\"content\":\"C Meister\"},{\"id\":3,\"title\":\"kekw\",\"content\":\"OMEGALUL\"}]";
     //TODO: TEMP!!!
 
     let notes: Note[] = JSON.parse(tempJson);
+    window.localStorage.setItem("notes", JSON.stringify(notes));
 
     /**
      * Reloads the Notes Listing
      * (by doing something very intelligent)
      */
-    function reloadNotesListing(){
+    function reloadNotesListing() {
         notes = notes.filter(i => i === i);
     }
 
     /**
      * Gives the user a prompt to input the new title of the note and creates it if the title is valid
      */
-    function addNotePrompt(){
+    function addNotePrompt() {
         let newTitle = prompt('Name of the new Note');
-        if(newTitle != null && newTitle != ''){
+        if (newTitle != null && newTitle != '') {
             addNote(newTitle);
+            window.localStorage.setItem("notes", JSON.stringify(notes));
         }
     }
 
@@ -58,19 +60,26 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>PomeloNote | Home</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
 </head>
 
-<div class="col-4 w-100 m-auto">
-    <!-- Add Note Button -->
-    <!-- &#10133; is a Thiccc Plus UTF-8 Character -->
+<!-- Add Note Button -->
+<!-- &#10133; is a Thiccc Plus UTF-8 Character -->
+<div class="offset-8 col-1">
     <button on:click={() => addNotePrompt()}>&#10133;</button>
+</div>
 
+<div class="offset-4 col-4">
     <!-- Notes listing -->
     <ul>
         {#each notes as note}
             <li>
-                <span>{note.title}</span>
+                <span>
+                    <a href="/editor" on:click={() => window.localStorage.setItem("clickedNoteId", note.id)}>
+                        {note.title}
+                    </a>
+                </span>
                 <!-- &#128465; is a Trashcan UTF-8 Character -->
                 <button on:click={() => removeNote(note)}>&#128465;</button>
             </li>
@@ -80,6 +89,10 @@
 
 <style>
     html,
+    :root {
+        --main-txt-color: black;
+    }
+
     body {
         height: 100%;
     }
@@ -92,10 +105,9 @@
         background-color: #f5f5f5;
     }
 
-    .center {
-        margin: auto;
-        width: 50%;
-        padding: 10px;
+    a {
+        color: var(--main-txt-color);
+        text-decoration: none;
     }
 
     li {
@@ -110,7 +122,6 @@
         background: transparent;
         padding: 0;
         margin: 0;
-        color: #dc4f21;
         font-size: 18px;
         cursor: pointer;
     }

frontend/svelte/src/routes/editor/+layout.js

@@ -0,0 +1 @@
+// export const ssr = false;

frontend/svelte/src/routes/editor/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    interface Note {
+        id: number;
+        title: string;
+        content: string;
+    }
+
+    let notes: Note[] = JSON.parse(window.localStorage.getItem("notes"));
+    const clickedNoteId = window.localStorage.getItem("clickedNoteId");
+
+
+</script>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{"Pomelonote | Edit " + notes[clickedNoteId].title}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+</head>
+
+<div class="offset-3 col-6">
+    samc samg ccocooc {notes[clickedNoteId].content}
+</div>