1 files changed, 118 insertions, 0 deletions

diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/date-display.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/date-display.jsx
new file mode 100755
index 0000000..af4c058
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/date-display.jsx
@@ -0,0 +1,118 @@
+import * as Uebersicht from "uebersicht";
+import * as DataWidget from "./data-widget.jsx";
+import * as DataWidgetLoader from "./data-widget-loader.jsx";
+import * as Icons from "../icons/icons.jsx";
+import * as Utils from "../../utils";
+import useWidgetRefresh from "../../hooks/use-widget-refresh";
+import useServerSocket from "../../hooks/use-server-socket";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+
+export { dateStyles as styles } from "../../styles/components/data/date-display";
+
+const { React } = Uebersicht;
+
+const DEFAULT_REFRESH_FREQUENCY = 30000;
+
+/**
+ * Date display widget component.
+ * @returns {JSX.Element} The date display widget.
+ */
+export const Widget = React.memo(() => {
+  const { displayIndex, settings } = useSimpleBarContext();
+  const { widgets, dateWidgetOptions } = settings;
+  const { dateWidget } = widgets;
+  const {
+    refreshFrequency,
+    shortDateFormat,
+    locale,
+    calendarApp,
+    showOnDisplay,
+    showIcon,
+  } = dateWidgetOptions;
+
+  // Determine if the widget should be visible based on display settings
+  const visible =
+    Utils.isVisibleOnDisplay(displayIndex, showOnDisplay) && dateWidget;
+
+  // Calculate the refresh frequency for the widget
+  const refresh = React.useMemo(
+    () =>
+      Utils.getRefreshFrequency(refreshFrequency, DEFAULT_REFRESH_FREQUENCY),
+    [refreshFrequency],
+  );
+
+  const [state, setState] = React.useState();
+  const [loading, setLoading] = React.useState(visible);
+
+  const formatOptions = shortDateFormat ? "short" : "long";
+
+  // Memoize the date format options
+  const options = React.useMemo(
+    () => ({
+      weekday: formatOptions,
+      month: formatOptions,
+      day: "numeric",
+    }),
+    [formatOptions],
+  );
+
+  // Ensure locale is valid, default to "en-UK" if not
+  const _locale = locale.length > 4 ? locale : "en-UK";
+
+  /**
+   * Reset the widget state.
+   */
+  const resetWidget = () => {
+    setState(undefined);
+    setLoading(false);
+  };
+
+  /**
+   * Get the current date and update the state.
+   */
+  const getDate = React.useCallback(() => {
+    if (!visible) return;
+    const now = new Date().toLocaleDateString(_locale, options);
+    setState({ now });
+    setLoading(false);
+  }, [_locale, options, visible]);
+
+  // Use server socket to get date updates
+  useServerSocket("date-display", visible, getDate, resetWidget, setLoading);
+  // Refresh the widget at the specified interval
+  useWidgetRefresh(visible, getDate, refresh);
+
+  if (loading) return <DataWidgetLoader.Widget className="date-display" />;
+  if (!state) return null;
+  const { now } = state;
+
+  /**
+   * Handle click event to open the calendar application.
+   * @param {Event} e - The click event.
+   */
+  const onClick = (e) => {
+    Utils.clickEffect(e);
+    openCalendarApp(calendarApp);
+  };
+
+  return (
+    <DataWidget.Widget
+      classes="date-display"
+      Icon={showIcon ? Icons.Date : null}
+      onClick={onClick}
+    >
+      {now}
+    </DataWidget.Widget>
+  );
+});
+
+Widget.displayName = "DateDisplay";
+
+/**
+ * Open the specified calendar application.
+ * @param {string} calendarApp - The name of the calendar application to open.
+ */
+function openCalendarApp(calendarApp) {
+  const appName = calendarApp || "Calendar";
+  Uebersicht.run(`open -a "${appName}"`);
+}