feat: started working on waybar

src/components/Waybar/Widgets/WaybarCPUWidget.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useMemo, 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%
+
+export const WaybarCPUWidget = (props: {
+  cores: number;
+  variation: number;
+  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(() => {
+      usage[0] += 1;
+      setUsage([...usage]);
+    }, props.frequency);
+
+    return () => clearInterval(interval);
+  }, [usage]);
+
+  return <WaybarWidget> {totalUsage}%</WaybarWidget>;
+};

src/components/Waybar/Widgets/WaybarDiskWidget.tsx

@@ -0,0 +1,16 @@
+import { WaybarWidget } from "../WaybarWidget";
+import { randomMinMax } from "~/utils/math";
+
+// TODO: find a good idea to determine disk usage
+
+export const WaybarDiskWidget = (props: {
+  current: number;
+  variation: number;
+  capacity: number;
+}) => {
+  const value =
+    props.current + randomMinMax(-props.variation, props.variation + 1);
+  const usage = Math.round((value / props.capacity) * 100);
+
+  return <WaybarWidget>󰋊 {usage}%</WaybarWidget>;
+};

src/components/Waybar/Widgets/WaybarRAMWidget.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { WaybarWidget } from "../WaybarWidget";
+import { clamp, randomMinMax } from "~/utils/math";
+
+// start, min, max and variation are in %
+// capacity is in Gb
+
+export const WaybarRAMWidget = (props: {
+  start: number;
+  min: number;
+  max: number;
+  variation: number;
+  frequency: number;
+  capacity: number;
+}) => {
+  const [usage, setUsage] = useState(props.start);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const offset = randomMinMax(-props.variation, props.variation + 1);
+      setUsage(x => clamp(x + offset, props.min, props.max));
+    }, props.frequency);
+
+    return () => clearInterval(interval);
+  });
+
+  // TODO: tooltip
+  // Memory - (capacity * usage).1f GB used
+  return <WaybarWidget> {usage}%</WaybarWidget>;
+};

src/components/Waybar/Widgets/WaybarSessionWidget.tsx

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

src/components/Waybar/Widgets/WaybarTitleWidget.tsx

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