From 71ab32c53a3c6d1f09e83dbc2b39b332ea692bdb Mon Sep 17 00:00:00 2001 From: Pihkaal Date: Thu, 8 Feb 2024 00:40:51 +0100 Subject: [PATCH] feat: started working on waybar --- .gitignore | 4 ++ package.json | 1 + pnpm-lock.yaml | 11 +++- src/App.tsx | 3 +- src/assets/react.svg | 1 - src/components/Nvim/Nvim.tsx | 1 + src/components/Waybar/Waybar.tsx | 51 +++++++++++++++++++ src/components/Waybar/WaybarWidget.tsx | 12 +++++ src/components/Waybar/WaybarWidgetGroup.tsx | 9 ++++ .../Waybar/Widgets/WaybarCPUWidget.tsx | 29 +++++++++++ .../Waybar/Widgets/WaybarDiskWidget.tsx | 16 ++++++ .../Waybar/Widgets/WaybarRAMWidget.tsx | 30 +++++++++++ .../Waybar/Widgets/WaybarSessionWidget.tsx | 9 ++++ .../Widgets/WaybarTemperatureWidget.tsx | 0 .../Waybar/Widgets/WaybarTitleWidget.tsx | 3 ++ src/context/AppContext.tsx | 14 ++++- src/utils/math.ts | 10 ++++ src/utils/react.ts | 4 ++ 18 files changed, 203 insertions(+), 5 deletions(-) delete mode 100644 src/assets/react.svg create mode 100644 src/components/Waybar/Waybar.tsx create mode 100644 src/components/Waybar/WaybarWidget.tsx create mode 100644 src/components/Waybar/WaybarWidgetGroup.tsx create mode 100644 src/components/Waybar/Widgets/WaybarCPUWidget.tsx create mode 100644 src/components/Waybar/Widgets/WaybarDiskWidget.tsx create mode 100644 src/components/Waybar/Widgets/WaybarRAMWidget.tsx create mode 100644 src/components/Waybar/Widgets/WaybarSessionWidget.tsx create mode 100644 src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx create mode 100644 src/components/Waybar/Widgets/WaybarTitleWidget.tsx create mode 100644 src/utils/react.ts diff --git a/.gitignore b/.gitignore index cf4ced7..332d5ae 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,7 @@ yarn-error.log* # ESLint .eslintcache + +# Project +.notes + diff --git a/package.json b/package.json index 2ecb7d1..bd58c08 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-router-dom": "^6.21.3", + "tailwind-merge": "^2.2.1", "vite-tsconfig-paths": "^4.3.1", "zod": "^3.22.4" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80028e5..37d1bad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: react-router-dom: specifier: ^6.21.3 version: 6.21.3(react-dom@18.2.0)(react@18.2.0) + tailwind-merge: + specifier: ^2.2.1 + version: 2.2.1 vite-tsconfig-paths: specifier: ^4.3.1 version: 4.3.1(typescript@5.3.3)(vite@5.0.12) @@ -103,7 +106,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.1 - dev: true /@esbuild/aix-ppc64@0.19.12: resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==} @@ -2790,7 +2792,6 @@ packages: /regenerator-runtime@0.14.1: resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} - dev: true /regexp.prototype.flags@1.5.1: resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==} @@ -3075,6 +3076,12 @@ packages: engines: {node: '>= 0.4'} dev: true + /tailwind-merge@2.2.1: + resolution: {integrity: sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==} + dependencies: + '@babel/runtime': 7.23.8 + dev: false + /tailwindcss@3.4.1: resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==} engines: {node: '>=14.0.0'} diff --git a/src/App.tsx b/src/App.tsx index da230d8..850ca6b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import { MusicVisualizer } from "./components/MusicVisualizer"; import { Nvim } from "./components/Nvim/Nvim"; import { Terminal } from "./components/Terminal"; import { AppContextProvider } from "./context/AppContext"; +import { Waybar } from "./components/Waybar/Waybar"; function App() { return ( @@ -14,7 +15,7 @@ function App() { "insets-0 fixed flex h-screen w-screen flex-col gap-3 bg-[url(/wallpaper.jpg)] bg-cover p-3 font-body leading-[26px]" } > - + diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Nvim/Nvim.tsx b/src/components/Nvim/Nvim.tsx index b69c23a..bab2863 100644 --- a/src/components/Nvim/Nvim.tsx +++ b/src/components/Nvim/Nvim.tsx @@ -12,6 +12,7 @@ const fetchData = async ( repo: string, file: string, ): Promise => { + return `Displaying ${repo}/${file} on branch ${branch}`; try { const response = await axios.get( `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));