feat: enhance time formatting and localization support in Clock and Weather components

src/features/time/Clock.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 
 import { convertTimezone } from 'utils/date';
-import { formatPercentage } from 'utils/formatNumber';
+import { formatPercentage, formatDigits } from 'utils/formatNumber';
 import { AnalogClock } from './components/AnalogClock';
 import { VerticalClock } from './components/VerticalClock';
 import EventBus from 'utils/eventbus';
@@ -50,21 +50,24 @@ const Clock = () => {
           const zero = localStorage.getItem('zero');
 
           if (localStorage.getItem('seconds') === 'true') {
-            sec = `:${('00' + now.getSeconds()).slice(-2)}`;
-            setFinalSeconds(`${('00' + now.getSeconds()).slice(-2)}`);
+            const secs = ('00' + now.getSeconds()).slice(-2);
+            sec = `:${formatDigits(secs)}`;
+            setFinalSeconds(formatDigits(secs));
           }
 
           if (localStorage.getItem('timeformat') === 'twentyfourhour') {
             if (zero === 'false') {
-              time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}:${sec}`;
-              setFinalHour(`${now.getHours()}`);
-              setFinalMinute(`${('00' + now.getMinutes()).slice(-2)}`);
+              const hours = now.getHours();
+              const minutes = ('00' + now.getMinutes()).slice(-2);
+              time = `${formatDigits(hours)}:${formatDigits(minutes)}${sec}`;
+              setFinalHour(formatDigits(hours));
+              setFinalMinute(formatDigits(minutes));
             } else {
-              time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(
-                -2,
-              )}${sec}`;
-              setFinalHour(`${('00' + now.getHours()).slice(-2)}`);
-              setFinalMinute(`${('00' + now.getMinutes()).slice(-2)}`);
+              const hours = ('00' + now.getHours()).slice(-2);
+              const minutes = ('00' + now.getMinutes()).slice(-2);
+              time = `${formatDigits(hours)}:${formatDigits(minutes)}${sec}`;
+              setFinalHour(formatDigits(hours));
+              setFinalMinute(formatDigits(minutes));
             }
 
             setTime(time);
@@ -80,13 +83,16 @@ const Clock = () => {
             }
 
             if (zero === 'false') {
-              time = `${hours}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
-              setFinalHour(`${hours}`);
-              setFinalMinute(`${('00' + now.getMinutes()).slice(-2)}`);
+              const minutes = ('00' + now.getMinutes()).slice(-2);
+              time = `${formatDigits(hours)}:${formatDigits(minutes)}${sec}`;
+              setFinalHour(formatDigits(hours));
+              setFinalMinute(formatDigits(minutes));
             } else {
-              time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
-              setFinalHour(`${('00' + hours).slice(-2)}`);
-              setFinalMinute(`${('00' + now.getMinutes()).slice(-2)}`);
+              const paddedHours = ('00' + hours).slice(-2);
+              const minutes = ('00' + now.getMinutes()).slice(-2);
+              time = `${formatDigits(paddedHours)}:${formatDigits(minutes)}${sec}`;
+              setFinalHour(formatDigits(paddedHours));
+              setFinalMinute(formatDigits(minutes));
             }
 
             setTime(time);
@@ -137,11 +143,7 @@ const Clock = () => {
 
   if (localStorage.getItem('timeType') === 'verticalClock') {
     return (
-      <VerticalClock
-        finalHour={finalHour}
-        finalMinute={finalMinute}
-        finalSeconds={finalSeconds}
-      />
+      <VerticalClock finalHour={finalHour} finalMinute={finalMinute} finalSeconds={finalSeconds} />
     );
   }
 

src/features/weather/Weather.jsx

@@ -1,5 +1,6 @@
 import variables from 'config/variables';
 import { memo, useState, useEffect, useCallback } from 'react';
+import { formatNumber } from 'utils/formatNumber';
 
 import WeatherIcon from './components/WeatherIcon';
 import Expanded from './components/Expanded';
@@ -70,12 +71,12 @@ const WeatherWidget = memo(() => {
         <div className="iconAndTemps">
           <div className="weathericon">
             <WeatherIcon name={weatherData.icon} />
-            <span>{`${weatherData.weather.temp}${weatherData.temp_text}`}</span>
+            <span>{`${formatNumber(weatherData.weather.temp)}${weatherData.temp_text}`}</span>
           </div>
           {weatherType >= 2 && (
             <span className="minmax">
-              <span className="subtitle">{`${weatherData.weather.temp_min}${weatherData.temp_text}`}</span>
-              <span className="subtitle">{`${weatherData.weather.temp_max}${weatherData.temp_text}`}</span>
+              <span className="subtitle">{`${formatNumber(weatherData.weather.temp_min)}${weatherData.temp_text}`}</span>
+              <span className="subtitle">{`${formatNumber(weatherData.weather.temp_max)}${weatherData.temp_text}`}</span>
             </span>
           )}
         </div>
@@ -83,7 +84,7 @@ const WeatherWidget = memo(() => {
           <div className="extra-info">
             <span>
               {variables.getMessage('widgets.weather.feels_like', {
-                amount: `${weatherData.weather.feels_like}${weatherData.temp_text}`,
+                amount: `${formatNumber(weatherData.weather.feels_like)}${weatherData.temp_text}`,
               })}
             </span>
             <span className="loc">{location}</span>

src/features/weather/api/getWeather.js

@@ -9,6 +9,35 @@ const convertTemperature = (temp, format) => {
   return Math.round(temp);
 };
 
+const getLocalizedTempSymbol = (format) => {
+  const language = localStorage.getItem('language') || 'en_GB';
+  const baseLang = language.split('_')[0];
+
+  // Temperature symbols for different languages
+  const localizedSymbols = {
+    ar: {
+      celsius: '°س', // Arabic: Celsius (سيلزيوس)
+      fahrenheit: '°ف', // Arabic: Fahrenheit (فهرنهايت)
+      kelvin: 'ك', // Arabic: Kelvin (كلفن)
+    },
+    fa: {
+      celsius: '°س', // Persian: Celsius
+      fahrenheit: '°ف', // Persian: Fahrenheit
+      kelvin: 'ک', // Persian: Kelvin
+    },
+  };
+
+  // Default Western symbols
+  const defaultSymbols = {
+    celsius: '°C',
+    fahrenheit: '°F',
+    kelvin: 'K',
+  };
+
+  // Return localized symbol if available, otherwise default
+  return localizedSymbols[baseLang]?.[format] || defaultSymbols[format] || 'K';
+};
+
 export const getWeather = async (location) => {
   let cached = localStorage.getItem('currentWeather');
   if (cached) {
@@ -40,15 +69,9 @@ export const getWeather = async (location) => {
     const { temp, temp_min, temp_max, feels_like } = data.main;
     const tempFormat = localStorage.getItem('tempformat');
 
-    const tempSymbols = {
-      celsius: '°C',
-      kelvin: 'K',
-      fahrenheit: '°F',
-    };
-
     const cacheable = {
       icon: data.weather[0].icon,
-      temp_text: tempSymbols[tempFormat] || 'K',
+      temp_text: getLocalizedTempSymbol(tempFormat),
       weather: {
         temp: convertTemperature(temp, tempFormat),
         description: data.weather[0].description,