Allow deleting in Timeline View

src/service/diff-writer.ts

@@ -312,25 +312,30 @@ export type ViewDiff = {
 };
 
 export function getTaskDiffFromEditState(base: LocalTask[], next: LocalTask[]) {
-  return next.reduce<Omit<Required<ViewDiff>, "deleted">>(
-    (result, task) => {
-      const thisTaskInBase = base.find((baseTask) => baseTask.id === task.id);
-
-      if (!thisTaskInBase) {
-        result.added.push(task);
-      }
+  return {
+    deleted: base.filter(
+      (baseTask) => !next.some((task) => baseTask.id === task.id),
+    ),
+    ...next.reduce<Omit<Required<ViewDiff>, "deleted">>(
+      (result, task) => {
+        const thisTaskInBase = base.find((baseTask) => baseTask.id === task.id);
+
+        if (!thisTaskInBase) {
+          result.added.push(task);
+        }
 
-      if (thisTaskInBase && !t.isTimeEqual(thisTaskInBase, task)) {
-        result.updated.push(task);
-      }
+        if (thisTaskInBase && !t.isTimeEqual(thisTaskInBase, task)) {
+          result.updated.push(task);
+        }
 
-      return result;
-    },
-    {
-      updated: [],
-      added: [],
-    },
-  );
+        return result;
+      },
+      {
+        updated: [],
+        added: [],
+      },
+    ),
+  };
 }
 
 /**

src/ui/components/block-control-button.svelte

@@ -3,20 +3,26 @@
   import { useActions } from "../actions/use-actions";
 
   export let cursor: string | undefined = "";
+  export let isWarning: boolean = false;
   export let label: string;
   export let use: ActionArray = [];
 </script>
 
 <div
   style:cursor
   class="clickable-icon"
+  class:is-warning={isWarning}
   aria-label={label}
   use:useActions={use}
 >
   <slot />
 </div>
 
 <style>
+  .is-warning {
+    color: var(--text-error);
+  }
+
   .clickable-icon {
     padding: var(--size-2-2) var(--size-4-2);
   }

src/ui/components/drag-controls.svelte

@@ -4,7 +4,9 @@
     ArrowDownToLine,
     GripVertical,
     Copy,
+    Trash2,
   } from "lucide-svelte";
+  import { on } from "svelte/events";
 
   import { getObsidianContext } from "../../context/obsidian-context";
   import type { LocalTask } from "../../task-types";
@@ -41,6 +43,19 @@
     </BlockControlButton>
   {/snippet}
   {#snippet expanded()}
+    <BlockControlButton
+      isWarning
+      label="Delete block"
+      use={[
+        (el) => {
+          on(el, "pointerdown", () =>
+            handleGripMouseDown(task, EditMode.DELETE),
+          );
+        },
+      ]}
+    >
+      <Trash2 class="svg-icon" />
+    </BlockControlButton>
     <BlockControlButton
       cursor="grab"
       label="Copy block"

src/ui/hooks/use-edit/transform/delete.ts

@@ -0,0 +1,17 @@
+import { isNotVoid } from "typed-assert";
+
+import type { DayPlannerSettings } from "../../../../settings";
+import type { LocalTask, WithTime } from "../../../../task-types";
+
+export function deleteTask(
+  baseline: WithTime<LocalTask>[],
+  editTarget: WithTime<LocalTask>,
+  cursorTime: number,
+  settings: DayPlannerSettings,
+): WithTime<LocalTask>[] {
+  const index = baseline.findIndex((task) => task.id === editTarget.id);
+
+  isNotVoid(baseline[index]);
+
+  return baseline.toSpliced(index, 1);
+}

src/ui/hooks/use-edit/transform/transform.ts

@@ -11,6 +11,7 @@ import { toSpliced } from "../../../../util/to-spliced";
 import { EditMode, type EditOperation, type TaskTransformer } from "../types";
 
 import { create } from "./create";
+import { deleteTask } from "./delete";
 import { drag } from "./drag";
 import { dragAndShiftOthers } from "./drag-and-shift-others";
 import { dragAndShrinkOthers } from "./drag-and-shrink-others";
@@ -29,6 +30,7 @@ const transformers: Record<EditMode, TaskTransformer> = {
   [EditMode.DRAG_AND_SHIFT_OTHERS]: dragAndShiftOthers,
   [EditMode.DRAG_AND_SHRINK_OTHERS]: dragAndShrinkOthers,
   [EditMode.CREATE]: create,
+  [EditMode.DELETE]: deleteTask,
   [EditMode.RESIZE]: resize,
   [EditMode.RESIZE_AND_SHIFT_OTHERS]: resizeAndShiftOthers,
   [EditMode.RESIZE_FROM_TOP]: resizeFromTop,

src/ui/hooks/use-edit/types.ts

@@ -14,6 +14,7 @@ export enum EditMode {
   RESIZE_AND_SHRINK_OTHERS = "RESIZE_AND_SHRINK_OTHERS",
   RESIZE_FROM_TOP_AND_SHRINK_OTHERS = "RESIZE_FROM_TOP_AND_SHRINK_OTHERS",
   CREATE = "CREATE",
+  DELETE = "DELETE",
   SCHEDULE_SEARCH_RESULT = "SCHEDULE_SEARCH_RESULT",
 }
 

tests/edit/delete.test.ts

@@ -0,0 +1,22 @@
+import { get } from "svelte/store";
+import { test, expect, describe } from "vitest";
+
+import { EditMode } from "../../src/ui/hooks/use-edit/types";
+
+import { dayKey } from "./util/fixtures";
+import { setUp } from "./util/setup";
+import { threeTasks } from "./util/test-utils";
+
+describe("delete", () => {
+  test("delete removes selected task without affecting other tasks", () => {
+    const { handlers, dayToDisplayedTasks } = setUp({ tasks: threeTasks });
+
+    handlers.handleGripMouseDown(threeTasks[1], EditMode.DELETE);
+
+    expect(get(dayToDisplayedTasks)).toMatchObject({
+      [dayKey]: {
+        withTime: [threeTasks[0], threeTasks[2]],
+      },
+    });
+  });
+});