fix(jump_to): fix issue where attributes/tags don't show in results (#6752)

Author: eliandoran

apps/client/src/services/note_autocomplete.ts

@@ -36,6 +36,8 @@ export interface Suggestion {
     commandId?: string;
     commandDescription?: string;
     commandShortcut?: string;
+    attributeSnippet?: string;
+    highlightedAttributeSnippet?: string;
 }
 
 export interface Options {
@@ -323,7 +325,33 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
                             html += '</div>';
                             return html;
                         }
-                        return `<span class="${suggestion.icon ?? "bx bx-note"}"></span> ${suggestion.highlightedNotePathTitle}`;
+                        // Add special class for search-notes action
+                        const actionClass = suggestion.action === "search-notes" ? "search-notes-action" : "";
+                        
+                        // Choose appropriate icon based on action
+                        let iconClass = suggestion.icon ?? "bx bx-note";
+                        if (suggestion.action === "search-notes") {
+                            iconClass = "bx bx-search";
+                        } else if (suggestion.action === "create-note") {
+                            iconClass = "bx bx-plus";
+                        } else if (suggestion.action === "external-link") {
+                            iconClass = "bx bx-link-external";
+                        }
+                        
+                        // Simplified HTML structure without nested divs
+                        let html = `<div class="note-suggestion ${actionClass}">`;
+                        html += `<span class="${iconClass}" style="display: inline-block; width: 16px; vertical-align: top;"></span>`;
+                        html += `<span style="display: inline-block; width: calc(100% - 20px); padding-left: 4px;">`;
+                        html += `<span class="search-result-title" style="display: block;">${suggestion.highlightedNotePathTitle}</span>`;
+                        
+                        // Add attribute snippet inline if available
+                        if (suggestion.highlightedAttributeSnippet) {
+                            html += `<span style="display: block; font-size: 0.8em; color: var(--muted-text-color); opacity: 0.6; line-height: 1;" class="search-result-attributes">${suggestion.highlightedAttributeSnippet}</span>`;
+                        }
+                        
+                        html += `</span>`;
+                        html += `</div>`;
+                        return html;
                     }
                 },
                 // we can't cache identical searches because notes can be created / renamed, new recent notes can be added

apps/client/src/stylesheets/style.css

@@ -1795,20 +1795,69 @@ textarea {
     font-size: 1em;
 }
 
+.jump-to-note-dialog .modal-dialog {
+    max-width: 900px;
+    width: 90%;
+}
+
 .jump-to-note-dialog .modal-header {
     align-items: center;
 }
 
 .jump-to-note-dialog .modal-body {
     padding: 0;
+    min-height: 200px;
 }
 
 .jump-to-note-results .aa-dropdown-menu {
-    max-height: 40vh;
+    max-height: calc(80vh - 200px);
+    width: 100%;
+    max-width: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    box-shadow: none;
+}
+
+.jump-to-note-results {
+    width: 100%;
 }
 
 .jump-to-note-results .aa-suggestions {
-    padding: 1rem;
+    padding: 0;
+    width: 100%;
+}
+
+.jump-to-note-results .aa-dropdown-menu .aa-suggestion {
+    white-space: normal;
+    padding: 2px 12px !important;
+    line-height: 1.1;
+    position: relative;
+    border-radius: 0;
+    margin: 0 !important;
+}
+
+.jump-to-note-results .note-suggestion {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+}
+
+.jump-to-note-results .aa-suggestion:not(:last-child)::after {
+    display: none; /* Remove dividers for more compact look */
+}
+
+.jump-to-note-results .aa-suggestion:last-child::after {
+    display: none;
+}
+
+.jump-to-note-results .aa-suggestion.disabled::after {
+    display: none;
+}
+
+.jump-to-note-results .aa-dropdown-menu .aa-suggestion:hover,
+.jump-to-note-results .aa-dropdown-menu .aa-cursor {
+    background-color: var(--hover-item-background-color, #f8f9fa);
 }
 
 /* Command palette styling */
@@ -1826,8 +1875,24 @@ textarea {
 
 .jump-to-note-dialog .aa-cursor .command-suggestion,
 .jump-to-note-dialog .aa-suggestion:hover .command-suggestion {
-    border-left-color: var(--link-color);
-    background-color: var(--hover-background-color);
+    background-color: transparent;
+}
+
+.jump-to-note-dialog .show-in-full-search,
+.jump-to-note-results .show-in-full-search {
+    border-top: 1px solid var(--main-border-color);
+    padding-top: 12px;
+    margin-top: 12px;
+}
+
+.jump-to-note-results .aa-suggestion .search-notes-action {
+    border-top: 1px solid var(--main-border-color);
+    margin-top: 8px;
+    padding-top: 8px;
+}
+
+.jump-to-note-results .aa-suggestion:has(.search-notes-action)::after {
+    display: none;
 }
 
 .jump-to-note-dialog .command-icon {
@@ -2284,7 +2349,8 @@ footer.webview-footer button {
 
 /* Search result highlighting */
 .search-result-title b,
-.search-result-content b {
+.search-result-content b,
+.search-result-attributes b {
     font-weight: 900;
     color: var(--admonition-warning-accent-color);
 }

apps/client/src/stylesheets/theme-next/base.css

@@ -538,8 +538,8 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
 /* List item */
 .jump-to-note-dialog .aa-suggestions div,
 .note-detail-empty .aa-suggestions div {
-    border-radius: 6px;
-    padding: 6px 12px;
+    border-radius: 0;
+    padding: 12px 16px;
     color: var(--menu-text-color);
     cursor: default;
 }

apps/client/src/widgets/dialogs/jump_to_note.tsx

@@ -9,6 +9,7 @@ import appContext from "../../components/app_context";
 import commandRegistry from "../../services/command_registry";
 import { refToJQuerySelector } from "../react/react_utils";
 import useTriliumEvent from "../react/hooks";
+import shortcutService from "../../services/shortcuts";
 
 const KEEP_LAST_SEARCH_FOR_X_SECONDS = 120;
 
@@ -83,6 +84,27 @@ function JumpToNoteDialogComponent() {
         $autoComplete
             .trigger("focus")
             .trigger("select");
+            
+        // Add keyboard shortcut for full search
+        shortcutService.bindElShortcut($autoComplete, "ctrl+return", () => {
+            if (!isCommandMode) {
+                showInFullSearch();
+            }
+        });
+    }
+    
+    async function showInFullSearch() {
+        try {
+            setShown(false);
+            const searchString = actualText.current?.trim();
+            if (searchString && !searchString.startsWith(">")) {
+                await appContext.triggerCommand("searchNotes", {
+                    searchString
+                });
+            }
+        } catch (error) {
+            console.error("Failed to trigger full search:", error);
+        }
     }
 
     return (
@@ -108,7 +130,12 @@ function JumpToNoteDialogComponent() {
                 />}
             onShown={onShown}
             onHidden={() => setShown(false)}
-            footer={!isCommandMode && <Button className="show-in-full-text-button" text={t("jump_to_note.search_button")} keyboardShortcut="Ctrl+Enter" />}
+            footer={!isCommandMode && <Button 
+                className="show-in-full-text-button" 
+                text={t("jump_to_note.search_button")} 
+                keyboardShortcut="Ctrl+Enter"
+                onClick={showInFullSearch}
+            />}
             show={shown}
         >
             <div className="algolia-autocomplete-container jump-to-note-results" ref={containerRef}></div>