make todo list less shitty + style updates

.config/ags/modules/sideright/todolist.js

@@ -5,25 +5,20 @@ import { MaterialIcon } from '../.commonwidgets/materialicon.js';
 import { TabContainer } from '../.commonwidgets/tabcontainer.js';
 import Todo from "../../services/todo.js";
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
-import { NavigationIndicator } from '../.commonwidgets/cairo_navigationindicator.js';
 
-const defaultTodoSelected = 'undone';
-
-const todoListItem = (task, id, isDone, isEven = false) => {
-    const crosser = Widget.Box({
-        className: 'sidebar-todo-crosser',
+const TodoListItem = (task, id, isDone, isEven = false) => {
+    const taskName = Widget.Label({
+        hexpand: true,
+        xalign: 0,
+        wrap: true,
+        className: 'txt txt-small sidebar-todo-txt',
+        label: task.content,
+        selectable: true,
     });
-    const todoContent = Widget.Box({
-        className: 'sidebar-todo-item spacing-h-5',
+    const actions = Box({
+        hpack: 'end',
+        className: 'spacing-h-5 sidebar-todo-actions',
         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',
@@ -61,6 +56,21 @@ const todoListItem = (task, id, isDone, isEven = false) => {
                 },
                 setup: setupCursorHover,
             }),
+        ]
+    })
+    const crosser = Widget.Box({
+        className: 'sidebar-todo-crosser',
+    });
+    const todoContent = Widget.Box({
+        className: 'sidebar-todo-item spacing-h-5',
+        children: [
+            Widget.Box({
+                vertical: true,
+                children: [
+                    taskName,
+                    actions,
+                ]
+            }),
             crosser,
         ]
     });
@@ -70,7 +80,10 @@ const todoListItem = (task, id, isDone, isEven = false) => {
         transitionDuration: userOptions.animations.durationLarge,
         child: todoContent,
     })
-    return widgetRevealer;
+    return Box({
+        homogeneous: true,
+        children: [widgetRevealer]
+    });
 }
 
 const todoItems = (isDone) => Widget.Scrollable({
@@ -78,11 +91,12 @@ const todoItems = (isDone) => Widget.Scrollable({
     vscroll: 'automatic',
     child: Widget.Box({
         vertical: true,
+        className: 'spacing-v-5',
         setup: (self) => self
             .hook(Todo, (self) => {
                 self.children = Todo.todo_json.map((task, i) => {
                     if (task.done != isDone) return null;
-                    return todoListItem(task, i, isDone);
+                    return TodoListItem(task, i, isDone);
                 })
                 if (self.children.length == 0) {
                     self.homogeneous = true;