feat(waybar): implement all dummy widgets

src/components/Waybar/Widgets/WaybarBatteryWidget.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { WaybarWidget } from "../WaybarWidget";
+import { lerpIcon } from "~/utils/icons";
+
+const ICONS = ["󰂎", "󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"];
+
+export const WaybarBatteryWidget = (props: { frequency: number }) => {
+  const [battery, setBattery] = useState(100);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setBattery((x) => x - 1);
+
+      if (battery - 1 === 0) {
+        // TODO: do something
+      }
+    }, props.frequency);
+
+    return () => clearInterval(interval);
+  });
+
+  return (
+    <WaybarWidget className="pl-[0.625rem] pr-3 text-[#1d7715]">
+      {lerpIcon(ICONS, battery, 100)} {battery}%
+    </WaybarWidget>
+  );
+};

src/components/Waybar/Widgets/WaybarBrightnessWidget.tsx

@@ -0,0 +1,26 @@
+import { type WheelEvent } from "react";
+import { clamp } from "~/utils/math";
+import { WaybarWidget } from "../WaybarWidget";
+import { useApp } from "~/hooks/useApp";
+import { lerpIcon } from "~/utils/icons";
+
+const ICONS = ["󰃞", "󰃟", "󰃠"];
+
+export const WaybarBrightnessWidget = () => {
+  const { brightness, setBrightness } = useApp();
+
+  const handleScroll = (e: WheelEvent) => {
+    let newBrightness = brightness - Math.sign(e.deltaY);
+    newBrightness = clamp(newBrightness, 0, 100);
+
+    setBrightness(newBrightness);
+  };
+
+  return (
+    <WaybarWidget className="pl-3 pr-[0.625rem]">
+      <span onWheel={handleScroll}>
+        {lerpIcon(ICONS, brightness, 100)} {brightness}%
+      </span>
+    </WaybarWidget>
+  );
+};

src/components/Waybar/Widgets/WaybarCPUWidget.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { WaybarWidget } from "../WaybarWidget";
 
 // 1 is really active, but often changes, 19-30%
@@ -11,10 +11,6 @@ export const WaybarCPUWidget = (props: {
   frequency: number;
 }) => {
   const [usage, setUsage] = useState(new Array<number>(props.cores).fill(0));
-  const totalUsage = useMemo(
-    () => Math.round(usage.reduce((acc, v) => acc + v, 0) / usage.length),
-    [usage],
-  );
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -23,7 +19,13 @@ export const WaybarCPUWidget = (props: {
     }, props.frequency);
 
     return () => clearInterval(interval);
-  }, [usage]);
+  }, [usage, props.frequency]);
 
-  return <WaybarWidget> {totalUsage}%</WaybarWidget>;
+  const totalUsage = Math.round(
+    usage.reduce((acc, v) => acc + v, 0) / usage.length,
+  );
+
+  return (
+    <WaybarWidget className="pl-3 pr-[0.625rem]"> {totalUsage}%</WaybarWidget>
+  );
 };

src/components/Waybar/Widgets/WaybarDiskWidget.tsx

@@ -12,5 +12,5 @@ export const WaybarDiskWidget = (props: {
     props.current + randomMinMax(-props.variation, props.variation + 1);
   const usage = Math.round((value / props.capacity) * 100);
 
-  return <WaybarWidget>󰋊 {usage}%</WaybarWidget>;
+  return <WaybarWidget className="pl-[0.625rem] pr-3">󰋊 {usage}%</WaybarWidget>;
 };

src/components/Waybar/Widgets/WaybarHomeWidget.tsx

@@ -0,0 +1,5 @@
+import { WaybarWidget } from "../WaybarWidget";
+
+export const WaybarHomeWidget = () => (
+  <WaybarWidget className="text-[#407cdd]"></WaybarWidget>
+);

src/components/Waybar/Widgets/WaybarLockWidget.tsx

@@ -0,0 +1,9 @@
+import { WaybarWidget } from "../WaybarWidget";
+
+export const WaybarLockWidget = () => {
+  return (
+    <WaybarWidget className="pl-3 pr-[0.625rem]" interactable>
+      
+    </WaybarWidget>
+  );
+};

src/components/Waybar/Widgets/WaybarMicrophoneWidget.tsx

@@ -0,0 +1,33 @@
+import { type WheelEvent, useState } from "react";
+import { clamp } from "~/utils/math";
+import { WaybarWidget } from "../WaybarWidget";
+
+export const WaybarMicrophoneWidget = () => {
+  const [muted, setMuted] = useState(false);
+  const [volume, setVolume] = useState(100);
+
+  const handleWheel = (e: WheelEvent) => {
+    let newVolume = volume - Math.sign(e.deltaY) * 5;
+    newVolume = clamp(newVolume, 0, 100);
+
+    setVolume(newVolume);
+  };
+
+  const handleClick = () => {
+    setMuted((muted) => !muted);
+  };
+
+  const icon = muted ? "" : "";
+
+  return (
+    <WaybarWidget className="pl-[0.625rem] pr-3" interactable>
+      <span
+        className="text-[#ad6bfd]"
+        onWheel={handleWheel}
+        onClick={handleClick}
+      >
+        {icon} {!muted && `${volume}%`}
+      </span>
+    </WaybarWidget>
+  );
+};

src/components/Waybar/Widgets/WaybarPowerWidget.tsx

@@ -0,0 +1,9 @@
+import { WaybarWidget } from "../WaybarWidget";
+
+export const WaybarPowerWidget = () => {
+  return (
+    <WaybarWidget className="pl-[0.625rem] pr-3" interactable>
+      
+    </WaybarWidget>
+  );
+};

src/components/Waybar/Widgets/WaybarRAMWidget.tsx

@@ -26,5 +26,5 @@ export const WaybarRAMWidget = (props: {
 
   // TODO: tooltip
   // Memory - (capacity * usage).1f GB used
-  return <WaybarWidget> {usage}%</WaybarWidget>;
+  return <WaybarWidget className="px-[0.625rem]"> {usage}%</WaybarWidget>;
 };

src/components/Waybar/Widgets/WaybarSessionWidget.tsx

@@ -1,9 +0,0 @@
-import { WaybarWidget } from "./WaybarWidget";
-
-export const WaybarSessionWidget = () => (
-  <WaybarWidget>
-    <span></span>
-    <span>03:13 PM</span>
-    <span></span>
-  </WaybarWidget>
-);

src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { WaybarWidget } from "../WaybarWidget";
+import { clamp, randomMinMax } from "~/utils/math";
+
+export const WaybarTemperatureWidget = (props: {
+  min: number;
+  max: number;
+  variation: number;
+  frequency: number;
+}) => {
+  const [temperature, setTemperature] = useState(
+    randomMinMax(props.min, props.max),
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const offset = randomMinMax(-props.variation, props.variation + 1);
+      setTemperature((x) => clamp(x + offset, props.min, props.max));
+    }, props.frequency);
+
+    return () => clearInterval(interval);
+  });
+
+  return (
+    <WaybarWidget className="pl-3 pr-[0.625rem]">
+       {temperature}°C
+    </WaybarWidget>
+  );
+};

