users/ryan/modules/simple-bar/simple-bar-source/lib/components/yabai/window.jsx

2e30121671a730a2b4bc2f82d2e30ed5c9ff70e5 · 3.4 KB · 119 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as AppIcons from "../../app-icons";
3 import { SuspenseIcon } from "../icons/icon.jsx";
4 import { useSimpleBarContext } from "../simple-bar-context.jsx";
5 import * as Utils from "../../utils";
6 import * as Yabai from "../../yabai";
7
8 const { React } = Uebersicht;
9
10 /**
11 * Window component to display a window in simple-bar.
12 * @param {Object} props - The component props.
13 * @param {Object} props.window - The window object containing window details.
14 * @returns {JSX.Element|null} The rendered window component or null if the window is minimized or not focused.
15 */
16 export default function Window({ window }) {
17 const { settings } = useSimpleBarContext();
18 const ref = React.useRef();
19
20 // Destructure settings for process display options
21 const {
22 displayOnlyCurrent,
23 hideWindowTitle,
24 displayOnlyIcon,
25 expandAllProcesses,
26 displayStackIndex,
27 displayOnlyCurrentStack,
28 } = settings.process;
29
30 // Destructure window properties
31 const {
32 "stack-index": stackIndex,
33 "is-minimized": isMinimized,
34 minimized: __legacyIsMinimized,
35 "has-focus": hasFocus,
36 focused: __legacyHasFocus,
37 app: appName,
38 title,
39 id,
40 } = window;
41
42 // Determine if the window is focused
43 const isFocused = hasFocus ?? __legacyHasFocus;
44
45 // Return null if the window is minimized or not focused when displayOnlyCurrent is true
46 if (
47 (isMinimized ?? __legacyIsMinimized) ||
48 (displayOnlyCurrent && !isFocused)
49 ) {
50 return null;
51 }
52
53 // Get the icon for the application or use the default icon
54 const Icon = AppIcons.apps[appName] || AppIcons.apps.Default;
55
56 /**
57 * Handle click event on the window button.
58 * @param {Event} e - The click event.
59 */
60 const onClick = (e) => {
61 !displayOnlyCurrent && Utils.clickEffect(e);
62 Yabai.focusWindow(id);
63 };
64
65 /**
66 * Handle mouse enter event to start sliding animation.
67 */
68 const onMouseEnter = () => {
69 Utils.startSliding(ref.current, ".process__inner", ".process__name");
70 };
71
72 /**
73 * Handle mouse leave event to stop sliding animation.
74 */
75 const onMouseLeave = () => {
76 Utils.stopSliding(ref.current, ".process__name");
77 };
78
79 // Generate class names for the window button
80 const classes = Utils.classNames("process__window", {
81 "process__window--expanded": expandAllProcesses,
82 "process__window--focused": !displayOnlyCurrent && isFocused,
83 "process__window--only-current": displayOnlyCurrent,
84 "process__window--only-icon": displayOnlyIcon,
85 });
86
87 // Clean up the window name for display
88 const cleanedUpName =
89 appName !== title && title.length ? `${appName} / ${title}` : appName;
90 const processName = hideWindowTitle ? appName : cleanedUpName;
91
92 // Determine if the stack index should be displayed
93 const showStackIndex =
94 displayStackIndex &&
95 (!displayOnlyCurrentStack || isFocused) &&
96 stackIndex > 0;
97
98 return (
99 <button
100 ref={ref}
101 className={classes}
102 onClick={onClick}
103 onMouseEnter={displayOnlyIcon ? undefined : onMouseEnter}
104 onMouseLeave={displayOnlyIcon ? undefined : onMouseLeave}
105 >
106 <SuspenseIcon>
107 <Icon className="process__icon" />
108 </SuspenseIcon>
109 {!displayOnlyIcon && (
110 <span className="process__inner">
111 <span className="process__name">{processName}</span>
112 </span>
113 )}
114 {showStackIndex && (
115 <span className="process__stack-index">{stackIndex}</span>
116 )}
117 </button>
118 );
119 }