wip making UI actions for notes

Controllers/NoteController.cs

@@ -25,7 +25,15 @@ public class NoteController : Controller
         return View(model);
     }
 
-    [Route("{noteName}/delete")]
+    [HttpPost, Route("create")]
+    public IActionResult Create(string noteName)
+    {
+        noteService.SaveNote(noteName);
+
+        return Redirect($"/{noteName}");
+    }
+
+    [Route("delete/{noteName}")]
     public IActionResult Delete(string noteName)
     {
         noteService.DeleteNote(noteName);

Services/FileNoteService.cs

@@ -30,8 +30,13 @@
                 .ToList();
         }
 
-        public void SaveNote(string noteName, string content)
+        public void SaveNote(string noteName, string? content = null)
         {
+            if (string.IsNullOrWhiteSpace(noteName))
+            {
+                content = "Hi! Feel free to start typing. Everything will be saved soon after you are done typing.";
+            }
+
             File.WriteAllText(GetFilePath(noteName), content);
         }
 
@@ -51,7 +56,7 @@
             {
                 Directory.CreateDirectory(folderPath);
 
-                SaveNote(noteName, "Hi! Feel free to start typing. Everything will be saved soon after you are done typing.");
+                SaveNote(noteName);
             }
         }
 

Services/INoteService.cs

@@ -4,7 +4,7 @@
     {
         ICollection<string> GetNoteNames();
         string GetNote(string noteName);
-        void SaveNote(string noteName, string content);
+        void SaveNote(string noteName, string? content = null);
         void DeleteNote(string noteName);
     }
 }

Views/Login/Login.cshtml

@@ -1,6 +1,6 @@
 @Html.ValidationSummary()
 
-<form method="post">
+<form method="post" class="login-form">
     <input type="password" name="passphrase" placeholder="Passphrase" />
     <button type="submit">Login</button>
 </form>

Views/Note/Index.cshtml

@@ -2,13 +2,20 @@
 
 <textarea id="content" name="content" spellcheck="false">@Model.Text</textarea>
 
-<div class="note-names">
+<div class="note-actions">
-    @foreach (var note in Model.NoteNames.Order())
+    <select id="note-dropdown" class="note-dropdown">
-    {
+        @foreach (var note in Model.NoteNames.Order())
-        var css = note.Equals(Model.CurrentNote, StringComparison.OrdinalIgnoreCase) ? "current" : null;
+        {
+            var selected = note.Equals(Model.CurrentNote, StringComparison.OrdinalIgnoreCase) ? "selected" : null;
+            <option value="@note" selected="@selected">@note</option>
+        }
+    </select>
 
-        <a href="@note" class="@css">@note</a>
+    <a asp-action="Delete" asp-controller="Note" asp-route-noteName="@Model.CurrentNote" class="btn btn-danger">Delete</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 btn-primary">Create</button>
+    </form>
 </div>
 
 <div class="toast" id="saved-indicator">Saved</div>

wwwroot/css/site.css

@@ -20,26 +20,16 @@ body {
     min-height: 100%;
 }
 
-div.note-names {
+div.note-actions {
     position: fixed;
     bottom: 5px;
     left: 0;
     font-size: 14px;
-    opacity: 0.5;
+}   
-}
 
-div.note-names a {
+select.note-dropdown {
-    color: #aaa;
+    padding: 6px;
-    padding-left: 10px;
+    border-radius: 5px;
-    text-decoration: none;
-}
-
-div.note-names a.current {
-    font-weight: bold;
-}
-
-div .note-names a:not(:last-of-type) {
-    border-right: 1px solid #666;
 }
 
 textarea {
@@ -88,8 +78,8 @@ body.dark textarea {
     background-color: orangered;
 }
 
-form input[type=password],
+form.login-form input[type=password],
-button {
+form.login-form button {
     display: block;
     width: 100%;
     max-width: 300px;
@@ -101,12 +91,19 @@ button {
     box-sizing: border-box;
 }
 
-form input[type=password] {
+form.login-form input[type=password] {
     color: #999;
 }
 
+button, select {
+    cursor: pointer;    
+}
+
 form button {
-    cursor: pointer;
     color: #fff;
     background-color: #009E60;
+}
+
+form.action-form {
+    display: inline;
 }

wwwroot/js/site.js

@@ -47,6 +47,14 @@ $(function () {
     // set focus on load
     $textarea.focus();
 
+    // handle note dropdown change
+    $('#note-dropdown').change(function () {
+        var selectedNote = $(this).val();
+        if (selectedNote && selectedNote !== noteName) {
+            window.location.href = selectedNote;
+        }
+    });
+
     // update content upon sync save
     connection.on('updateNote', function (content) {
         $textarea.val(content);