Initial commit

.config/ags/widgets/sideright/calendar.js

@@ -0,0 +1,204 @@
+const { Gio, Gdk, GLib, Gtk } = imports.gi;
+import { App, Widget, Utils } from '../../imports.js';
+const { Box, Button, CenterBox, Label, Revealer } = Widget;
+import { MaterialIcon } from "../../lib/materialicon.js";
+import { getCalendarLayout } from "../../lib/calendarlayout.js";
+import { setupCursorHover } from "../../lib/cursorhover.js";
+
+import { TodoWidget } from "./todolist.js";
+
+let calendarJson = getCalendarLayout(undefined, true);
+let monthshift = 0;
+
+function fileExists(filePath) {
+    let file = Gio.File.new_for_path(filePath);
+    return file.query_exists(null);
+}
+
+function getDateInXMonthsTime(x) {
+    var currentDate = new Date(); // Get the current date
+    var targetMonth = currentDate.getMonth() + x; // Calculate the target month
+    var targetYear = currentDate.getFullYear(); // Get the current year
+
+    // Adjust the year and month if necessary
+    targetYear += Math.floor(targetMonth / 12);
+    targetMonth = (targetMonth % 12 + 12) % 12;
+
+    // Create a new date object with the target year and month
+    var targetDate = new Date(targetYear, targetMonth, 1);
+
+    // Set the day to the last day of the month to get the desired date
+    // targetDate.setDate(0);
+
+    return targetDate;
+}
+
+const weekDays = [ // MONDAY IS THE FIRST DAY OF THE WEEK :HESRIGHTYOUKNOW:
+    { day: 'Mo', today: 0 },
+    { day: 'Tu', today: 0 },
+    { day: 'We', today: 0 },
+    { day: 'Th', today: 0 },
+    { day: 'Fr', today: 0 },
+    { day: 'Sa', today: 0 },
+    { day: 'Su', today: 0 },
+]
+
+const CalendarDay = (day, today) => Widget.Button({
+    className: `sidebar-calendar-btn ${today == 1 ? 'sidebar-calendar-btn-today' : (today == -1 ? 'sidebar-calendar-btn-othermonth' : '')}`,
+    child: Widget.Overlay({
+        child: Box({}),
+        overlays: [Label({
+            hpack: 'center',
+            className: 'txt-smallie txt-semibold sidebar-calendar-btn-txt',
+            label: String(day),
+        })],
+    })
+})
+
+const CalendarWidget = () => {
+    const calendarMonthYear = Widget.Button({
+        className: 'txt txt-large sidebar-calendar-monthyear-btn',
+        onClicked: () => shiftCalendarXMonths(0),
+        setup: (button) => {
+            button.label = `${new Date().toLocaleString('default', { month: 'long' })} ${new Date().getFullYear()}`;
+            setupCursorHover(button);
+        }
+    });
+    const addCalendarChildren = (box, calendarJson) => {
+        box.children = calendarJson.map((row, i) => Widget.Box({
+            // homogeneous: true,
+            className: 'spacing-h-5',
+            children: row.map((day, i) =>
+                CalendarDay(day.day, day.today)
+            )
+        }))
+    }
+    function shiftCalendarXMonths(x) {
+        if (x == 0) monthshift = 0;
+        else monthshift += x;
+        var newDate;
+        if (monthshift == 0) newDate = new Date();
+        else newDate = getDateInXMonthsTime(monthshift);
+
+        calendarJson = getCalendarLayout(newDate, (monthshift == 0));
+        calendarMonthYear.label = `${monthshift == 0 ? '' : '• '}${newDate.toLocaleString('default', { month: 'long' })} ${newDate.getFullYear()}`;
+        addCalendarChildren(calendarDays, calendarJson);
+    }
+    const calendarHeader = Widget.Box({
+        className: 'spacing-h-5 sidebar-calendar-header',
+        setup: (box) => {
+            box.pack_start(calendarMonthYear, false, false, 0);
+            box.pack_end(Widget.Box({
+                className: 'spacing-h-5',
+                children: [
+                    Button({
+                        className: 'sidebar-calendar-monthshift-btn',
+                        onClicked: () => shiftCalendarXMonths(-1),
+                        child: MaterialIcon('chevron_left', 'norm'),
+                        setup: setupCursorHover,
+                    }),
+                    Button({
+                        className: 'sidebar-calendar-monthshift-btn',
+                        onClicked: () => shiftCalendarXMonths(1),
+                        child: MaterialIcon('chevron_right', 'norm'),
+                        setup: setupCursorHover,
+                    })
+                ]
+            }), false, false, 0);
+        }
+    })
+    const calendarDays = Widget.Box({
+        hexpand: true,
+        vertical: true,
+        className: 'spacing-v-5',
+        setup: (box) => {
+            addCalendarChildren(box, calendarJson);
+        }
+    });
+    return Widget.EventBox({
+        onScrollUp: () => shiftCalendarXMonths(-1),
+        onScrollDown: () => shiftCalendarXMonths(1),
+        child: Widget.Box({
+            hpack: 'center',
+            children: [
+                Widget.Box({
+                    hexpand: true,
+                    vertical: true,
+                    className: 'spacing-v-5',
+                    children: [
+                        calendarHeader,
+                        Widget.Box({
+                            homogeneous: true,
+                            className: 'spacing-h-5',
+                            children: weekDays.map((day, i) => CalendarDay(day.day, day.today))
+                        }),
+                        calendarDays,
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+const defaultShown = 'calendar';
+const contentStack = Widget.Stack({
+    hexpand: true,
+    items: [
+        ['calendar', CalendarWidget()],
+        ['todo', TodoWidget()],
+        // ['stars', Widget.Label({ label: 'GitHub feed will be here' })],
+    ],
+    transition: 'slide_up_down',
+    transitionDuration: 180,
+    setup: (stack) => Utils.timeout(1, () => {
+        stack.shown = defaultShown;
+    })
+})
+
+const StackButton = (stackItemName, icon, name) => Widget.Button({
+    className: 'button-minsize sidebar-navrail-btn sidebar-button-alone txt-small spacing-h-5',
+    onClicked: (button) => {
+        contentStack.shown = stackItemName;
+        const kids = button.get_parent().get_children();
+        for (let i = 0; i < kids.length; i++) {
+            if (kids[i] != button) kids[i].toggleClassName('sidebar-navrail-btn-active', false);
+            else button.toggleClassName('sidebar-navrail-btn-active', true);
+        }
+    },
+    child: Box({
+        className: 'spacing-v-5',
+        vertical: true,
+        children: [
+            Label({
+                className: `txt icon-material txt-hugeass`,
+                label: icon,
+            }),
+            Label({
+                label: name,
+                className: 'txt txt-smallie',
+            }),
+        ]
+    }),
+    setup: (button) => Utils.timeout(1, () => {
+        setupCursorHover(button);
+        button.toggleClassName('sidebar-navrail-btn-active', defaultShown === stackItemName);
+    })
+});
+
+export const ModuleCalendar = () => Box({
+    className: 'sidebar-group spacing-h-5',
+    setup: (box) => {
+        box.pack_start(Box({
+            vpack: 'center',
+            homogeneous: true,
+            vertical: true,
+            className: 'sidebar-navrail spacing-v-10',
+            children: [
+                StackButton('calendar', 'calendar_month', 'Calendar'),
+                StackButton('todo', 'lists', 'To Do'),
+                // StackButton(box, 'stars', 'star', 'GitHub'),
+            ]
+        }), false, false, 0);
+        box.pack_end(contentStack, false, false, 0);
+    }
+})

.config/ags/widgets/sideright/main.js

@@ -0,0 +1,11 @@
+import PopupWindow from '../../lib/popupwindow.js';
+import SidebarRight from "./sideright.js";
+
+export default () => PopupWindow({
+    focusable: true,
+    anchor: ['right', 'top', 'bottom'],
+    name: 'sideright',
+    showClassName: 'sideright-show',
+    hideClassName: 'sideright-hide',
+    child: SidebarRight(),
+});

.config/ags/widgets/sideright/notificationlist.js

@@ -0,0 +1,117 @@
+// This file is for the notification widget on the sidebar
+// For the popup notifications, see onscreendisplay.js
+// The actual widget for each single notification is in lib/notification.js
+
+const { GLib, Gtk } = imports.gi;
+import { Service, Utils, Widget } from '../../imports.js';
+import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
+const { lookUpIcon, timeout } = Utils;
+const { Box, Icon, Scrollable, Label, Button, Revealer } = Widget;
+import { MaterialIcon } from "../../lib/materialicon.js";
+import { setupCursorHover } from "../../lib/cursorhover.js";
+import Notification from "../../lib/notification.js";
+
+const NotificationList = Box({
+    vertical: true,
+    vpack: 'start',
+    className: 'spacing-v-5-revealer',
+    connections: [
+        [Notifications, (box, id) => {
+            if (box.children.length == 0) {
+                Notifications.notifications
+                    .forEach(n => {
+                        box.pack_end(Notification({
+                            notifObject: n,
+                            isPopup: false,
+                        }), false, false, 0)
+                    });
+                box.show_all();
+            }
+            else if (id) {
+                const notif = Notifications.getNotification(id);
+
+                const NewNotif = Notification({
+                    notifObject: notif,
+                    isPopup: false,
+                });
+
+                if (NewNotif) {
+                    box.pack_end(NewNotif, false, false, 0);
+                    box.show_all();
+                }
+            }
+        }, 'notified'],
+
+        [Notifications, (box, id) => {
+            if (!id) return;
+            for (const ch of box.children) {
+                if (ch._id === id) {
+                    ch._destroyWithAnims();
+                }
+            }
+        }, 'closed'],
+
+        [Notifications, box => box.visible = Notifications.notifications.length > 0],
+    ],
+});
+
+export default (props) => {
+    const listTitle = Revealer({
+        revealChild: false,
+        connections: [[Notifications, (revealer) => {
+            revealer.revealChild = (Notifications.notifications.length > 0);
+        }]],
+        child: Box({
+            vpack: 'start',
+            className: 'sidebar-group-invisible txt',
+            children: [
+                Label({
+                    hexpand: true,
+                    xalign: 0,
+                    className: 'txt-title-small',
+                    label: 'Notifications',
+                }),
+                Button({
+                    className: 'notif-closeall-btn',
+                    onClicked: () => {
+                        Notifications.clear();
+                    },
+                    child: Box({
+                        className: 'spacing-h-5',
+                        children: [
+                            MaterialIcon('clear_all', 'norm'),
+                            Label({
+                                className: 'txt-small',
+                                label: 'Clear',
+                            })
+                        ]
+                    }),
+                    setup: button => {
+                        setupCursorHover(button);
+                    },
+                })
+            ]
+        })
+    });
+    const listContents = Scrollable({
+        hexpand: true,
+        hscroll: 'never',
+        vscroll: 'automatic',
+        child: Box({
+            vexpand: true,
+            children: [NotificationList],
+        })
+    });
+    listContents.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+    const vScrollbar = listContents.get_vscrollbar();
+    vScrollbar.get_style_context().add_class('sidebar-scrollbar');
+    return Box({
+        ...props,
+        className: 'sidebar-group-invisible spacing-v-5',
+        vertical: true,
+        children: [
+            listTitle,
+            listContents,
+        ]
+    });
+}

.config/ags/widgets/sideright/quicktoggles.js

@@ -0,0 +1,194 @@
+import { Widget, Utils, Service } from '../../imports.js';
+import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
+import Network from 'resource:///com/github/Aylur/ags/service/network.js';
+const { execAsync, exec } = Utils;
+import { BluetoothIndicator, NetworkIndicator } from "../../lib/statusicons.js";
+import { setupCursorHover } from "../../lib/cursorhover.js";
+import { MaterialIcon } from '../../lib/materialicon.js';
+
+export const ToggleIconWifi = (props = {}) => Widget.Button({
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Wifi | Right-click to configure',
+    onClicked: Network.toggleWifi,
+    onSecondaryClickRelease: () => {
+        execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center wifi', '&']);
+    },
+    child: NetworkIndicator(),
+    connections: [
+        [Network, button => {
+            button.toggleClassName('sidebar-button-active', Network.wifi?.internet == 'connected' || Network.wired?.internet == 'connected')
+        }],
+        [Network, button => {
+            button.tooltipText = (`${Network.wifi?.ssid} | Right-click to configure` || 'Unknown');
+        }],
+    ],
+    setup: setupCursorHover,
+    ...props,
+});
+
+export const ToggleIconBluetooth = (props = {}) => Widget.Button({
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Bluetooth | Right-click to configure',
+    onClicked: () => { // Provided service doesn't work hmmm
+        const status = Bluetooth?.enabled;
+        if (status) {
+            exec('rfkill block bluetooth');
+        }
+        else {
+            exec('rfkill unblock bluetooth');
+        }
+    },
+    onSecondaryClickRelease: () => {
+        execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center bluetooth', '&']);
+    },
+    child: BluetoothIndicator(),
+    connections: [
+        [Bluetooth, button => {
+            button.toggleClassName('sidebar-button-active', Bluetooth?.enabled)
+        }],
+    ],
+    setup: setupCursorHover,
+    ...props,
+});
+
+export const HyprToggleIcon = (icon, name, hyprlandConfigValue, props = {}) => Widget.Button({
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: `${name}`,
+    onClicked: (button) => {
+        // Set the value to 1 - value
+        Utils.execAsync(`hyprctl -j getoption ${hyprlandConfigValue}`).then((result) => {
+            const currentOption = JSON.parse(result).int;
+            execAsync(['bash', '-c', `hyprctl keyword ${hyprlandConfigValue} ${1 - currentOption} &`]).catch(print);
+            button.toggleClassName('sidebar-button-active', currentOption == 0);
+        }).catch(print);
+    },
+    child: MaterialIcon(icon, 'norm', { hpack: 'center' }),
+    setup: button => {
+        button.toggleClassName('sidebar-button-active', JSON.parse(Utils.exec(`hyprctl -j getoption ${hyprlandConfigValue}`)).int == 1);
+        setupCursorHover(button);
+    },
+    ...props,
+})
+
+export const ModuleNightLight = (props = {}) => Widget.Button({
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Night Light',
+    onClicked: (button) => {
+        const shaderPath = JSON.parse(exec('hyprctl -j getoption decoration:screen_shader')).str;
+        if (shaderPath != "[[EMPTY]]" && shaderPath != "") {
+            execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader ''`]).catch(print);
+            button.toggleClassName('sidebar-button-active', false);
+        }
+        else {
+            execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader ~/.config/hypr/shaders/extradark.frag`]).catch(print);
+            button.toggleClassName('sidebar-button-active', true);
+        }
+    },
+    child: MaterialIcon('nightlight', 'norm'),
+    setup: setupCursorHover,
+    ...props,
+})
+
+export const ModuleInvertColors = (props = {}) => Widget.Button({
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Color inversion',
+    onClicked: (button) => {
+        const shaderPath = JSON.parse(exec('hyprctl -j getoption decoration:screen_shader')).str;
+        if (shaderPath != "[[EMPTY]]" && shaderPath != "") {
+            execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader ''`]).catch(print);
+            button.toggleClassName('sidebar-button-active', false);
+        }
+        else {
+            execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader ~/.config/hypr/shaders/invert.frag`]).catch(print);
+            button.toggleClassName('sidebar-button-active', true);
+        }
+    },
+    child: MaterialIcon('invert_colors', 'norm'),
+    setup: setupCursorHover,
+    ...props,
+})
+
+export const ModuleIdleInhibitor = (props = {}) => Widget.Button({ // TODO: Make this work
+    properties: [
+        ['enabled', false],
+        ['inhibitor', undefined],
+    ],
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Keep system awake',
+    onClicked: (self) => {
+        self._enabled = !self._enabled;
+        self.toggleClassName('sidebar-button-active', self._enabled);
+        if (self._enabled) {
+            self._inhibitor = Utils.subprocess(
+                ['wayland-idle-inhibitor.py'],
+                (output) => print(output),
+                (err) => logError(err),
+                self,
+            );
+        }
+        else {
+            self._inhibitor.force_exit();
+        }
+    },
+    child: MaterialIcon('coffee', 'norm'),
+    setup: setupCursorHover,
+    ...props,
+});
+
+export const ModuleEditIcon = (props = {}) => Widget.Button({ // TODO: Make this work
+    ...props,
+    className: 'txt-small sidebar-iconbutton',
+    onClicked: () => {
+        execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center', '&']);
+        App.toggleWindow('sideright');
+    },
+    child: MaterialIcon('edit', 'norm'),
+    setup: button => {
+        setupCursorHover(button);
+    }
+})
+
+export const ModuleReloadIcon = (props = {}) => Widget.Button({
+    ...props,
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Reload Hyprland',
+    onClicked: () => {
+        execAsync(['bash', '-c', 'hyprctl reload &']);
+        App.toggleWindow('sideright');
+    },
+    child: MaterialIcon('refresh', 'norm'),
+    setup: button => {
+        setupCursorHover(button);
+    }
+})
+
+export const ModuleSettingsIcon = (props = {}) => Widget.Button({
+    ...props,
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Open Settings',
+    onClicked: () => {
+        execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center', '&']);
+        App.toggleWindow('sideright');
+    },
+    child: MaterialIcon('settings', 'norm'),
+    setup: button => {
+        setupCursorHover(button);
+    }
+})
+
+export const ModulePowerIcon = (props = {}) => Widget.Button({
+    ...props,
+    className: 'txt-small sidebar-iconbutton',
+    tooltipText: 'Session',
+    onClicked: () => {
+        App.toggleWindow('session');
+        App.closeWindow('sideright');
+    },
+    child: MaterialIcon('power_settings_new', 'norm'),
+    setup: button => {
+        setupCursorHover(button);
+    }
+})
+
+
+

.config/ags/widgets/sideright/sideright.js

@@ -0,0 +1,109 @@
+const { GLib, Gdk, Gtk } = imports.gi;
+import { Utils, Widget } from '../../imports.js';
+const { execAsync, exec } = Utils;
+const { Box, EventBox } = Widget;
+import {
+    ToggleIconBluetooth,
+    ToggleIconWifi,
+    HyprToggleIcon,
+    ModuleNightLight,
+    ModuleInvertColors,
+    ModuleIdleInhibitor,
+    ModuleEditIcon,
+    ModuleReloadIcon,
+    ModuleSettingsIcon,
+    ModulePowerIcon
+} from "./quicktoggles.js";
+import ModuleNotificationList from "./notificationlist.js";
+import { ModuleCalendar } from "./calendar.js";
+
+// const NUM_OF_TOGGLES_PER_LINE = 5;
+// const togglesFlowBox = Widget.FlowBox({
+//     className: 'sidebar-group spacing-h-10',
+//     setup: (self) => {
+//         self.set_max_children_per_line(NUM_OF_TOGGLES_PER_LINE);
+//         self.add(ToggleIconWifi({ hexpand: true }));
+//         self.add(ToggleIconBluetooth({ hexpand: true }));
+//         self.add(HyprToggleIcon('mouse', 'Raw input', 'input:force_no_accel', { hexpand: true }));
+//         self.add(HyprToggleIcon('front_hand', 'No touchpad while typing', 'input:touchpad:disable_while_typing', { hexpand: true }));
+//         self.add(ModuleNightLight({ hexpand: true }));
+//         // Setup flowbox rearrange
+//         self.connect('child-activated', (self, child) => {
+//             if (child.get_index() === 0) {
+//                 self.reorder_child(child, self.get_children().length - 1);
+//             } else {
+//                 self.reorder_child(child, 0);
+//             }
+//         });
+//     }
+// })
+
+const timeRow = Box({
+    className: 'spacing-h-5 sidebar-group-invisible-morehorizpad',
+    children: [
+        Widget.Label({
+            className: 'txt-title txt',
+            connections: [[5000, label => {
+                label.label = GLib.DateTime.new_now_local().format("%H:%M");
+            }]],
+        }),
+        Widget.Label({
+            hpack: 'center',
+            className: 'txt-small txt',
+            connections: [[5000, label => {
+                execAsync(['bash', '-c', `uptime -p | sed -e 's/up //;s/ hours,/h/;s/ minutes/m/'`]).then(upTimeString => {
+                    label.label = `• up: ${upTimeString}`;
+                }).catch(print);
+            }]],
+        }),
+        Widget.Box({ hexpand: true }),
+        // ModuleEditIcon({ hpack: 'end' }), // TODO: Make this work
+        ModuleReloadIcon({ hpack: 'end' }),
+        ModuleSettingsIcon({ hpack: 'end' }),
+        ModulePowerIcon({ hpack: 'end' }),
+    ]
+});
+
+const togglesBox = Widget.Box({
+    hpack: 'center',
+    className: 'sidebar-togglesbox spacing-h-10',
+    children: [
+        ToggleIconWifi(),
+        ToggleIconBluetooth(),
+        HyprToggleIcon('mouse', 'Raw input', 'input:force_no_accel', {}),
+        HyprToggleIcon('front_hand', 'No touchpad while typing', 'input:touchpad:disable_while_typing', {}),
+        ModuleNightLight(),
+        ModuleInvertColors(),
+        ModuleIdleInhibitor(),
+    ]
+})
+
+export default () => Box({
+    vexpand: true,
+    hexpand: true,
+    children: [
+        EventBox({
+            onPrimaryClick: () => App.closeWindow('sideright'),
+            onSecondaryClick: () => App.closeWindow('sideright'),
+            onMiddleClick: () => App.closeWindow('sideright'),
+        }),
+        Box({
+            vertical: true,
+            vexpand: true,
+            className: 'sidebar-right spacing-v-15',
+            children: [
+                Box({
+                    vertical: true,
+                    className: 'spacing-v-5',
+                    children: [
+                        timeRow,
+                        // togglesFlowBox,
+                        togglesBox,
+                    ]
+                }),
+                ModuleNotificationList({ vexpand: true, }),
+                ModuleCalendar(),
+            ]
+        }),
+    ]
+});

.config/ags/widgets/sideright/todolist.js

@@ -0,0 +1,276 @@
+const { Gio, Gdk, GLib, Gtk } = imports.gi;
+import { App, Widget, Utils } from '../../imports.js';
+const { Box, Button, CenterBox, Label, Revealer } = Widget;
+import { MaterialIcon } from "../../lib/materialicon.js";
+import Todo from "../../services/todo.js";
+import { setupCursorHover } from "../../lib/cursorhover.js";
+import { NavigationIndicator } from "../../lib/navigationindicator.js";
+
+const defaultTodoSelected = 'undone';
+
+const todoListItem = (task, id, isDone, isEven = false) => {
+    const crosser = Widget.Box({
+        className: 'sidebar-todo-crosser',
+    });
+    const todoContent = Widget.Box({
+        className: 'sidebar-todo-item spacing-h-5',
+        children: [
+            Widget.Label({
+                hexpand: true,
+                xalign: 0,
+                wrap: true,
+                className: 'txt txt-small sidebar-todo-txt',
+                label: task.content,
+                selectable: true,
+            }),
+            Widget.Button({ // Check/Uncheck
+                vpack: 'center',
+                className: 'txt sidebar-todo-item-action',
+                child: MaterialIcon(`${isDone ? 'remove_done' : 'check'}`, 'norm', { vpack: 'center' }),
+                onClicked: (self) => {
+                    const contentWidth = todoContent.get_allocated_width();
+                    crosser.toggleClassName('sidebar-todo-crosser-crossed', true);
+                    crosser.css = `margin-left: -${contentWidth}px;`;
+                    Utils.timeout(200, () => {
+                        widgetRevealer.revealChild = false;
+                    })
+                    Utils.timeout(350, () => {
+                        if (isDone)
+                            Todo.uncheck(id);
+                        else
+                            Todo.check(id);
+                    })
+                },
+                setup: setupCursorHover,
+            }),
+            Widget.Button({ // Remove
+                vpack: 'center',
+                className: 'txt sidebar-todo-item-action',
+                child: MaterialIcon('delete_forever', 'norm', { vpack: 'center' }),
+                onClicked: () => {
+                    const contentWidth = todoContent.get_allocated_width();
+                    crosser.toggleClassName('sidebar-todo-crosser-removed', true);
+                    crosser.css = `margin-left: -${contentWidth}px;`;
+                    Utils.timeout(200, () => {
+                        widgetRevealer.revealChild = false;
+                    })
+                    Utils.timeout(350, () => {
+                        Todo.remove(id);
+                    })
+                },
+                setup: setupCursorHover,
+            }),
+            crosser,
+        ]
+    });
+    const widgetRevealer = Widget.Revealer({
+        revealChild: true,
+        transition: 'slide_down',
+        transitionDuration: 150,
+        child: todoContent,
+    })
+    return widgetRevealer;
+}
+
+const todoItems = (isDone) => Widget.Scrollable({
+    child: Widget.Box({
+        vertical: true,
+        connections: [[Todo, (self) => {
+            self.children = Todo.todo_json.map((task, i) => {
+                if (task.done != isDone) return null;
+                return todoListItem(task, i, isDone);
+            })
+            if (self.children.length == 0) {
+                self.homogeneous = true;
+                self.children = [
+                    Widget.Box({
+                        hexpand: true,
+                        vertical: true,
+                        vpack: 'center',
+                        className: 'txt',
+                        children: [
+                            MaterialIcon(`${isDone ? 'checklist' : 'check_circle'}`, 'badonkers'),
+                            Label({ label: `${isDone ? 'Finished tasks will go here' : 'Nothing here!'}` })
+                        ]
+                    })
+                ]
+            }
+            else self.homogeneous = false;
+        }, 'updated']]
+    }),
+    setup: (listContents) => {
+        listContents.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        const vScrollbar = listContents.get_vscrollbar();
+        vScrollbar.get_style_context().add_class('sidebar-scrollbar');
+    }
+});
+
+const UndoneTodoList = () => {
+    const newTaskButton = Revealer({
+        transition: 'slide_left',
+        transitionDuration: 200,
+        revealChild: true,
+        child: Button({
+            className: 'txt-small sidebar-todo-new',
+            halign: 'end',
+            vpack: 'center',
+            label: '+ New task',
+            setup: setupCursorHover,
+            onClicked: (self) => {
+                newTaskButton.revealChild = false;
+                newTaskEntryRevealer.revealChild = true;
+                confirmAddTask.revealChild = true;
+                cancelAddTask.revealChild = true;
+                newTaskEntry.grab_focus();
+            }
+        })
+    });
+    const cancelAddTask = Revealer({
+        transition: 'slide_right',
+        transitionDuration: 200,
+        revealChild: false,
+        child: Button({
+            className: 'txt-norm icon-material sidebar-todo-add',
+            halign: 'end',
+            vpack: 'center',
+            label: 'close',
+            setup: setupCursorHover,
+            onClicked: (self) => {
+                newTaskEntryRevealer.revealChild = false;
+                confirmAddTask.revealChild = false;
+                cancelAddTask.revealChild = false;
+                newTaskButton.revealChild = true;
+                newTaskEntry.text = '';
+            }
+        })
+    });
+    const newTaskEntry = Widget.Entry({
+        // hexpand: true,
+        vpack: 'center',
+        className: 'txt-small sidebar-todo-entry',
+        placeholderText: 'Add a task...',
+        onAccept: ({ text }) => {
+            if (text == '') return;
+            Todo.add(text)
+            newTaskEntry.text = '';
+        },
+        onChange: ({ text }) => confirmAddTask.child.toggleClassName('sidebar-todo-add-available', text != ''),
+    });
+    const newTaskEntryRevealer = Revealer({
+        transition: 'slide_right',
+        transitionDuration: 200,
+        revealChild: false,
+        child: newTaskEntry,
+    });
+    const confirmAddTask = Revealer({
+        transition: 'slide_right',
+        transitionDuration: 200,
+        revealChild: false,
+        child: Button({
+            className: 'txt-norm icon-material sidebar-todo-add',
+            halign: 'end',
+            vpack: 'center',
+            label: 'arrow_upward',
+            setup: setupCursorHover,
+            onClicked: (self) => {
+                if (newTaskEntry.text == '') return;
+                Todo.add(newTaskEntry.text);
+                newTaskEntry.text = '';
+            }
+        })
+    });
+    return Box({ // The list, with a New button
+        vertical: true,
+        className: 'spacing-v-5',
+        setup: (box) => {
+            box.pack_start(todoItems(false), true, true, 0);
+            box.pack_start(Box({
+                setup: (self) => {
+                    self.pack_start(cancelAddTask, false, false, 0);
+                    self.pack_start(newTaskEntryRevealer, true, true, 0);
+                    self.pack_start(confirmAddTask, false, false, 0);
+                    self.pack_start(newTaskButton, false, false, 0);
+                }
+            }), false, false, 0);
+        },
+    });
+}
+
+const todoItemsBox = Widget.Stack({
+    vpack: 'fill',
+    transition: 'slide_left_right',
+    items: [
+        ['undone', UndoneTodoList()],
+        ['done', todoItems(true)],
+    ],
+});
+
+export const TodoWidget = () => {
+    const TodoTabButton = (isDone, navIndex) => Widget.Button({
+        hexpand: true,
+        className: 'sidebar-selector-tab',
+        onClicked: (button) => {
+            todoItemsBox.shown = `${isDone ? 'done' : 'undone'}`;
+            const kids = button.get_parent().get_children();
+            for (let i = 0; i < kids.length; i++) {
+                if (kids[i] != button) kids[i].toggleClassName('sidebar-selector-tab-active', false);
+                else button.toggleClassName('sidebar-selector-tab-active', true);
+            }
+            // Fancy highlighter line width
+            const buttonWidth = button.get_allocated_width();
+            const highlightWidth = button.get_children()[0].get_allocated_width();
+            navIndicator.css = `
+                font-size: ${navIndex}px; 
+                padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
+            `;
+        },
+        child: Box({
+            hpack: 'center',
+            className: 'spacing-h-5',
+            children: [
+                MaterialIcon(`${isDone ? 'task_alt' : 'format_list_bulleted'}`, 'larger'),
+                Label({
+                    className: 'txt txt-smallie',
+                    label: `${isDone ? 'Done' : 'Unfinished'}`,
+                })
+            ]
+        }),
+        setup: (button) => Utils.timeout(1, () => {
+            setupCursorHover(button);
+            button.toggleClassName('sidebar-selector-tab-active', defaultTodoSelected === `${isDone ? 'done' : 'undone'}`);
+        }),
+    });
+    const undoneButton = TodoTabButton(false, 0);
+    const doneButton = TodoTabButton(true, 1);
+    const navIndicator = NavigationIndicator(2, false, { // The line thing
+        className: 'sidebar-selector-highlight',
+        css: 'font-size: 0px; padding: 0rem 1.636rem;', // Shush
+    })
+    return Widget.Box({
+        hexpand: true,
+        vertical: true,
+        className: 'spacing-v-10',
+        setup: (box) => {     // undone/done selector rail
+            box.pack_start(Widget.Box({
+                vertical: true,
+                children: [
+                    Widget.Box({
+                        className: 'sidebar-selectors spacing-h-5',
+                        homogeneous: true,
+                        setup: (box) => {
+                            box.pack_start(undoneButton, false, true, 0);
+                            box.pack_start(doneButton, false, true, 0);
+                        }
+                    }),
+                    Widget.Box({
+                        className: 'sidebar-selector-highlight-offset',
+                        homogeneous: true,
+                        children: [navIndicator]
+                    })
+                ]
+            }), false, false, 0);
+            box.pack_end(todoItemsBox, true, true, 0);
+        },
+    });
+};
+