feat: started working on waybar

src/components/Nvim/Nvim.tsx

@@ -12,6 +12,7 @@ const fetchData = async (
   repo: string,
   file: string,
 ): Promise<string | null> => {
+  return `Displaying ${repo}/${file} on branch ${branch}`;
   try {
     const response = await axios.get<string>(
       `https://raw.githubusercontent.com/pihkaal/${repo}/${branch}/${file}`,

src/components/Waybar/Waybar.tsx

@@ -0,0 +1,51 @@
+import { WaybarWidgetGroup } from "./WaybarWidgetGroup";
+import { WaybarCPUWidget } from "./Widgets/WaybarCPUWidget";
+import { WaybarDiskWidget } from "./Widgets/WaybarDiskWidget";
+import { WaybarRAMWidget } from "./Widgets/WaybarRAMWidget";
+import { WaybarTitleWidget } from "./Widgets/WaybarTitleWidget";
+
+export const Waybar = () => {
+  return (
+    <div className="flex w-full flex-row">
+      <WaybarWidgetGroup>
+        <WaybarCPUWidget variation={10} frequency={1000} cores={10} />
+        <WaybarRAMWidget
+          variation={0.5}
+          frequency={1000}
+          min={18}
+          max={25}
+          start={21}
+          capacity={16}
+        />
+        <WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
+      </WaybarWidgetGroup>
+
+      <WaybarWidgetGroup>
+        <WaybarTitleWidget />
+      </WaybarWidgetGroup>
+      {/*
+      <WaybarWidgetGroup>
+        <WaybarLockWidget />
+        <WaybarTimeWidget />
+        <WaybarShutdownWidget />
+      </WaybarWidgetGroup>
+
+      <WaybarWidgetGroup>
+        <WaybarTemperatureWidget />
+        <WaybarBatteryWidget />
+      </WaybarWidgetGroup>
+
+      <WaybarWidgetGroup>
+        <WaybarBrightnessWidget />
+        <WaybarVolumeWidget />
+        <WaybarMicrophoneWidget />
+      </WaybarWidgetGroup>
+
+      <WaybarWidgetGroup>
+        <WaybarTrayWidget />
+        <WaybarWeatherWidget />
+      </WaybarWidgetGroup>
+      */}
+    </div>
+  );
+};

src/components/Waybar/WaybarWidget.tsx

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import { cn } from "~/utils/react";
+
+export const WaybarWidget = (props: {
+  className?: string;
+  tooltip?: string;
+  children: ReactNode | Array<ReactNode>;
+}) => (
+  <div className={cn("font-bold text-[#2b2b2c] ", props.className)}>
+    {props.children}
+  </div>
+);

src/components/Waybar/WaybarWidgetGroup.tsx

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+
+export const WaybarWidgetGroup = (props: {
+  children: ReactNode | Array<ReactNode>;
+}) => (
+  <div className="flex flex-row justify-between gap-5 rounded-lg bg-[#e6e7ec] px-4 py-[5px] opacity-80">
+    {props.children}
+  </div>
+);

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>;