sideright: imperial weather

config.ts

@@ -82,5 +82,5 @@ export const weather = {
     interval: 600000,
     key: "assets/weather-api-key.txt", // Path to file containing api key relative to the base directory. To get a key, visit https://weatherapi.com/
     location: "", // Location as a string or empty to autodetect
-    // TODO: imperial
+    imperial: false,
 };

src/modules/popdowns/sideright.tsx

@@ -75,7 +75,7 @@ const Weather = () => {
                 />
                 <box vertical halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} className="status">
                     <box halign={Gtk.Align.CENTER} className="temperature">
-                        <label label={bind(weather, "temperature").as(t => `${Math.round(t)}°C`)} />
+                        <label label={bind(weather, "temperature")} />
                         <label
                             className={bind(weather, "tempColour").as(c => `temp-icon ${c}`)}
                             label={bind(weather, "tempIcon")}
@@ -84,8 +84,8 @@ const Weather = () => {
                     <label label={bind(weather, "condition").as(c => ellipsize(c, 16))} />
                 </box>
                 <box vertical halign={Gtk.Align.END} valign={Gtk.Align.CENTER} className="other-data">
-                    <label xalign={0} label={bind(weather, "wind").as(w => ` ${Math.round(w)} kph`)} />
-                    <label xalign={0} label={bind(weather, "rainChance").as(r => ` ${r}%`)} />
+                    <label xalign={0} label={bind(weather, "wind").as(w => ` ${w}`)} />
+                    <label xalign={0} label={bind(weather, "rainChance").as(r => ` ${r}`)} />
                 </box>
             </centerbox>
             <box className="separator" />
@@ -101,12 +101,12 @@ const Weather = () => {
                         <label
                             className="icon"
                             label={bind(weather, "raw").as(r =>
-                                weather.getIcon(weather.forecast[getHoursFromUpdate(r, i + 1)]?.condition.text ?? "")
+                                weather.getIcon(weather.forecast[getHoursFromUpdate(r, i + 1)].condition.text)
                             )}
                         />
                         <label
-                            label={bind(weather, "raw").as(
-                                r => `${Math.round(weather.forecast[getHoursFromUpdate(r, i + 1)]?.temp_c) ?? "-"}°C`
+                            label={bind(weather, "raw").as(r =>
+                                weather.getTemp(weather.forecast[getHoursFromUpdate(r, i + 1)])
                             )}
                         />
                     </box>

src/services/weather.ts

@@ -102,37 +102,41 @@ export interface WeatherData {
     location: WeatherLocation;
 }
 
+const DEFAULT_STATE: _WeatherState = {
+    temp_c: 0,
+    temp_f: 0,
+    is_day: 0,
+    condition: { text: "", icon: "", code: 0 },
+    wind_mph: 0,
+    wind_kph: 0,
+    wind_degree: 0,
+    wind_dir: "N",
+    pressure_mb: 0,
+    pressure_in: 0,
+    precip_mm: 0,
+    precip_in: 0,
+    humidity: 0,
+    cloud: 0,
+    feelslike_c: 0,
+    feelslike_f: 0,
+    windchill_c: 0,
+    windchill_f: 0,
+    heatindex_c: 0,
+    heatindex_f: 0,
+    dewpoint_c: 0,
+    dewpoint_f: 0,
+    vis_km: 0,
+    vis_miles: 0,
+    uv: 0,
+    gust_mph: 0,
+    gust_kph: 0,
+};
+
 const DEFAULT: WeatherData = {
     current: {
         last_updated_epoch: 0,
         last_updated: "",
-        temp_c: 0,
-        temp_f: 0,
-        is_day: 0,
-        condition: { text: "", icon: "", code: 0 },
-        wind_mph: 0,
-        wind_kph: 0,
-        wind_degree: 0,
-        wind_dir: "N",
-        pressure_mb: 0,
-        pressure_in: 0,
-        precip_mm: 0,
-        precip_in: 0,
-        humidity: 0,
-        cloud: 0,
-        feelslike_c: 0,
-        feelslike_f: 0,
-        windchill_c: 0,
-        windchill_f: 0,
-        heatindex_c: 0,
-        heatindex_f: 0,
-        dewpoint_c: 0,
-        dewpoint_f: 0,
-        vis_km: 0,
-        vis_miles: 0,
-        uv: 0,
-        gust_mph: 0,
-        gust_kph: 0,
+        ...DEFAULT_STATE,
     },
     forecast: {
         forecastday: [
@@ -171,7 +175,11 @@ const DEFAULT: WeatherData = {
                     is_moon_up: 0,
                     is_sun_up: 0,
                 },
-                hour: [],
+                hour: Array.from({ length: 24 }, () => ({
+                    time_epoch: 0,
+                    time: "",
+                    ...DEFAULT_STATE,
+                })),
             },
         ],
     },
@@ -243,8 +251,6 @@ const STATUS_ICONS: Record<string, string> = {
     moderate_or_heavy_snow_with_thunder: "󰼶",
 };
 
-const TEMP_ICONS: Record<string, string> = {};
-
 @register({ GTypeName: "Weather" })
 export default class Weather extends GObject.Object {
     static instance: Weather;
@@ -284,19 +290,21 @@ export default class Weather extends GObject.Object {
         return this.#data.current.condition.text;
     }
 
-    @property(Number)
+    @property(String)
     get temperature() {
-        return this.#data.current.temp_c;
+        return this.getTemp(this.#data.current);
     }
 
-    @property(Number)
+    @property(String)
     get wind() {
-        return this.#data.current.wind_kph;
+        return `${Math.round(this.#data.current[`wind_${config.imperial ? "m" : "k"}ph`])} ${
+            config.imperial ? "m" : "k"
+        }ph`;
     }
 
-    @property(Number)
+    @property(String)
     get rainChance() {
-        return this.#data.forecast.forecastday[0].day.daily_chance_of_rain;
+        return this.#data.forecast.forecastday[0].day.daily_chance_of_rain + "%";
     }
 
     @property(String)
@@ -320,6 +328,10 @@ export default class Weather extends GObject.Object {
         return STATUS_ICONS[query] ?? STATUS_ICONS.warning;
     }
 
+    getTemp(data: _WeatherState) {
+        return `${Math.round(data[`temp_${config.imperial ? "f" : "c"}`])}°${config.imperial ? "F" : "C"}`;
+    }
+
     getTempIcon(temp: number) {
         if (temp >= 40) return "";
         if (temp >= 30) return "";