From 06967dd6810f709f054e7f4320ef10460865e01e Mon Sep 17 00:00:00 2001 From: johnyoonh <18730221+johnyoonh@users.noreply.github.com> Date: Sat, 2 May 2026 18:58:04 -0500 Subject: [PATCH 1/2] feat: add semantic timeline column classes Co-authored-by: Cursor --- src/ui/components/column.svelte | 4 +++- src/ui/components/timeline.svelte | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ui/components/column.svelte b/src/ui/components/column.svelte index 9ed1a3abf..46fde698b 100644 --- a/src/ui/components/column.svelte +++ b/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 }; -
+
{#each visibleHours as hour}
diff --git a/src/ui/components/timeline.svelte b/src/ui/components/timeline.svelte index 08e35760b..fb02fd759 100644 --- a/src/ui/components/timeline.svelte +++ b/src/ui/components/timeline.svelte @@ -99,7 +99,7 @@ {#if $settings.timelineColumns.planner} - + {#if $isToday(day)} {/if} @@ -132,7 +132,7 @@ {/if} {#if $settings.timelineColumns.timeTracker} - + {#if $isToday(day)} {/if} From bb2eea7aef6508de3ef785b69a8814e204d8378f Mon Sep 17 00:00:00 2001 From: johnyoonh <18730221+johnyoonh@users.noreply.github.com> Date: Sat, 2 May 2026 18:58:49 -0500 Subject: [PATCH 2/2] feat: split remote calendar events into a separate column Co-authored-by: Cursor --- src/settings.ts | 2 + .../multi-day/multi-day-grid.svelte | 7 ++- src/ui/components/timeline.svelte | 23 ++++++++++ src/ui/hooks/use-edit/use-edit-context.ts | 44 ++++++++++++------- src/ui/settings-tab.ts | 15 +++++++ 5 files changed, 75 insertions(+), 16 deletions(-) diff --git a/src/settings.ts b/src/settings.ts index 3088b81ae..c46c1a449 100644 --- a/src/settings.ts +++ b/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: "", diff --git a/src/ui/components/multi-day/multi-day-grid.svelte b/src/ui/components/multi-day/multi-day-grid.svelte index 994951984..e08dde676 100644 --- a/src/ui/components/multi-day/multi-day-grid.svelte +++ b/src/ui/components/multi-day/multi-day-grid.svelte @@ -52,8 +52,13 @@ let visibleSideControls = $state("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) { diff --git a/src/ui/components/timeline.svelte b/src/ui/components/timeline.svelte index fb02fd759..373eff2c3 100644 --- a/src/ui/components/timeline.svelte +++ b/src/ui/components/timeline.svelte @@ -129,6 +129,29 @@ {/each}
+ + {#if settingsSignal.current.showRemoteCalendarEventsInSeparateColumn} + + {#if $isToday(day)} + + {/if} + +
+ {#each $displayedTasksForTimeline.remoteCalendarWithTime as task (getRenderKey(task))} + + + {#snippet bottomDecoration()} + {getBlockProps(task, settingsSignal.current)} + {/snippet} + + + {/each} +
+ + {/if} {/if} {#if $settings.timelineColumns.timeTracker} diff --git a/src/ui/hooks/use-edit/use-edit-context.ts b/src/ui/hooks/use-edit/use-edit-context.ts index c6c506710..6d8bb600e 100644 --- a/src/ui/hooks/use-edit/use-edit-context.ts +++ b/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>> = 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>; + const separateRemoteCalendars = + $settings.showRemoteCalendarEventsInSeparateColumn; + const remoteCalendarWithTime = separateRemoteCalendars + ? addHorizontalPlacing(uniqueWithTime.filter(isRemote)) + : []; + const plannerWithTime = separateRemoteCalendars + ? uniqueWithTime.filter((task) => !isRemote(task)) + : uniqueWithTime; + const withTime: Array>> = + addHorizontalPlacing(plannerWithTime); + + return { + ...tasksForDay, + withTime, + remoteCalendarWithTime, + }; + }, + ); } return { diff --git a/src/ui/settings-tab.ts b/src/ui/settings-tab.ts index 78326de74..69032d981 100644 --- a/src/ui/settings-tab.ts +++ b/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) => {