feat: add remote event details modal

src/additional-svelte-typings.d.ts

@@ -2,5 +2,7 @@ declare namespace svelteHTML {
   interface HTMLAttributes {
     "on:tap"?: () => void;
     "on:longpress"?: () => void;
+    "task-summary"?: string;
+    "task-description"?: string;
   }
 }

src/main.ts

@@ -49,6 +49,7 @@ import { createGetTasksApi } from "./tasks-plugin";
 import type { ObsidianContext, OnUpdateFn } from "./types";
 import StatusBarWidget from "./ui/components/status-bar-widget.svelte";
 import { askForConfirmation } from "./ui/confirmation-modal";
+import { openDetailsModal } from "./ui/details-modal";
 import { EditMode } from "./ui/hooks/use-edit/types";
 import MultiDayView from "./ui/multi-day-view";
 import { DayPlannerReleaseNotesView } from "./ui/release-notes";
@@ -443,6 +444,16 @@ export default class DayPlanner extends Plugin {
       }),
     );
 
+    // Click on remote events to show details
+    this.registerDomEvent(document, "click", (e) => {
+      const el = e.target as HTMLElement;
+      if (!el || !el.classList.contains("remote-task-content")) return;
+      openDetailsModal(this.app, {
+        summary: el.getAttribute("task-summary"),
+        description: el.getAttribute("task-description"),
+      });
+    });
+
     this.registerEvent(
       this.app.workspace.on("editor-menu", (menu, editor, view) => {
         let sTask: STask | undefined;

src/ui/active-clock-menu.ts

@@ -57,5 +57,5 @@ export function createActiveClockMenu(props: {
       });
   });
 
-  menu.showAtMouseEvent(event);
+  menu.showAtMouseEvent(event as MouseEvent);
 }

src/ui/components/drag-controls.svelte

@@ -26,7 +26,7 @@
   } = getObsidianContext();
 </script>
 
-<ExpandingControls {isActive} {setIsActive}>
+<ExpandingControls baseSetIsActive={setIsActive} {isActive}>
   {#snippet initial()}
     <BlockControlButton
       cursor="grab"

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

@@ -205,7 +205,7 @@
   </div>
 {/if}
 
-<Scroller className="multiday-main-content" on:scroll={handleScroll}>
+<Scroller className="multiday-main-content" onscroll={handleScroll}>
   <Ruler
     --ruler-box-shadow="var(--shadow-right)"
     visibleHours={getVisibleHours($settings)}
@@ -295,10 +295,6 @@
     background-color: var(--color-accent);
   }
 
-  .weekend {
-    background-color: var(--background-primary);
-  }
-
   .side-controls-container {
     grid-column: 3;
     grid-row: span 2;

src/ui/components/remote-time-block-content.svelte

@@ -7,9 +7,14 @@
   const declined = task.rsvpStatus === "DECLINED";
 </script>
 
-<div class="remote-task-content">
+<div
+  class="remote-task-content"
+  task-description={task.description}
+  task-summary={task.summary}
+>
   <div
     style:--ribbon-color={task.calendar.color}
+    style:pointer-events="none;"
     class="ribbon"
     class:declined
     class:tentative

src/ui/components/resize-controls.svelte

@@ -22,7 +22,7 @@
   } = getObsidianContext();
 </script>
 
-<ExpandingControls {isActive} {reverse} {setIsActive}>
+<ExpandingControls baseSetIsActive={setIsActive} {isActive} {reverse}>
   {#snippet initial()}
     <BlockControlButton
       cursor="grab"

src/ui/components/resize-handle.svelte

@@ -7,17 +7,3 @@
   class="workspace-leaf-resize-handle"
   on:mousedown
 />
-
-<style>
-  :not(#dummy).workspace-leaf-resize-handle {
-    cursor: row-resize;
-
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    height: var(--divider-width-hover);
-
-    border-bottom-width: var(--divider-width);
-  }
-</style>

src/ui/components/scroller.svelte

@@ -4,20 +4,25 @@
   const {
     children,
     className,
-  }: { children: Snippet<[boolean]>; className?: string } = $props();
+    onscroll,
+  }: {
+    children: Snippet<[boolean]>;
+    className?: string;
+    onscroll?: (event: Event) => void;
+  } = $props();
 
   let isUnderCursor = $state(false);
 </script>
 
 <div
   class="scroller {className}"
-  on:mouseenter={() => {
+  onmouseenter={() => {
     isUnderCursor = true;
   }}
-  on:mouseleave={() => {
+  onmouseleave={() => {
     isUnderCursor = false;
   }}
-  on:scroll
+  {onscroll}
 >
   {@render children(isUnderCursor)}
 </div>

src/ui/components/timeline.svelte

@@ -5,7 +5,7 @@
   import { getObsidianContext } from "../../context/obsidian-context";
   import { isToday } from "../../global-store/current-time";
   import { getVisibleHours, snap } from "../../global-store/derived-settings";
-  import { isRemote } from "../../task-types";
+  import { isRemote, type Task } from "../../task-types";
   import { minutesToMomentOfDay } from "../../util/moment";
   import { getRenderKey, offsetYToMinutes } from "../../util/task-utils";
   import { isTouchEvent } from "../../util/util";
@@ -103,7 +103,7 @@
                 <PositionedTimeBlock {task}>
                   <LocalTimeBlock
                     isActive={selectable.state !== "none" ||
-                      $editOperation?.task.id === task.id}
+                      $editOperation?.task.id === (task as Task).id}
                     onpointerup={selectable.onpointerup}
                     {task}
                     use={[...selectable.use, ...floatingControls.actions]}

src/ui/details-modal.ts

@@ -0,0 +1,39 @@
+import { Modal, App, ButtonComponent, Setting } from "obsidian";
+
+export interface DetailsModalProps {
+  summary: string | null;
+  description: string | null;
+}
+
+export class DetailsModal extends Modal {
+  constructor(app: App, props: DetailsModalProps) {
+    super(app);
+
+    // Outlook events seem to contain links between <> instead of proper html or even markdown elements
+    let description = props.description?.replace(
+      /<(https?:\/\/[^>]+)>/g,
+      '<a href="$1">$1</a>',
+    );
+    description = description?.replace(/\n/g, "<br>");
+
+    const el = this.contentEl.createEl("div");
+    el.innerHTML = description || "";
+    this.setTitle(props.summary || "");
+
+    new Setting(this.contentEl).addButton((btn: ButtonComponent) => {
+      btn
+        .setButtonText("Close")
+        .setCta()
+        .onClick(() => {
+          this.close();
+        });
+    });
+    this.close();
+  }
+}
+
+export async function openDetailsModal(app: App, props: DetailsModalProps) {
+  return new Promise<void>((resolve) => {
+    new DetailsModal(app, props).open();
+  });
+}

src/util/ical.ts

@@ -96,6 +96,7 @@ function icalEventToTask(
     calendar: icalEvent.calendar,
     summary: icalEvent.summary || "(No title)",
     startTime: startTimeAdjusted,
+    description: icalEvent.description || "",
     rsvpStatus,
   };