feat(waybar): tooltips

src/components/Waybar/Widgets/WaybarBatteryWidget.tsx

@@ -19,8 +19,26 @@ export const WaybarBatteryWidget = (props: { frequency: number }) => {
     return () => clearInterval(interval);
   });
 
+  const tooltip =
+    battery === 100
+      ? "Full"
+      : battery >= 70
+        ? "Almost full"
+        : battery >= 50
+          ? "Halfway down, but still doing great. I wonder what happens if the battery reaches 0"
+          : battery >= 25
+            ? "Uh maybe you should consider charging me ?"
+            : battery >= 15
+              ? "It's really reaching low level now"
+              : battery >= 5
+                ? "Are you ignoring my messages ??"
+                : "I warned you";
+
   return (
-    <WaybarWidget className="pl-[0.625rem] pr-3 text-[#1d7715]">
+    <WaybarWidget
+      className="pl-[0.625rem] pr-3 text-[#1d7715]"
+      tooltip={tooltip}
+    >
       {lerpIcon(ICONS, battery, 100)} {battery}%
     </WaybarWidget>
   );

src/components/Waybar/Widgets/WaybarBrightnessWidget.tsx

@@ -16,8 +16,23 @@ export const WaybarBrightnessWidget = () => {
     setBrightness(newBrightness);
   };
 
+  const tooltip =
+    brightness === 100
+      ? "Full"
+      : brightness >= 70
+        ? "Almost full"
+        : brightness >= 50
+          ? "Halfway down, but still doing great. I wonder what happens if the brightness reaches 0"
+          : brightness >= 25
+            ? "Uh maybe you should consider charging me ?"
+            : brightness >= 15
+              ? "It's really reaching low level now"
+              : brightness >= 5
+                ? "Are you ignoring my messages ??"
+                : "I warned you";
+
   return (
-    <WaybarWidget className="pl-3 pr-[0.625rem]">
+    <WaybarWidget className="pl-3 pr-[0.625rem]" tooltip={tooltip}>
       <span onWheel={handleScroll}>
         {lerpIcon(ICONS, brightness, 100)} {brightness}%
       </span>

src/components/Waybar/Widgets/WaybarCPUWidget.tsx

@@ -1,31 +1,51 @@
 import { useEffect, useState } from "react";
 import { WaybarWidget } from "../WaybarWidget";
-
-// 1 is really active, but often changes, 19-30%
-// 2 are middly active, 8-11%
-// other cores are low, 1-7%
+import { clamp, randomMinMax } from "~/utils/math";
 
 export const WaybarCPUWidget = (props: {
   cores: number;
+  min: number;
+  max: number;
   variation: number;
   frequency: number;
 }) => {
-  const [usage, setUsage] = useState(new Array<number>(props.cores).fill(0));
+  const [usage, setUsage] = useState(
+    new Array<number>(props.cores)
+      .fill(0)
+      .map((_) => randomMinMax(props.min, props.max)),
+  );
 
   useEffect(() => {
     const interval = setInterval(() => {
-      usage[0] += 1;
+      const variation = randomMinMax(-props.variation, props.variation + 1);
+      const index = randomMinMax(0, usage.length);
+      usage[index] = clamp(usage[index] + variation, props.min, props.max);
+
       setUsage([...usage]);
     }, props.frequency);
 
     return () => clearInterval(interval);
-  }, [usage, props.frequency]);
+  }, [usage, props.variation, props.min, props.max, props.frequency]);
 
   const totalUsage = Math.round(
     usage.reduce((acc, v) => acc + v, 0) / usage.length,
   );
 
   return (
-    <WaybarWidget className="pl-3 pr-[0.625rem]"> {totalUsage}%</WaybarWidget>
+    <WaybarWidget
+      className="pl-3 pr-[0.625rem]"
+      tooltip={
+        <ul>
+          <li>Total: {totalUsage}%</li>
+          {usage.map((value, i) => (
+            <li>
+              Core{i}: {value}%
+            </li>
+          ))}
+        </ul>
+      }
+    >
+       {totalUsage}%
+    </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarDiskWidget.tsx

@@ -12,5 +12,14 @@ export const WaybarDiskWidget = (props: {
     props.current + randomMinMax(-props.variation, props.variation + 1);
   const usage = Math.round((value / props.capacity) * 100);
 
-  return <WaybarWidget className="pl-[0.625rem] pr-3">󰋊 {usage}%</WaybarWidget>;
+  return (
+    <WaybarWidget
+      className="pl-[0.625rem] pr-3"
+      tooltip={`SSD - ${value.toFixed(1)}GB used out of ${
+        props.capacity
+      }GiB on / (${usage}%)`}
+    >
+      󰋊 {usage}%
+    </WaybarWidget>
+  );
 };

src/components/Waybar/Widgets/WaybarMicrophoneWidget.tsx

@@ -19,8 +19,19 @@ export const WaybarMicrophoneWidget = () => {
 
   const icon = muted ? "" : "";
 
+  const tooltip =
+    volume === 0 || muted
+      ? "Don't worry I'm not listening to you"
+      : volume === 100
+        ? "Broadcasting loud and clear!"
+        : volume >= 50
+          ? "Your voice sounds really great!"
+          : volume >= 20
+            ? "I can still hear you, just a bit quieter"
+            : "I can barely hear you anymore :(";
+
   return (
-    <WaybarWidget className="pl-[0.625rem] pr-3" interactable>
+    <WaybarWidget className="pl-[0.625rem] pr-3" interactable tooltip={tooltip}>
       <span
         className="text-[#ad6bfd]"
         onWheel={handleWheel}

src/components/Waybar/Widgets/WaybarRAMWidget.tsx

@@ -24,7 +24,16 @@ export const WaybarRAMWidget = (props: {
     return () => clearInterval(interval);
   });
 
+  const used = (usage / 100) * props.capacity;
+
   // TODO: tooltip
   // Memory - (capacity * usage).1f GB used
-  return <WaybarWidget className="px-[0.625rem]"> {usage}%</WaybarWidget>;
+  return (
+    <WaybarWidget
+      className="px-[0.625rem]"
+      tooltip={`Memory - ${used.toFixed(1)}GB used`}
+    >
+       {usage}%
+    </WaybarWidget>
+  );
 };

src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx

@@ -22,7 +22,10 @@ export const WaybarTemperatureWidget = (props: {
   });
 
   return (
-    <WaybarWidget className="pl-3 pr-[0.625rem]">
+    <WaybarWidget
+      className="pl-3 pr-[0.625rem]"
+      tooltip="All good until I start playing btd6"
+    >
        {temperature}°C
     </WaybarWidget>
   );

src/components/Waybar/Widgets/WaybarVolumeWidget.tsx

@@ -23,8 +23,17 @@ export const WaybarVolumeWidget = () => {
 
   const icon = muted ? "" : lerpIcon(ICONS, volume, 100);
 
+  const toolip =
+    volume === 0 || muted
+      ? "You don't like the music? :("
+      : volume === 100
+        ? "Always maximum volume when it's Hysta"
+        : volume >= 50
+          ? "Turning up the vibes !"
+          : "Enjoying music at a moderate level";
+
   return (
-    <WaybarWidget className="px-[0.625rem]" interactable>
+    <WaybarWidget className="px-[0.625rem]" interactable tooltip={toolip}>
       <span
         className="text-[#407cdd]"
         onWheel={handleWheel}