From e0c0ceec784221de5aeb9efe7b4fc646a4ab4007 Mon Sep 17 00:00:00 2001
From: avi <avi@aiolabs.com>
Date: Sun, 16 Aug 2026 15:29:38 -0500
Subject: [PATCH] UX: visible drag handle on each chapter row + prominent '+'
 add button in sidebar header

---
 src/renderer/book.ts    |  3 +++
 src/renderer/index.css  | 25 +++++++++++++++++++++++++
 src/renderer/index.html |  1 +
 3 files changed, 29 insertions(+)

diff --git a/src/renderer/book.ts b/src/renderer/book.ts
index c6dc2cc..1090477 100644
--- a/src/renderer/book.ts
+++ b/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);
   });
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 4f86d7d..6ad764d 100644
--- a/src/renderer/index.css
+++ b/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;
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 80e5f61..67e1b28 100644
--- a/src/renderer/index.html
+++ b/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>