From 148b94458304eedd00f8be5235355414a2a43e2e Mon Sep 17 00:00:00 2001 From: sajjad isvand Date: Sun, 13 Sep 2026 14:04:28 +0330 Subject: [PATCH] feat: add 2x2 weather variant and replace wide layouts --- .../components/referral-code-section.tsx | 5 +- .../widgets/weather/variants/weather-2x2.tsx | 110 ++++++++++++++++++ .../widgets/weather/variants/weather-4x1.tsx | 75 ------------ .../widgets/weather/variants/weather-4x2.tsx | 37 ------ .../widgets/weather/weather.widget.tsx | 23 +--- src/layouts/widgets/widget-registry.tsx | 5 +- wxt.config.ts | 2 +- 7 files changed, 119 insertions(+), 138 deletions(-) create mode 100644 src/layouts/widgets/weather/variants/weather-2x2.tsx delete mode 100644 src/layouts/widgets/weather/variants/weather-4x1.tsx delete mode 100644 src/layouts/widgets/weather/variants/weather-4x2.tsx diff --git a/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx b/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx index e5e3a7e9c..01407d15b 100644 --- a/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx +++ b/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx @@ -10,7 +10,7 @@ export const ReferralCodeSection = ({ code, className }: ReferralCodeSectionProp const handleCopyCode = async () => { try { await navigator.clipboard.writeText(code) - showToast('کد دعوت کپی شد!', 'success') + showToast('کد دعوت کپی شد', 'success') } catch (error) { console.error('Failed to copy code:', error) showToast('خطا در کپی کردن کد', 'error') @@ -49,8 +49,7 @@ export const ReferralCodeSection = ({ code, className }: ReferralCodeSectionProp

- از این کد برای دعوت دوستان خود استفاده کنید و هر دو ویج‌کوین دریافت - کنید!{' '} + با فرستادن این کد برای دوستات، هم خودت و هم دوستت ویج‌کوین می‌گیرید

diff --git a/src/layouts/widgets/weather/variants/weather-2x2.tsx b/src/layouts/widgets/weather/variants/weather-2x2.tsx new file mode 100644 index 000000000..90f5862ca --- /dev/null +++ b/src/layouts/widgets/weather/variants/weather-2x2.tsx @@ -0,0 +1,110 @@ +import type { FetchedWeather } from '@/layouts/widgets/weather/weather.interface' +import { cleanCityName } from '../utils/clean-city-name' +import { Icon } from '@/icons' +import moment from 'jalali-moment' + +interface Weather2x2Props { + fetchedWeather: FetchedWeather | null +} + +export function Weather2x2({ fetchedWeather }: Weather2x2Props) { + const cityName = cleanCityName(fetchedWeather?.city?.fa || '') + const temp = Math.round(fetchedWeather?.weather?.temperature?.temp || 0) + const description = fetchedWeather?.weather?.description?.text || '' + const humidity = fetchedWeather?.weather?.temperature?.humidity || 0 + const windSpeed = Math.round(fetchedWeather?.weather?.temperature?.wind_speed || 0) + const heroIconUrl = fetchedWeather?.weather?.icon?.url + + const forecastList = fetchedWeather?.forecast?.slice(0, 4) || [] + + return ( +
+
+
+ {heroIconUrl ? ( + {description} + ) : ( +
+ )} +
+ +
+
+ + {cityName || 'تهران'} + +
+ +
+
+ + {description || 'صاف'} + + +
+ + + {humidity}% + + • + + + {windSpeed} m/s + +
+
+ + + {temp}° + +
+
+
+ +
+
+ {forecastList.map((item, index) => { + const hourText = item.date + ? moment(item.date).locale('fa').format('HH:mm') + : index === 0 + ? 'الان' + : `${index * 3}:۰۰` + const itemTemp = Math.round(item.temp) + + return ( +
+ + {hourText} + + + {item.icon ? ( + forecast + ) : ( +
+ )} + + + {itemTemp}° + +
+ ) + })} +
+
+
+ ) +} diff --git a/src/layouts/widgets/weather/variants/weather-4x1.tsx b/src/layouts/widgets/weather/variants/weather-4x1.tsx deleted file mode 100644 index 355139c54..000000000 --- a/src/layouts/widgets/weather/variants/weather-4x1.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import type { FetchedWeather } from '@/layouts/widgets/weather/weather.interface' -import { unitsFlag } from '../unit-symbols' -import { cleanCityName } from '../utils/clean-city-name' -import { Icon } from '@/icons' - -interface WeatherWideBannerProps { - fetchedWeather: FetchedWeather | null - temperatureUnit: keyof typeof unitsFlag -} - -export function WeatherWideBanner({ - fetchedWeather, - temperatureUnit, -}: WeatherWideBannerProps) { - const temp = Math.round(fetchedWeather?.weather?.temperature?.temp || 0) - const cityName = cleanCityName(fetchedWeather?.city?.fa || '') - const iconUrl = fetchedWeather?.weather?.icon?.url - const description = fetchedWeather?.weather?.description?.text || '' - const tempDescription = fetchedWeather?.weather?.temperature?.temp_description || '' - const humidity = fetchedWeather?.weather?.temperature?.humidity || 0 - const windSpeed = Math.round(fetchedWeather?.weather?.temperature?.wind_speed || 0) - const clouds = fetchedWeather?.weather?.temperature?.clouds || 0 - - return ( -
-
- {iconUrl ? ( - {description} - ) : ( -
- )} - -
- - {temp} - - {unitsFlag[temperatureUnit || 'metric']} - - - {cityName} -
- -
- {description} - {tempDescription && ( - - {tempDescription} - - )} -
-
- -
-
- - {windSpeed} m/s -
- -
- - {humidity}% -
- -
- - {clouds}% -
-
-
- ) -} diff --git a/src/layouts/widgets/weather/variants/weather-4x2.tsx b/src/layouts/widgets/weather/variants/weather-4x2.tsx deleted file mode 100644 index 288f301f2..000000000 --- a/src/layouts/widgets/weather/variants/weather-4x2.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { FetchedWeather } from '@/layouts/widgets/weather/weather.interface' -import { unitsFlag } from '../unit-symbols' -import { CurrentWeatherBox } from '../components/current-weather-box' -import { Forecast } from '../components/forecast' - -interface WeatherWideFullProps { - fetchedWeather: FetchedWeather | null - temperatureUnit: keyof typeof unitsFlag -} - -export function WeatherWideFull({ - fetchedWeather, - temperatureUnit, -}: WeatherWideFullProps) { - return ( -
-
- -
- -
-
- پیش‌بینی ساعات آینده -
-
- -
-
-
- ) -} diff --git a/src/layouts/widgets/weather/weather.widget.tsx b/src/layouts/widgets/weather/weather.widget.tsx index 8cadc18f6..9679a8140 100644 --- a/src/layouts/widgets/weather/weather.widget.tsx +++ b/src/layouts/widgets/weather/weather.widget.tsx @@ -7,8 +7,7 @@ import { Forecast } from './components/forecast' import { CurrentWeatherBox } from './components/current-weather-box' import { WeatherCompactSquare } from './variants/weather-1x1' import { WeatherCompactRow } from './variants/weather-2x1' -import { WeatherWideBanner } from './variants/weather-4x1' -import { WeatherWideFull } from './variants/weather-4x2' +import { Weather2x2 } from './variants/weather-2x2' import { useGetWeatherByLatLon } from '@/services/hooks/weather/get-weather-by-lat-lon.hook' import type { WidgetSize } from '../layout-engine/types' @@ -71,24 +70,10 @@ export function WeatherLayout({ size = { w: 2, h: 2 } }: WeatherLayoutProps = {} ) } - if (size.w >= 4 && size.h === 1) { + if (size.w === 2 && size.h === 2) { return ( - - - - ) - } - - if (size.w >= 4 && size.h >= 2) { - return ( - - + + ) } diff --git a/src/layouts/widgets/widget-registry.tsx b/src/layouts/widgets/widget-registry.tsx index c8f3b8871..a77e1cc69 100644 --- a/src/layouts/widgets/widget-registry.tsx +++ b/src/layouts/widgets/widget-registry.tsx @@ -223,13 +223,12 @@ export const WIDGET_DEFINITIONS: Record = { allowedSizes: [ { w: 1, h: 1, isVipOnly: true }, { w: 2, h: 1, isVipOnly: true }, + { w: 2, h: 2, isVipOnly: true }, { w: 2, h: 3 }, - { w: 4, h: 1, isVipOnly: true }, - { w: 4, h: 2, isVipOnly: true }, ], defaultSize: { w: 2, h: 3 }, settingsTab: WidgetTabKeys.weather_settings, - canDuplicate: true, + canDuplicate: false, node: (_instanceId, size) => , }, [WidgetKeys.comboWidget]: { diff --git a/wxt.config.ts b/wxt.config.ts index e337a9cbb..443501ff2 100644 --- a/wxt.config.ts +++ b/wxt.config.ts @@ -47,7 +47,7 @@ export default defineConfig({ '@wxt-dev/module-react', ], manifest: { - version: '1.1.18', + version: '1.1.21', name: 'Widgetify beta', description: 'Transform your new tab into a smart dashboard with Widgetify! Get currency rates, crypto prices, weather & more.',