use new hyprland dispatcher

.gitea/workflows/ci.yml

@@ -87,7 +87,7 @@ jobs:
         with:
           host: rivercry.com
           port: 20022
-          username: docker
+          username: monitor
           key: ${{ secrets.SSH_PRIVATE_KEY }}
           script: |
             export HYPRLAND_INSTANCE_SIGNATURE=$(hyprctl instances -j | jq '.[0].instance' | tr -d '"')
@@ -99,5 +99,5 @@ jobs:
             docker compose down --remove-orphans || true
             docker compose up -d
             pkill firefox || true
-            hyprctl dispatch exec 'firefox -kiosk http://localhost:9123'
+            hyprctl dispatch 'hl.dsp.exec_cmd("firefox -kiosk http://localhost:9123")'
             

alloy/config.alloy

@@ -0,0 +1,65 @@
+faro.receiver "integrations_app_agent_receiver" {
+	extra_log_labels = {
+		app  = "Frontend Observability",
+		kind = "",
+	}
+
+	server {
+		listen_address           = "0.0.0.0"
+		listen_port              = "8027"
+		cors_allowed_origins     = ["*"]
+		max_allowed_payload_size = "10MiB"
+
+		rate_limiting {
+			rate = 50
+		}
+	}
+
+	sourcemaps { }
+
+	output {
+		logs   = [loki.process.logs_process_client.receiver]
+		traces = []
+	}
+}
+
+loki.process "logs_process_client" {
+	forward_to = [loki.write.logs_write_client.receiver]
+
+	stage.json {
+		expressions = { 
+			app = "", 
+			service_name = "", 
+			kind = "", 
+			message = "", 
+			level = "" 
+		}
+	}
+
+	stage.labels {
+		values = { 
+			kind = "kind", 
+			service_name = "service_name", 
+			app = "app",
+			level = "level",
+		}
+	}
+
+	stage.static_labels {
+		set = {
+			source = "faro",
+		}
+	}
+}
+
+loki.write "logs_write_client" {
+	endpoint {
+        url  = "http://loki:3100/loki/api/v1/push"
+	}
+	external_labels = {
+    }
+}
+
+logging {
+	level = "info"
+}

src/App.tsx

@@ -1,31 +1,8 @@
 import "@/App.css";
 
-import {
-    getWebInstrumentations,
-    initializeFaro,
-    ReactIntegration,
-} from "@grafana/faro-react";
 import Dashboard from "@/components/Dashboard/Dashboard";
 
 function App() {
-    const isProduction = import.meta.env.PROD;
-
-    if (isProduction && window.location.hostname === "localhost") {
-        console.debug("Initializing Faro environment...");
-
-        initializeFaro({
-            url: "http://localhost:12347/collect",
-            app: {
-                name: "monitor-im-flur",
-                version: import.meta.env.VITE_APP_VERSION || "0.0.1",
-                environment: "production",
-            },
-            instrumentations: [
-                ...getWebInstrumentations(),
-                new ReactIntegration(),
-            ],
-        });
-    }
     return <Dashboard />;
 }
 

src/components/Flatastic/Flatastic.tsx

