From 753d5529b22b2a02e7d01882982affe9e7412d2a Mon Sep 17 00:00:00 2001 From: perf3ct Date: Sat, 23 Aug 2025 18:40:11 +0000 Subject: [PATCH] feat(jump_to): get the styling very close to what we want it to look like... --- apps/client/src/services/note_autocomplete.ts | 30 +++++++- apps/client/src/stylesheets/style.css | 76 +++++++++++++++++-- .../src/stylesheets/theme-next/base.css | 4 +- .../src/widgets/dialogs/jump_to_note.tsx | 29 ++++++- 4 files changed, 130 insertions(+), 9 deletions(-) diff --git a/apps/client/src/services/note_autocomplete.ts b/apps/client/src/services/note_autocomplete.ts index 1138b191e..66031f482 100644 --- a/apps/client/src/services/note_autocomplete.ts +++ b/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, options?: Options) { html += ''; return html; } - return ` ${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 = `
`; + html += ``; + html += ``; + html += `${suggestion.highlightedNotePathTitle}`; + + // Add attribute snippet inline if available + if (suggestion.highlightedAttributeSnippet) { + html += `${suggestion.highlightedAttributeSnippet}`; + } + + html += ``; + html += `
`; + return html; } }, // we can't cache identical searches because notes can be created / renamed, new recent notes can be added diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index c5b24f88e..915c99afe 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1773,20 +1773,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: -30px 50px 93px -50px black; +} + +.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 */ @@ -1804,8 +1853,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 { @@ -2262,7 +2327,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); } diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index c992f7ecb..f8cdc1c98 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -532,8 +532,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; } diff --git a/apps/client/src/widgets/dialogs/jump_to_note.tsx b/apps/client/src/widgets/dialogs/jump_to_note.tsx index 3af1b1aba..c3185585f 100644 --- a/apps/client/src/widgets/dialogs/jump_to_note.tsx +++ b/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 &&