UX: visible drag handle on each chapter row + prominent '+' add button in sidebar header

src/renderer/book.ts

@@ -68,6 +68,7 @@ export function initBook(api: FolioAPI) {
   const findPrevBtn = $("findPrev") as HTMLButtonElement;
   const findNextBtn = $("findNext") as HTMLButtonElement;
   const findCloseBtn = $("findClose") as HTMLButtonElement;
+  const addChapterBtn = $("addChapterBtn") as HTMLButtonElement;
   const projectBar = $("projectBar");
 
   const md = markdownIt({ html: false, linkify: true, typographer: true });
@@ -142,6 +143,7 @@ export function initBook(api: FolioAPI) {
       li.draggable = true;
       li.tabIndex = -1;
       li.innerHTML = `
+        <span class="drag-handle" title="Drag to reorder">⋮</span>
         <span class="row-title" title="${ch.title}">${ch.title}</span>
         <span class="row-actions">
           <button class="icon-btn" data-act="rename" title="Rename">✎</button>
@@ -476,6 +478,7 @@ export function initBook(api: FolioAPI) {
   $("welcomeNewBook").addEventListener("click", () => void startNewBook());
   $("welcomeOpenBook").addEventListener("click", () => void startOpenBook());
   newChapterBtn.addEventListener("click", () => void create());
+  addChapterBtn.addEventListener("click", () => void create());
   $("revealBtn").addEventListener("click", () => {
     if (currentBook) void api.revealInFolder(currentBook.path);
   });

src/renderer/index.css

@@ -61,6 +61,14 @@ html, body {
 .sidebar-header {
   padding-bottom: var(--gap);
   border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-header .icon-button {
+  font-size: 1.1rem;
+  font-weight: 700;
 }
 
 .sidebar-title {
@@ -336,6 +344,23 @@ html, body {
   font-weight: 600;
 }
 
+.drag-handle {
+  cursor: grab;
+  padding: 4px 6px;
+  font-size: 1.05rem;
+  line-height: 1;
+  color: var(--color-muted);
+  opacity: 0.6;
+  border-radius: 4px;
+  transition: opacity 0.12s ease, color 0.12s ease;
+  user-select: none;
+}
+
+.chapter-row:hover .drag-handle {
+  opacity: 0.9;
+  color: #fff;
+}
+
 .row-title {
   flex: 1;
   overflow: hidden;

src/renderer/index.html

@@ -11,6 +11,7 @@
       <aside class="sidebar">
         <div class="sidebar-header">
           <span class="sidebar-title">Chapters</span>
+          <button class="icon-button" id="addChapterBtn" title="Add chapter">+</button>
         </div>
         <div class="project-bar hidden" id="projectBar">
           <span class="book-title" id="bookTitle"></span>