joplin-plugin-explorer 1.0.0

package/README.md

@@ -0,0 +1,66 @@
+# Joplin Explorer
+
+A unified sidebar plugin for [Joplin](https://joplinapp.org/) that displays notebooks and notes together in a single tree view — like a file explorer.
+
+[中文说明](README-CN.md)
+
+## Screenshot
+
+> TODO: Add screenshot
+
+## Features
+
+- **Unified Tree View** — Notebooks and notes displayed in one collapsible panel
+- **Custom Icons** — Shows emoji icons set in notebook settings
+- **Search** — Real-time filter to quickly find notes by title
+- **Sort** — Toggle between sorting by update time or title (ascending/descending)
+- **Context Menus**
+  - Notebooks: new note, new to-do, new sub-notebook, rename, export, delete
+  - Notes: open, open in new window, copy Markdown link, duplicate, switch note/to-do type, toggle completed, rename, move to notebook, view properties, delete
+- **Drag & Drop** — Move notes between notebooks, reorganize folder hierarchy
+- **Sync Button** — Trigger synchronization with status feedback (syncing → done)
+- **Auto Expand** — Automatically expands to the currently selected note on startup
+- **Collapse All** — One-click collapse all notebooks
+- **Scroll Position** — Preserved when navigating between notes
+- **i18n** — Supports Simplified Chinese, Traditional Chinese, and English (follows Joplin's locale setting)
+
+## Install
+
+### From File
+
+1. Download `joplin-explorer.jpl` from the [latest release](https://github.com/lim0513/joplin-explorer/releases/latest)
+2. In Joplin, go to **Tools → Options → Plugins**
+3. Click the gear icon and select **Install from file**
+4. Choose the downloaded `.jpl` file
+5. Restart Joplin
+
+## Usage
+
+After installation, the Explorer panel appears on the side of the editor. You can:
+
+- **Click** a notebook to expand/collapse it
+- **Click** a note to open it
+- **Right-click** for context menu actions
+- **Drag** notes or notebooks to reorganize them
+- Use the **toolbar** at the top for quick actions (new notebook/note/to-do, sort, collapse all)
+- Use the **search bar** to filter notes by title
+- Click **Sync** at the bottom to trigger synchronization
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run dist
+
+# Watch mode
+npm run dev
+```
+
+The built plugin is output to the `publish/` directory. To test locally, set `plugins.devPluginPaths` in Joplin's settings to point to the `publish/` directory.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "joplin-plugin-explorer",
+  "version": "1.0.0",
+  "description": "A unified sidebar that displays notebooks and notes together in a single tree view",
+  "author": "lim0513",
+  "homepage": "https://github.com/lim0513/joplin-explorer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lim0513/joplin-explorer.git"
+  },
+  "scripts": {
+    "dist": "webpack --env production",
+    "prepare": "npm run dist",
+    "dev": "webpack --watch"
+  },
+  "keywords": ["joplin-plugin", "joplin", "sidebar", "explorer", "tree-view", "notebooks"],
+  "license": "MIT",
+  "devDependencies": {
+    "api": "file:api",
+    "copy-webpack-plugin": "^11.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "files": ["publish"]
+}

package/publish/index.js

@@ -0,0 +1 @@
+(()=>{"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()}})})();

package/publish/manifest.json

@@ -0,0 +1,10 @@
+{
+  "manifest_version": 1,
+  "id": "com.github.joplin-explorer",
+  "app_min_version": "2.6.0",
+  "version": "1.0.0",
+  "name": "Joplin Explorer",
+  "description": "A unified sidebar that displays notebooks and notes together in a single tree view",
+  "author": "user",
+  "homepage_url": "https://github.com"
+}

package/publish/webview/panel.css

@@ -0,0 +1,108 @@
+#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;
+}

package/publish/webview/panel.js

@@ -0,0 +1,368 @@
+/* Webview script for Notes In List panel */
+
+// Persist scroll position across setHtml calls
+var _savedScrollTop = 0;
+var _isFirstRender = true;
+
+function postMsg(msg) {
+  webviewApi.postMessage(msg);
+}
+
+// Save scroll position continuously
+document.addEventListener('scroll', function(e) {
+  if (e.target && e.target.id === 'tree-container') {
+    _savedScrollTop = e.target.scrollTop;
+  }
+}, true);
+
+// Observe DOM changes to restore scroll position after setHtml
+var _observer = new MutationObserver(function() {
+  var container = document.getElementById('tree-container');
+  if (!container) return;
+
+  if (_isFirstRender) {
+    // First render: scroll to selected note
+    _isFirstRender = false;
+    var selected = container.querySelector('.tree-item.note.selected');
+    if (selected) {
+      setTimeout(function() {
+        selected.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+      }, 30);
+    }
+  } else {
+    // Subsequent renders: restore previous scroll position
+    container.scrollTop = _savedScrollTop;
+  }
+});
+_observer.observe(document.body, { childList: true, subtree: true });
+
+function loadI18n() {
+  var root = document.getElementById('notes-in-list-root');
+  if (root && root.dataset.i18n) {
+    try { window._i18n = JSON.parse(root.dataset.i18n); } catch(e) {}
+  }
+}
+
+function T(key) {
+  if (!window._i18n) loadI18n();
+  return (window._i18n && window._i18n[key]) || key;
+}
+
+// Left click: open note / toggle folder
+document.addEventListener('click', function(e) {
+  var existingMenu = document.getElementById('ctx-menu');
+  if (existingMenu) existingMenu.remove();
+
+  var item = e.target.closest('.tree-item');
+  if (!item) return;
+
+  var type = item.dataset.type;
+  var id = item.dataset.id;
+
+  if (type === 'note') {
+    document.querySelectorAll('.tree-item.note.selected').forEach(function(el) {
+      el.classList.remove('selected');
+    });
+    item.classList.add('selected');
+    postMsg({ name: 'openNote', id: id });
+  }
+
+  if (type === 'folder') {
+    postMsg({ name: 'toggleFolder', id: id });
+  }
+});
+
+// Right click: context menu
+document.addEventListener('contextmenu', function(e) {
+  var existingMenu = document.getElementById('ctx-menu');
+  if (existingMenu) existingMenu.remove();
+
+  var item = e.target.closest('.tree-item');
+  if (!item) return;
+
+  e.preventDefault();
+
+  var type = item.dataset.type;
+  var id = item.dataset.id;
+  var title = '';
+  var labelEl = item.querySelector('.label');
+  if (labelEl) title = labelEl.textContent;
+
+  var menuHtml = '<div id="ctx-menu" class="context-menu" style="left:' + e.pageX + 'px;top:' + e.pageY + 'px;">';
+
+  if (type === 'folder') {
+    menuHtml += '<div class="ctx-item" data-action="newNote" data-id="' + id + '" data-type="folder">' + T('ctxNewNoteHere') + '</div>';
+    menuHtml += '<div class="ctx-item" data-action="newTodo" data-id="' + id + '" data-type="folder">' + T('ctxNewTodoHere') + '</div>';
+    menuHtml += '<div class="ctx-item" data-action="newSubNotebook" data-id="' + id + '" data-type="folder">' + T('ctxNewSubNotebook') + '</div>';
+    menuHtml += '<div class="ctx-sep"></div>';
+    menuHtml += '<div class="ctx-item" data-action="renameFolder" data-id="' + id + '" data-type="folder" data-title="' + title.replace(/"/g, '&quot;') + '">' + T('ctxRenameFolder') + '</div>';
+    menuHtml += '<div class="ctx-item" data-action="exportFolder" data-id="' + id + '" data-type="folder">' + T('ctxExportFolder') + '</div>';
+    menuHtml += '<div class="ctx-sep"></div>';
+    menuHtml += '<div class="ctx-item ctx-danger" data-action="deleteFolder" data-id="' + id + '" data-type="folder">' + T('ctxDeleteFolder') + '</div>';
+  } else if (type === 'note') {
+    menuHtml += '<div class="ctx-item" data-action="openNote" data-id="' + id + '" data-type="note">' + T('ctxOpenNote') + '</div>';
+    menuHtml += '<div class="ctx-item" data-action="openInNewWindow" data-id="' + id + '" data-type="note">' + T('ctxOpenInNewWindow') + '</div>';
+    menuHtml += '<div class="ctx-sep"></div>';
+    menuHtml += '<div class="ctx-item" data-action="copyLink" data-id="' + id + '" data-type="note">' + T('ctxCopyLink') + '</div>';
+    menuHtml += '<div class="ctx-item" data-action="duplicateNote" data-id="' + id + '" data-type="note">' + T('ctxDuplicateNote') + '</div>';
+    menuHtml += '<div class="ctx-item" data-action="switchNoteType" data-id="' + id + '" data-type="note">' + T('ctxSwitchNoteType') + '</div>';
+    menuHtml += '<div class="ctx-item" data-action="toggleTodo" data-id="' + id + '" data-type="note">' + T('ctxToggleTodo') + '</div>';
+    menuHtml += '<div class="ctx-sep"></div>';
+    menuHtml += '<div class="ctx-item" data-action="renameNote" data-id="' + id + '" data-type="note" data-title="' + title.replace(/"/g, '&quot;') + '">' + T('ctxRenameNote') + '</div>';
+    menuHtml += '<div class="ctx-item" data-action="moveNote" data-id="' + id + '" data-type="note">' + T('ctxMoveNote') + '</div>';
+    menuHtml += '<div class="ctx-item" data-action="noteInfo" data-id="' + id + '" data-type="note">' + T('ctxNoteInfo') + '</div>';
+    menuHtml += '<div class="ctx-sep"></div>';
+    menuHtml += '<div class="ctx-item ctx-danger" data-action="deleteNote" data-id="' + id + '" data-type="note">' + T('ctxDeleteNote') + '</div>';
+  }
+
+  menuHtml += '</div>';
+  document.body.insertAdjacentHTML('beforeend', menuHtml);
+
+  var menu = document.getElementById('ctx-menu');
+  var rect = menu.getBoundingClientRect();
+  if (rect.right > window.innerWidth) menu.style.left = (window.innerWidth - rect.width - 4) + 'px';
+  if (rect.bottom > window.innerHeight) menu.style.top = (window.innerHeight - rect.height - 4) + 'px';
+});
+
+// Context menu item click
+document.addEventListener('click', function(e) {
+  var ctxItem = e.target.closest('.ctx-item');
+  if (!ctxItem) return;
+
+  var action = ctxItem.dataset.action;
+  var id = ctxItem.dataset.id;
+  var itemType = ctxItem.dataset.type;
+
+  if (action === 'renameFolder' || action === 'renameNote') {
+    var currentTitle = ctxItem.dataset.title || '';
+    var newTitle = prompt(T('promptRename'), currentTitle);
+    if (newTitle !== null && newTitle.trim() !== '') {
+      postMsg({ name: 'contextMenu', action: action, id: id, itemType: itemType, newTitle: newTitle.trim() });
+    }
+  } else if (action === 'deleteFolder') {
+    if (confirm(T('confirmDeleteFolder'))) {
+      postMsg({ name: 'contextMenu', action: action, id: id, itemType: itemType });
+    }
+  } else if (action === 'deleteNote') {
+    if (confirm(T('confirmDeleteNote'))) {
+      postMsg({ name: 'contextMenu', action: action, id: id, itemType: itemType });
+    }
+  } else if (action === 'moveNote') {
+    var folderName = prompt(T('promptMoveNote'));
+    if (folderName !== null && folderName.trim() !== '') {
+      postMsg({ name: 'contextMenu', action: action, id: id, itemType: itemType, targetFolderName: folderName.trim() });
+    }
+  } else {
+    postMsg({ name: 'contextMenu', action: action, id: id, itemType: itemType });
+  }
+
+  var menu = document.getElementById('ctx-menu');
+  if (menu) menu.remove();
+});
+
+// Close context menu
+document.addEventListener('mousedown', function(e) {
+  if (!e.target.closest('#ctx-menu')) {
+    var menu = document.getElementById('ctx-menu');
+    if (menu) menu.remove();
+  }
+});
+
+// Toolbar buttons
+document.addEventListener('click', function(e) {
+  var btn = e.target.closest('button');
+  if (!btn) return;
+
+  switch (btn.id) {
+    case 'btn-new-notebook': postMsg({ name: 'newNotebook' }); break;
+    case 'btn-new-note': postMsg({ name: 'newNote' }); break;
+    case 'btn-new-todo': postMsg({ name: 'newTodo' }); break;
+    case 'btn-sort': postMsg({ name: 'cycleSort' }); break;
+    case 'btn-collapse-all': postMsg({ name: 'collapseAll' }); break;
+    case 'btn-sync':
+      var syncBtn = document.getElementById('btn-sync');
+      if (syncBtn && !syncBtn.disabled) {
+        syncBtn.disabled = true;
+        syncBtn.classList.add('syncing');
+        syncBtn.textContent = '\uD83D\uDD04 ' + T('syncing');
+        postMsg({ name: 'sync' });
+      }
+      break;
+  }
+});
+
+// Listen for messages from plugin backend
+webviewApi.onMessage(function(msg) {
+  if (!msg || !msg.message) return;
+  var m = msg.message;
+
+  if (m.name === 'syncState') {
+    var syncBtn = document.getElementById('btn-sync');
+    if (!syncBtn) return;
+    if (m.state === 'done') {
+      syncBtn.classList.remove('syncing');
+      syncBtn.classList.add('sync-done');
+      syncBtn.textContent = T('syncDone');
+      // Show "done" for 2 seconds, then restore
+      setTimeout(function() {
+        var btn = document.getElementById('btn-sync');
+        if (btn) {
+          btn.disabled = false;
+          btn.classList.remove('sync-done');
+          btn.textContent = '\uD83D\uDD04 ' + T('sync');
+        }
+      }, 2000);
+    }
+  } else if (m.name === 'selectNote') {
+    // Update selection without full re-render
+    document.querySelectorAll('.tree-item.note.selected').forEach(function(el) {
+      el.classList.remove('selected');
+    });
+    var noteEl = document.querySelector('.tree-item.note[data-id="' + m.id + '"]');
+    if (noteEl) {
+      noteEl.classList.add('selected');
+      noteEl.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+    }
+  }
+});
+
+// ======================== Drag & Drop ========================
+// Make tree items draggable
+document.addEventListener('mousedown', function(e) {
+  var item = e.target.closest('.tree-item');
+  if (!item || e.button !== 0) return;
+  item.setAttribute('draggable', 'true');
+});
+
+document.addEventListener('dragstart', function(e) {
+  var item = e.target.closest('.tree-item');
+  if (!item) return;
+  e.dataTransfer.setData('text/plain', JSON.stringify({
+    id: item.dataset.id,
+    type: item.dataset.type,
+  }));
+  e.dataTransfer.effectAllowed = 'move';
+  item.classList.add('dragging');
+});
+
+document.addEventListener('dragend', function(e) {
+  var item = e.target.closest('.tree-item');
+  if (item) {
+    item.classList.remove('dragging');
+    item.removeAttribute('draggable');
+  }
+  // Clean up all drop indicators
+  document.querySelectorAll('.drop-target').forEach(function(el) { el.classList.remove('drop-target'); });
+  document.querySelectorAll('.drop-above').forEach(function(el) { el.classList.remove('drop-above'); });
+  document.querySelectorAll('.drop-below').forEach(function(el) { el.classList.remove('drop-below'); });
+});
+
+document.addEventListener('dragover', function(e) {
+  var target = e.target.closest('.tree-item');
+  if (!target) return;
+
+  e.preventDefault();
+  e.dataTransfer.dropEffect = 'move';
+
+  // Clean previous indicators
+  document.querySelectorAll('.drop-target').forEach(function(el) { el.classList.remove('drop-target'); });
+  document.querySelectorAll('.drop-above').forEach(function(el) { el.classList.remove('drop-above'); });
+  document.querySelectorAll('.drop-below').forEach(function(el) { el.classList.remove('drop-below'); });
+
+  var targetType = target.dataset.type;
+  var rect = target.getBoundingClientRect();
+  var y = e.clientY - rect.top;
+  var height = rect.height;
+
+  if (targetType === 'folder') {
+    // Top 25%: drop above, middle 50%: drop into, bottom 25%: drop below
+    if (y < height * 0.25) {
+      target.classList.add('drop-above');
+    } else if (y > height * 0.75) {
+      target.classList.add('drop-below');
+    } else {
+      target.classList.add('drop-target');
+    }
+  } else {
+    // Notes: just show drop-target (will move to same folder)
+    if (y < height * 0.5) {
+      target.classList.add('drop-above');
+    } else {
+      target.classList.add('drop-below');
+    }
+  }
+});
+
+document.addEventListener('dragleave', function(e) {
+  var target = e.target.closest('.tree-item');
+  if (target) {
+    target.classList.remove('drop-target');
+    target.classList.remove('drop-above');
+    target.classList.remove('drop-below');
+  }
+});
+
+document.addEventListener('drop', function(e) {
+  e.preventDefault();
+  var target = e.target.closest('.tree-item');
+  if (!target) return;
+
+  var data;
+  try { data = JSON.parse(e.dataTransfer.getData('text/plain')); } catch(err) { return; }
+
+  var targetId = target.dataset.id;
+  var targetType = target.dataset.type;
+  var dragId = data.id;
+  var dragType = data.type;
+
+  if (dragId === targetId) return; // Can't drop on self
+
+  var rect = target.getBoundingClientRect();
+  var y = e.clientY - rect.top;
+  var height = rect.height;
+
+  if (targetType === 'folder') {
+    if (y >= height * 0.25 && y <= height * 0.75) {
+      // Drop INTO folder
+      postMsg({ name: 'dragDrop', dragId: dragId, dragType: dragType, targetId: targetId, position: 'into' });
+    } else {
+      // Drop above/below folder (reorder)
+      var pos = y < height * 0.25 ? 'above' : 'below';
+      postMsg({ name: 'dragDrop', dragId: dragId, dragType: dragType, targetId: targetId, position: pos });
+    }
+  } else {
+    // Drop on note -> move to same folder as note
+    postMsg({ name: 'dragDrop', dragId: dragId, dragType: dragType, targetId: targetId, position: 'into' });
+  }
+
+  // Clean up
+  document.querySelectorAll('.drop-target, .drop-above, .drop-below').forEach(function(el) {
+    el.classList.remove('drop-target', 'drop-above', 'drop-below');
+  });
+});
+
+// Search filter
+document.addEventListener('input', function(e) {
+  if (e.target.id !== 'search-input') return;
+  var query = e.target.value.toLowerCase();
+
+  document.querySelectorAll('.tree-item.note').forEach(function(item) {
+    var label = item.querySelector('.label').textContent.toLowerCase();
+    item.style.display = (label.indexOf(query) >= 0 || !query) ? '' : 'none';
+  });
+
+  if (query) {
+    document.querySelectorAll('.children').forEach(function(c) { c.classList.remove('collapsed'); });
+    document.querySelectorAll('.toggle').forEach(function(t) { t.innerHTML = '\u25BC'; t.classList.add('expanded'); });
+  }
+
+  document.querySelectorAll('.children').forEach(function(childrenDiv) {
+    var folder = childrenDiv.previousElementSibling;
+    if (!folder || !folder.classList.contains('folder')) return;
+    if (!query) { folder.style.display = ''; childrenDiv.style.display = ''; return; }
+    var hasVisible = childrenDiv.querySelector('.tree-item.note:not([style*="display: none"])');
+    var hasVisibleSub = childrenDiv.querySelector('.tree-item.folder:not([style*="display: none"])');
+    if (hasVisible || hasVisibleSub) { folder.style.display = ''; childrenDiv.style.display = ''; }
+    else { folder.style.display = 'none'; childrenDiv.style.display = 'none'; }
+  });
+});