From 24758f6be2ae93ba6c07672991e8b14ef9747942 Mon Sep 17 00:00:00 2001
From: Ejaaz Khan <ejaaz@frappe.io>
Date: Tue, 13 Jan 2026 12:52:47 +0530
Subject: [PATCH] feat(form): redesign sidebar

---
 .../js/frappe/form/sidebar/form_sidebar.js    | 39 ++++++++++++--
 .../frappe/form/templates/form_sidebar.html   | 40 ++++++++++----
 frappe/public/js/frappe/form/toolbar.js       | 53 ++++++-------------
 frappe/public/scss/desk/form_sidebar.scss     | 20 ++++++-
 4 files changed, 98 insertions(+), 54 deletions(-)

diff --git a/frappe/public/js/frappe/form/sidebar/form_sidebar.js b/frappe/public/js/frappe/form/sidebar/form_sidebar.js
index 803bf40d4e..22d354915f 100644
--- a/frappe/public/js/frappe/form/sidebar/form_sidebar.js
+++ b/frappe/public/js/frappe/form/sidebar/form_sidebar.js
@@ -38,11 +38,9 @@ frappe.ui.form.Sidebar = class {
 		this.indicator = $(this.sidebar).find(".sidebar-meta-details .indicator-pill");
 		this.setup_copy_event();
 		this.make_like();
+		this.setup_print();
+		this.setup_editable_title();
 		this.refresh();
-
-		// setup editable title
-		let form_sidebar_text = $(this.sidebar).find(".sidebar-meta-details .form-title-text");
-		this.toolbar.setup_editable_title(form_sidebar_text);
 	}
 
 	setup_keyboard_shortcuts() {
@@ -79,6 +77,39 @@ frappe.ui.form.Sidebar = class {
 			});
 	}
 
+	setup_editable_title() {
+		// setup editable title
+		let form_sidebar_text = $(this.sidebar).find(".form-stats-likes .form-title-text");
+		this.toolbar.setup_editable_title(form_sidebar_text);
+	}
+
+	setup_print() {
+		const print_settings = frappe.model.get_doc(":Print Settings", "Print Settings");
+		const allow_print_for_draft = cint(print_settings.allow_print_for_draft);
+		const allow_print_for_cancelled = cint(print_settings.allow_print_for_cancelled);
+
+		if (
+			!frappe.model.is_submittable(this.frm.doc.doctype) ||
+			this.frm.doc.docstatus == 1 ||
+			(allow_print_for_cancelled && this.frm.doc.docstatus == 2) ||
+			(allow_print_for_draft && this.frm.doc.docstatus == 0)
+		) {
+			if (frappe.model.can_print(null, this.frm) && !this.frm.meta.issingle) {
+				let print_icon = this.page.add_action_icon(
+					"printer",
+					() => {
+						this.frm.print_doc();
+					},
+					"",
+					__("Print")
+				);
+				print_icon.css("background-color", "transparent");
+				print_icon.addClass("p-0");
+				this.sidebar.find(".form-print").append(print_icon);
+			}
+		}
+	}
+
 	make_like() {
 		this.like_wrapper = this.sidebar.find(".liked-by");
 		this.like_icon = this.sidebar.find(".liked-by .like-icon");
diff --git a/frappe/public/js/frappe/form/templates/form_sidebar.html b/frappe/public/js/frappe/form/templates/form_sidebar.html
index 7db10aa603..a6314507b2 100644
--- a/frappe/public/js/frappe/form/templates/form_sidebar.html
+++ b/frappe/public/js/frappe/form/templates/form_sidebar.html
@@ -17,7 +17,10 @@
 		</div>
 		{% endif %}
 	</div>
-	<div class="form-stats-likes">
+	{% if image_field %}
+	<div class="align-items-baseline flex form-stats-likes">
+		<div class="form-title-text"></div>
+		<div class="form-print"></div>
 		<span class="liked-by like-action d-flex align-items-center">
 			<svg class="icon icon-sm like-icon pointer">
 				<use href="#icon-heart"></use>
@@ -25,14 +28,29 @@
 			<span class="like-count ml-2"></span>
 		</span>
 	</div>
+	{% endif %}
 </div>
-<div class="sidebar-section sidebar-meta-details border-bottom">
-	<div class="form-details flex justify-between">
-		<span class="bold ellipsis form-title-text mr-3 pointer text-medium" title="{{__("Click to edit")}}">{%= frappe.utils.html2text(frm.get_title()) %}</span>
+<div class="sidebar-section sidebar-meta-details border-bottom flex justify-between">
+	<div>
+		{% if frm.doc.name != frm.get_title() %}
+		<div class="form-details flex justify-between">
+			<span class="bold ellipsis form-title-text mr-3 pointer text-medium" title="{{__("Click to edit")}}">{%= frappe.utils.html2text(frm.get_title()) %}</span>
+		</div>
+		{% endif %}
+		<div class="form-name-container mt-2 flex justify-between form-name-copy" data-copy="{{frm.doc.name}}" >
+			<span class="ellipsis mr-3">{%= frm.doc.name %}</span>
+		</div>
 	</div>
-	{% if frm.doc.name != frm.get_title() %}
-	<div class="form-name-container mt-2 flex justify-between form-name-copy" data-copy="{{frm.doc.name}}" >
-		<span class="ellipsis mr-3">{%= frm.doc.name %}</span>
+	{% if not image_field %}
+	<div class="align-items-baseline flex form-stats-likes">
+		<div class="form-title-text"></div>
+		<div class="form-print"></div>
+		<span class="liked-by like-action d-flex align-items-center">
+			<svg class="icon icon-sm like-icon pointer">
+				<use href="#icon-heart"></use>
+			</svg>
+			<span class="like-count ml-2"></span>
+		</span>
 	</div>
 	{% endif %}
 </div>
@@ -60,7 +78,7 @@
 	</div>
 	{% } %}
 </div>
