From fdb35f2f8134bae510946c3f276b8cebc52ea6f0 Mon Sep 17 00:00:00 2001
From: Alya Abbott <alya@zulip.com>
Date: Fri, 18 Jul 2025 13:27:44 -0700
Subject: [PATCH] compose: Improve preview mode tooltips.

Also modernize help center instructions for message previews.
---
 help/preview-your-message-before-sending.md | 14 +++++++++-----
 web/templates/compose_control_buttons.hbs   |  6 +++---
 web/templates/tooltip_templates.hbs         |  6 +++++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/help/preview-your-message-before-sending.md b/help/preview-your-message-before-sending.md
index 02eac0d3d6..fa0ba515b2 100644
--- a/help/preview-your-message-before-sending.md
+++ b/help/preview-your-message-before-sending.md
@@ -2,21 +2,25 @@
 
 {start_tabs}
 
+{tab|desktop-web}
+
 {!start-composing.md!}
 
 1. Write a message.
 
-1. Click the **eye** (<i class="zulip-icon zulip-icon-preview"></i>) icon at
-   the bottom of the compose box.
+1. Click the **preview mode** (<i class="zulip-icon zulip-icon-preview"></i>)
+   icon at the bottom of the compose box.
+
+1. *(optional)* Click the **exit preview mode** (<i class="zulip-icon
+   zulip-icon-edit"></i>) icon to edit your message.
 
 !!! keyboard_tip ""
 
-    You can also use <kbd>Alt</kbd> + <kbd>P</kbd> to toggle between previewing and editing your message.
+    You can also use <kbd>Alt</kbd> + <kbd>P</kbd> to toggle between previewing
+    and editing your message.
 
 {end_tabs}
 
-Click the **pencil and paper** (<i class="zulip-icon zulip-icon-edit"></i>) icon to resume editing.
-
 ## Related articles
 
 * [Message formatting](/help/format-your-message-using-markdown)
diff --git a/web/templates/compose_control_buttons.hbs b/web/templates/compose_control_buttons.hbs
index e16854f746..36bb75f207 100644
--- a/web/templates/compose_control_buttons.hbs
+++ b/web/templates/compose_control_buttons.hbs
@@ -1,10 +1,10 @@
 <div class="compose-scrollable-buttons compose-control-buttons-container order-1" tabindex="-1">
     <input type="file" class="file_input notvisible" multiple />
     <div class="compose_control_button_container compose_button_tooltip" data-tooltip-template-id="preview-tooltip" data-tippy-maxWidth="none">
-        <a role="button" class="markdown_preview compose_control_button zulip-icon zulip-icon-preview" aria-label="{{t 'Preview' }}" tabindex=0></a>
+        <a role="button" class="markdown_preview compose_control_button zulip-icon zulip-icon-preview" aria-label="{{t 'Preview mode' }}" tabindex=0></a>
     </div>
-    <div class="compose_control_button_container compose_button_tooltip" data-tippy-content="{{t 'Write' }}">
-        <a role="button" class="undo_markdown_preview compose_control_button zulip-icon zulip-icon-compose-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;"></a>
+    <div class="compose_control_button_container compose_button_tooltip" data-tooltip-template-id="exit-preview-tooltip" data-tippy-maxWidth="none">
+        <a role="button" class="undo_markdown_preview compose_control_button zulip-icon zulip-icon-compose-edit" aria-label="{{t 'Exit preview mode' }}" tabindex=0 style="display:none;"></a>
     </div>
     {{#if file_upload_enabled }}
     <div class="compose_control_button_container preview_mode_disabled compose_button_tooltip" data-tippy-content="{{t 'Upload files' }}">
diff --git a/web/templates/tooltip_templates.hbs b/web/templates/tooltip_templates.hbs
index 9ee772f985..b39b099aca 100644
--- a/web/templates/tooltip_templates.hbs
+++ b/web/templates/tooltip_templates.hbs
@@ -53,7 +53,11 @@
     {{tooltip_hotkey_hints "Ctrl" "Enter"}}
 </template>
 <template id="preview-tooltip">
-    {{t 'Preview' }}
+    {{t 'Preview mode' }}
+    {{tooltip_hotkey_hints "Alt" "P"}}
+</template>
+<template id="exit-preview-tooltip">
+    {{t 'Exit preview mode' }}
     {{tooltip_hotkey_hints "Alt" "P"}}
 </template>
 <template id="add-global-time-tooltip">