joplin-plugin-explorer 1.1.4 → 1.2.1

package/publish/manifest.json

@@ -1,18 +1,13 @@
-{
-  "manifest_version": 1,
-  "id": "com.github.joplin-explorer",
-  "app_min_version": "2.6.0",
-  "version": "1.1.4",
-  "name": "Joplin Explorer",
-  "description": "A unified sidebar that displays notebooks and notes together in a single tree view",
-  "author": "lim0513",
-  "homepage_url": "https://github.com/lim0513/joplin-explorer",
-  "repository_url": "https://github.com/lim0513/joplin-explorer",
-  "keywords": ["sidebar", "explorer", "tree-view", "notebooks", "notes"],
-  "categories": ["appearance", "productivity"],
-  "screenshots": [
-    {"src": "screenshots/tree-view.png", "label": "Unified tree view of notebooks and notes"},
-    {"src": "screenshots/search.png", "label": "Full-text search with keyword highlighting"},
-    {"src": "screenshots/context-menu.png", "label": "Right-click context menu"}
-  ]
-}
+{
+  "manifest_version": 1,
+  "id": "com.github.joplin-explorer",
+  "app_min_version": "2.6.0",
+  "version": "1.2.1",
+  "name": "Joplin Explorer",
+  "description": "A unified sidebar that displays notebooks and notes together in a single tree view",
+  "author": "lim0513",
+  "homepage_url": "https://github.com/lim0513/joplin-explorer",
+  "repository_url": "https://github.com/lim0513/joplin-explorer",
+  "keywords": ["sidebar", "explorer", "tree-view", "notebooks", "notes"],
+  "categories": ["appearance", "productivity"]
+}

package/publish/webview/panel.css

@@ -254,26 +254,118 @@ html, body {
   margin: 4px 0;
 }
 
+/* Pinned section */
+.pinned-section-header {
+  display: flex;
+  align-items: center;
+  padding: 3px 8px 3px 0;
+  gap: 5px;
+  margin: 1px 4px;
+  min-height: 24px;
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+  color: var(--joplin-color-faded, #888);
+  font-weight: 700;
+}
+
+.pinned-section-header:hover {
+  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12));
+}
+
+.pinned-section-body {
+  border-bottom: 1px solid var(--joplin-divider-color, #ddd);
+  margin-bottom: 2px;
+}
+
+.pinned-section-body.collapsed {
+  display: none;
+}
+
+.pinned-item {
+  padding-left: 18px !important;
+}
+
+/* Empty drop zone — sticky at bottom of scroll viewport */
+.drop-zone-empty {
+  position: sticky;
+  bottom: 0;
+  height: 32px;
+  flex-shrink: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+}
+
+/* Only show during drag (activated by JS class on tree-container) */
+#tree-container.dragging-active .drop-zone-empty {
+  opacity: 1;
+  pointer-events: auto;
+  border: 2px dashed var(--joplin-color2, #4a9cf5);
+  border-radius: 6px;
+  margin: 4px 8px;
+  text-align: center;
+  line-height: 28px;
+  font-size: 11px;
+  color: var(--joplin-color2, #4a9cf5);
+  background: rgba(74, 156, 245, 0.08);
+}
+
+/* Pinned section accepts drops during drag */
+#tree-container.dragging-active .pinned-section-header {
+  border: 2px dashed var(--joplin-color2, #4a9cf5);
+  border-radius: 4px;
+}
+
 /* Drag & Drop */
 .tree-item.dragging {
-  opacity: 0.4;
+  opacity: 0.35;
+  filter: grayscale(30%);
 }
 
 .tree-item.drop-target {
-  background: var(--joplin-selected-color, rgba(74, 156, 245, 0.25));
+  background: var(--joplin-selected-color, rgba(74, 156, 245, 0.28));
   outline: 2px solid var(--joplin-color2, #4a9cf5);
   outline-offset: -2px;
-  border-radius: 3px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px rgba(74, 156, 245, 0.15);
 }
 
-.tree-item.drop-above {
-  box-shadow: 0 -2px 0 0 var(--joplin-color2, #4a9cf5);
+/* Horizontal insertion bar (above/below) — position:relative only when active */
+.tree-item.drop-above,
+.tree-item.drop-below {
+  position: relative;
 }
 
-.tree-item.drop-below {
-  box-shadow: 0 2px 0 0 var(--joplin-color2, #4a9cf5);
+.tree-item.drop-above::before,
+.tree-item.drop-below::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  right: 4px;
+  height: 3px;
+  background: var(--joplin-color2, #4a9cf5);
+  border-radius: 2px;
+  box-shadow: 0 0 4px rgba(74, 156, 245, 0.6);
+  pointer-events: none;
+  z-index: 5;
 }
 
+.tree-item.drop-above::before {
+  top: -2px;
+}
+
+.tree-item.drop-below::before {
+  bottom: -2px;
+}
+
+/* Dropping into empty area -> create new notebook */
+#tree-container.drop-empty {
+  box-shadow: inset 0 0 0 2px var(--joplin-color2, #4a9cf5);
+  background: rgba(74, 156, 245, 0.06);
+}
+
+
 #search-results {
   flex: 1;
   overflow-y: scroll;
@@ -307,11 +399,16 @@ html, body {
   padding: 8px 10px;
   gap: 8px;
   min-height: auto;
+  margin: 0; /* override .tree-item margin for note items in search results */
+  border-radius: 0;
 }
 
 .search-result-item .icon {
-  margin-top: 2px;
   flex-shrink: 0;
+  font-size: 12px;
+  width: 18px;
+  text-align: center;
+  line-height: 16.8px; /* match .search-result-title 12px * 1.4 */
 }
 
 .search-result-content {
@@ -347,6 +444,83 @@ html, body {
   word-break: break-all;
 }
 
+/* Search section headers */
+.search-section-header {
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--joplin-color-faded, #888);
+  background: var(--joplin-background-color3, rgba(100, 100, 100, 0.06));
+  border-bottom: 1px solid var(--joplin-divider-color, #eee);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.search-section-header:hover {
+  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12));
+}
+
+.section-toggle {
+  display: inline-block;
+  font-size: 9px;
+  width: 12px;
+  text-align: center;
+  transition: transform 0.15s;
+}
+
+.search-section-body.collapsed {
+  display: none;
+}
+
+/* Tag items in search results */
+.search-tag-item {
+  cursor: pointer;
+}
+
+.search-tag-item:hover {
+  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
+}
+
+.tag-expand-arrow {
+  flex-shrink: 0;
+  font-size: 9px;
+  color: var(--joplin-color-faded, #888);
+  transition: transform 0.15s;
+  margin-right: 4px;
+}
+
+.tag-expand-arrow.expanded {
+  transform: rotate(90deg);
+}
+
+.tag-notes-container {
+  padding-left: 16px;
+  border-left: 2px solid var(--joplin-divider-color, #eee);
+  margin-left: 18px;
+}
+
+/* Folder items in search results */
+.search-folder-item {
+  cursor: pointer;
+}
+
+.search-folder-item:hover {
+  background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
+}
+
+/* Flash highlight when locating a folder from search */
+@keyframes locate-pulse {
+  0%   { background: rgba(74, 156, 245, 0.5); }
+  100% { background: transparent; }
+}
+
+.tree-item.locate-flash {
+  animation: locate-pulse 1.5s ease-out;
+  border-radius: 4px;
+}
+
 /* Inline input dialog */
 .inline-input-overlay {
   position: fixed;