settings_ui: Add checkbox for toggling field.

Added a checkbox to toggle the option to automatically offer
to update the time zone with the browser time zone,
which is handled by the user profile field
"web_suggest_update_timezone".

A tooltip is also attached explaining the feature.

Fixes part of #16957

web/src/server_events_dispatch.js

@@ -793,6 +793,7 @@ export function dispatch_normal_event(event) {
                 "starred_message_counts",
                 "web_navigate_to_sent_message",
                 "enter_sends",
+                "web_suggest_update_timezone",
             ];
 
             const original_home_view = user_settings.web_home_view;
@@ -911,6 +912,9 @@ export function dispatch_normal_event(event) {
             if (event.property === "web_escape_navigates_to_home_view") {
                 $("#go-to-home-view-hotkey-help").toggleClass("notdisplayed", !event.value);
             }
+            if (event.property === "web_suggest_update_timezone") {
+                $("#automatically_offer_update_time_zone").prop("checked", event.value);
+            }
             settings_preferences.update_page(event.property);
             break;
         }

web/src/settings_account.ts

@@ -843,6 +843,19 @@ export function set_up(): void {
         );
     });
 
+    $<HTMLInputElement>("#automatically_offer_update_time_zone").on("change", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const data = {web_suggest_update_timezone: this.checked};
+        settings_ui.do_settings_change(
+            channel.patch,
+            "/json/settings",
+            data,
+            $(".timezone-setting-status").expectOne(),
+        );
+    });
+
     $("#privacy_settings_box").on("change", "input", function (this: HTMLInputElement, e) {
         e.preventDefault();
         e.stopPropagation();

web/src/settings_config.ts

@@ -537,6 +537,9 @@ export const preferences_settings_labels = {
             defaultMessage: "Convert emoticons before sending (<code>:)</code> becomes 😃)",
         }),
     ),
+    web_suggest_update_timezone: $t({
+        defaultMessage: "Offer to update to my computer's time zone",
+    }),
     web_escape_navigates_to_home_view: $t({defaultMessage: "Escape key navigates to home view"}),
     web_font_size_px: $t({defaultMessage: "Message-area font size (px)"}),
     web_line_height_percent: $t({defaultMessage: "Message-area line height (%)"}),

web/templates/settings/profile_settings.hbs

@@ -32,6 +32,13 @@
                             </select>
                         </div>
                     </div>
+                    <div id="automatically_offer_update_time_zone_container">
+                        {{> settings_checkbox
+                          setting_name="automatically_offer_update_time_zone"
+                          is_checked=settings_object.web_suggest_update_timezone
+                          label=settings_label.web_suggest_update_timezone
+                          }}
+                    </div>
                 </form>
 
                 <form class="custom-profile-fields-form grid"></form>

web/tests/dispatch.test.cjs

@@ -1198,6 +1198,16 @@ run_test("user_settings", ({override}) => {
     override(user_settings, "web_navigate_to_sent_message", true);
     dispatch(event);
     assert_same(user_settings.web_navigate_to_sent_message, false);
+
+    {
+        const event = event_fixtures.user_settings_web_suggest_update_timezone;
+        dispatch(event);
+        assert.equal($("#automatically_offer_update_time_zone").prop("checked"), true);
+
+        event.value = false;
+        dispatch(event);
+        assert.equal($("#automatically_offer_update_time_zone").prop("checked"), false);
+    }
 });
 
 run_test("update_message (read)", ({override}) => {

web/tests/lib/events.cjs

@@ -1129,6 +1129,14 @@ exports.fixtures = {
         value: 2,
     },
 
+    user_settings_web_suggest_update_timezone: {
+        type: "user_settings",
+        op: "update",
+        property: "web_suggest_update_timezone",
+        value: true,
+        id: 1,
+    },
+
     user_status__set_status_emoji: {
         id: 1,
         type: "user_status",