Merge pull request #35050 from sokumon/sidebar-fixes

frappe/public/js/frappe/ui/sidebar/sidebar.js

@@ -240,6 +240,9 @@ frappe.ui.Sidebar = class Sidebar {
 				icon: "search",
 				type: "Button",
 				id: "navbar-modal-search",
+				suffix: {
+					keyboard_shortcut: "CtrlK",
+				},
 			},
 		];
 		this.standard_items.forEach((w) => {

frappe/public/js/frappe/ui/sidebar/sidebar_item.html

@@ -35,6 +35,9 @@
                     {% } %}
                 </span>
                 <span class="sidebar-item-label">{{ item.label }}</span>
+                {% if (item.suffix) { %}
+                     <span class="sidebar-item-suffix">{{ item.suffix }}</span>
+                {% } %}
                 {% if (!item.show_arrow) { %}
                 <div class="sidebar-item-control"></div>
                 {% } %}

frappe/public/js/frappe/ui/sidebar/sidebar_item.js

@@ -56,6 +56,7 @@ frappe.ui.sidebar_item.TypeLink = class SidebarItem {
 	prepare() {}
 	make() {
 		this.path = this.get_path();
+		this.set_suffix();
 		if (!this.item.icon && !(this.item.child && this.item.parent.indent)) {
 			this.item.icon = "list-alt";
 		}
@@ -69,6 +70,19 @@ frappe.ui.sidebar_item.TypeLink = class SidebarItem {
 		$(this.container).append(this.wrapper);
 		this.setup_editing_controls();
 	}
+	set_suffix() {
+		if (this.item.suffix) {
+			if (this.item.suffix.keyboard_shortcut) {
+				this.item.suffix = this.get_shortcut_html(this.item.suffix.keyboard_shortcut);
+			}
+		}
+	}
+	get_shortcut_html(shortcut) {
+		if (frappe.utils.is_mac()) {
+			shortcut = shortcut.replace("Ctrl", "⌘");
+		}
+		return `<span class="sidebar-item-suffix keyboard-shortcut">${shortcut}</span>`;
+	}
 	setup_editing_controls() {
 		this.menu_items = this.get_menu_items();
 		this.$edit_menu = this.wrapper.find(".edit-menu");

frappe/public/scss/desk/sidebar.scss

@@ -280,3 +280,13 @@
 .indent + .nested-container {
 	margin-left: 16px;
 }
+.sidebar-item-suffix {
+	margin-left: auto;
+	.keyboard-shortcut {
+		color: var(--ink-gray-4, #999999);
+		font-size: var(--text-sm);
+		line-height: 1.15;
+		letter-spacing: 0.02em;
+		font-weight: 420;
+	}
+}