From d06784958d73159b5e4abafe5114804662114ed7 Mon Sep 17 00:00:00 2001 From: Ryan Schanzenbacher Date: Thu, 9 Jul 2026 22:15:53 -0400 Subject: move ubersicht modules in tree --- .../lib/components/settings/settings.jsx | 94 ++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100755 users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings.jsx (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings.jsx') diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings.jsx new file mode 100755 index 0000000..c63f853 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings.jsx @@ -0,0 +1,94 @@ +import * as Uebersicht from "uebersicht"; +import * as Utils from "../../utils"; +import * as Settings from "../../settings"; +import { useSimpleBarContext } from "../simple-bar-context.jsx"; + +export { settingsStyles as styles } from "../../styles/components/settings/settings"; + +const { React } = Uebersicht; + +// Settings component is lazy loaded. That way, +// it isn't loaded everytime simple-bar is refreshed +const Component = React.lazy(() => import("./settings-component.jsx")); + +/** + * Wrapper component that handles keyboard shortcuts for various actions + * and manages the visibility of the settings component. + * + * @component + * @returns {React.Fragment} A fragment containing the settings component if visible. + */ +export function Wrapper() { + const { pushMissive } = useSimpleBarContext(); + const [visible, setVisible] = React.useState(false); + + const closeSettings = () => { + setVisible(false); + Utils.blurBar(); + }; + + // Actions handled by this function are + // > Hard refresh simple-bar with cmd/ctrl + r + // > Open settings with cmd/ctrl + , + // > Toggle dark theme with cmd/ctrl + t + const handleKeydown = React.useCallback( + (e) => { + const { ctrlKey, key, metaKey } = e; + if ((ctrlKey || metaKey) && key === "r") { + e.preventDefault(); + Utils.hardRefresh(); + } + if ((ctrlKey || metaKey) && key === ",") { + e.preventDefault(); + setVisible(true); + } + if ((ctrlKey || metaKey) && key === "t") { + e.preventDefault(); + // We retrieve the latest version of settings + const settings = Settings.get(); + const AUTO = "auto"; + // If current value is auto, it is stored as is + // otherwise, it is toggled + let newValue = AUTO; + if (settings.global.theme !== AUTO) { + newValue = settings.global.theme; + } + // OS is instructed to toggle dark theme + Uebersicht.run( + `osascript -e 'tell app "System Events" to tell appearance preferences to set dark mode to not dark mode'`, + ); + // A notification is pushed either in Macos notification center or via internal missives system + Utils.notification("Toggling dark theme...", pushMissive); + if (newValue !== AUTO) { + // Only theme value is updated + const updatedSettings = { + ...settings, + global: { ...settings.global, theme: newValue }, + }; + // Settings are updated and simple-bar is hard refreshed + Settings.set(updatedSettings); + Utils.hardRefresh(); + } + } + }, + [pushMissive], + ); + + React.useEffect(() => { + // We bind keydown event on Übersicht document when component is mounted + // Event listener is removed on unmount + document.addEventListener("keydown", handleKeydown); + return () => document.removeEventListener("keydown", handleKeydown); + }, [handleKeydown]); + + // Only a fragment is returned if component is not visible + return ( + + {visible && ( + }> + + + )} + + ); +} -- cgit v1.3