1 files changed, 84 insertions, 0 deletions

diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/yabai/space-options.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/yabai/space-options.jsx
new file mode 100755
index 0000000..9c54d8b
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/yabai/space-options.jsx
@@ -0,0 +1,84 @@
+import * as Uebersicht from "uebersicht";
+import * as Icons from "../icons/icons.jsx";
+import { SuspenseIcon } from "../icons/icon.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+import * as Utils from "../../utils.js";
+import * as Yabai from "../../yabai.js";
+
+const { React } = Uebersicht;
+
+/**
+ * SpaceOptions component provides options to manipulate spaces (move left, move right, remove).
+ * @param {Object} props - The component props.
+ * @param {number} props.index - The index of the space.
+ * @param {Function} props.setHovered - Function to set the hovered state.
+ * @returns {JSX.Element} The SpaceOptions component.
+ */
+export default function SpaceOptions({ index, setHovered }) {
+  // Get displayIndex from the context
+  const { displayIndex } = useSimpleBarContext();
+
+  /**
+   * Handles the click event to remove a space.
+   * @param {Event} e - The click event.
+   */
+  const remove = async (e) => {
+    e.stopPropagation();
+    Utils.clickEffect(e);
+    setHovered(false);
+    await Yabai.removeSpace(index, displayIndex);
+  };
+
+  /**
+   * Returns a function to handle the click event to swap a space.
+   * @param {string} direction - The direction to swap the space ("left" or "right").
+   * @returns {Function} The click event handler.
+   */
+  const moveTo = (direction) => async (e) => {
+    Utils.clickEffect(e);
+    setHovered(false);
+    await Yabai.swapSpace(index, direction);
+  };
+
+  /**
+   * Prevents the default behavior of the mouse down event.
+   * @param {Event} e - The mouse down event.
+   */
+  const onMouseDown = (e) => e.preventDefault();
+
+  /**
+   * Handles the mouse leave event to unset the hovered state.
+   */
+  const onMouseLeave = () => setHovered(false);
+
+  return (
+    <span className="space-options" onMouseLeave={onMouseLeave}>
+      <div
+        className="space-options__option space-options__option--move-prev"
+        onMouseDown={onMouseDown}
+        onClick={moveTo("left")}
+      >
+        <SuspenseIcon>
+          <Icons.ChevronLeft />
+        </SuspenseIcon>
+      </div>
+      <div
+        className="space-options__option space-options__option--move-next"
+        onMouseDown={onMouseDown}
+        onClick={moveTo("right")}
+      >
+        <SuspenseIcon>
+          <Icons.ChevronRight />
+        </SuspenseIcon>
+      </div>
+      <div
+        className="space-options__option space-options__option--remove"
+        onClick={remove}
+      >
+        <SuspenseIcon>
+          <Icons.Remove />
+        </SuspenseIcon>
+      </div>
+    </span>
+  );
+}