prompt for deletion

Services/FileNoteService.cs

@@ -32,7 +32,7 @@
 
         public void SaveNote(string noteName, string? content = null)
         {
-            if (string.IsNullOrWhiteSpace(noteName))
+            if (string.IsNullOrWhiteSpace(content))
             {
                 content = "Hi! Feel free to start typing. Everything will be saved soon after you are done typing.";
             }

Views/Note/Index.cshtml

@@ -11,7 +11,7 @@
         }
     </select>
 
-    <a asp-action="Delete" asp-controller="Note" asp-route-noteName="@Model.CurrentNote" class="btn-symbol btn-delete" title="Delete Note">✕</a>
+    <a asp-action="Delete" asp-controller="Note" asp-route-noteName="@Model.CurrentNote" id="delete-note" class="btn-symbol btn-delete" title="Delete Note">✕</a>
     <form method="post" class="action-form" asp-action="Create" asp-controller="Note">
         <input type="text" name="noteName" placeholder="Note name" />
         <button type="submit" class="btn-symbol btn-create" title="Create Note">💾</button>

wwwroot/css/site.css

@@ -1,3 +1,28 @@
+:root {
+    /* Light theme colors */
+    --bg-primary: #fff;
+    --bg-secondary: #f8f9fa;
+    --text-primary: #444;
+    --text-secondary: #999;
+    --border-primary: #ccc;
+    --border-secondary: #e0e0e0;
+    --accent-primary: #009E60;
+    --accent-primary-hover: #007a4d;
+    --accent-primary-focus: rgba(0, 158, 96, 0.2);
+    --danger-primary: #dc3545;
+    --danger-hover: #c82333;
+    --danger-border: #bd2130;
+    --success-primary: green;
+    --warning-primary: orangered;
+    
+    /* Dark theme colors */
+    --dark-bg-primary: #222;
+    --dark-bg-secondary: #333;
+    --dark-text-primary: #ddd;
+    --dark-border-primary: #555;
+    --dark-border-secondary: #444;
+}
+
 html {
     font-size: 14px;
     height: 100%;
@@ -34,17 +59,16 @@ div.note-actions {
 select.note-dropdown {
     padding: 6px 8px;
     border-radius: 5px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-primary);
-    background-color: #fff;
+    background-color: var(--bg-primary);
     font-size: 13px;
-    min-width: 120px;
+    width: 80px;
-    max-width: 150px;
 }
 
 body.dark select.note-dropdown {
-    background-color: #333;
+    background-color: var(--dark-bg-secondary);
-    color: #ddd;
+    color: var(--dark-text-primary);
-    border: 1px solid #555;
+    border: 1px solid var(--dark-border-primary);
 }
 
 form.action-form {
@@ -55,23 +79,23 @@ form.action-form {
 
 form.action-form input[type="text"] {
     padding: 6px 8px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-primary);
     border-radius: 5px;
     font-size: 13px;
-    width: 100px;
+    width: 60px;
-    background-color: #fff;
+    background-color: var(--bg-primary);
 }
 
 body.dark form.action-form input[type="text"] {
-    background-color: #333;
+    background-color: var(--dark-bg-secondary);
-    color: #ddd;
+    color: var(--dark-text-primary);
-    border: 1px solid #555;
+    border: 1px solid var(--dark-border-primary);
 }
 
 form.action-form input[type="text"]:focus {
     outline: none;
-    border-color: #009E60;
+    border-color: var(--accent-primary);
-    box-shadow: 0 0 0 2px rgba(0, 158, 96, 0.2);
+    box-shadow: 0 0 0 2px var(--accent-primary-focus);
 }
 
 .btn-symbol {
@@ -90,65 +114,37 @@ form.action-form input[type="text"]:focus {
 }
 
 .btn-delete {
-    background-color: #dc3545;
+    background-color: var(--danger-primary);
-    color: #fff;
+    color: var(--bg-primary);
-    border-color: #dc3545;
+    border-color: var(--danger-primary);
 }
 
 .btn-delete:hover {
-    background-color: #c82333;
+    background-color: var(--danger-hover);
-    border-color: #bd2130;
+    border-color: var(--danger-border);
     transform: scale(1.05);
 }
 
 .btn-create {
-    background-color: #009E60;
+    background-color: var(--accent-primary);
-    color: #fff;
+    color: var(--bg-primary);
-    border-color: #009E60;
+    border-color: var(--accent-primary);
 }
 
 .btn-create:hover {
-    background-color: #007a4d;
+    background-color: var(--accent-primary-hover);
-    border-color: #006b42;
+    border-color: var(--accent-primary-hover);
     transform: scale(1.05);
 }
 
-/* Mobile responsiveness */
-@media (max-width: 768px) {
-    div.note-actions {
-        gap: 6px;
-        padding: 6px;
-        font-size: 12px;
-    }
-    
-    select.note-dropdown {
-        min-width: 100px;
-        max-width: 120px;
-        font-size: 12px;
-        padding: 5px 6px;
-    }
-    
-    form.action-form input[type="text"] {
-        width: 80px;
-        font-size: 12px;
-        padding: 5px 6px;
-    }
-    
-    .btn-symbol {
-        width: 24px;
-        height: 24px;
-        font-size: 12px;
-    }
-}
-
 textarea {
     width: 100%;
     height: 100%;
-    padding: 15px;
+    padding: 15px 15px 60px;
     margin: 0;
     resize: none;
-    color: #444;
+    color: var(--text-primary);
-    font-size: 16px;
+    font-size: 14px;
     font-family: Consolas, 'Courier New', monospace;
     outline: none;
     position: absolute;
@@ -159,8 +155,8 @@ textarea {
 body.dark,
 body.dark input,
 body.dark textarea {
-    background-color: #222;
+    background-color: var(--dark-bg-primary);
-    color: #ddd;
+    color: var(--dark-text-primary);
 }
 
 .toast {
@@ -169,7 +165,7 @@ body.dark textarea {
     right: 25px;
     font-size: 11px;
     padding: 6px;
-    color: #fff;
+    color: var(--bg-primary);
     transition: bottom 0.3s, opacity 0.3s;
     opacity: 0;
     border-radius: 5px 5px 0 0;
@@ -181,11 +177,11 @@ body.dark textarea {
 }
 
 .toast#saved-indicator {
-    background-color: green;
+    background-color: var(--success-primary);
 }
 
 .toast#update-indicator {
-    background-color: orangered;
+    background-color: var(--warning-primary);
 }
 
 form.login-form input[type=password],
@@ -196,13 +192,24 @@ form.login-form button {
     margin: 20px auto;
     font-size: 20px;
     padding: 8px;
-    border: 1px solid #333;
+    border: 1px solid var(--dark-bg-secondary);
     border-radius: 8px;
     box-sizing: border-box;
 }
 
 form.login-form input[type=password] {
-    color: #999;
+    color: var(--text-secondary);
+}
+
+form.login-form button {
+    background-color: var(--accent-primary);
+    color: var(--bg-primary);
+    border-color: var(--accent-primary);
+}
+
+form.login-form button:hover {
+    background-color: var(--accent-primary-hover);
+    border-color: var(--accent-primary-hover);
 }
 
 button, select {

wwwroot/js/site.js

@@ -55,6 +55,13 @@ $(function () {
         }
     });
 
+    // handle delete note with confirmation
+    $('#delete-note').click(function (e) {
+        if (!confirm('Are you sure you want to delete this note?')) {
+            e.preventDefault();
+        }
+    });
+
     // update content upon sync save
     connection.on('updateNote', function (content) {
         $textarea.val(content);