feat: add CPU/MEM high usage warning

IsaacTay · Jan 20, 2025 · e2351b3 · e2351b3
1 parent 56c6d98
commit e2351b3
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 30 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -22,7 +22,8 @@ jobs:
           bun-version: latest
       - run: bun install
       - run: bun run build
-      - run: zip -r text-zebar.zip build/
+      - run: mv build text-zebar
+      - run: zip -r text-zebar.zip text-zebar/
 
       - name: Create Release
         id: create_release

diff --git a/src/components/Group.svelte b/src/components/Group.svelte
@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	type Props = {
 		children: Snippet;
-    group: string;
+		group: string;
 		class: string;
 	};
 	let { children, group, ...rest }: Props = $props();

diff --git a/src/components/RightGroup.svelte b/src/components/RightGroup.svelte
@@ -4,7 +4,9 @@
 		NetworkOutput,
 		BatteryOutput,
 		WeatherOutput,
-		DateOutput
+		DateOutput,
+		CpuOutput,
+		MemoryOutput
 	} from 'zebar';
 
 	type RightGroupProps = {
@@ -13,12 +15,14 @@
 		battery: BatteryOutput;
 		weather: WeatherOutput;
 		date: DateOutput;
+		cpu: CpuOutput;
+		memory: MemoryOutput;
 	};
 
-	let { glazewm, network, weather, battery, date }: RightGroupProps = $props();
+	let { glazewm, network, weather, battery, date, cpu, memory }: RightGroupProps = $props();
 	let battery_symbols = '󰂎󰁺󰁻󰁼󰁽󰁾󰁿󰂀󰂁󰂂󰁹';
 
-	let weather_symbols: { [id: string]: string }= {
+	let weather_symbols: { [id: string]: string } = {
 		clear: '',
 		cloudy: '',
 		light_rain: '󰸊',
@@ -34,7 +38,15 @@
 	}
 </script>
 
-<div class="flex flex-row items-center gap-3 select-none *:flex *:flex-row *:whitespace-pre *:select-none">
+<div
+	class="flex select-none flex-row items-center gap-3 *:flex *:select-none *:flex-row *:whitespace-pre"
+>
+	{#if cpu && cpu.usage > 90}
+		<div class="text-zb-cpu-high">CPU</div>
+	{/if}
+	{#if memory && memory.usage > 90}
+		<div class="text-zb-memory-high">MEM</div>
+	{/if}
 	{#if network}
 		<div>
 			{#if network.defaultInterface?.type === 'ethernet'}
@@ -57,12 +69,13 @@
 	{#if battery}
 		{@const index = Math.round(battery.chargePercent / 10) * 2}
 		<div>
-			{#if battery.isCharging}󰚥&nbsp;{/if}{battery_symbols.slice(index, index + 2)} <div class="select-text">{Math.round(battery.chargePercent)}%</div>
+			{#if battery.isCharging}󰚥&nbsp;{/if}{battery_symbols.slice(index, index + 2)}
+			<div class="select-text">{Math.round(battery.chargePercent)}%</div>
 		</div>
 	{/if}
 	{#if date}
-    <div>
-		  󱦟 <div class="select-text">{date?.formatted}</div>
-    </div>
+		<div>
+			󱦟 <div class="select-text">{date?.formatted}</div>
+		</div>
 	{/if}
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -6,7 +6,9 @@
 		DateOutput,
 		NetworkOutput,
 		WeatherOutput,
-		BatteryOutput
+		BatteryOutput,
+		CpuOutput,
+		MemoryOutput
 	} from 'zebar';
 
 	import '../app.css';
@@ -19,14 +21,18 @@
 	let battery = $state<BatteryOutput | null>();
 	let weather = $state<WeatherOutput | null>();
 	let date = $state<DateOutput | null>();
+	let cpu = $state<CpuOutput | null>();
+	let memory = $state<MemoryOutput | null>();
 
 	onMount(() => {
 		const providers = zebar.createProviderGroup({
 			glazewm: { type: 'glazewm' },
 			network: { type: 'network' },
 			weather: { type: 'weather' },
 			battery: { type: 'battery' },
-			date: { type: 'date', formatting: 'yyyy.MM.dd EEE HH:mm:ss' }
+			date: { type: 'date', formatting: 'yyyy.MM.dd EEE HH:mm:ss' },
+			cpu: { type: 'cpu' },
+			memory: { type: 'memory' }
 		});
 
 		providers.onOutput(() => {
@@ -35,6 +41,8 @@
 			weather = providers.outputMap.weather;
 			battery = providers.outputMap.battery;
 			date = providers.outputMap.date;
+			cpu = providers.outputMap.cpu;
+			memory = providers.outputMap.memory;
 		});
 	});
 </script>
@@ -61,6 +69,8 @@
 			weather={weather!}
 			battery={battery!}
 			date={date!}
+			cpu={cpu!}
+			memory={memory!}
 		/>
 	</Group>
 </div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -12,17 +12,12 @@ export default {
 					border: 'hsl(var(--border) / <alpha-value> )',
 					border_focused: 'hsl(var(--border_focused) / <alpha-value> )',
 					icon: 'hsl(var(--icon) / <alpha-value> )',
-					memory: 'hsl(var(--memory) / <alpha-value> )',
-					cpu: 'hsl(var(--cpu) / <alpha-value> )',
-					'cpu-high-usage': 'hsl(var(--cpu-high-usage) / <alpha-value> )',
-					battery: {
-						good: 'hsl(var(--battery-good) / <alpha-value> )',
-						mid: 'hsl(var(--battery-mid) / <alpha-value> )',
-						low: 'hsl(var(--battery-low) / <alpha-value> )'
+					cpu: {
+						high: 'hsl(var(--cpu-high-usage) / <alpha-value> )'
+					},
+					memory: {
+						high: 'hsl(var(--memory-high-usage) / <alpha-value> )'
 					},
-					'focused-process': 'hsl(var(--focused-process) / <alpha-value> )',
-					process: 'hsl(var(--process) / <alpha-value> )',
-					displayed: 'hsl(var(--displayed) / <alpha-value> )',
 					ws: {
 						base: 'hsl(var(--ws-base) / <alpha-value>)',
 						'base-text': 'hsl(var(--ws-base-text) / <alpha-value>)',
@@ -32,14 +27,7 @@ export default {
 						'focused-text': 'hsl(var(--ws-focused-text) / <alpha-value>)',
 						displayed: 'hsl(var(--ws-displayed) / <alpha-value>)',
 						'displayed-text': 'hsl(var(--ws-displayed-text) / <alpha-value>)'
-					},
-					'tiling-direction': 'hsl(var(--tiling-direction) / <alpha-value> )',
-					spotify: {
-						playing: 'hsl(var(--now-playing) / <alpha-value> )',
-						paused: 'hsl(var(--not-playing) / <alpha-value> )'
-					},
-					network: 'hsl(var(--network) / <alpha-value> )',
-					weather: 'hsl(var(--weather) / <alpha-value> )'
+					}
 				},
 				blend: generateBlends()
 			},