(
`https://raw.githubusercontent.com/pihkaal/${repo}/${branch}/${file}`,
diff --git a/src/components/Waybar/Waybar.tsx b/src/components/Waybar/Waybar.tsx
new file mode 100644
index 0000000..0d3b7b2
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+ {/*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ */}
+
+ );
+};
diff --git a/src/components/Waybar/WaybarWidget.tsx b/src/components/Waybar/WaybarWidget.tsx
new file mode 100644
index 0000000..9dedbf9
--- /dev/null
+++ b/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;
+}) => (
+
+ {props.children}
+
+);
diff --git a/src/components/Waybar/WaybarWidgetGroup.tsx b/src/components/Waybar/WaybarWidgetGroup.tsx
new file mode 100644
index 0000000..f70965b
--- /dev/null
+++ b/src/components/Waybar/WaybarWidgetGroup.tsx
@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+
+export const WaybarWidgetGroup = (props: {
+ children: ReactNode | Array;
+}) => (
+
+ {props.children}
+
+);
diff --git a/src/components/Waybar/Widgets/WaybarCPUWidget.tsx b/src/components/Waybar/Widgets/WaybarCPUWidget.tsx
new file mode 100644
index 0000000..568e188
--- /dev/null
+++ b/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(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 {totalUsage}%;
+};
diff --git a/src/components/Waybar/Widgets/WaybarDiskWidget.tsx b/src/components/Waybar/Widgets/WaybarDiskWidget.tsx
new file mode 100644
index 0000000..c091781
--- /dev/null
+++ b/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 {usage}%;
+};
diff --git a/src/components/Waybar/Widgets/WaybarRAMWidget.tsx b/src/components/Waybar/Widgets/WaybarRAMWidget.tsx
new file mode 100644
index 0000000..884daf2
--- /dev/null
+++ b/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 {usage}%;
+};
diff --git a/src/components/Waybar/Widgets/WaybarSessionWidget.tsx b/src/components/Waybar/Widgets/WaybarSessionWidget.tsx
new file mode 100644
index 0000000..b6eb377
--- /dev/null
+++ b/src/components/Waybar/Widgets/WaybarSessionWidget.tsx
@@ -0,0 +1,9 @@
+import { WaybarWidget } from "./WaybarWidget";
+
+export const WaybarSessionWidget = () => (
+
+
+ 03:13 PM
+
+
+);
diff --git a/src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx b/src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Waybar/Widgets/WaybarTitleWidget.tsx b/src/components/Waybar/Widgets/WaybarTitleWidget.tsx
new file mode 100644
index 0000000..1ad44be
--- /dev/null
+++ b/src/components/Waybar/Widgets/WaybarTitleWidget.tsx
@@ -0,0 +1,3 @@
+import { WaybarWidget } from "../WaybarWidget";
+
+export const WaybarTitleWidget = () => nvim;
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
index 7d30f50..bd94144 100644
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -14,9 +14,21 @@ const AppContext = createContext(null);
export const AppContextProvider = (props: {
children: Array | ReactNode;
}) => {
- const [manifest, setManifest] = useState(null);
+ const [manifest, setManifest] = useState({
+ projects: [
+ {
+ name: "tlock",
+ files: ["README.md"],
+ },
+ {
+ name: "pihkaal",
+ files: ["README.md", "pubkey.asc"],
+ },
+ ],
+ });
useEffect(() => {
+ return;
void axios
.get(
"https://raw.githubusercontent.com/pihkaal/pihkaal/main/manifest.json",
diff --git a/src/utils/math.ts b/src/utils/math.ts
index 62a509c..a500df0 100644
--- a/src/utils/math.ts
+++ b/src/utils/math.ts
@@ -3,5 +3,15 @@ export const clamp = (v: number, min: number, max: number): number =>
export const clamp01 = (v: number): number => clamp(v, 0, 1);
+export const clamp0 = (v: number): number => clamp(v, 0, v);
+
export const floorAll = (...xs: Array): Array =>
xs.map(Math.floor);
+
+/**
+ * Random int in [min, max[
+ */
+export const randomMinMax = (min: number, max: number): number =>
+ Math.round(Math.random() * (max - min - 1) + min);
+
+export const randomSign = (): number => Math.sign(randomMinMax(0, 2) - 1);
diff --git a/src/utils/react.ts b/src/utils/react.ts
new file mode 100644
index 0000000..27476c5
--- /dev/null
+++ b/src/utils/react.ts
@@ -0,0 +1,4 @@
+import clsx, { type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...values: Array) => twMerge(clsx(...values));