joplin-plugin-explorer 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "joplin-plugin-explorer",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A unified sidebar that displays notebooks and notes together in a single tree view",
   "author": "lim0513",
   "homepage": "https://github.com/lim0513/joplin-explorer",
@@ -10,7 +10,6 @@
   },
   "scripts": {
     "dist": "webpack --env production",
-    "prepare": "npm run dist",
     "dev": "webpack --watch"
   },
   "keywords": ["joplin-plugin", "joplin", "sidebar", "explorer", "tree-view", "notebooks"],

package/publish/index.js

@@ -1 +1,516 @@
-(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var s in n)e.o(n,s)&&!e.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:n[s]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const t=require("api");var n=e.n(t);async function s(e){const t=[];let s=1,o=!0;for(;o;){const i=await n().data.get(["folders",e,"notes"],{fields:["id","title","parent_id","is_todo","todo_completed","updated_time"],page:s,limit:100,order_by:"updated_time",order_dir:"DESC"});t.push(...i.items),o=i.has_more,s++}return t}function o(e,t,n=0){let s="";for(const a of e){const e=16*n;if("folder"===a.type){const l=a.note_count??0;s+=`<div class="tree-item folder" style="padding-left:${e}px" data-id="${a.id}" data-type="folder">\n        <span class="toggle expanded">&#9660;</span>\n        <span class="icon folder-icon">&#128193;</span>\n        <span class="label">${i(a.title)}</span>\n        <span class="count">(${l})</span>\n      </div>`,s+=`<div class="children" data-folder-id="${a.id}">`,a.children&&(s+=o(a.children,t,n+1)),s+="</div>"}else{const n=a.id===t?" selected":"";let o="&#128196;";a.is_todo&&(o=a.todo_completed?"&#9745;":"&#9744;"),s+=`<div class="tree-item note${n}" style="padding-left:${e}px" data-id="${a.id}" data-type="note">\n        <span class="icon note-icon">${o}</span>\n        <span class="label">${i(a.title)}</span>\n      </div>`}}return s}function i(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}n().plugins.register({onStart:async function(){await n().commands.register({name:"notesInList.toggle",label:"Toggle Notes In List panel",execute:async()=>{}}),await n().views.menuItems.create("notesInListMenuItem","notesInList.toggle",1);const e=await n().views.panels.create("notesInListPanel");await n().views.panels.addScript(e,"webview/panel.css"),await n().views.panels.setHtml(e,'<div id="notes-in-list-root"><p style="padding:12px;">Loading...</p></div>'),await n().views.panels.show(e,!0),console.info("Notes In List: panel shown");let t="";async function i(){try{console.info("Notes In List: refreshing...");const i=await async function(){const e=[];let t=1,s=!0;for(;s;){const o=await n().data.get(["folders"],{fields:["id","title","parent_id","note_count"],page:t,limit:100});e.push(...o.items),s=o.has_more,t++}return e}(),a=new Map,l=10;for(let e=0;e<i.length;e+=l){const t=i.slice(e,e+l),n=await Promise.all(t.map(e=>s(e.id)));t.forEach((e,t)=>{a.set(e.id,n[t])})}const r=function(e,t){const n=new Map;for(const t of e)n.set(t.id,{type:"folder",id:t.id,title:t.title,note_count:t.note_count,children:[]});for(const[e,s]of t){const t=n.get(e);if(t&&t.children)for(const e of s)t.children.push({type:"note",id:e.id,title:e.title||"(untitled)",is_todo:e.is_todo,todo_completed:e.todo_completed})}const s=[];for(const t of e){const e=n.get(t.id);t.parent_id&&n.has(t.parent_id)?n.get(t.parent_id).children.unshift(e):s.push(e)}return s}(i,a),c=`\n          <div id="notes-in-list-root">\n            <div class="toolbar">\n              <button id="btn-refresh" title="Refresh">&#8635; Refresh</button>\n              <input id="search-input" type="text" placeholder="Search..." />\n            </div>\n            <div id="tree-container">${o(r,t)}</div>\n          </div>\n          <script>\n            function postMessage(msg) {\n              webviewApi.postMessage(msg);\n            }\n\n            document.addEventListener('click', (e) => {\n              const item = e.target.closest('.tree-item');\n              if (!item) return;\n\n              const type = item.dataset.type;\n              const id = item.dataset.id;\n\n              if (type === 'note') {\n                document.querySelectorAll('.tree-item.note.selected').forEach(el => el.classList.remove('selected'));\n                item.classList.add('selected');\n                postMessage({ name: 'openNote', id });\n              }\n\n              if (type === 'folder') {\n                const toggle = item.querySelector('.toggle');\n                const children = item.nextElementSibling;\n                if (children && children.classList.contains('children')) {\n                  const isExpanded = !children.classList.contains('collapsed');\n                  if (isExpanded) {\n                    children.classList.add('collapsed');\n                    toggle.innerHTML = '&#9654;';\n                    toggle.classList.remove('expanded');\n                  } else {\n                    children.classList.remove('collapsed');\n                    toggle.innerHTML = '&#9660;';\n                    toggle.classList.add('expanded');\n                  }\n                }\n              }\n            });\n\n            // Search filter\n            const searchInput = document.getElementById('search-input');\n            if (searchInput) {\n              searchInput.addEventListener('input', (e) => {\n                const query = e.target.value.toLowerCase();\n                document.querySelectorAll('.tree-item.note').forEach(item => {\n                  const label = item.querySelector('.label').textContent.toLowerCase();\n                  item.style.display = label.includes(query) || !query ? '' : 'none';\n                });\n                // Show all folders when searching\n                if (query) {\n                  document.querySelectorAll('.children').forEach(c => c.classList.remove('collapsed'));\n                  document.querySelectorAll('.toggle').forEach(t => { t.innerHTML = '&#9660;'; t.classList.add('expanded'); });\n                }\n              });\n            }\n\n            // Refresh button\n            const btnRefresh = document.getElementById('btn-refresh');\n            if (btnRefresh) {\n              btnRefresh.addEventListener('click', () => {\n                postMessage({ name: 'refresh' });\n              });\n            }\n          <\/script>\n        `;await n().views.panels.setHtml(e,c)}catch(e){console.error("Notes In List: refresh error",e)}}await n().views.panels.onMessage(e,async e=>{"openNote"===e.name?(t=e.id,await n().commands.execute("openNote",e.id)):"refresh"===e.name&&await i()}),await n().workspace.onNoteSelectionChange(async()=>{const e=await n().workspace.selectedNote();e&&(t=e.id),await i()}),await i()}})})();
+/* Notes In List Plugin - notebooks and notes in a single tree view */
+
+/* ======================== i18n ======================== */
+var i18nData = {
+  'zh_CN': {
+    newNotebook: '新建笔记本', newNote: '新建笔记', newTodo: '新建待办',
+    sort: '排序', collapseAll: '全部折叠', expandAll: '全部展开',
+    search: '搜索...', sync: '同步', syncing: '同步中...', syncDone: '\u2714 同步完成', loading: '加载中...',
+    sortUpdatedDesc: '\u2193 修改时间', sortUpdatedAsc: '\u2191 修改时间',
+    sortTitleAsc: '\u2191 标题', sortTitleDesc: '\u2193 标题',
+    // Folder context menu
+    ctxNewNoteHere: '在此新建笔记', ctxNewTodoHere: '在此新建待办',
+    ctxNewSubNotebook: '新建子笔记本', ctxRenameFolder: '重命名',
+    ctxExportFolder: '导出笔记本', ctxDeleteFolder: '删除笔记本',
+    // Note context menu
+    ctxOpenNote: '打开笔记', ctxOpenInNewWindow: '在新窗口中打开',
+    ctxCopyLink: '复制 Markdown 链接', ctxDuplicateNote: '复制副本',
+    ctxSwitchNoteType: '笔记/待办 切换', ctxToggleTodo: '切换完成状态',
+    ctxRenameNote: '重命名', ctxMoveNote: '移动到笔记本...',
+    ctxNoteInfo: '笔记属性', ctxDeleteNote: '删除笔记',
+    // Confirm dialogs
+    confirmDeleteFolder: '确定删除此笔记本及其所有内容吗？',
+    confirmDeleteNote: '确定删除此笔记吗？',
+    promptRename: '请输入新名称：',
+    promptMoveNote: '请输入目标笔记本名称：',
+  },
+  'zh_TW': {
+    newNotebook: '新建筆記本', newNote: '新建筆記', newTodo: '新建待辦',
+    sort: '排序', collapseAll: '全部摺疊', expandAll: '全部展開',
+    search: '搜尋...', sync: '同步', syncing: '同步中...', syncDone: '\u2714 同步完成', loading: '載入中...',
+    sortUpdatedDesc: '\u2193 修改時間', sortUpdatedAsc: '\u2191 修改時間',
+    sortTitleAsc: '\u2191 標題', sortTitleDesc: '\u2193 標題',
+    ctxNewNoteHere: '在此新建筆記', ctxNewTodoHere: '在此新建待辦',
+    ctxNewSubNotebook: '新建子筆記本', ctxRenameFolder: '重新命名',
+    ctxExportFolder: '匯出筆記本', ctxDeleteFolder: '刪除筆記本',
+    ctxOpenNote: '開啟筆記', ctxOpenInNewWindow: '在新視窗中開啟',
+    ctxCopyLink: '複製 Markdown 連結', ctxDuplicateNote: '複製副本',
+    ctxSwitchNoteType: '筆記/待辦 切換', ctxToggleTodo: '切換完成狀態',
+    ctxRenameNote: '重新命名', ctxMoveNote: '移動到筆記本...',
+    ctxNoteInfo: '筆記屬性', ctxDeleteNote: '刪除筆記',
+    confirmDeleteFolder: '確定刪除此筆記本及其所有內容嗎？',
+    confirmDeleteNote: '確定刪除此筆記嗎？',
+    promptRename: '請輸入新名稱：', promptMoveNote: '請輸入目標筆記本名稱：',
+  },
+  'en_US': {
+    newNotebook: 'New Notebook', newNote: 'New Note', newTodo: 'New To-do',
+    sort: 'Sort', collapseAll: 'Collapse All', expandAll: 'Expand All',
+    search: 'Search...', sync: 'Synchronise', syncing: 'Syncing...', syncDone: '\u2714 Sync Done', loading: 'Loading...',
+    sortUpdatedDesc: '\u2193 Updated', sortUpdatedAsc: '\u2191 Updated',
+    sortTitleAsc: '\u2191 Title', sortTitleDesc: '\u2193 Title',
+    ctxNewNoteHere: 'New Note Here', ctxNewTodoHere: 'New To-do Here',
+    ctxNewSubNotebook: 'New Sub-notebook', ctxRenameFolder: 'Rename',
+    ctxExportFolder: 'Export Notebook', ctxDeleteFolder: 'Delete Notebook',
+    ctxOpenNote: 'Open Note', ctxOpenInNewWindow: 'Open in New Window',
+    ctxCopyLink: 'Copy Markdown Link', ctxDuplicateNote: 'Duplicate',
+    ctxSwitchNoteType: 'Switch Note/To-do', ctxToggleTodo: 'Toggle Completed',
+    ctxRenameNote: 'Rename', ctxMoveNote: 'Move to Notebook...',
+    ctxNoteInfo: 'Note Properties', ctxDeleteNote: 'Delete Note',
+    confirmDeleteFolder: 'Delete this notebook and all its contents?',
+    confirmDeleteNote: 'Delete this note?',
+    promptRename: 'Enter new name:', promptMoveNote: 'Enter target notebook name:',
+  },
+};
+
+function getI18n(locale) {
+  return i18nData[locale] || i18nData[locale.split('_')[0]] || i18nData['en_US'];
+}
+
+/* ======================== Data helpers ======================== */
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+async function getAllFolders() {
+  var folders = [];
+  var page = 1;
+  var hasMore = true;
+  while (hasMore) {
+    var result = await joplin.data.get(['folders'], {
+      fields: ['id', 'title', 'parent_id', 'icon'],
+      page: page, limit: 100,
+    });
+    folders = folders.concat(result.items);
+    hasMore = result.has_more;
+    page++;
+  }
+  return folders;
+}
+
+async function getNotesInFolder(folderId) {
+  var notes = [];
+  var page = 1;
+  var hasMore = true;
+  while (hasMore) {
+    var result = await joplin.data.get(['folders', folderId, 'notes'], {
+      fields: ['id', 'title', 'parent_id', 'is_todo', 'todo_completed', 'updated_time', 'user_updated_time'],
+      page: page, limit: 100,
+      order_by: 'user_updated_time', order_dir: 'DESC',
+    });
+    notes = notes.concat(result.items);
+    hasMore = result.has_more;
+    page++;
+  }
+  return notes;
+}
+
+function buildTree(folders, notesByFolder) {
+  var folderMap = {};
+  for (var i = 0; i < folders.length; i++) {
+    var f = folders[i];
+    folderMap[f.id] = {
+      type: 'folder', id: f.id, title: f.title,
+      parent_id: f.parent_id, icon: f.icon, note_count: 0, children: [],
+    };
+  }
+  var folderIds = Object.keys(notesByFolder);
+  for (var i = 0; i < folderIds.length; i++) {
+    var fid = folderIds[i];
+    var folder = folderMap[fid];
+    if (folder) {
+      var notes = notesByFolder[fid];
+      folder.note_count = notes.length;
+      for (var j = 0; j < notes.length; j++) {
+        var n = notes[j];
+        folder.children.push({
+          type: 'note', id: n.id, title: n.title || '(untitled)',
+          is_todo: n.is_todo, todo_completed: n.todo_completed,
+        });
+      }
+    }
+  }
+  var roots = [];
+  for (var i = 0; i < folders.length; i++) {
+    var f = folders[i];
+    var node = folderMap[f.id];
+    if (f.parent_id && folderMap[f.parent_id]) {
+      folderMap[f.parent_id].children.unshift(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  // Recursively compute total note count including sub-folders
+  function calcTotalCount(node) {
+    var total = 0;
+    if (!node.children) return 0;
+    for (var i = 0; i < node.children.length; i++) {
+      var child = node.children[i];
+      if (child.type === 'note') {
+        total++;
+      } else if (child.type === 'folder') {
+        calcTotalCount(child);
+        total += child.total_count;
+      }
+    }
+    node.total_count = total + (node.note_count || 0) - (node.note_count || 0);
+    // note_count is direct notes only (already counted in children), total_count is all
+    node.total_count = total;
+    return total;
+  }
+  for (var i = 0; i < roots.length; i++) {
+    calcTotalCount(roots[i]);
+  }
+
+  return roots;
+}
+
+function getFolderIcon(node) {
+  var iconData = node.icon;
+  if (iconData && typeof iconData === 'string') {
+    try { iconData = JSON.parse(iconData); } catch(e) { iconData = null; }
+  }
+  if (iconData && iconData.emoji) return iconData.emoji;
+  return '\uD83D\uDCC2';
+}
+
+function renderTreeHtml(nodes, selectedNoteId, collapsedSet, level) {
+  level = level || 0;
+  var html = '';
+  for (var i = 0; i < nodes.length; i++) {
+    var node = nodes[i];
+    var indent = level * 18;
+    if (node.type === 'folder') {
+      var count = node.total_count || node.note_count || 0;
+      var isCollapsed = collapsedSet[node.id];
+      var arrowChar = isCollapsed ? '\u25B6' : '\u25BC';
+      var toggleClass = isCollapsed ? 'toggle' : 'toggle expanded';
+      html += '<div class="tree-item folder" style="padding-left:' + indent + 'px" data-id="' + node.id + '" data-type="folder">';
+      html += '<span class="' + toggleClass + '">' + arrowChar + '</span>';
+      html += '<span class="icon folder-icon">' + getFolderIcon(node) + '</span>';
+      html += '<span class="label">' + escapeHtml(node.title) + '</span>';
+      html += '<span class="count">' + count + '</span>';
+      html += '</div>';
+      html += '<div class="children' + (isCollapsed ? ' collapsed' : '') + '" data-folder-id="' + node.id + '">';
+      if (node.children) {
+        html += renderTreeHtml(node.children, selectedNoteId, collapsedSet, level + 1);
+      }
+      html += '</div>';
+    } else {
+      var selected = node.id === selectedNoteId ? ' selected' : '';
+      var icon = '\uD83D\uDCDD';
+      if (node.is_todo) {
+        icon = node.todo_completed ? '\u2611' : '\u2610';
+      }
+      html += '<div class="tree-item note' + selected + '" style="padding-left:' + indent + 'px" data-id="' + node.id + '" data-type="note">';
+      html += '<span class="icon note-icon">' + icon + '</span>';
+      html += '<span class="label">' + escapeHtml(node.title) + '</span>';
+      html += '</div>';
+    }
+  }
+  return html;
+}
+
+/* ======================== Plugin ======================== */
+joplin.plugins.register({
+  onStart: async function () {
+    // Get locale
+    var locale = await joplin.settings.globalValue('locale') || 'en_US';
+    var t = getI18n(locale);
+
+    var panel = await joplin.views.panels.create('notesInListPanel');
+    await joplin.views.panels.addScript(panel, 'webview/panel.css');
+    await joplin.views.panels.addScript(panel, 'webview/panel.js');
+    await joplin.views.panels.setHtml(panel, '<div id="notes-in-list-root"><p style="padding:12px;">' + t.loading + '</p></div>');
+    await joplin.views.panels.show(panel, true);
+
+    var selectedNoteId = '';
+    var collapsedFolders = {};
+    var currentSort = 'updated_desc';
+    var allFoldersCache = [];
+    var isFirstLoad = true;
+
+    function sortNotes(notes, sortMode) {
+      var sorted = notes.slice();
+      switch (sortMode) {
+        case 'title_asc': sorted.sort(function(a, b) { return (a.title || '').localeCompare(b.title || ''); }); break;
+        case 'title_desc': sorted.sort(function(a, b) { return (b.title || '').localeCompare(a.title || ''); }); break;
+        case 'updated_asc': sorted.sort(function(a, b) { return (a.user_updated_time || 0) - (b.user_updated_time || 0); }); break;
+        default: sorted.sort(function(a, b) { return (b.user_updated_time || 0) - (a.user_updated_time || 0); }); break;
+      }
+      return sorted;
+    }
+
+    async function refreshPanel() {
+      try {
+        var folders = await getAllFolders();
+        allFoldersCache = folders;
+
+        // Default: all folders collapsed, then expand path to current note
+        if (isFirstLoad) {
+          for (var fi = 0; fi < folders.length; fi++) {
+            collapsedFolders[folders[fi].id] = true;
+          }
+          // Expand the path to the currently selected note
+          var currentNote = await joplin.workspace.selectedNote();
+          if (currentNote) {
+            selectedNoteId = currentNote.id;
+            var parentId = currentNote.parent_id;
+            while (parentId) {
+              delete collapsedFolders[parentId];
+              var parentFolder = null;
+              for (var pi = 0; pi < folders.length; pi++) {
+                if (folders[pi].id === parentId) { parentFolder = folders[pi]; break; }
+              }
+              parentId = parentFolder ? parentFolder.parent_id : null;
+            }
+          }
+          isFirstLoad = false;
+        }
+
+        var notesByFolder = {};
+
+        var batchSize = 10;
+        for (var i = 0; i < folders.length; i += batchSize) {
+          var batch = folders.slice(i, i + batchSize);
+          var promises = [];
+          for (var j = 0; j < batch.length; j++) promises.push(getNotesInFolder(batch[j].id));
+          var results = await Promise.all(promises);
+          for (var j = 0; j < batch.length; j++) notesByFolder[batch[j].id] = sortNotes(results[j], currentSort);
+        }
+
+        var tree = buildTree(folders, notesByFolder);
+        var treeHtml = renderTreeHtml(tree, selectedNoteId, collapsedFolders);
+
+        var sortLabels = {
+          'updated_desc': t.sortUpdatedDesc, 'updated_asc': t.sortUpdatedAsc,
+          'title_asc': t.sortTitleAsc, 'title_desc': t.sortTitleDesc,
+        };
+
+        // Pass i18n via data attribute (inline scripts may not execute in webview)
+        var i18nJson = escapeHtml(JSON.stringify(t));
+
+        var html = '<div id="notes-in-list-root" data-i18n="' + i18nJson + '">'
+          + '  <div class="toolbar">'
+          + '    <button id="btn-new-notebook" title="' + t.newNotebook + '">\uD83D\uDCC1+</button>'
+          + '    <button id="btn-new-note" title="' + t.newNote + '">\uD83D\uDCDD+</button>'
+          + '    <button id="btn-new-todo" title="' + t.newTodo + '">\u2610+</button>'
+          + '    <button id="btn-sort" title="' + t.sort + '">' + sortLabels[currentSort] + '</button>'
+          + '    <button id="btn-collapse-all" title="' + t.collapseAll + '">\u25B2</button>'
+          + '  </div>'
+          + '  <div class="search-bar">'
+          + '    <input id="search-input" type="text" placeholder="\uD83D\uDD0D ' + t.search + '" />'
+          + '  </div>'
+          + '  <div id="tree-container">' + treeHtml + '</div>'
+          + '  <div class="bottom-bar">'
+          + '    <button id="btn-sync" title="' + t.sync + '">\uD83D\uDD04 ' + t.sync + '</button>'
+          + '  </div>'
+          + '</div>';
+
+        await joplin.views.panels.setHtml(panel, html);
+      } catch (err) {
+        console.error('Notes In List: refresh error', err);
+        await joplin.views.panels.setHtml(panel, '<div style="padding:12px;color:red;">Error: ' + escapeHtml(String(err)) + '</div>');
+      }
+    }
+
+    await joplin.views.panels.onMessage(panel, async function(msg) {
+      if (msg.name === 'openNote') {
+        selectedNoteId = msg.id;
+        await joplin.commands.execute('openNote', msg.id);
+      } else if (msg.name === 'refresh') {
+        await refreshPanel();
+      } else if (msg.name === 'toggleFolder') {
+        if (collapsedFolders[msg.id]) { delete collapsedFolders[msg.id]; }
+        else { collapsedFolders[msg.id] = true; }
+        await refreshPanel();
+      } else if (msg.name === 'collapseAll') {
+        var folders = await getAllFolders();
+        for (var i = 0; i < folders.length; i++) collapsedFolders[folders[i].id] = true;
+        await refreshPanel();
+      } else if (msg.name === 'expandAll') {
+        collapsedFolders = {};
+        await refreshPanel();
+      } else if (msg.name === 'newNotebook') {
+        await joplin.commands.execute('newFolder');
+        await refreshPanel();
+      } else if (msg.name === 'newNote') {
+        await joplin.commands.execute('newNote');
+        await refreshPanel();
+      } else if (msg.name === 'newTodo') {
+        await joplin.commands.execute('newTodo');
+        await refreshPanel();
+      } else if (msg.name === 'cycleSort') {
+        var sortModes = ['updated_desc', 'updated_asc', 'title_asc', 'title_desc'];
+        var idx = sortModes.indexOf(currentSort);
+        currentSort = sortModes[(idx + 1) % sortModes.length];
+        await refreshPanel();
+      } else if (msg.name === 'sync') {
+        await joplin.views.panels.postMessage(panel, { name: 'syncState', state: 'syncing' });
+        try {
+          await joplin.commands.execute('synchronize');
+        } catch(e) {
+          console.error('Joplin Explorer: sync error', e);
+        }
+        // Keep "syncing" visible for a few seconds, then show "done" briefly
+        await new Promise(function(r) { setTimeout(r, 3000); });
+        await joplin.views.panels.postMessage(panel, { name: 'syncState', state: 'done' });
+        await refreshPanel();
+      } else if (msg.name === 'contextMenu') {
+        var action = msg.action;
+        var id = msg.id;
+        var itemType = msg.itemType;
+        try {
+          if (itemType === 'folder') {
+            switch (action) {
+              case 'newNote':
+                await joplin.data.post(['folders', id, 'notes'], null, { title: '' });
+                break;
+              case 'newTodo':
+                await joplin.data.post(['folders', id, 'notes'], null, { title: '', is_todo: 1 });
+                break;
+              case 'newSubNotebook':
+                await joplin.data.post(['folders'], null, { title: t.newNotebook, parent_id: id });
+                break;
+              case 'deleteFolder':
+                await joplin.data.delete(['folders', id]);
+                break;
+              case 'renameFolder':
+                if (msg.newTitle) await joplin.data.put(['folders', id], null, { title: msg.newTitle });
+                break;
+              case 'exportFolder':
+                await joplin.commands.execute('exportFolders', [id]);
+                break;
+            }
+          } else if (itemType === 'note') {
+            switch (action) {
+              case 'openNote':
+                await joplin.commands.execute('openNote', id);
+                break;
+              case 'openInNewWindow':
+                await joplin.commands.execute('openNoteInNewWindow', id);
+                break;
+              case 'copyLink':
+                var linkNote = await joplin.data.get(['notes', id], { fields: ['id', 'title'] });
+                var mdLink = '[' + linkNote.title + '](:/' + linkNote.id + ')';
+                await joplin.clipboard.writeText(mdLink);
+                break;
+              case 'duplicateNote':
+                var srcNote = await joplin.data.get(['notes', id], { fields: ['title', 'body', 'parent_id', 'is_todo'] });
+                await joplin.data.post(['notes'], null, {
+                  title: srcNote.title + ' (copy)', body: srcNote.body,
+                  parent_id: srcNote.parent_id, is_todo: srcNote.is_todo,
+                });
+                break;
+              case 'switchNoteType':
+                var sn = await joplin.data.get(['notes', id], { fields: ['is_todo'] });
+                await joplin.data.put(['notes', id], null, { is_todo: sn.is_todo ? 0 : 1 });
+                break;
+              case 'toggleTodo':
+                var tn = await joplin.data.get(['notes', id], { fields: ['is_todo', 'todo_completed'] });
+                if (tn.is_todo) {
+                  await joplin.data.put(['notes', id], null, { todo_completed: tn.todo_completed ? 0 : Date.now() });
+                }
+                break;
+              case 'renameNote':
+                if (msg.newTitle) await joplin.data.put(['notes', id], null, { title: msg.newTitle });
+                break;
+              case 'moveNote':
+                if (msg.targetFolderName) {
+                  var targetFolder = null;
+                  for (var i = 0; i < allFoldersCache.length; i++) {
+                    if (allFoldersCache[i].title === msg.targetFolderName) {
+                      targetFolder = allFoldersCache[i]; break;
+                    }
+                  }
+                  if (targetFolder) {
+                    await joplin.data.put(['notes', id], null, { parent_id: targetFolder.id });
+                  }
+                }
+                break;
+              case 'noteInfo':
+                var info = await joplin.data.get(['notes', id], { fields: ['id', 'title', 'created_time', 'updated_time', 'is_todo', 'parent_id'] });
+                var parentTitle = '';
+                for (var i = 0; i < allFoldersCache.length; i++) {
+                  if (allFoldersCache[i].id === info.parent_id) { parentTitle = allFoldersCache[i].title; break; }
+                }
+                var infoText = 'ID: ' + info.id
+                  + '\nTitle: ' + info.title
+                  + '\nNotebook: ' + parentTitle
+                  + '\nCreated: ' + new Date(info.created_time).toLocaleString()
+                  + '\nUpdated: ' + new Date(info.updated_time).toLocaleString()
+                  + '\nType: ' + (info.is_todo ? 'To-do' : 'Note');
+                // Send info back to webview to display
+                return { name: 'showInfo', text: infoText };
+              case 'deleteNote':
+                await joplin.data.delete(['notes', id]);
+                break;
+            }
+          }
+          await refreshPanel();
+        } catch (err) {
+          console.error('Notes In List: context menu error', err);
+        }
+      } else if (msg.name === 'dragDrop') {
+        try {
+          var dragId = msg.dragId;
+          var dragType = msg.dragType;
+          var targetId = msg.targetId;
+          var position = msg.position; // 'into', 'above', 'below'
+
+          if (dragType === 'note') {
+            // Move note to target folder
+            if (msg.position === 'into') {
+              // Find which folder the target belongs to
+              var targetFolderId = targetId;
+              // If target is a note, find its parent folder
+              if (msg.dragType === 'note') {
+                // Check if targetId is a folder
+                var isFolder = false;
+                for (var i = 0; i < allFoldersCache.length; i++) {
+                  if (allFoldersCache[i].id === targetId) { isFolder = true; break; }
+                }
+                if (!isFolder) {
+                  // Target is a note, get its parent_id
+                  var targetNote = await joplin.data.get(['notes', targetId], { fields: ['parent_id'] });
+                  targetFolderId = targetNote.parent_id;
+                }
+              }
+              await joplin.data.put(['notes', dragId], null, { parent_id: targetFolderId });
+            }
+          } else if (dragType === 'folder') {
+            if (position === 'into') {
+              // Move folder as child of target folder
+              if (dragId !== targetId) {
+                await joplin.data.put(['folders', dragId], null, { parent_id: targetId });
+              }
+            } else {
+              // Move folder to same parent as target folder
+              var targetFolder = null;
+              for (var i = 0; i < allFoldersCache.length; i++) {
+                if (allFoldersCache[i].id === targetId) { targetFolder = allFoldersCache[i]; break; }
+              }
+              if (targetFolder) {
+                await joplin.data.put(['folders', dragId], null, { parent_id: targetFolder.parent_id || '' });
+              }
+            }
+          }
+          await refreshPanel();
+        } catch (err) {
+          console.error('Notes In List: drag drop error', err);
+        }
+      }
+    });
+
+    await joplin.workspace.onNoteSelectionChange(async function() {
+      var note = await joplin.workspace.selectedNote();
+      if (note && note.id !== selectedNoteId) {
+        selectedNoteId = note.id;
+        // Only send selection update to webview, don't re-render everything
+        await joplin.views.panels.postMessage(panel, { name: 'selectNote', id: note.id });
+      }
+    });
+
+    await refreshPanel();
+  },
+});

package/publish/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 1,
   "id": "com.github.joplin-explorer",
   "app_min_version": "2.6.0",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "name": "Joplin Explorer",
   "description": "A unified sidebar that displays notebooks and notes together in a single tree view",
   "author": "user",

package/publish/webview/panel.css

@@ -1,108 +1,275 @@
-#notes-in-list-root {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: var(--joplin-color);
-  background-color: var(--joplin-background-color);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  user-select: none;
-}
-
-.toolbar {
-  display: flex;
-  gap: 6px;
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--joplin-divider-color, #ddd);
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.toolbar button {
-  background: var(--joplin-background-color3, #f0f0f0);
-  border: 1px solid var(--joplin-divider-color, #ccc);
-  border-radius: 4px;
-  padding: 3px 10px;
-  cursor: pointer;
-  color: var(--joplin-color);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.toolbar button:hover {
-  background: var(--joplin-background-color-hover3, #e0e0e0);
-}
-
-#search-input {
-  flex: 1;
-  padding: 4px 8px;
-  border: 1px solid var(--joplin-divider-color, #ccc);
-  border-radius: 4px;
-  background: var(--joplin-background-color, #fff);
-  color: var(--joplin-color);
-  font-size: 12px;
-  outline: none;
-}
-
-#search-input:focus {
-  border-color: var(--joplin-color2, #4a9cf5);
-}
-
-#tree-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.tree-item {
-  display: flex;
-  align-items: center;
-  padding: 4px 8px;
-  cursor: pointer;
-  gap: 4px;
-  border-radius: 3px;
-  margin: 0 4px;
-}
-
-.tree-item:hover {
-  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
-}
-
-.tree-item.selected {
-  background: var(--joplin-selected-color, rgba(74, 156, 245, 0.2));
-  font-weight: 600;
-}
-
-.toggle {
-  width: 16px;
-  text-align: center;
-  font-size: 10px;
-  flex-shrink: 0;
-  color: var(--joplin-color-faded, #888);
-}
-
-.icon {
-  flex-shrink: 0;
-  font-size: 14px;
-}
-
-.label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.count {
-  color: var(--joplin-color-faded, #888);
-  font-size: 11px;
-  flex-shrink: 0;
-}
-
-.children.collapsed {
-  display: none;
-}
-
-.folder .label {
-  font-weight: 600;
-}
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+#notes-in-list-root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  color: var(--joplin-color);
+  background-color: var(--joplin-background-color);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  overflow: hidden;
+}
+
+/* Toolbar */
+.toolbar {
+  display: flex;
+  gap: 4px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--joplin-divider-color, #ddd);
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.toolbar button {
+  background: var(--joplin-background-color3, #f0f0f0);
+  border: 1px solid var(--joplin-divider-color, #ccc);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  color: var(--joplin-color);
+  font-size: 12px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  line-height: 1.2;
+}
+
+.toolbar button:hover {
+  background: var(--joplin-background-color-hover3, #e0e0e0);
+}
+
+.toolbar button:active {
+  opacity: 0.7;
+}
+
+#btn-sort {
+  min-width: 76px;
+  text-align: center;
+}
+
+/* Search bar */
+.search-bar {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--joplin-divider-color, #ddd);
+  flex-shrink: 0;
+}
+
+#search-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 5px 8px;
+  border: 1px solid var(--joplin-divider-color, #ccc);
+  border-radius: 4px;
+  background: var(--joplin-background-color, #fff);
+  color: var(--joplin-color);
+  font-size: 12px;
+  outline: none;
+}
+
+#search-input:focus {
+  border-color: var(--joplin-color2, #4a9cf5);
+}
+
+/* Tree container */
+#tree-container {
+  flex: 1;
+  overflow-y: scroll;
+  padding: 4px 0;
+}
+
+#tree-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+#tree-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#tree-container::-webkit-scrollbar-thumb {
+  background: var(--joplin-color-faded, #888);
+  border-radius: 4px;
+}
+
+#tree-container::-webkit-scrollbar-thumb:hover {
+  background: var(--joplin-color, #555);
+}
+
+/* Tree items */
+.tree-item {
+  display: flex;
+  align-items: center;
+  padding: 3px 8px;
+  cursor: pointer;
+  gap: 5px;
+  border-radius: 3px;
+  margin: 1px 4px;
+  min-height: 24px;
+}
+
+.tree-item:hover {
+  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
+}
+
+.tree-item.note.selected {
+  background: var(--joplin-selected-color, rgba(74, 156, 245, 0.2));
+}
+
+/* Toggle arrow */
+.toggle {
+  width: 14px;
+  text-align: center;
+  font-size: 9px;
+  flex-shrink: 0;
+  color: var(--joplin-color-faded, #888);
+  transition: transform 0.15s;
+}
+
+/* Icons */
+.icon {
+  flex-shrink: 0;
+  font-size: 14px;
+  width: 18px;
+  text-align: center;
+}
+
+/* Label */
+.label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Note count badge */
+.count {
+  color: var(--joplin-color-faded, #888);
+  font-size: 10px;
+  flex-shrink: 0;
+  background: var(--joplin-background-color3, rgba(100,100,100,0.1));
+  border-radius: 8px;
+  padding: 0 5px;
+  min-width: 16px;
+  text-align: center;
+  line-height: 16px;
+}
+
+/* Collapsed children */
+.children.collapsed {
+  display: none;
+}
+
+/* Folder styling */
+.folder .label {
+  font-weight: 600;
+}
+
+/* Note styling */
+.note .label {
+  font-weight: normal;
+}
+
+.note .icon {
+  font-size: 12px;
+}
+
+/* Bottom bar (sync) */
+.bottom-bar {
+  display: flex;
+  padding: 6px 8px;
+  border-top: 1px solid var(--joplin-divider-color, #ddd);
+  flex-shrink: 0;
+}
+
+.bottom-bar button {
+  flex: 1;
+  background: var(--joplin-background-color3, #f0f0f0);
+  border: 1px solid var(--joplin-divider-color, #ccc);
+  border-radius: 4px;
+  padding: 5px 10px;
+  cursor: pointer;
+  color: var(--joplin-color);
+  font-size: 12px;
+}
+
+.bottom-bar button:hover {
+  background: var(--joplin-background-color-hover3, #e0e0e0);
+}
+
+.bottom-bar button:active {
+  opacity: 0.7;
+}
+
+.bottom-bar button:disabled,
+.bottom-bar button.syncing {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.bottom-bar button.sync-done {
+  color: #27ae60;
+  opacity: 1;
+  cursor: default;
+}
+
+/* Context menu */
+.context-menu {
+  position: fixed;
+  background: var(--joplin-background-color, #fff);
+  border: 1px solid var(--joplin-divider-color, #ccc);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+  min-width: 160px;
+  z-index: 9999;
+  font-size: 12px;
+}
+
+.ctx-item {
+  padding: 6px 14px;
+  cursor: pointer;
+  color: var(--joplin-color);
+}
+
+.ctx-item:hover {
+  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
+}
+
+.ctx-danger {
+  color: #e74c3c;
+}
+
+.ctx-danger:hover {
+  background: rgba(231, 76, 60, 0.1);
+}
+
+.ctx-sep {
+  height: 1px;
+  background: var(--joplin-divider-color, #ddd);
+  margin: 4px 0;
+}
+
+/* Drag & Drop */
+.tree-item.dragging {
+  opacity: 0.4;
+}
+
+.tree-item.drop-target {
+  background: var(--joplin-selected-color, rgba(74, 156, 245, 0.25));
+  outline: 2px solid var(--joplin-color2, #4a9cf5);
+  outline-offset: -2px;
+  border-radius: 3px;
+}
+
+.tree-item.drop-above {
+  box-shadow: 0 -2px 0 0 var(--joplin-color2, #4a9cf5);
+}
+
+.tree-item.drop-below {
+  box-shadow: 0 2px 0 0 var(--joplin-color2, #4a9cf5);
+}