Update settings.tsx

display the font size number and example by the font size setting.

app/components/settings.tsx

@@ -251,6 +251,13 @@ export function Settings(props: { closeSettings: () => void }) {
             title={Locale.Settings.FontSize.Title}
             subTitle={Locale.Settings.FontSize.SubTitle}
           >
+            <>
+              <span
+                id="fontSizeDisplay"
+                style={{ fontSize: `${config.fontSize ?? 14}px` }}
+              >
+                {config.fontSize ?? 14}px
+              </span>
               <input
                 type="range"
                 title={`${config.fontSize ?? 14}px`}
@@ -261,10 +268,20 @@ export function Settings(props: { closeSettings: () => void }) {
                 onChange={(e) =>
                   updateConfig(
                     (config) =>
-                    (config.fontSize = Number.parseInt(e.currentTarget.value)),
+                      (config.fontSize = Number.parseInt(
+                        e.currentTarget.value,
+                      )),
                   )
                 }
+                onMouseMove={(e) => {
+                  const fontSizeDisplay =
+                    document.getElementById("fontSizeDisplay");
+                  if (fontSizeDisplay) {
+                    fontSizeDisplay.innerText = `${e.currentTarget.value}px`;
+                  }
+                }}
               ></input>
+            </>
           </SettingItem>
 
           <div className="no-mobile">