Cleaning up event listeners and moving them to runed, work item reload functionality, svelte 5 conversions, bugfix for mention picker

Author: Stefan Ernst

frontend/src/lib/components/DiagramModal.svelte

@@ -1,21 +1,18 @@
 <script>
-  import { onMount } from 'svelte';
+  import { useEventListener } from 'runed';
   import ExcalidrawEditor from './ExcalidrawEditor.svelte';
   import Button from './Button.svelte';
   import { api } from '../api.js';
   import { themeStore } from '../stores/theme.svelte.js';
   import { t } from '../stores/i18n.svelte.js';
 
-  export let itemId;
-  export let diagram = null; // null for new diagram, object for editing
-  export let onClose = () => {};
-  export let onSave = () => {};
+  let { itemId, diagram = null, onClose = () => {}, onSave = () => {} } = $props();
 
-  let editorComponent;
-  let diagramName = diagram ? diagram.name : t('components.diagram.untitled');
+  let editorComponent = $state(null);
+  let diagramName = $state(diagram ? diagram.name : t('components.diagram.untitled'));
   let initialData = null;
-  let saving = false;
-  let hasChanges = false;
+  let saving = $state(false);
+  let hasChanges = $state(false);
 
   if (diagram && diagram.diagram_data) {
     try {
@@ -73,12 +70,7 @@
     }
   }
 
-  onMount(() => {
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  });
+  useEventListener(() => window, 'keydown', handleKeyDown);
 </script>
 
 <!-- Modal overlay -->

frontend/src/lib/composables/useItemAttachments.svelte.js

@@ -77,23 +77,21 @@ export function useItemAttachments(getItemId, showError = console.error) {
   }
 
   /**
-   * Handle attachment upload event from AttachmentList component
-   * @param {CustomEvent} event - Upload event with detail { attachment, message }
+   * Handle attachment upload event
+   * Called when an attachment is uploaded
    */
-  async function handleUpload(_event) {
+  async function handleUpload() {
     // Reload attachments to get updated pagination info
     if (isEnabled()) {
       await load(1, pageSize); // Go to first page to see new upload
     }
   }
 
   /**
-   * Handle attachment delete event from AttachmentList component
-   * @param {CustomEvent} event - Delete event with attachment detail
+   * Handle attachment delete
+   * @param {Object} attachment - The attachment to delete
    */
-  async function handleDelete(event) {
-    const attachment = event.detail;
-
+  async function handleDelete(attachment) {
     try {
       await api.attachments.delete(attachment.id);
 
@@ -108,31 +106,30 @@ export function useItemAttachments(getItemId, showError = console.error) {
   }
 
   /**
-   * Handle page change event
-   * @param {CustomEvent} event - Event with detail { page, itemsPerPage }
+   * Handle page change
+   * @param {Object} detail - { page, itemsPerPage }
    */
-  async function handlePageChange(event) {
+  async function handlePageChange({ page, itemsPerPage }) {
     if (isEnabled()) {
-      await load(event.detail.page, event.detail.itemsPerPage);
+      await load(page, itemsPerPage);
     }
   }
 
   /**
-   * Handle page size change event
-   * @param {CustomEvent} event - Event with detail { page, itemsPerPage }
+   * Handle page size change
+   * @param {Object} detail - { page, itemsPerPage }
    */
-  async function handlePageSizeChange(event) {
+  async function handlePageSizeChange({ page, itemsPerPage }) {
     if (isEnabled()) {
-      await load(event.detail.page, event.detail.itemsPerPage);
+      await load(page, itemsPerPage);
     }
   }
 
   /**
    * Upload files directly (from Attach button)
-   * @param {CustomEvent} event - Event with detail { files }
+   * @param {Object} detail - { files }
    */
-  async function uploadFiles(event) {
-    const { files } = event.detail;
+  async function uploadFiles({ files }) {
     if (!files || files.length === 0) return;
 
     const itemId = getItemId();

frontend/src/lib/composables/useWorkItemPoller.svelte.js

@@ -0,0 +1,61 @@
+import { activityStore } from '../stores/activityStore.svelte.js';
+
+const ACTIVE_INTERVAL = 30_000;   // 30 seconds when user is active
+const IDLE_INTERVAL = 5 * 60_000; // 5 minutes when user is idle
+
+/**
+ * Composable that manages a polling interval for work item fetching,
+ * adapting to user activity state.
+ *
+ * @param {Function} fetchFn - Async callback to fetch work items
+ * @returns {{ poll: Function, isPolling: boolean, lastPollTime: number|null }}
+ */
+export function useWorkItemPoller(fetchFn) {
+  let isPolling = $state(false);
+  let lastPollTime = $state(null);
+  let _timer = null;
+
+  async function poll() {
+    if (isPolling) return;
+    isPolling = true;
+    try {
+      await fetchFn();
+      lastPollTime = Date.now();
+    } catch (err) {
+      console.warn('WorkItemPoller: poll failed', err);
+    } finally {
+      isPolling = false;
+    }
+  }
+
+  function _startTimer(interval) {
+    _stopTimer();
+    _timer = setInterval(() => {
+      poll();
+    }, interval);
+  }
+
+  function _stopTimer() {
+    if (_timer) {
+      clearInterval(_timer);
+      _timer = null;
+    }
+  }
+
+  // Reactive effect: switch interval based on activity
+  $effect(() => {
+    const idle = activityStore.isIdle;
+    const interval = idle ? IDLE_INTERVAL : ACTIVE_INTERVAL;
+    _startTimer(interval);
+
+    return () => {
+      _stopTimer();
+    };
+  });
+
+  return {
+    poll,
+    get isPolling() { return isPolling; },
+    get lastPollTime() { return lastPollTime; },
+  };
+}

frontend/src/lib/dialogs/CreateModal.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { useEventListener } from 'runed';
   import { fade } from 'svelte/transition';
   import { navigate, currentRoute } from '../router.js';
   import { milestonesStore } from '../stores/milestones.js';
@@ -329,19 +330,10 @@
     }
   }
 
-  onMount(() => {
-    window.addEventListener('open-create-modal', handleOpenCreateModal);
-    window.addEventListener('set-create-type', handleSetCreateType);
-    window.addEventListener('set-create-workspace', handleSetCreateWorkspace);
-    window.addEventListener('set-create-parent', handleSetCreateParent);
-
-    return () => {
-      window.removeEventListener('open-create-modal', handleOpenCreateModal);
-      window.removeEventListener('set-create-type', handleSetCreateType);
-      window.removeEventListener('set-create-workspace', handleSetCreateWorkspace);
-      window.removeEventListener('set-create-parent', handleSetCreateParent);
-    };
-  });
+  useEventListener(() => window, 'open-create-modal', handleOpenCreateModal);
+  useEventListener(() => window, 'set-create-type', handleSetCreateType);
+  useEventListener(() => window, 'set-create-workspace', handleSetCreateWorkspace);
+  useEventListener(() => window, 'set-create-parent', handleSetCreateParent);
 </script>
 
 {#if isOpen}