users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings.jsx
6ad98695409ab789b2b3b15c95de404daf46d1a7
· 3.2 KB · 94 lines
raw
| 1 | import * as Uebersicht from "uebersicht"; |
| 2 | import * as Utils from "../../utils"; |
| 3 | import * as Settings from "../../settings"; |
| 4 | import { useSimpleBarContext } from "../simple-bar-context.jsx"; |
| 5 | |
| 6 | export { settingsStyles as styles } from "../../styles/components/settings/settings"; |
| 7 | |
| 8 | const { React } = Uebersicht; |
| 9 | |
| 10 | // Settings component is lazy loaded. That way, |
| 11 | // it isn't loaded everytime simple-bar is refreshed |
| 12 | const Component = React.lazy(() => import("./settings-component.jsx")); |
| 13 | |
| 14 | /** |
| 15 | * Wrapper component that handles keyboard shortcuts for various actions |
| 16 | * and manages the visibility of the settings component. |
| 17 | * |
| 18 | * @component |
| 19 | * @returns {React.Fragment} A fragment containing the settings component if visible. |
| 20 | */ |
| 21 | export function Wrapper() { |
| 22 | const { pushMissive } = useSimpleBarContext(); |
| 23 | const [visible, setVisible] = React.useState(false); |
| 24 | |
| 25 | const closeSettings = () => { |
| 26 | setVisible(false); |
| 27 | Utils.blurBar(); |
| 28 | }; |
| 29 | |
| 30 | // Actions handled by this function are |
| 31 | // > Hard refresh simple-bar with cmd/ctrl + r |
| 32 | // > Open settings with cmd/ctrl + , |
| 33 | // > Toggle dark theme with cmd/ctrl + t |
| 34 | const handleKeydown = React.useCallback( |
| 35 | (e) => { |
| 36 | const { ctrlKey, key, metaKey } = e; |
| 37 | if ((ctrlKey || metaKey) && key === "r") { |
| 38 | e.preventDefault(); |
| 39 | Utils.hardRefresh(); |
| 40 | } |
| 41 | if ((ctrlKey || metaKey) && key === ",") { |
| 42 | e.preventDefault(); |
| 43 | setVisible(true); |
| 44 | } |
| 45 | if ((ctrlKey || metaKey) && key === "t") { |
| 46 | e.preventDefault(); |
| 47 | // We retrieve the latest version of settings |
| 48 | const settings = Settings.get(); |
| 49 | const AUTO = "auto"; |
| 50 | // If current value is auto, it is stored as is |
| 51 | // otherwise, it is toggled |
| 52 | let newValue = AUTO; |
| 53 | if (settings.global.theme !== AUTO) { |
| 54 | newValue = settings.global.theme; |
| 55 | } |
| 56 | // OS is instructed to toggle dark theme |
| 57 | Uebersicht.run( |
| 58 | `osascript -e 'tell app "System Events" to tell appearance preferences to set dark mode to not dark mode'`, |
| 59 | ); |
| 60 | // A notification is pushed either in Macos notification center or via internal missives system |
| 61 | Utils.notification("Toggling dark theme...", pushMissive); |
| 62 | if (newValue !== AUTO) { |
| 63 | // Only theme value is updated |
| 64 | const updatedSettings = { |
| 65 | ...settings, |
| 66 | global: { ...settings.global, theme: newValue }, |
| 67 | }; |
| 68 | // Settings are updated and simple-bar is hard refreshed |
| 69 | Settings.set(updatedSettings); |
| 70 | Utils.hardRefresh(); |
| 71 | } |
| 72 | } |
| 73 | }, |
| 74 | [pushMissive], |
| 75 | ); |
| 76 | |
| 77 | React.useEffect(() => { |
| 78 | // We bind keydown event on Übersicht document when <Settings /> component is mounted |
| 79 | // Event listener is removed on unmount |
| 80 | document.addEventListener("keydown", handleKeydown); |
| 81 | return () => document.removeEventListener("keydown", handleKeydown); |
| 82 | }, [handleKeydown]); |
| 83 | |
| 84 | // Only a fragment is returned if <Settings /> component is not visible |
| 85 | return ( |
| 86 | <React.Fragment> |
| 87 | {visible && ( |
| 88 | <React.Suspense fallback={<React.Fragment />}> |
| 89 | <Component visible={visible} closeSettings={closeSettings} /> |
| 90 | </React.Suspense> |
| 91 | )} |
| 92 | </React.Fragment> |
| 93 | ); |
| 94 | } |