feat: split remote calendar events into a separate column

src/settings.ts

@@ -50,6 +50,7 @@ export interface DayPlannerSettings {
   showUncheduledTasks: boolean;
   showUnscheduledNestedTasks: boolean;
   showTimelineInSidebar: boolean;
+  showRemoteCalendarEventsInSeparateColumn: boolean;
   showNow: boolean;
   showNext: boolean;
   showActiveClocks: boolean;
@@ -92,6 +93,7 @@ export const defaultSettings: DayPlannerSettings = {
   showTimestampInTaskBlock: false,
   showUncheduledTasks: true,
   showUnscheduledNestedTasks: true,
+  showRemoteCalendarEventsInSeparateColumn: false,
   showNow: true,
   showNext: true,
   pluginVersion: "",

src/ui/components/column.svelte

@@ -3,9 +3,11 @@
   import { settings } from "../../global-store/settings";
 
   export let visibleHours: number[];
+  let className: string | string[] = "";
+  export { className as class };
 </script>
 
-<div class="column">
+<div class={["column", className]}>
   <slot />
   {#each visibleHours as hour}
     <div style:height="{getHourSize($settings)}px" class="hour-block">

src/ui/components/multi-day/multi-day-grid.svelte

@@ -52,8 +52,13 @@
   let visibleSideControls = $state<SideControls>("none");
   let timelineInternalColumnCount = $derived.by(() => {
     const columnFlags = Object.values(settingsSignal.current.timelineColumns);
+    const remoteCalendarColumn =
+      settingsSignal.current.timelineColumns.planner &&
+      settingsSignal.current.showRemoteCalendarEventsInSeparateColumn
+        ? 1
+        : 0;
 
-    return columnFlags.filter(Boolean).length;
+    return columnFlags.filter(Boolean).length + remoteCalendarColumn;
   });
 
   function toggleSideControls(toggledControls: SideControls) {

src/ui/components/timeline.svelte

@@ -99,7 +99,7 @@
 </script>
 
 {#if $settings.timelineColumns.planner}
-  <Column visibleHours={getVisibleHours($settings)}>
+  <Column class="planner-left-column" visibleHours={getVisibleHours($settings)}>
     {#if $isToday(day)}
       <Needle autoScrollBlocked={isUnderCursor} />
     {/if}
@@ -129,10 +129,33 @@
       {/each}
     </div>
   </Column>
+
+  {#if settingsSignal.current.showRemoteCalendarEventsInSeparateColumn}
+    <Column
+      class="planner-right-column"
+      visibleHours={getVisibleHours($settings)}
+    >
+      {#if $isToday(day)}
+        <Needle autoScrollBlocked={isUnderCursor} />
+      {/if}
+
+      <div class="tasks absolute-stretch-x">
+        {#each $displayedTasksForTimeline.remoteCalendarWithTime as task (getRenderKey(task))}
+          <PositionedTimeBlock {task}>
+            <UnscheduledTimeBlock {task}>
+              {#snippet bottomDecoration()}
+                {getBlockProps(task, settingsSignal.current)}
+              {/snippet}
+            </UnscheduledTimeBlock>
+          </PositionedTimeBlock>
+        {/each}
+      </div>
+    </Column>
+  {/if}
 {/if}
 
 {#if $settings.timelineColumns.timeTracker}
-  <Column visibleHours={getVisibleHours($settings)}>
+  <Column class="planner-right-column" visibleHours={getVisibleHours($settings)}>
     {#if $isToday(day)}
       <Needle autoScrollBlocked={isUnderCursor} showBall={false} />
     {/if}

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

@@ -1,4 +1,4 @@
-import { flow, uniqBy } from "lodash/fp";
+import { uniqBy } from "lodash/fp";
 import type { Moment } from "moment";
 import { derived, type Readable, writable } from "svelte/store";
 
@@ -12,6 +12,7 @@ import type {
   WithPlacing,
   WithTime,
 } from "../../../task-types";
+import { isRemote } from "../../../task-types";
 import type {
   OnEditAbortedFn,
   OnUpdateFn,
@@ -182,20 +183,33 @@ export function useEditContext(props: {
   );
 
   function getDisplayedTasksForTimeline(day: Moment) {
-    return derived(dayToDisplayedTasks, ($dayToDisplayedTasks) => {
-      const tasksForDay =
-        $dayToDisplayedTasks[t.getDayKey(day)] || t.getEmptyTasksForDay();
-
-      const withTime: Array<WithPlacing<WithTime<Task>>> = flow(
-        uniqBy(t.getRenderKey),
-        addHorizontalPlacing,
-      )(tasksForDay.withTime);
-
-      return {
-        ...tasksForDay,
-        withTime,
-      };
-    });
+    return derived(
+      [dayToDisplayedTasks, settings],
+      ([$dayToDisplayedTasks, $settings]) => {
+        const tasksForDay =
+          $dayToDisplayedTasks[t.getDayKey(day)] || t.getEmptyTasksForDay();
+
+        const uniqueWithTime = uniqBy(t.getRenderKey)(
+          tasksForDay.withTime,
+        ) as Array<WithTime<Task>>;
+        const separateRemoteCalendars =
+          $settings.showRemoteCalendarEventsInSeparateColumn;
+        const remoteCalendarWithTime = separateRemoteCalendars
+          ? addHorizontalPlacing(uniqueWithTime.filter(isRemote))
+          : [];
+        const plannerWithTime = separateRemoteCalendars
+          ? uniqueWithTime.filter((task) => !isRemote(task))
+          : uniqueWithTime;
+        const withTime: Array<WithPlacing<WithTime<Task>>> =
+          addHorizontalPlacing(plannerWithTime);
+
+        return {
+          ...tasksForDay,
+          withTime,
+          remoteCalendarWithTime,
+        };
+      },
+    );
   }
 
   return {

src/ui/settings-tab.ts

@@ -283,6 +283,21 @@ export class DayPlannerSettingsTab extends PluginSettingTab {
       }),
     );
 
+    new Setting(containerEl)
+      .setName("Show remote calendar events in a separate column")
+      .setDesc(
+        "Render timed events from remote calendars in a separate timeline column from local planner tasks.",
+      )
+      .addToggle((component) => {
+        component
+          .setValue(
+            this.plugin.settings().showRemoteCalendarEventsInSeparateColumn,
+          )
+          .onChange((value) => {
+            this.update({ showRemoteCalendarEventsInSeparateColumn: value });
+          });
+      });
+
     containerEl.createEl("h2", { text: "Date & Time Formats" });
 
     new Setting(containerEl).setName("Hour format").then((component) => {