ClockSettings: Add a preview of the current time format

When writing a custom format especially, it's nice to be able to see how
it will look as you write it.

Userland/Applications/ClockSettings/ClockSettingsWidget.cpp

@@ -8,7 +8,9 @@
 #include "ClockSettingsWidget.h"
 #include <Applications/ClockSettings/ClockSettingsWidgetGML.h>
 #include <LibConfig/Client.h>
+#include <LibCore/DateTime.h>
 #include <LibGUI/CheckBox.h>
+#include <LibGUI/Label.h>
 #include <LibGUI/RadioButton.h>
 #include <LibGUI/TextBox.h>
 
@@ -25,22 +27,27 @@ ClockSettingsWidget::ClockSettingsWidget()
     auto& twelve_hour_radio = *find_descendant_of_type_named<GUI::RadioButton>("12hour_radio");
     m_show_seconds_checkbox = *find_descendant_of_type_named<GUI::CheckBox>("seconds_checkbox");
     auto& custom_radio = *find_descendant_of_type_named<GUI::RadioButton>("custom_radio");
+    m_clock_preview = *find_descendant_of_type_named<GUI::Label>("clock_preview");
 
-    auto saved_format = Config::read_string("Taskbar", "Clock", "TimeFormat");
+    m_time_format = Config::read_string("Taskbar", "Clock", "TimeFormat");
     m_custom_format_input = *find_descendant_of_type_named<GUI::TextBox>("custom_format_input");
-    m_custom_format_input->set_text(saved_format);
+    m_custom_format_input->set_text(m_time_format);
     m_custom_format_input->set_enabled(false);
+    m_custom_format_input->on_change = [&] {
+        m_time_format = m_custom_format_input->get_text();
+        update_clock_preview();
+    };
 
-    if (saved_format == time_format_12h) {
+    if (m_time_format == time_format_12h) {
         twelve_hour_radio.set_checked(true, GUI::AllowCallback::No);
         m_show_seconds_checkbox->set_checked(false, GUI::AllowCallback::No);
-    } else if (saved_format == time_format_12h_seconds) {
+    } else if (m_time_format == time_format_12h_seconds) {
         twelve_hour_radio.set_checked(true, GUI::AllowCallback::No);
         m_show_seconds_checkbox->set_checked(true, GUI::AllowCallback::No);
-    } else if (saved_format == time_format_24h) {
+    } else if (m_time_format == time_format_24h) {
         m_24_hour_radio->set_checked(true, GUI::AllowCallback::No);
         m_show_seconds_checkbox->set_checked(false, GUI::AllowCallback::No);
-    } else if (saved_format == time_format_24h_seconds) {
+    } else if (m_time_format == time_format_24h_seconds) {
         m_24_hour_radio->set_checked(true, GUI::AllowCallback::No);
         m_show_seconds_checkbox->set_checked(true, GUI::AllowCallback::No);
     } else {
@@ -74,6 +81,12 @@ ClockSettingsWidget::ClockSettingsWidget()
         m_show_seconds_checkbox->set_enabled(false);
         m_custom_format_input->set_enabled(true);
     };
+
+    m_clock_preview_update_timer = Core::Timer::create_repeating(1000, [&]() {
+        update_clock_preview();
+    });
+    m_clock_preview_update_timer->start();
+    update_clock_preview();
 }
 
 void ClockSettingsWidget::apply_settings()
@@ -92,7 +105,14 @@ void ClockSettingsWidget::update_time_format_string()
 {
     bool show_seconds = m_show_seconds_checkbox->is_checked();
     if (m_24_hour_radio->is_checked())
-        m_custom_format_input->set_text(show_seconds ? time_format_24h_seconds : time_format_24h);
+        m_time_format = (show_seconds ? time_format_24h_seconds : time_format_24h);
     else
-        m_custom_format_input->set_text(show_seconds ? time_format_12h_seconds : time_format_12h);
+        m_time_format = (show_seconds ? time_format_12h_seconds : time_format_12h);
+    m_custom_format_input->set_text(m_time_format);
+    update_clock_preview();
+}
+
+void ClockSettingsWidget::update_clock_preview()
+{
+    m_clock_preview->set_text(Core::DateTime::now().to_string(m_time_format));
 }

Userland/Applications/ClockSettings/ClockSettingsWidget.gml

@@ -8,7 +8,7 @@
     @GUI::GroupBox {
         title: "Time Format"
         shrink_to_fit: false
-        fixed_height: 200
+        fixed_height: 240
         layout: @GUI::VerticalBoxLayout {
             margins: [16, 8, 8]
         }
@@ -50,5 +50,25 @@
                 name: "custom_format_input"
             }
         }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {
+                spacing: 4
+            }
+
+            @GUI::Label {
+                text: "Preview:"
+                text_alignment: "CenterLeft"
+            }
+
+            @GUI::Frame {
+                layout: @GUI::VerticalBoxLayout {}
+
+                @GUI::Label {
+                    name: "clock_preview"
+                    text: "12:34:56"
+                }
+            }
+        }
     }
 }

Userland/Applications/ClockSettings/ClockSettingsWidget.h

@@ -19,10 +19,14 @@ private:
     virtual void reset_default_values() override;
 
     void update_time_format_string();
+    void update_clock_preview();
 
     RefPtr<GUI::RadioButton> m_24_hour_radio;
     RefPtr<GUI::CheckBox> m_show_seconds_checkbox;
     RefPtr<GUI::TextBox> m_custom_format_input;
+    RefPtr<GUI::Label> m_clock_preview;
 
-    String m_date_format;
+    RefPtr<Core::Timer> m_clock_preview_update_timer;
+
+    String m_time_format;
 };