@@ -15,20 +15,28 @@ function choreItem(chore: FlatasticChore, idToNameMap: Record<number, string>) {
     if (chore.rotationTime === -1) {
         className = "irregular";
     } else {
-        className = chore.timeLeftNext <= 0 ? "due" : "notDue";
+        const negativeTimeFix = chore.timeLeftNext < 0 ? 1 : 0; // Floats are rounded down, so we need to add 1 to the days if the time is negative
+        const timeInDays =
+            Math.abs(chore.timeLeftNext) / (60 * 60 * 24) + negativeTimeFix;
 
-        const timeInDays = Math.abs(chore.timeLeftNext) / (60 * 60 * 24) + 1;
+        const bigG = Math.trunc(timeInDays / 100);
-        const grubers = Math.floor(timeInDays / 100);
+        const days = Math.trunc(timeInDays % 100);
-        const days = Math.floor(timeInDays % 100);
 
         timeLeftInDays = (
             <span className={style.timeLeft}>
-                {grubers > 0 && `${grubers} g${grubers > 1 ? "s" : ""} `}
+                {bigG > 0 && `${bigG} g${bigG > 1 ? "s" : ""} `}
-                {days > 0 && `${days} d`}
+                {days >= 0 && `${days} d`}
             </span>
         );
 
-        Math.abs(chore.timeLeftNext) / (60 * 60 * 24) + 1;
+        if (days === 0) {
+            className = "dueToday";
+            timeLeftInDays = <span className={style.timeLeft}>today</span>;
+        } else if (chore.timeLeftNext < 0) {
+            className = "due";
+        } else {
+            className = "notDue";
+        }
     }
 
     return (

src/components/Flatastic/style.module.css

@@ -66,6 +66,11 @@
     background-color: #a6cfa6;
 }
 
+/* oragne redis color */
+.dueToday {
+    background-color: #eda455;
+}
+
 .timeLeft {
     font-weight: bold;
 }

src/main.tsx

@@ -1,9 +1,42 @@
+import {
+    ConsoleInstrumentation,
+    ConsoleTransport,
+    FetchTransport,
+    getWebInstrumentations,
+    initializeFaro,
+    ReactIntegration,
+    WebVitalsInstrumentation,
+} from "@grafana/faro-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import "./index.css";
 import App from "./App.tsx";
 
+const isProduction = import.meta.env.PROD;
+
+if (window.location.hostname === "localhost" && isProduction) {
+    initializeFaro({
+        app: {
+            name: "monitor-im-flur",
+            version: "0.0.1",
+            environment: "production",
+        },
+        instrumentations: [
+            ...getWebInstrumentations(),
+            new ConsoleInstrumentation(),
+            new WebVitalsInstrumentation(),
+            new ReactIntegration(),
+        ],
+        transports: [
+            new FetchTransport({
+                url: "http://192.168.2.51:12347/collect",
+            }),
+            new ConsoleTransport(),
+        ],
+    });
+}
+
 // biome-ignore lint/style/noNonNullAssertion: if the root element is not found, the app should not render
 createRoot(document.getElementById("root")!).render(
     <StrictMode>

src/store/weather.ts

@@ -2,7 +2,15 @@ import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import fetchWeatherData from "@/api/weather";
 
-const iconNumberToPng = {
+type IconMapping = Record<
+    string,
+    {
+        day: { description: string; image: string };
+        night: { description: string; image: string };
+    }
+>;
+
+const iconNumberToPng: IconMapping = {
     "0": {
         day: {
             description: "Sunny",
@@ -308,9 +316,15 @@ const useWeatherStore = create(
                     return;
                 }
 
+                const weatherCode = current.variables(7)?.value();
+                const url =
+                    weatherCode !== undefined
+                        ? iconNumberToPng[weatherCode.toString()]?.day.image
+                        : undefined;
+
                 const weatherData = {
                     current: {
-                        time: current.time(),
+                        time: Number(current.time()),
                         temperature_2m: current.variables(0)?.value(),
                         precipitation: current.variables(1)?.value(),
                         rain: current.variables(2)?.value(),
@@ -318,9 +332,10 @@ const useWeatherStore = create(
                         snowfall: current.variables(4)?.value(),
                         relative_humidity_2m: current.variables(5)?.value(),
                         apparent_temperature: current.variables(6)?.value(),
-                        weather_code: current.variables(7)?.value(),
+                        weather_code: weatherCode,
                         cloud_cover: current.variables(8)?.value(),
                         is_day: current.variables(9)?.value(),
+                        icon: url,
                     },
                     hourly: {
                         time: [
@@ -367,10 +382,6 @@ const useWeatherStore = create(
                 };
 
                 // const isDay = weatherData.current.is_day === 1;
-                const weatherCode = weatherData.current.weather_code;
-                const url = iconNumberToPng[weatherCode].day.image;
-
-                weatherData.current = { ...weatherData.current, icon: url };
 
                 set({ weatherData });
             },