src/components/Waybar/Widgets/WaybarTimeWidget.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { WaybarWidget } from "../WaybarWidget";
+
+export const WaybarTimeWidget = () => {
+  const [date, setDate] = useState(new Date());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  const time = date.toLocaleString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  });
+
+  return <WaybarWidget className="px-[0.625rem]">{time}</WaybarWidget>;
+};

src/components/Waybar/Widgets/WaybarTitleWidget.tsx

@@ -1,3 +1,5 @@
 import { WaybarWidget } from "../WaybarWidget";
 
-export const WaybarTitleWidget = () => <WaybarWidget>nvim</WaybarWidget>;
+export const WaybarTitleWidget = () => (
+  <WaybarWidget className="px-3">nvim</WaybarWidget>
+);

src/components/Waybar/Widgets/WaybarToggleThemeWidget.tsx

@@ -0,0 +1,7 @@
+import { WaybarWidget } from "../WaybarWidget";
+
+export const WaybarToggleThemeWidget = () => (
+  <WaybarWidget className="pl-[0.625rem] pr-3" interactable>
+    󰐾
+  </WaybarWidget>
+);

src/components/Waybar/Widgets/WaybarTrayWidget.tsx

@@ -0,0 +1,5 @@
+import { WaybarWidget } from "../WaybarWidget";
+
+export const WaybarTrayWidget = () => (
+  <WaybarWidget className="pl-3 pr-[0.625rem]">X</WaybarWidget>
+);

src/components/Waybar/Widgets/WaybarVolumeWidget.tsx

@@ -0,0 +1,37 @@
+import { type WheelEvent, useState } from "react";
+import { clamp } from "~/utils/math";
+import { WaybarWidget } from "../WaybarWidget";
+import { useApp } from "~/hooks/useApp";
+import { lerpIcon } from "~/utils/icons";
+
+const ICONS = ["", "", ""];
+
+export const WaybarVolumeWidget = () => {
+  const [muted, setMuted] = useState(false);
+  const { volume, setVolume } = useApp();
+
+  const handleWheel = (e: WheelEvent) => {
+    let newVolume = volume - Math.sign(e.deltaY) * 5;
+    newVolume = clamp(newVolume, 0, 100);
+
+    setVolume(newVolume);
+  };
+
+  const handleClick = () => {
+    setMuted(!muted);
+  };
+
+  const icon = muted ? "" : lerpIcon(ICONS, volume, 100);
+
+  return (
+    <WaybarWidget className="px-[0.625rem]" interactable>
+      <span
+        className="text-[#407cdd]"
+        onWheel={handleWheel}
+        onClick={handleClick}
+      >
+        {icon} {!muted && `${volume}%`}
+      </span>
+    </WaybarWidget>
+  );
+};

src/components/Waybar/Widgets/WaybarWeatherWidget.tsx

@@ -0,0 +1,5 @@
+import { WaybarWidget } from "../WaybarWidget";
+
+export const WaybarWeatherWidget = () => (
+  <WaybarWidget className="px-[0.625rem]">🌧️ 27°</WaybarWidget>
+);