feat(agsV2): separate from agsV1

nixosModules/ags-v2/config/widgets/date/main.tsx

@@ -0,0 +1,97 @@
+import { bind, Variable } from 'astal';
+import { Astal, Gtk } from 'astal/gtk3';
+
+import GLib from 'gi://GLib';
+
+import PopupWindow from '../misc/popup-window';
+
+
+const Divider = () => (
+    <box
+        className="divider"
+        vertical
+    />
+);
+
+const Time = () => {
+    const hour = Variable<string>('').poll(1000, () => GLib.DateTime.new_now_local().format('%H') || '');
+    const min = Variable<string>('').poll(1000, () => GLib.DateTime.new_now_local().format('%M') || '');
+
+    const fullDate = Variable<string>('').poll(1000, () => {
+        const time = GLib.DateTime.new_now_local();
+
+        const dayNameMonth = time.format('%A, %B ');
+        const dayNum = time.get_day_of_month();
+        const date = time.format(', %Y');
+
+        return dayNum && dayNameMonth && date ?
+            dayNameMonth + dayNum + date :
+            '';
+    });
+
+    return (
+        <box
+            className="timebox"
+            vertical
+        >
+            <box
+                className="time-container"
+                halign={Gtk.Align.CENTER}
+                valign={Gtk.Align.CENTER}
+            >
+                <label
+                    className="content"
+                    label={bind(hour)}
+                />
+
+                <Divider />
+
+                <label
+                    className="content"
+                    label={bind(min)}
+                />
+            </box>
+
+            <box
+                className="date-container"
+                halign={Gtk.Align.CENTER}
+            >
+                <label
+                    css="font-size: 20px;"
+                    label={bind(fullDate)}
+                />
+            </box>
+        </box>
+    );
+};
+
+const DateWidget = () => {
+    const cal = new Gtk.Calendar({
+        show_day_names: true,
+        show_heading: true,
+    });
+
+    cal.show_all();
+
+    return (
+        <box
+            className="date widget"
+            vertical
+        >
+            <Time />
+
+            <box className="cal-box">
+                {cal}
+            </box>
+        </box>
+    );
+};
+
+export default () => (
+    <PopupWindow
+        name="calendar"
+        anchor={Astal.WindowAnchor.TOP}
+    >
+        <DateWidget />
+    </PopupWindow>
+);

nixosModules/ags-v2/config/widgets/date/style.scss

@@ -0,0 +1,66 @@
+.date {
+    margin-top: 0;
+}
+
+.timebox {
+    margin: 30px 0;
+
+    .time-container {
+        .content {
+            font-weight: bolder;
+            font-size: 60px;
+        }
+
+        .divider {
+            margin: 8px 15px;
+            padding: 0 1px;
+            background: linear-gradient($red, $magenta, $blue, $cyan);
+        }
+    }
+
+    .date-container {
+        margin-top: 2px;
+    }
+}
+
+.cal-box {
+    padding: 0 1rem .2rem;
+    margin: 0 12px 18px;
+
+    calendar {
+        font-size: 20px;
+        background-color: inherit;
+        padding: .5rem .10rem 0;
+        margin-left: 10px;
+
+        &>* {
+            border: solid 0 transparent;
+        }
+
+        &.highlight {
+            padding: 10rem;
+        }
+    }
+}
+
+calendar:selected {
+    color: $cyan;
+}
+
+calendar.header {
+    color: $cyan;
+    font-weight: bold;
+}
+
+calendar.button {
+    color: $cyan;
+}
+
+calendar.highlight {
+    color: $green;
+    font-weight: bold;
+}
+
+calendar:indeterminate {
+    color: $lightblack;
+}