Improve category edit UI

Author: arran4

README.md

@@ -47,8 +47,8 @@ It's a basic file format. Every command must be on it's own line empty lines are
 ## Editing
 
 The `/edit` page allows updating the entire bookmark file.
-Each category heading on the index page now also includes a small
-`edit` link that opens `/editCategory`. This page shows only the selected
+Each category heading on the index page now includes a small pencil icon
+link that opens `/editCategory`. This page shows only the selected
 category text and saves changes back to your bookmarks without touching
 other sections. Edits check the file's SHA so you'll get an error if it
 changed while you were editing.

bookmarkCategoryEdit_test.go

@@ -20,6 +20,17 @@ func TestExtractCategoryByIndex(t *testing.T) {
 	}
 }
 
+func TestExtractCategoryByIndexFirst(t *testing.T) {
+	got, err := ExtractCategoryByIndex(testBookmarkText, 0)
+	if err != nil {
+		t.Fatalf("unexpected error: %v", err)
+	}
+	expected := "Category: A\nhttp://a.com a"
+	if got != expected {
+		t.Fatalf("expected %q got %q", expected, got)
+	}
+}
+
 func TestExtractCategoryByIndexError(t *testing.T) {
 	if _, err := ExtractCategoryByIndex(testBookmarkText, 5); err == nil {
 		t.Fatalf("expected error")
@@ -38,6 +49,18 @@ func TestReplaceCategoryByIndex(t *testing.T) {
 	}
 }
 
+func TestReplaceCategoryByIndexFirst(t *testing.T) {
+	newSection := "Category: A\nhttp://changed.com x"
+	updated, err := ReplaceCategoryByIndex(testBookmarkText, 0, newSection)
+	if err != nil {
+		t.Fatalf("unexpected error: %v", err)
+	}
+	expected := newSection + "\nColumn\nCategory: B\nhttp://b.com b\n"
+	if updated != expected {
+		t.Fatalf("expected %q got %q", expected, updated)
+	}
+}
+
 func TestReplaceCategoryByIndexError(t *testing.T) {
 	if _, err := ReplaceCategoryByIndex(testBookmarkText, 3, "foo"); err == nil {
 		t.Fatalf("expected error")

main.css

@@ -98,3 +98,19 @@ div.title {
         border: none;
         border-top: 1px solid #800000;
 }
+
+.edit-link {
+        font-size: small;
+        margin-left: 0.3em;
+        text-decoration: none;
+}
+
+.edit-form textarea {
+        width: 90vw;
+        height: 80vh;
+        font-family: monospace;
+}
+
+.category-form textarea {
+        height: 30vh;
+}

templates/edit.gohtml

@@ -4,9 +4,9 @@
             Error: {{ $.Error }}
         </p>
     {{ end }}
-    <form method=post action="?">
-        <label for="code">Code</label>:<br/>
-        <textarea id="code" name="text" rows="30" style="width: 90vw; height: 80vh;">{{bookmarksOrEditBookmarks}}</textarea><br>
+    <form method=post action="?" class="edit-form">
+        <label for="code">Code</label><br/>
+        <textarea id="code" name="text" rows="30">{{bookmarksOrEditBookmarks}}</textarea><br>
         <label for="branch">Branch</label>: <input id="branch" type="text" name="branch" value="{{ branchOrEditBranch }}" /><br>
         <input type=submit name="task" value="Save" /><br>
         <input type=hidden name="ref" value="{{ref}}" />

templates/editCategory.gohtml

@@ -2,9 +2,9 @@
     {{ if $.Error }}
         <p style="color: #FF0000">Error: {{ $.Error }}</p>
     {{ end }}
-    <form method=post action="?index={{$.Index}}">
+    <form method=post action="?index={{$.Index}}" class="edit-form category-form">
         <label for="code">Category</label><br/>
-        <textarea id="code" name="text" rows="10" style="width: 90vw; height: 30vh;">{{$.Text}}</textarea><br>
+        <textarea id="code" name="text" rows="10">{{$.Text}}</textarea><br>
         <label for="branch">Branch</label>: <input id="branch" type="text" name="branch" value="{{ branchOrEditBranch }}" /><br>
         <input type=submit name="task" value="Save" /><br>
         <input type=hidden name="ref" value="{{ref}}" />

templates/indexPage.gohtml

@@ -15,7 +15,7 @@
                     <td>
                         {{- range .Categories }}
                             <ul  style="list-style-type: none;">
-                                <h2>{{ .Name }} <a href="/editCategory?index={{ .Index }}&ref={{ref}}" style="font-size: small;">edit</a></h2>
+                                <h2>{{ .Name }} <a class="edit-link" href="/editCategory?index={{ .Index }}&ref={{ref}}" title="Edit">&#9998;</a></h2>
                                 {{- range .Entries }}
                                     <li>
                                         <img src="/proxy/favicon?url={{ .Url }}" alt="•" style="width: 1em; max-height: 1em; font-weight: bolder; font-family: -moz-bullet-font;" />