joplin-plugin-explorer 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "joplin-plugin-explorer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A unified sidebar that displays notebooks and notes together in a single tree view",
   "author": "lim0513",
   "homepage": "https://github.com/lim0513/joplin-explorer",

package/publish/index.js

@@ -328,6 +328,7 @@ joplin.plugins.register({
           + '    <input id="search-input" type="text" placeholder="\uD83D\uDD0D ' + t.search + '" />'
           + '  </div>'
           + '  <div id="tree-container">' + treeHtml + '</div>'
+          + '  <div id="search-results" style="display:none;"></div>'
           + '  <div class="bottom-bar">'
           + '    <button id="btn-sync" title="' + t.sync + '">\uD83D\uDD04 ' + t.sync + '</button>'
           + '  </div>'
@@ -370,7 +371,7 @@ joplin.plugins.register({
         var query = msg.query;
         if (!query || !query.trim()) {
           // Empty query: tell webview to clear search results
-          await joplin.views.panels.postMessage(panel, { name: 'searchResults', results: null, query: '' });
+          await joplin.views.panels.postMessage(panel, { name: 'searchResults', results: null, query: '', searchId: msg.searchId });
           return;
         }
         try {
@@ -418,7 +419,7 @@ joplin.plugins.register({
               folderName: folderNameMap[note.parent_id] || '',
             });
           }
-          await joplin.views.panels.postMessage(panel, { name: 'searchResults', results: items, query: query });
+          await joplin.views.panels.postMessage(panel, { name: 'searchResults', results: items, query: query, searchId: msg.searchId });
         } catch (err) {
           console.error('Joplin Explorer: search error', err);
         }

package/publish/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 1,
   "id": "com.github.joplin-explorer",
   "app_min_version": "2.6.0",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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

@@ -274,6 +274,25 @@ html, body {
   box-shadow: 0 2px 0 0 var(--joplin-color2, #4a9cf5);
 }
 
+#search-results {
+  flex: 1;
+  overflow-y: scroll;
+  padding: 4px 0;
+}
+
+#search-results::-webkit-scrollbar {
+  width: 8px;
+}
+
+#search-results::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#search-results::-webkit-scrollbar-thumb {
+  background: var(--joplin-color-faded, #888);
+  border-radius: 4px;
+}
+
 /* Search results */
 .search-status {
   padding: 8px 12px;

package/publish/webview/panel.js

@@ -21,7 +21,6 @@ var _observer = new MutationObserver(function() {
   if (!container) return;
 
   if (_isFirstRender) {
-    // First render: scroll to selected note
     _isFirstRender = false;
     var selected = container.querySelector('.tree-item.note.selected');
     if (selected) {
@@ -30,7 +29,6 @@ var _observer = new MutationObserver(function() {
       }, 30);
     }
   } else {
-    // Subsequent renders: restore previous scroll position
     container.scrollTop = _savedScrollTop;
   }
 });
@@ -214,8 +212,9 @@ webviewApi.onMessage(function(msg) {
       }, 2000);
     }
   } else if (m.name === 'searchResults') {
+    // Ignore stale search results
+    if (m.searchId !== undefined && m.searchId !== _searchId) return;
     if (m.results === null) {
-      // Cleared search
       if (_searchMode) exitSearchMode();
     } else {
       renderSearchResults(m.results, m.query);
@@ -351,6 +350,7 @@ document.addEventListener('drop', function(e) {
 // ======================== Content Search ========================
 var _searchTimer = null;
 var _searchMode = false;
+var _searchId = 0;
 
 function escapeRegex(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -364,10 +364,19 @@ function highlightText(text, query) {
   return escaped.replace(regex, '<mark class="search-highlight">$1</mark>');
 }
 
+function showSearchContainer(show) {
+  var tree = document.getElementById('tree-container');
+  var search = document.getElementById('search-results');
+  if (tree) tree.style.display = show ? 'none' : '';
+  if (search) search.style.display = show ? '' : 'none';
+}
+
 function renderSearchResults(results, query) {
-  var container = document.getElementById('tree-container');
+  var container = document.getElementById('search-results');
   if (!container) return;
 
+  showSearchContainer(true);
+
   if (!results || results.length === 0) {
     container.innerHTML = '<div class="search-status">' + T('searchNoResult') + '</div>';
     return;
@@ -401,8 +410,7 @@ function renderSearchResults(results, query) {
 
 function exitSearchMode() {
   _searchMode = false;
-  // Trigger a refresh to restore the tree
-  postMsg({ name: 'refresh' });
+  showSearchContainer(false);
 }
 
 document.addEventListener('input', function(e) {
@@ -410,21 +418,24 @@ document.addEventListener('input', function(e) {
   var query = e.target.value.trim();
 
   if (_searchTimer) clearTimeout(_searchTimer);
+  _searchId++;
+  var currentSearchId = _searchId;
 
   if (!query) {
     if (_searchMode) exitSearchMode();
     return;
   }
 
-  // Show "searching..." immediately
-  var container = document.getElementById('tree-container');
-  if (container) {
-    container.innerHTML = '<div class="search-status">' + T('searching') + '</div>';
+  _searchMode = true;
+  var searchContainer = document.getElementById('search-results');
+  if (searchContainer) {
+    searchContainer.innerHTML = '<div class="search-status">' + T('searching') + '</div>';
   }
+  showSearchContainer(true);
 
   // Debounce: wait 400ms after typing stops
   _searchTimer = setTimeout(function() {
-    postMsg({ name: 'search', query: query });
+    postMsg({ name: 'search', query: query, searchId: currentSearchId });
   }, 400);
 });