.

frontend-src/main.js

@@ -0,0 +1,105 @@
+const { invoke } = window.__TAURI__.core;
+const appWindow = window.__TAURI__.window.getCurrentWindow();
+
+document.querySelector(".titlebar-drag").addEventListener("mousedown", (event) => {
+  if (event.button === 0) appWindow.startDragging();
+});
+
+document.querySelector("#minimize-window").addEventListener("click", () => appWindow.minimize());
+document.querySelector("#maximize-window").addEventListener("click", () => appWindow.toggleMaximize());
+document.querySelector("#close-window").addEventListener("click", () => appWindow.close());
+
+let menuBarToggled = false;
+let greetInputEl;
+let greetMsgEl;
+
+get_notes_list();
+
+window.addEventListener('contextmenu', (e) => {
+  e.preventDefault();
+});
+
+
+function toggle_menu() {
+  let leftColumn = document.querySelector("#left-column");
+  let toggleSearch = document.querySelector("#toggle-search");
+  let searchBar = document.querySelector("#search_bar");
+  let leftColumnDivider = document.querySelector("#left-column-divider");
+  let notesListParent = document.querySelector(".notes-list-parent");
+  let leftBarIcon = document.querySelector("#toggle-left-bar-icon");
+  let toolBar = document.querySelector(".toolbar");
+
+  if (!menuBarToggled) {
+    notesListParent.style.transition = '';
+    toggleSearch.style.transition = '';
+    leftColumn.style.minWidth = '4rem';
+    leftColumn.style.width = '4rem';
+    leftBarIcon.style.rotate = '90deg';
+    leftBarIcon.style.fill = 'var(--color-accent)'
+    toggleSearch.style.opacity = '0%';
+    searchBar.style.display = 'none';
+    leftColumnDivider.style.display = 'none'; 
+    notesListParent.style.opacity = '0%';
+    toolBar.style.borderBottomLeftRadius = '1rem';
+    toolBar.style.borderBottomRightRadius = '1rem';
+  } else {
+    notesListParent.style.transition = '0.25s opacity ease 0.2s';
+    toggleSearch.style.transition = '0.25s opacity ease 0.2s';
+    leftBarIcon.style.fill = 'var(--color-icon)'
+    leftBarIcon.style.rotate = '270deg';
+    leftColumn.style.minWidth = '15rem';
+    toggleSearch.style.display = 'inline-block';
+    searchBar.style.display = 'flex';
+    leftColumnDivider.style.display = 'block';
+    leftColumn.style.width = '40%';
+    toggleSearch.style.opacity = '100%';
+    notesListParent.style.display = 'block'; 
+    notesListParent.style.opacity = '100%';
+    toolBar.style.borderBottomLeftRadius = '0';
+    toolBar.style.borderBottomRightRadius = '10px';
+  }
+
+  menuBarToggled = !menuBarToggled;
+}
+
+function toggle_search() {
+  document.querySelector("#search_input").value = "";
+
+  get_notes_list();
+}
+
+function on_search_input() {
+  get_notes_list();
+}
+
+async function get_notes_list() {
+  try {
+    let notes = await invoke("get_notes_list", { search: document.querySelector("#search_input").value });
+    let notes_list = document.querySelector(".notes-list");
+
+    notes_list.innerHTML = "";
+    notes.forEach(note => {
+
+      let item = document.createElement("div");
+      item.innerHTML = `
+      <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;"> 
+        <div style="display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 0.5rem;">
+          <svg style="fill: var(--color-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
+          <path d="M9,19q-2.93,0-4.96-2.04Q2,14.93 2,12Q2,9.07 4.04,7.04T9,5t4.96,2.04T16,12t-2.04,4.96T9,19Zm0-7Zm7,6.9v-2q1.75-0.35 2.88-1.72T20,12T18.88,8.82T16,7.1v-2q2.6,0.35 4.3,2.31Q22,9.38 22,12t-1.7,4.59T16,18.9Zm-3.46-3.36Q14,14.08 14,12q0-2.08-1.46-3.54T9,7Q6.93,7 5.46,8.46T4,12t1.46,3.54T9,17t3.54-1.46Z" />
+          </svg>
+          <p style="color: #59a9ff; font-weight: bold; font-size: 0.8rem">${note.title}</p>
+        </div>
+        <p style="font-size: 0.7rem;">${new Date(note.created_at).toDateString()} ${new Date(note.created_at).toLocaleTimeString().split(':')[0]}:${new Date(note.created_at).toLocaleTimeString().split(':')[1]}</p>
+      </div>
+      <div style="display: flex; flex-direction: row; justify-content: end; align-items: center;">
+        <p style="text-align: end;">${note.text}</p>
+      </div>
+      `;
+
+      notes_list.appendChild(item);
+    });
+
+  } catch (error) {
+    console.error("Fehler beim Laden:", error);
+  }
+}