sidebar: add date time to time pane

scss/sidebar.scss

@@ -792,6 +792,29 @@
         }
     }
 
+    .time-date {
+        padding: lib.s(12) lib.s(8);
+        font-size: lib.s(48);
+        font-weight: bold;
+        color: scheme.$primary;
+
+        & > * {
+            @include lib.spacing(3);
+        }
+
+        .ampm {
+            font-size: lib.s(24);
+            font-weight: normal;
+            margin-top: lib.s(18);
+            color: scheme.$secondary;
+        }
+
+        .date {
+            font-size: lib.s(20);
+            color: scheme.$tertiary;
+        }
+    }
+
     .calendar {
         @include lib.rounded(20);
 

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))
         }

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">