sidebar: add date time to time pane

2 files changed, 13 insertions, 12 deletions

diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx
index 29f4f88..2aa45b6 100644
--- a/src/modules/bar.tsx
+++ b/src/modules/bar.tsx
@@ -7,7 +7,6 @@ import { ellipsize } from "@/utils/strings";
 import { bindCurrentTime, osIcon } from "@/utils/system";
 import type { AstalWidget } from "@/utils/types";
 import { setupCustomTooltip } from "@/utils/widgets";
-import type PopupWindow from "@/widgets/popupwindow";
 import ScreenCorner from "@/widgets/screencorner";
 import { execAsync, Variable } from "astal";
 import Binding, { bind, kebabify } from "astal/binding";
@@ -66,14 +65,6 @@ const hookFocusedClientProp = (
     callback(lastClient);
 };
 
-const togglePopup = (self: JSX.Element, event: Astal.ClickEvent, name: string) => {
-    const popup = App.get_window(name) as PopupWindow | null;
-    if (popup) {
-        if (popup.visible) popup.hide();
-        else popup.popup_at_widget(self, event);
-    }
-};
-
 const switchPane = (name: string) => {
     const sidebar = App.get_window("sidebar") as SideBar | null;
     if (sidebar) {
@@ -511,7 +502,7 @@ const Battery = () => {
 
 const DateTime = () => (
     <button
-        onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")}
+        onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("time")}
         setup={self =>
             setupCustomTooltip(self, bindCurrentTime(bind(config.modules.dateTime.detailedFormat), undefined, self))
         }
@@ -532,7 +523,7 @@ const DateTime = () => (
 
 const DateTimeVertical = () => (
     <button
-        onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")}
+        onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("time")}
         setup={self =>
             setupCustomTooltip(self, bindCurrentTime(bind(config.modules.dateTime.detailedFormat), undefined, self))
         }
diff --git a/src/modules/sidebar/time.tsx b/src/modules/sidebar/time.tsx
index c7b68ba..1f5ef99 100644
--- a/src/modules/sidebar/time.tsx
+++ b/src/modules/sidebar/time.tsx
@@ -1,7 +1,17 @@
+import { bindCurrentTime } from "@/utils/system";
+import { Gtk } from "astal/gtk3";
 import Calendar from "./modules/calendar";
 import Upcoming from "./modules/upcoming";
 
-const TimeDate = () => <box></box>;
+const TimeDate = () => (
+    <box vertical className="time-date">
+        <box halign={Gtk.Align.CENTER}>
+            <label label={bindCurrentTime("%I:%M:%S")} />
+            <label className="ampm" label={bindCurrentTime("%p", c => (c.get_hour() < 12 ? "AM" : "PM"))} />
+        </box>
+        <label className="date" label={bindCurrentTime("%A, %d %B")} />
+    </box>
+);
 
 export default () => (
     <box vertical className="pane time" name="time">