-<div class="sidebar-section form-assignments border-bottom">
+<div class="sidebar-section form-assignments">
 	<div>
 		<span class="form-sidebar-items">
 			<span class="add-assignment-label form-sidebar-label">
@@ -74,7 +92,7 @@
 		<div class="assignments"></div>
 	</div>
 </div>
-<div class="sidebar-section form-attachments border-bottom">
+<div class="sidebar-section form-attachments">
 	<div class="attachments-actions">
 		<span class="form-sidebar-items">
 			<span>
@@ -94,7 +112,7 @@
 		</span>
 	</a>
 </div>
-<div class="sidebar-section form-tags border-bottom">
+<div class="sidebar-section form-tags">
 	<div>
 		<span class="form-sidebar-items">
 			<div class="form-sidebar-label">
@@ -104,7 +122,7 @@
 		</span>
 	</div>
 </div>
-<div class="sidebar-section form-shared">
+<div class="sidebar-section form-shared border-bottom">
 	<div>
 		<span class="form-sidebar-items">
 			<span class="share-label form-sidebar-label">
diff --git a/frappe/public/js/frappe/form/toolbar.js b/frappe/public/js/frappe/form/toolbar.js
index d36fd811c1..8d1b448be8 100644
--- a/frappe/public/js/frappe/form/toolbar.js
+++ b/frappe/public/js/frappe/form/toolbar.js
@@ -200,17 +200,27 @@ frappe.ui.form.Toolbar = class Toolbar {
 			}
 		});
 	}
+
 	setup_editable_title(element) {
 		let me = this;
 
 		if (me.is_title_editable()) {
-			$(element).tooltip({
-				delay: { show: 100, hide: 100 },
-				trigger: "hover",
-			});
-			$(element).addClass("pointer");
+			let edit_icon = this.page.add_action_icon(
+				"square-pen",
+				() => {
+					me.setup_editable_title_click_event(element);
+				},
+				"",
+				__("Edit")
+			);
+			edit_icon.css("background-color", "transparent");
+			edit_icon.addClass("p-0");
+			element.append(edit_icon);
 		}
+	}
 
+	setup_editable_title_click_event(element) {
+		let me = this;
 		element.on("click", () => {
 			let fields = [];
 			let docname = me.frm.doc.name;
@@ -292,6 +302,7 @@ frappe.ui.form.Toolbar = class Toolbar {
 			}
 		});
 	}
+
 	get_dropdown_menu(label) {
 		return this.page.add_dropdown(label);
 	}
@@ -351,7 +362,6 @@ frappe.ui.form.Toolbar = class Toolbar {
 	make_menu_items() {
 		// Print
 		this.add_discard();
-		this.add_print();
 		this.add_open_sidebar();
 		this.add_email();
 		this.add_rename();
@@ -388,37 +398,6 @@ frappe.ui.form.Toolbar = class Toolbar {
 		}
 	}
 
-	add_print() {
-		const print_settings = frappe.model.get_doc(":Print Settings", "Print Settings");
-		const allow_print_for_draft = cint(print_settings.allow_print_for_draft);
-		const allow_print_for_cancelled = cint(print_settings.allow_print_for_cancelled);
-
-		if (
-			!frappe.model.is_submittable(this.frm.doc.doctype) ||
-			this.frm.doc.docstatus == 1 ||
-			(allow_print_for_cancelled && this.frm.doc.docstatus == 2) ||
-			(allow_print_for_draft && this.frm.doc.docstatus == 0)
-		) {
-			if (frappe.model.can_print(null, this.frm) && !this.frm.meta.issingle) {
-				this.page.add_menu_item(
-					__("Print"),
-					() => {
-						this.frm.print_doc();
-					},
-					true
-				);
-				this.print_icon = this.page.add_action_icon(
-					"printer",
-					() => {
-						this.frm.print_doc();
-					},
-					"",
-					__("Print")
-				);
-			}
-		}
-	}
-
 	add_email() {
 		// email
 		if (frappe.model.can_email(null, this.frm) && this.frm.doc.docstatus < 2) {
diff --git a/frappe/public/scss/desk/form_sidebar.scss b/frappe/public/scss/desk/form_sidebar.scss
index 021f856be5..0e82b84d37 100644
--- a/frappe/public/scss/desk/form_sidebar.scss
+++ b/frappe/public/scss/desk/form_sidebar.scss
@@ -8,7 +8,10 @@
 // form sidebar
 .form-sidebar {
 	.sidebar-section {
-		padding: var(--padding-md);
+		padding: var(--padding-md) var(--padding-md) 0;
+		&.border-bottom {
+			padding-bottom: var(--padding-md);
+		}
 		.form-sidebar-items {
 			display: flex;
 			width: 100%;
@@ -88,7 +91,7 @@
 			transition: opacity 0.3s;
 			width: var(--form-sidebar-image-width);
 			height: var(--form-sidebar-image-width);
-			border-radius: var(--border-radius-lg);
+			border-radius: var(--border-radius-full);
 		}
 
 		.sidebar-image-wrapper:hover {
@@ -126,6 +129,19 @@
 	.sidebar-meta-details {
 		.form-name-copy {
 			cursor: copy;
+			font-size: 14px;
+		}
+	}
+
+	.form-stats-likes {
+		gap: 8px;
+		.form-print {
+			button:hover {
+				background: var(--btn-default-hover-bg);
+			}
+			svg {
+				margin: 0px;
+			}
 		}
 	}
 }