.

src-tauri/src/data.rs

@@ -1,4 +1,6 @@
 use rusqlite::Connection;
+use std::{env, path::PathBuf};
+use std::fs;
 
 #[path = "note.rs"]
 mod note;
@@ -6,7 +8,10 @@ use note::Note;
 
 #[tauri::command]
 pub fn get_notes_list(search: &str) -> Vec<Note> {
-    let conn = Connection::open("notes.db").expect("Failed to open database");
+    let app_dir = PathBuf::from(env::var("HOME").unwrap_or_else(|_| ".".into()))
+        .join(".notesapp");
+    fs::create_dir_all(&app_dir).expect("Failed to create app dir");
+    let conn = Connection::open(app_dir.join("notes.db")).expect("Failed to open database");
 
     conn.execute(
         "CREATE TABLE IF NOT EXISTS notes 

src-tauri/src/note.rs

@@ -1,4 +1,4 @@
-#[derive(serde::Serialize)]
+#[derive(serde::Serialize)] 
 pub struct Note {
     pub id: u32,
     pub title: String,

src-tauri/tauri.conf.json

@@ -12,7 +12,7 @@
       {
         "title": "Notes",
         "transparent": true,
-        "width": 950,
+        "width": 1100,
         "height": 600,
         "minWidth": 800,
         "minHeight": 500

src/index.html

@@ -47,6 +47,13 @@
     </div>
     <div class="grid-container-horizontal" style="border-left: 0;"></div>
   </div>
+
+  <div class="hover-button button" onclick="create_new_note();">
+    <svg style="fill: var(--color-on-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
+      <path d="M19,13H13v6h-2v-6H5v-2h6V5h2v6h6V13z" />
+    </svg>
+
+  </div>
 </body>
 
 </html>

src/main.js

@@ -44,8 +44,13 @@ async function get_notes_list() {
 
       let item = document.createElement("div");
       item.innerHTML = `
-      <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
-        <p style="color: #1E88E5; font-weight: bold;">${note.title}</p>
+      <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: #1E88E5; font-weight: bold; font-size: 0.9rem">${note.title}</p>
+        </div>
         <p style="font-size: 0.8rem;">${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;">

src/styles_default.css

@@ -6,6 +6,7 @@
   --color-text: #aaa;
   --color-icon: #808080;
   --color-accent: #1e88e5;
+  --color-on-accent: #fff;
 }
 
 body {
@@ -129,7 +130,7 @@ input:focus {
 }
 
 .notes-list div {
-  padding: 0 0.8rem;
+  padding: 0 0.4rem;
   margin-right: 0.2rem;
   background-color: var(--color-surface);
   border-bottom-right-radius: 10px;
@@ -165,4 +166,13 @@ input:focus {
 
 .notes-list-parent::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-accent);
+}
+
+.hover-button {
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  width: 2rem;
+  height: 2rem;
+  background-color: var(--color-accent);
 }