5 files changed, 355 insertions, 0 deletions

diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/opened-apps.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/opened-apps.jsx
new file mode 100755
index 0000000..5b56966
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/opened-apps.jsx
@@ -0,0 +1,33 @@
+import * as Uebersicht from "uebersicht";
+import * as AppIcons from "../../app-icons.js";
+import { SuspenseIcon } from "../icons/icon.jsx";
+import * as Utils from "../../utils.js";
+
+const { React } = Uebersicht;
+
+/**
+ * OpenedApps component to display icons of opened applications.
+ * @param {Object} props - The component props.
+ * @param {Array} props.apps - The list of opened applications.
+ * @returns {JSX.Element|null} The rendered component or null if no apps are opened.
+ */
+export default function OpenedApps({ apps }) {
+  if (!apps.length) return null;
+
+  return apps.map((app, i) => {
+    const { focused } = app;
+    const appName = Utils.normalizeAppName(app["app-name"]);
+    const Icon = AppIcons.apps[appName] || AppIcons.apps.Default;
+
+    // Generate class names for the app icon
+    const classes = Utils.classNames("space__icon", {
+      "space__icon--focused": focused,
+    });
+
+    return (
+      <SuspenseIcon key={i}>
+        <Icon className={classes} />
+      </SuspenseIcon>
+    );
+  });
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/process.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/process.jsx
new file mode 100755
index 0000000..0c461cc
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/process.jsx
@@ -0,0 +1,72 @@
+import * as Uebersicht from "uebersicht";
+import Window from "./window.jsx";
+import * as Utils from "../../utils";
+import { useAerospaceContext } from "../aerospace-context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+
+export { processStyles as styles } from "../../styles/components/process";
+
+const { React } = Uebersicht;
+
+/**
+ * Process component to display windows in the current space.
+ * @returns {JSX.Element|null} The rendered component or null if not visible.
+ */
+const Component = React.memo(() => {
+  // Get spaces from aerospace context
+  const { spaces } = useAerospaceContext();
+  // Get settings and display index from simple bar context
+  const { settings, displayIndex } = useSimpleBarContext();
+  const { spacesDisplay, process, widgets } = settings;
+  const { exclusionsAsRegex } = spacesDisplay;
+  const { processWidget } = widgets;
+  const { centered, showOnDisplay } = process;
+
+  // Determine if the component should be visible
+  const visible =
+    spaces?.length &&
+    processWidget &&
+    Utils.isVisibleOnDisplay(displayIndex, showOnDisplay);
+
+  if (!visible) return null;
+
+  // Find the focused space on the current display
+  const { windows = [] } =
+    spaces.find((space) => space.focused && space.monitor === displayIndex) ||
+    {};
+
+  if (!windows.length) return null;
+
+  // Get exclusions for filtering windows
+  const exclusions = exclusionsAsRegex
+    ? spacesDisplay.exclusions
+    : spacesDisplay.exclusions.split(", ");
+
+  const titleExclusions = exclusionsAsRegex
+    ? spacesDisplay.titleExclusions
+    : spacesDisplay.titleExclusions.split(", ");
+
+  // Generate class names for the component
+  const classes = Utils.classNames("process", {
+    "process--centered": centered,
+  });
+
+  // Filter windows based on exclusions
+  const filteredWindows = windows.filter((window) =>
+    Utils.filterApps(window, exclusions, titleExclusions, exclusionsAsRegex),
+  );
+
+  return (
+    <div className={classes}>
+      <div className="process__container">
+        {filteredWindows.map((window, i) => (
+          <Window key={i} window={window} />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+Component.displayName = "Process";
+
+export default Component;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/space.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/space.jsx
new file mode 100755
index 0000000..ab91bbb
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/space.jsx
@@ -0,0 +1,84 @@
+import * as Uebersicht from "uebersicht";
+import OpenedApps from "./opened-apps.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+import * as Utils from "../../utils.js";
+import * as Aerospace from "../../aerospace.js";
+
+const { React } = Uebersicht;
+
+/**
+ * Space component to display a single space.
+ * @param {Object} props - The component props.
+ * @param {Object} props.space - The space object.
+ * @param {boolean} props.lastOfSpace - Indicates if this is the last space of the monitor.
+ * @returns {JSX.Element|null} The rendered component.
+ */
+export default function Space({ space, lastOfSpace }) {
+  const { windows } = space;
+  const { settings } = useSimpleBarContext();
+  const { spacesDisplay } = settings;
+  const {
+    displayAllSpacesOnAllScreens,
+    exclusionsAsRegex,
+    hideDuplicateAppsInSpaces,
+  } = spacesDisplay;
+  const { workspace, focused } = space;
+
+  /**
+   * Handle click event to switch to the clicked space.
+   * @param {Event} e - The click event.
+   */
+  const onClick = (e) => {
+    if (focused) return;
+    Aerospace.goToSpace(workspace);
+    Utils.clickEffect(e);
+  };
+
+  // Determine if the space should be hidden
+  const hidden = !focused && !windows.length && spacesDisplay.hideEmptySpaces;
+
+  if (hidden) return null;
+
+  // Get exclusions and title exclusions based on settings
+  const exclusions = exclusionsAsRegex
+    ? spacesDisplay.exclusions
+    : spacesDisplay.exclusions.split(", ");
+  const titleExclusions = exclusionsAsRegex
+    ? spacesDisplay.titleExclusions
+    : spacesDisplay.titleExclusions.split(", ");
+
+  // Filter windows based on exclusions
+  const filteredWindows = windows.filter((window) =>
+    Utils.filterApps(window, exclusions, titleExclusions, exclusionsAsRegex),
+  );
+
+  // Remove duplicate apps if the setting is enabled
+  const displayedWindows = hideDuplicateAppsInSpaces
+    ? filteredWindows.reduce((acc, window) => {
+        const isDuplicate = acc.find(
+          (w) => w["app-name"] === window["app-name"],
+        );
+        return isDuplicate ? acc : [...acc, window];
+      }, [])
+    : filteredWindows;
+
+  // Determine the CSS classes for the space
+  const classes = Utils.classNames("space", {
+    "space--focused": focused,
+    "space--empty": windows.length,
+  });
+
+  return (
+    <React.Fragment>
+      {displayAllSpacesOnAllScreens && lastOfSpace && (
+        <div className="spaces__separator" />
+      )}
+      <div className={classes}>
+        <button className="space__inner" onClick={onClick}>
+          {workspace}
+          <OpenedApps apps={displayedWindows} />
+        </button>
+      </div>
+    </React.Fragment>
+  );
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/spaces.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/spaces.jsx
new file mode 100755
index 0000000..d576389
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/spaces.jsx
@@ -0,0 +1,67 @@
+import * as Uebersicht from "uebersicht";
+import Space from "./space.jsx";
+import { useAerospaceContext } from "../aerospace-context.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+import * as Utils from "../../utils.js";
+import * as AeroSpace from "../../aerospace.js";
+
+export { spacesStyles as styles } from "../../styles/components/spaces/spaces.js";
+
+const { React } = Uebersicht;
+
+/**
+ * Spaces component to display spaces on the screen.
+ * @returns {JSX.Element|null} The rendered component.
+ */
+const Component = React.memo(() => {
+  // Get spaces from aerospace context
+  const { spaces } = useAerospaceContext();
+  // Get displays, displayIndex, and settings from simple bar context
+  const { displays, displayIndex, settings } = useSimpleBarContext();
+  const { spacesDisplay, process } = settings;
+  const { displayAllSpacesOnAllScreens, showOnDisplay } = spacesDisplay;
+  // Determine if the component should be visible on the current display
+  const visible = Utils.isVisibleOnDisplay(displayIndex, showOnDisplay);
+  const isProcessVisible = Utils.isVisibleOnDisplay(
+    displayIndex,
+    process.showOnDisplay
+  );
+
+  // If not visible, return null
+  if (!visible) return null;
+
+  // If there are no spaces, return an empty div
+  if (!spaces?.length) {
+    return <div className="spaces spaces--empty" />;
+  }
+
+  // Map through displays and render spaces for the current display
+  return displays.map((display) => {
+    const displayId = AeroSpace.getDisplayIndex(display);
+    if (displayId !== displayIndex) return null;
+
+    // Filter spaces based on display settings
+    const filteredSpaces = displayAllSpacesOnAllScreens
+      ? spaces
+      : spaces.filter((space) => space.monitor === displayId);
+
+    return (
+      <div key={displayId} className="spaces">
+        {filteredSpaces.map((space, i) => {
+          const { workspace } = space;
+          const lastOfSpace =
+            i !== 0 && space.monitor !== spaces[i - 1].monitor;
+
+          return (
+            <Space key={workspace} space={space} lastOfSpace={lastOfSpace} />
+          );
+        })}
+        {isProcessVisible && <div className="spaces__end-separator" />}
+      </div>
+    );
+  });
+});
+
+Component.displayName = "Spaces";
+
+export default Component;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/window.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/window.jsx
new file mode 100755
index 0000000..04b54d6
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/window.jsx
@@ -0,0 +1,99 @@
+import * as Uebersicht from "uebersicht";
+import * as AppIcons from "../../app-icons";
+import { SuspenseIcon } from "../icons/icon.jsx";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+import * as Utils from "../../utils";
+import * as Aerospace from "../../aerospace";
+
+const { React } = Uebersicht;
+
+/**
+ * Window component to display a window in the process bar.
+ * @param {Object} props - The component props.
+ * @param {Object} props.window - The window object.
+ * @returns {JSX.Element|null} The rendered component.
+ */
+export default function Window({ window }) {
+  // Get settings from context
+  const { settings } = useSimpleBarContext();
+  // Create a ref for the button element
+  const ref = React.useRef();
+  // Destructure settings
+  const {
+    displayOnlyCurrent,
+    hideWindowTitle,
+    displayOnlyIcon,
+    expandAllProcesses,
+  } = settings.process;
+  // Destructure window properties
+  const {
+    focused,
+    "app-name": appName,
+    "window-title": title,
+    "window-id": id,
+  } = window;
+
+  // If displayOnlyCurrent is true and the window is not focused, return null
+  if (displayOnlyCurrent && !focused) {
+    return null;
+  }
+
+  // Get the icon for the app or use the default icon
+  const Icon = AppIcons.apps[appName] || AppIcons.apps.Default;
+
+  /**
+   * Handle click event on the window button.
+   * @param {Event} e - The click event.
+   */
+  const onClick = (e) => {
+    !displayOnlyCurrent && Utils.clickEffect(e);
+    Aerospace.focusWindow(id);
+  };
+
+  /**
+   * Handle mouse enter event on the window button.
+   */
+  const onMouseEnter = () => {
+    Utils.startSliding(ref.current, ".process__inner", ".process__name");
+  };
+
+  /**
+   * Handle mouse leave event on the window button.
+   */
+  const onMouseLeave = () => {
+    Utils.stopSliding(ref.current, ".process__name");
+  };
+
+  // Generate class names based on settings and window state
+  const classes = Utils.classNames("process__window", {
+    "process__window--expanded": expandAllProcesses,
+    "process__window--focused": !displayOnlyCurrent && focused,
+    "process__window--only-current": displayOnlyCurrent,
+    "process__window--only-icon": displayOnlyIcon,
+  });
+
+  // Clean up the window title
+  const cleanedUpName =
+    appName !== title && title.length ? `${appName} / ${title}` : appName;
+  const processName = hideWindowTitle ? appName : cleanedUpName;
+
+  // Render the window button
+  return (
+    <button
+      ref={ref}
+      className={classes}
+      onClick={onClick}
+      onMouseEnter={displayOnlyIcon ? undefined : onMouseEnter}
+      onMouseLeave={displayOnlyIcon ? undefined : onMouseLeave}
+    >
+      <SuspenseIcon>
+        <Icon className="process__icon" />
+      </SuspenseIcon>
+      {!displayOnlyIcon && (
+        <span className="process__inner">
+          <span className="process__name">{processName}</span>
+        </span>
+      )}
+    </button>
+  );
+}