diff --git a/src/App.tsx b/src/App.tsx index bdc3f46..70c3eed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,11 +22,11 @@ const AppRoot = () => {
{loggedIn ? (
-
+
-
+
diff --git a/src/components/Music/index.tsx b/src/components/Music/index.tsx index 1ec1585..54048c2 100644 --- a/src/components/Music/index.tsx +++ b/src/components/Music/index.tsx @@ -36,7 +36,7 @@ export const Music = () => { if (!audio.current) return; setMetadata(m); - audio.current.volume = 0.01; + audio.current.volume = 0.5; }); }, [metadata]); diff --git a/src/components/Waybar/WaybarWidget.tsx b/src/components/Waybar/WaybarWidget.tsx index ca8712d..44e4db1 100644 --- a/src/components/Waybar/WaybarWidget.tsx +++ b/src/components/Waybar/WaybarWidget.tsx @@ -1,19 +1,57 @@ -import { type ReactNode } from "react"; +import { useState, type ReactNode, type MouseEvent, useRef } from "react"; import { cn } from "~/utils/react"; export const WaybarWidget = (props: { className?: string; - tooltip?: string; + tooltip?: ReactNode; interactable?: boolean; - children: ReactNode | Array; -}) => ( -
- {props.children} -
-); + children: ReactNode; +}) => { + const [tooltipPosition, setTooltipPosition] = useState<{ + x: number; + y: number; + }>(); + const [tooltipVisible, setTooltipVisible] = useState(false); + const timeoutRef = useRef(); + + const handleMouseEnter = () => { + timeoutRef.current = setTimeout(() => { + setTooltipVisible(true); + }, 500); + }; + + const handleMouveMove = (e: MouseEvent) => { + if (!tooltipVisible) { + setTooltipPosition({ x: e.clientX, y: e.clientY }); + } + }; + + const handleMouseLeave = () => { + clearTimeout(timeoutRef.current); + timeoutRef.current = undefined; + setTooltipVisible(false); + }; + + return ( +
+ {props.children} + {props.tooltip && tooltipPosition && tooltipVisible && ( +
+ {props.tooltip} +
+ )} +
+ ); +}; diff --git a/src/components/Waybar/WaybarWidgetGroup.tsx b/src/components/Waybar/WaybarWidgetGroup.tsx index bb71bce..85f6dfc 100644 --- a/src/components/Waybar/WaybarWidgetGroup.tsx +++ b/src/components/Waybar/WaybarWidgetGroup.tsx @@ -7,11 +7,10 @@ export const WaybarWidgetGroup = (props: { }) => (
{props.children}
); -// gap-5 px-3 py-[6.5px] diff --git a/src/components/Waybar/Widgets/WaybarBatteryWidget.tsx b/src/components/Waybar/Widgets/WaybarBatteryWidget.tsx index 4ceaf86..3fd4393 100644 --- a/src/components/Waybar/Widgets/WaybarBatteryWidget.tsx +++ b/src/components/Waybar/Widgets/WaybarBatteryWidget.tsx @@ -19,8 +19,26 @@ export const WaybarBatteryWidget = (props: { frequency: number }) => { return () => clearInterval(interval); }); + const tooltip = + battery === 100 + ? "Full" + : battery >= 70 + ? "Almost full" + : battery >= 50 + ? "Halfway down, but still doing great. I wonder what happens if the battery reaches 0" + : battery >= 25 + ? "Uh maybe you should consider charging me ?" + : battery >= 15 + ? "It's really reaching low level now" + : battery >= 5 + ? "Are you ignoring my messages ??" + : "I warned you"; + return ( - + {lerpIcon(ICONS, battery, 100)} {battery}% ); diff --git a/src/components/Waybar/Widgets/WaybarBrightnessWidget.tsx b/src/components/Waybar/Widgets/WaybarBrightnessWidget.tsx index 8a20584..eadc7ad 100644 --- a/src/components/Waybar/Widgets/WaybarBrightnessWidget.tsx +++ b/src/components/Waybar/Widgets/WaybarBrightnessWidget.tsx @@ -16,8 +16,23 @@ export const WaybarBrightnessWidget = () => { setBrightness(newBrightness); }; + const tooltip = + brightness === 100 + ? "Full" + : brightness >= 70 + ? "Almost full" + : brightness >= 50 + ? "Halfway down, but still doing great. I wonder what happens if the brightness reaches 0" + : brightness >= 25 + ? "Uh maybe you should consider charging me ?" + : brightness >= 15 + ? "It's really reaching low level now" + : brightness >= 5 + ? "Are you ignoring my messages ??" + : "I warned you"; + return ( - + {lerpIcon(ICONS, brightness, 100)} {brightness}% diff --git a/src/components/Waybar/Widgets/WaybarCPUWidget.tsx b/src/components/Waybar/Widgets/WaybarCPUWidget.tsx index 32f3ab4..8bbb1a2 100644 --- a/src/components/Waybar/Widgets/WaybarCPUWidget.tsx +++ b/src/components/Waybar/Widgets/WaybarCPUWidget.tsx @@ -1,31 +1,51 @@ import { useEffect, 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% +import { clamp, randomMinMax } from "~/utils/math"; export const WaybarCPUWidget = (props: { cores: number; + min: number; + max: number; variation: number; frequency: number; }) => { - const [usage, setUsage] = useState(new Array(props.cores).fill(0)); + const [usage, setUsage] = useState( + new Array(props.cores) + .fill(0) + .map((_) => randomMinMax(props.min, props.max)), + ); useEffect(() => { const interval = setInterval(() => { - usage[0] += 1; + const variation = randomMinMax(-props.variation, props.variation + 1); + const index = randomMinMax(0, usage.length); + usage[index] = clamp(usage[index] + variation, props.min, props.max); + setUsage([...usage]); }, props.frequency); return () => clearInterval(interval); - }, [usage, props.frequency]); + }, [usage, props.variation, props.min, props.max, props.frequency]); const totalUsage = Math.round( usage.reduce((acc, v) => acc + v, 0) / usage.length, ); return ( -  {totalUsage}% + +
  • Total: {totalUsage}%
    • + {usage.map((value, i) => ( +
  • + Core{i}: {value}% +
    • + ))} + + } + > +  {totalUsage}% +     ); }; diff --git a/src/components/Waybar/Widgets/WaybarDiskWidget.tsx b/src/components/Waybar/Widgets/WaybarDiskWidget.tsx index 2d8040d..db232a8 100644 --- a/src/components/Waybar/Widgets/WaybarDiskWidget.tsx +++ b/src/components/Waybar/Widgets/WaybarDiskWidget.tsx @@ -12,5 +12,14 @@ export const WaybarDiskWidget = (props: { props.current + randomMinMax(-props.variation, props.variation + 1); const usage = Math.round((value / props.capacity) * 100); - return 󰋊 {usage}%; + return ( + + 󰋊 {usage}% + + ); }; diff --git a/src/components/Waybar/Widgets/WaybarMicrophoneWidget.tsx b/src/components/Waybar/Widgets/WaybarMicrophoneWidget.tsx index a36603d..f6db77f 100644 --- a/src/components/Waybar/Widgets/WaybarMicrophoneWidget.tsx +++ b/src/components/Waybar/Widgets/WaybarMicrophoneWidget.tsx @@ -19,8 +19,19 @@ export const WaybarMicrophoneWidget = () => { const icon = muted ? "" : ""; + const tooltip = + volume === 0 || muted + ? "Don't worry I'm not listening to you" + : volume === 100 + ? "Broadcasting loud and clear!" + : volume >= 50 + ? "Your voice sounds really great!" + : volume >= 20 + ? "I can still hear you, just a bit quieter" + : "I can barely hear you anymore :("; + return ( - + clearInterval(interval); }); + const used = (usage / 100) * props.capacity; + // TODO: tooltip // Memory - (capacity * usage).1f GB used - return  {usage}%; + return ( + +  {usage}% + + ); }; diff --git a/src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx b/src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx index f1f7dba..323a45b 100644 --- a/src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx +++ b/src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx @@ -22,7 +22,10 @@ export const WaybarTemperatureWidget = (props: { }); return ( - +  {temperature}°C ); diff --git a/src/components/Waybar/Widgets/WaybarVolumeWidget.tsx b/src/components/Waybar/Widgets/WaybarVolumeWidget.tsx index 95c1c18..6ac84f7 100644 --- a/src/components/Waybar/Widgets/WaybarVolumeWidget.tsx +++ b/src/components/Waybar/Widgets/WaybarVolumeWidget.tsx @@ -23,8 +23,17 @@ export const WaybarVolumeWidget = () => { const icon = muted ? "" : lerpIcon(ICONS, volume, 100); + const toolip = + volume === 0 || muted + ? "You don't like the music? :(" + : volume === 100 + ? "Always maximum volume when it's Hysta" + : volume >= 50 + ? "Turning up the vibes !" + : "Enjoying music at a moderate level"; + return ( - + { - +