From 811d23fc05f69c72b6d9cac0ccfeb30a36d09352 Mon Sep 17 00:00:00 2001
From: Kohei Yoshino <kohei.yoshino@gmail.com>
Date: Sun, 22 Dec 2024 15:18:50 -0500
Subject: [PATCH] Migrate to Runes, part 3

---
 .../components/contents/contents-page.svelte  |   4 +-
 .../contents/details/backup-feedback.svelte   |  30 ++--
 .../details/content-details-overlay.svelte    | 120 +++++++-------
 .../details/editor/copy-menu-items.svelte     |  41 ++---
 .../details/editor/entry-editor.svelte        |  14 +-
 .../details/editor/field-editor.svelte        | 151 ++++++++++--------
 .../details/editor/translate-button.svelte    |  40 ++---
 .../editor/translator-api-key-dialog.svelte   |   9 +-
 .../contents/details/pane-body.svelte         |  49 +++---
 .../contents/details/pane-header.svelte       |  72 +++++----
 .../details/preview/entry-preview.svelte      |  14 +-
 .../details/preview/field-preview.svelte      |  69 ++++----
 .../contents/details/toolbar.svelte           |  76 +++++----
 .../contents/list/entry-list-item.svelte      |  23 +--
 .../contents/list/entry-list.svelte           |   6 +-
 .../components/contents/list/file-list.svelte |   2 +
 .../contents/list/primary-sidebar.svelte      |   4 +-
 .../contents/list/primary-toolbar.svelte      |   8 +-
 .../contents/list/secondary-sidebar.svelte    |   7 +-
 .../contents/list/secondary-toolbar.svelte    |   9 +-
 .../shared/delete-entries-dialog.svelte       |  35 ++--
 .../shared/entry-parse-errors-toast.svelte    |   2 +-
 22 files changed, 430 insertions(+), 355 deletions(-)

diff --git a/src/lib/components/contents/contents-page.svelte b/src/lib/components/contents/contents-page.svelte
index 47b08f3b..bebe1e0a 100644
--- a/src/lib/components/contents/contents-page.svelte
+++ b/src/lib/components/contents/contents-page.svelte
@@ -23,6 +23,8 @@
   const routeRegex =
     /^\/collections\/(?<_collectionName>[^/]+)(?:\/(?<routeType>new|entries))?(?:\/(?<subPath>.+?))?$/;
 
+  const MainContent = $derived($selectedCollection?.files ? FileList : EntryList);
+
   /**
    * Navigate to the content list or content details page given the URL hash.
    * @todo Show Not Found page.
@@ -165,7 +167,7 @@
           <SecondaryToolbar />
         {/snippet}
         {#snippet mainContent()}
-          <svelte:component this={$selectedCollection?.files ? FileList : EntryList} />
+          <MainContent />
         {/snippet}
         {#snippet secondarySidebar()}
           <SecondarySidebar />
diff --git a/src/lib/components/contents/details/backup-feedback.svelte b/src/lib/components/contents/details/backup-feedback.svelte
index 96af0d55..2366be7d 100644
--- a/src/lib/components/contents/details/backup-feedback.svelte
+++ b/src/lib/components/contents/details/backup-feedback.svelte
@@ -4,26 +4,28 @@
   import { backupToastState, restoreDialogState } from '$lib/services/contents/draft/backup';
   import { showContentOverlay } from '$lib/services/contents/draft/editor';
 
-  $: now = new Date();
-  $: ({ resolve, timestamp } = $restoreDialogState);
-  $: sameYear = now.getUTCFullYear() === timestamp?.getUTCFullYear();
-  $: sameMonth = sameYear && now.getUTCMonth() === timestamp?.getUTCMonth();
-  $: sameDay = sameMonth && now.getUTCDate() === timestamp?.getUTCDate();
-  $: datetime = timestamp?.toLocaleString($appLocale ?? undefined, {
-    year: sameYear ? undefined : 'numeric',
-    month: sameDay ? undefined : 'short',
-    day: sameDay ? undefined : 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-  });
+  const now = $derived(new Date());
+  const { resolve, timestamp } = $derived($restoreDialogState);
+  const sameYear = $derived(now.getUTCFullYear() === timestamp?.getUTCFullYear());
+  const sameMonth = $derived(sameYear && now.getUTCMonth() === timestamp?.getUTCMonth());
+  const sameDay = $derived(sameMonth && now.getUTCDate() === timestamp?.getUTCDate());
+  const datetime = $derived(
+    timestamp?.toLocaleString($appLocale ?? undefined, {
+      year: sameYear ? undefined : 'numeric',
+      month: sameDay ? undefined : 'short',
+      day: sameDay ? undefined : 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    }),
+  );
 
-  $: {
+  $effect(() => {
     if (!$showContentOverlay && $restoreDialogState.show) {
       // Close the dialog when the Content Editor is closed
       $restoreDialogState.show = false;
       resolve?.();
     }
-  }
+  });
 </script>
 
 <ConfirmationDialog
diff --git a/src/lib/components/contents/details/content-details-overlay.svelte b/src/lib/components/contents/details/content-details-overlay.svelte
index 6af795e6..b8ca797c 100644
--- a/src/lib/components/contents/details/content-details-overlay.svelte
+++ b/src/lib/components/contents/details/content-details-overlay.svelte
@@ -22,39 +22,38 @@
   import { defaultI18nConfig, getLocaleLabel } from '$lib/services/contents/i18n';
 
   /**
+   * A reference to the group element.
    * @type {HTMLElement | undefined}
    */
-  let leftPaneContentArea;
-  /**
-   * @type {HTMLElement | undefined}
-   */
-  let rightPaneContentArea;
-  /**
-   * @type {boolean}
-   */
+  let group = undefined;
   let restoring = false;
 
-  $: ({ editor: { preview: showPreviewPane = true } = {} } =
-    $siteConfig ?? /** @type {SiteConfig} */ ({}));
-  $: ({ collection, collectionFile, originalEntry } =
-    $entryDraft ?? /** @type {EntryDraft} */ ({}));
-  $: entryId =
-    originalEntry?.id ?? [collection?.name ?? '-', collectionFile?.name ?? '-'].join('/');
-  $: ({ showPreview } = $entryEditorSettings ?? {});
-  $: ({ i18nEnabled, locales, defaultLocale } =
-    (collectionFile ?? collection)?._i18n ?? defaultI18nConfig);
-  $: canPreview = (collectionFile ?? collection)?.editor?.preview ?? showPreviewPane;
-  $: paneStateKey = collectionFile?.name
-    ? [collection?.name, collectionFile.name].join('|')
-    : collection?.name;
-
-  $: {
-    if (paneStateKey) {
-      // Reset the editor panes
-      $editorLeftPane = null;
-      $editorRightPane = null;
-    }
-  }
+  let hiding = $state(false);
+  let hidden = $state(true);
+  /** @type {HTMLElement | undefined} */
+  let wrapper = $state();
+  /** @type {HTMLElement | undefined} */
+  let leftPaneContentArea = $state();
+  /** @type {HTMLElement | undefined} */
+  let rightPaneContentArea = $state();
+
+  const { editor: { preview: showPreviewPane = true } = {} } = $derived(
+    $siteConfig ?? /** @type {SiteConfig} */ ({}),
+  );
+  const { collection, collectionFile, originalEntry } = $derived(
+    $entryDraft ?? /** @type {EntryDraft} */ ({}),
+  );
+  const entryId = $derived(
+    originalEntry?.id ?? [collection?.name ?? '-', collectionFile?.name ?? '-'].join('/'),
+  );
+  const { showPreview } = $derived($entryEditorSettings ?? {});
+  const { i18nEnabled, locales, defaultLocale } = $derived(
+    (collectionFile ?? collection)?._i18n ?? defaultI18nConfig,
+  );
+  const canPreview = $derived((collectionFile ?? collection)?.editor?.preview ?? showPreviewPane);
+  const paneStateKey = $derived(
+    collectionFile?.name ? [collection?.name, collectionFile.name].join('|') : collection?.name,
+  );
 
   /**
    * Restore the pane state from IndexedDB.
@@ -108,12 +107,6 @@
     }
   };
 
-  $: {
-    void showPreview;
-    void canPreview;
-    switchPanes();
-  }
-
   /**
    * Save the pane state to IndexedDB.
    */
@@ -131,31 +124,6 @@
     }));
   };
 
-  $: {
-    void $editorLeftPane;
-    void $editorRightPane;
-    savePanes();
-  }
-
-  /**
-   * A reference to the wrapper element.
-   * @type {HTMLElement}
-   */
-  let wrapper;
-  /**
-   * A reference to the group element.
-   * @type {HTMLElement}
-   */
-  let group;
-  /**
-   * @type {boolean}
-   */
-  let hiding = false;
-  /**
-   * @type {boolean}
-   */
-  let hidden = true;
-
   /**
    * Move focus to the wrapper once the overlay is loaded.
    */
@@ -163,12 +131,14 @@
     // Wait until `inert` is updated
     await tick();
 
-    group.tabIndex = 0;
-    group.focus();
+    if (group) {
+      group.tabIndex = 0;
+      group.focus();
+    }
   };
 
   onMount(() => {
-    group = /** @type {HTMLElement} */ (wrapper.querySelector('[role="group"]'));
+    group = /** @type {HTMLElement} */ (wrapper?.querySelector('[role="group"]'));
 
     group.addEventListener('transitionend', () => {
       if (!$showContentOverlay) {
@@ -179,7 +149,27 @@
     });
   });
 
-  $: {
+  $effect(() => {
+    if (paneStateKey) {
+      // Reset the editor panes
+      $editorLeftPane = null;
+      $editorRightPane = null;
+    }
+  });
+
+  $effect(() => {
+    void showPreview;
+    void canPreview;
+    switchPanes();
+  });
+
+  $effect(() => {
+    void $editorLeftPane;
+    void $editorRightPane;
+    savePanes();
+  });
+
+  $effect(() => {
     if (wrapper) {
       if (!$showContentOverlay) {
         hiding = true;
@@ -192,7 +182,7 @@
         resetBackupToastState();
       }
     }
-  }
+  });
 </script>
 
 <div
diff --git a/src/lib/components/contents/details/editor/copy-menu-items.svelte b/src/lib/components/contents/details/editor/copy-menu-items.svelte
index 1793bc57..41651f0b 100644
--- a/src/lib/components/contents/details/editor/copy-menu-items.svelte
+++ b/src/lib/components/contents/details/editor/copy-menu-items.svelte
@@ -7,24 +7,24 @@
   import { translator } from '$lib/services/integrations/translators';
 
   /**
-   * @type {LocaleCode}
+   * @typedef {object} Props
+   * @property {LocaleCode} locale - Current pane’s locale.
+   * @property {LocaleCode[]} otherLocales - Other locales.
+   * @property {FieldKeyPath} [keyPath] - Field key path.
+   * @property {boolean} [translate] - Whether to translate the field.
    */
-  export let locale;
-  /**
-   * @type {LocaleCode[]}
-   */
-  export let otherLocales;
-  /**
-   * @type {FieldKeyPath}
-   */
-  export let keyPath = '';
-  /**
-   * @type {boolean}
-   */
-  export let translate = false;
 
-  $: ({ currentLocales = {}, currentValues = {} } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
-  $: ({ getSourceLanguage, getTargetLanguage } = $translator);
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    locale,
+    otherLocales,
+    keyPath = '',
+    translate = false,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const { getSourceLanguage, getTargetLanguage } = $derived($translator);
 </script>
 
 {#each otherLocales as otherLocale}
@@ -32,12 +32,13 @@
     label={$_(translate ? 'translate_from_x' : 'copy_from_x', {
       values: { locale: getLocaleLabel(otherLocale) },
     })}
-    disabled={!currentLocales[locale] ||
-      !currentLocales[otherLocale] ||
-      (keyPath && !currentValues[otherLocale][keyPath]) ||
+    disabled={!$entryDraft?.currentLocales[locale] ||
+      !$entryDraft?.currentLocales[otherLocale] ||
+      (keyPath && !$entryDraft?.currentValues[otherLocale][keyPath]) ||
       (!translate &&
         keyPath &&
-        currentValues[otherLocale][keyPath] === currentValues[locale][keyPath]) ||
+        $entryDraft?.currentValues[otherLocale][keyPath] ===
+          $entryDraft?.currentValues[locale][keyPath]) ||
       (translate && (!getSourceLanguage(locale) || !getTargetLanguage(otherLocale)))}
     onclick={() => {
       copyFromLocale(otherLocale, locale, { keyPath, translate });
diff --git a/src/lib/components/contents/details/editor/entry-editor.svelte b/src/lib/components/contents/details/editor/entry-editor.svelte
index 2882ada8..3a0903bb 100644
--- a/src/lib/components/contents/details/editor/entry-editor.svelte
+++ b/src/lib/components/contents/details/editor/entry-editor.svelte
@@ -4,13 +4,19 @@
   import { entryDraft } from '$lib/services/contents/draft';
 
   /**
-   * @type {LocaleCode}
+   * @typedef {object} Props
+   * @property {LocaleCode} locale - Current pane’s locale.
    */
-  export let locale;
 
-  $: ({ collection, collectionFile } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    locale,
+    /* eslint-enable prefer-const */
+  } = $props();
 
-  $: fields = collectionFile?.fields ?? collection?.fields ?? [];
+  const { collection, collectionFile } = $derived($entryDraft ?? /** @type {EntryDraft} */ ({}));
+  const fields = $derived(collectionFile?.fields ?? collection?.fields ?? []);
 </script>
 
 {#each fields as fieldConfig (fieldConfig.name)}
diff --git a/src/lib/components/contents/details/editor/field-editor.svelte b/src/lib/components/contents/details/editor/field-editor.svelte
index 1753d01a..18f44a40 100644
--- a/src/lib/components/contents/details/editor/field-editor.svelte
+++ b/src/lib/components/contents/details/editor/field-editor.svelte
@@ -16,17 +16,20 @@
   import CopyMenuItems from '$lib/components/contents/details/editor/copy-menu-items.svelte';
 
   /**
-   * @type {LocaleCode}
+   * @typedef {object} Props
+   * @property {LocaleCode} locale - Current pane’s locale.
+   * @property {FieldKeyPath} keyPath - Field key path.
+   * @property {Field} fieldConfig - Field configuration.
    */
-  export let locale;
-  /**
-   * @type {FieldKeyPath}
-   */
-  export let keyPath;
-  /**
-   * @type {Field}
-   */
-  export let fieldConfig;
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    locale,
+    keyPath,
+    fieldConfig,
+    /* eslint-enable prefer-const */
+  } = $props();
 
   const fieldId = generateElementId('field');
 
@@ -46,7 +49,7 @@
 
   setContext('field-editor', { extraHint });
 
-  $: ({
+  const {
     name: fieldName,
     label = '',
     comment = '',
@@ -55,61 +58,78 @@
     required = true,
     i18n = false,
     pattern = /** @type {string[]} */ ([]),
-  } = fieldConfig);
-  // @ts-ignore
-  $: ({ field: subField, fields: subFields, types } = /** @type {ListField} */ (fieldConfig));
-  $: hasSubFields = !!subField || !!subFields || !!types;
-  // @ts-ignore
-  $: ({ min, max } = /** @type {ListField | NumberField | RelationField | SelectField} */ (
-    fieldConfig
-  ));
-  $: type =
+  } = $derived(fieldConfig);
+  const {
+    field: subField,
+    fields: subFields,
+    types,
+  } = /** @type {ListField} */ ($derived(fieldConfig));
+  const hasSubFields = $derived(!!subField || !!subFields || !!types);
+  const { min, max } = /** @type {ListField | NumberField | RelationField | SelectField} */ (
+    $derived(fieldConfig)
+  );
+  const type = $derived(
     // prettier-ignore
-    widgetName === 'string' ? (/** @type {StringField} */ (fieldConfig).type ?? 'text') : undefined;
-  $: allowPrefix = ['string'].includes(widgetName);
-  $: prefix = allowPrefix ? /** @type {StringField} */ (fieldConfig).prefix : undefined;
-  $: suffix = allowPrefix ? /** @type {StringField} */ (fieldConfig).suffix : undefined;
-  $: allowExtraLabels = ['boolean', 'number', 'string'].includes(widgetName);
-  $: beforeInputLabel = allowExtraLabels
-    ? /** @type {BooleanField | NumberField | StringField} */ (fieldConfig).before_input
-    : undefined;
-  $: afterInputLabel = allowExtraLabels
-    ? /** @type {BooleanField | NumberField | StringField} */ (fieldConfig).after_input
-    : undefined;
-  $: hasExtraLabels = !!(prefix || suffix || beforeInputLabel || afterInputLabel);
-  $: hasMultiple = ['relation', 'select'].includes(widgetName);
-  $: multiple = hasMultiple
-    ? /** @type {RelationField | SelectField} */ (fieldConfig).multiple
-    : undefined;
-  $: isList = widgetName === 'list' || (hasMultiple && multiple);
-  $: ({ collection, collectionFile, originalValues, currentValues, validities } =
-    $entryDraft ?? /** @type {EntryDraft} */ ({}));
-  $: ({ i18nEnabled, locales, defaultLocale } =
-    (collectionFile ?? collection)?._i18n ?? defaultI18nConfig);
-  $: otherLocales = i18nEnabled ? locales.filter((l) => l !== locale) : [];
-  $: canTranslate = i18nEnabled && (i18n === true || i18n === 'translate');
-  $: canDuplicate = i18nEnabled && i18n === 'duplicate';
-  $: canEdit = locale === defaultLocale || canTranslate || canDuplicate;
-  $: keyPathRegex = new RegExp(`^${escapeRegExp(keyPath)}\\.\\d+$`);
-
+    widgetName === 'string' ? (/** @type {StringField} */ (fieldConfig).type ?? 'text') : undefined,
+  );
+  const allowPrefix = $derived(['string'].includes(widgetName));
+  const prefix = $derived(
+    allowPrefix ? /** @type {StringField} */ (fieldConfig).prefix : undefined,
+  );
+  const suffix = $derived(
+    allowPrefix ? /** @type {StringField} */ (fieldConfig).suffix : undefined,
+  );
+  const allowExtraLabels = $derived(['boolean', 'number', 'string'].includes(widgetName));
+  const beforeInputLabel = $derived(
+    allowExtraLabels
+      ? /** @type {BooleanField | NumberField | StringField} */ (fieldConfig).before_input
+      : undefined,
+  );
+  const afterInputLabel = $derived(
+    allowExtraLabels
+      ? /** @type {BooleanField | NumberField | StringField} */ (fieldConfig).after_input
+      : undefined,
+  );
+  const hasExtraLabels = $derived(!!(prefix || suffix || beforeInputLabel || afterInputLabel));
+  const hasMultiple = $derived(['relation', 'select'].includes(widgetName));
+  const multiple = $derived(
+    hasMultiple ? /** @type {RelationField | SelectField} */ (fieldConfig).multiple : undefined,
+  );
+  const isList = $derived(widgetName === 'list' || (hasMultiple && multiple));
+  const { collection, collectionFile, originalValues } = $derived(
+    $entryDraft ?? /** @type {EntryDraft} */ ({}),
+  );
+  const { i18nEnabled, locales, defaultLocale } = $derived(
+    (collectionFile ?? collection)?._i18n ?? defaultI18nConfig,
+  );
+  const otherLocales = $derived(i18nEnabled ? locales.filter((l) => l !== locale) : []);
+  const canTranslate = $derived(i18nEnabled && (i18n === true || i18n === 'translate'));
+  const canDuplicate = $derived(i18nEnabled && i18n === 'duplicate');
+  const canEdit = $derived(locale === defaultLocale || canTranslate || canDuplicate);
+  const keyPathRegex = $derived(new RegExp(`^${escapeRegExp(keyPath)}\\.\\d+$`));
   // Multiple values are flattened in the value map object
-  $: currentValue = isList
-    ? Object.entries(currentValues[locale])
-        .filter(([_keyPath]) => keyPathRegex.test(_keyPath))
-        .map(([, val]) => val)
-        .filter((val) => val !== undefined)
-    : currentValues[locale][keyPath];
-  $: originalValue = isList
-    ? Object.entries(originalValues[locale])
-        .filter(([_keyPath]) => keyPathRegex.test(_keyPath))
-        .map(([, val]) => val)
-        .filter((val) => val !== undefined)
-    : originalValues[locale][keyPath];
-  $: validity = validities[locale][keyPath];
-
-  $: fieldLabel = label || fieldName;
-  $: readonly = (i18n === 'duplicate' && locale !== defaultLocale) || widgetName === 'compute';
-  $: invalid = validity?.valid === false;
+  const currentValue = $derived(
+    isList
+      ? Object.entries($entryDraft?.currentValues[locale] ?? {})
+          .filter(([_keyPath]) => keyPathRegex.test(_keyPath))
+          .map(([, val]) => val)
+          .filter((val) => val !== undefined)
+      : $entryDraft?.currentValues[locale][keyPath],
+  );
+  const originalValue = $derived(
+    isList
+      ? Object.entries(originalValues[locale])
+          .filter(([_keyPath]) => keyPathRegex.test(_keyPath))
+          .map(([, val]) => val)
+          .filter((val) => val !== undefined)
+      : originalValues[locale][keyPath],
+  );
+  const validity = $derived($entryDraft?.validities[locale][keyPath]);
+  const fieldLabel = $derived(label || fieldName);
+  const readonly = $derived(
+    (i18n === 'duplicate' && locale !== defaultLocale) || widgetName === 'compute',
+  );
+  const invalid = $derived(validity?.valid === false);
 </script>
 
 {#if $entryDraft && canEdit && widgetName !== 'hidden'}
@@ -274,11 +294,12 @@
       {/if}
     </div>
     {#if !readonly && (hint || $extraHint)}
+      {@const ExtraHint = $extraHint}
       <div role="none" class="footer">
         {#if hint}
           <p class="hint">{@html sanitize(hint)}</p>
         {/if}
-        <svelte:component this={$extraHint} {fieldConfig} {currentValue} />
+        <ExtraHint {fieldConfig} {currentValue} />
       </div>
     {/if}
   </section>
diff --git a/src/lib/components/contents/details/editor/translate-button.svelte b/src/lib/components/contents/details/editor/translate-button.svelte
index 40afb866..12e8f198 100644
--- a/src/lib/components/contents/details/editor/translate-button.svelte
+++ b/src/lib/components/contents/details/editor/translate-button.svelte
@@ -8,25 +8,27 @@
   import { translator } from '$lib/services/integrations/translators';
 
   /**
-   * @type {'medium' | 'small'}
+   * @typedef {object} Props
+   * @property {'medium' | 'small'} [size] - Button size.
+   * @property {LocaleCode} locale - Current pane’s locale.
+   * @property {LocaleCode[]} otherLocales - Other locales.
+   * @property {FieldKeyPath} [keyPath] - Field key path.
    */
-  export let size = 'medium';
-  /**
-   * @type {LocaleCode}
-   */
-  export let locale;
-  /**
-   * @type {LocaleCode[]}
-   */
-  export let otherLocales;
-  /**
-   * @type {FieldKeyPath}
-   */
-  export let keyPath = '';
 
-  $: ({ currentLocales = {} } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
-  $: ({ getSourceLanguage, getTargetLanguage } = $translator ?? {});
-  $: sourceDisabled = !currentLocales[locale] || !getSourceLanguage(locale);
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    size = 'medium',
+    locale,
+    otherLocales,
+    keyPath = '',
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const { getSourceLanguage, getTargetLanguage } = $derived($translator ?? {});
+  const sourceDisabled = $derived(
+    !$entryDraft?.currentLocales[locale] || !getSourceLanguage(locale),
+  );
 </script>
 
 {#if otherLocales.length === 1}
@@ -40,7 +42,9 @@
     popupPosition="bottom-right"
     aria-label={label}
     title={label}
-    disabled={sourceDisabled || !currentLocales[otherLocale] || !getTargetLanguage(otherLocale)}
+    disabled={sourceDisabled ||
+      !$entryDraft?.currentLocales[otherLocale] ||
+      !getTargetLanguage(otherLocale)}
     onclick={() => {
       copyFromLocale(otherLocale, locale, { keyPath, translate: true });
     }}
diff --git a/src/lib/components/contents/details/editor/translator-api-key-dialog.svelte b/src/lib/components/contents/details/editor/translator-api-key-dialog.svelte
index 1a6cbd03..13e09eb9 100644
--- a/src/lib/components/contents/details/editor/translator-api-key-dialog.svelte
+++ b/src/lib/components/contents/details/editor/translator-api-key-dialog.svelte
@@ -9,16 +9,17 @@
   import { translator } from '$lib/services/integrations/translators';
   import { prefs } from '$lib/services/prefs';
 
-  $: ({ serviceId, serviceLabel, developerURL, apiKeyURL, apiKeyPattern } =
-    $translator ?? /** @type {TranslationService} */ ({}));
+  const { serviceId, serviceLabel, developerURL, apiKeyURL, apiKeyPattern } = $derived(
+    $translator ?? /** @type {TranslationService} */ ({}),
+  );
 
-  $: {
+  $effect(() => {
     if (!$showContentOverlay && $translatorApiKeyDialogState.show) {
       // Close the dialog when the Content Editor is closed
       $translatorApiKeyDialogState.show = false;
       $translatorApiKeyDialogState.resolve?.();
     }
-  }
+  });
 </script>
 
 <PromptDialog
diff --git a/src/lib/components/contents/details/pane-body.svelte b/src/lib/components/contents/details/pane-body.svelte
index dbe2d7c7..8787b2a6 100644
--- a/src/lib/components/contents/details/pane-body.svelte
+++ b/src/lib/components/contents/details/pane-body.svelte
@@ -10,28 +10,29 @@
   import { getLocaleLabel } from '$lib/services/contents/i18n';
 
   /**
-   * The wrapper element’s `id` attribute.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} id - The wrapper element’s `id` attribute.
+   * @property {import('svelte/store').Writable<EntryEditorPane | null>} thisPane - This pane’s mode
+   * and locale.
+   * @property {HTMLElement} [thisPaneContentArea] - This pane’s content area.
+   * @property {HTMLElement} [thatPaneContentArea] - Another pane’s content area.
    */
-  export let id;
-  /**
-   * @type {import('svelte/store').Writable<EntryEditorPane | null>}
-   */
-  export let thisPane;
-  /**
-   * @type {HTMLElement | undefined}
-   */
-  export let thisPaneContentArea;
-  /**
-   * @type {HTMLElement | undefined}
-   */
-  export let thatPaneContentArea;
 
-  $: ({ syncScrolling } = $entryEditorSettings ?? {});
-  $: ({ currentLocales = {}, currentValues = {} } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
-  $: ({ locale, mode } = $thisPane ?? /** @type {EntryEditorPane} */ ({}));
-  $: hasContent = !!currentValues[locale];
-  $: labelOptions = { values: { locale: getLocaleLabel(locale) } };
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    id,
+    thisPane,
+    thisPaneContentArea = $bindable(),
+    thatPaneContentArea = $bindable(),
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const { syncScrolling } = $derived($entryEditorSettings ?? {});
+  const { locale, mode } = $derived($thisPane ?? /** @type {EntryEditorPane} */ ({}));
+  const hasContent = $derived(!!$entryDraft?.currentValues[locale]);
+  const labelOptions = $derived({ values: { locale: getLocaleLabel(locale) } });
+  const MainContent = $derived(mode === 'preview' ? EntryPreview : EntryEditor);
 
   /**
    * Sync the scroll position with the other edit/preview pane.
@@ -68,15 +69,15 @@
     });
   };
 
-  $: {
+  $effect(() => {
     if (thisPaneContentArea) {
       thisPaneContentArea.scrollTop = 0;
     }
-  }
+  });
 </script>
 
 <div role="none" {id} class="wrapper">
-  {#if currentLocales[locale]}
+  {#if $entryDraft?.currentLocales[locale]}
     <div
       role="none"
       class="content"
@@ -88,7 +89,7 @@
         syncScrollPosition();
       }}
     >
-      <svelte:component this={mode === 'preview' ? EntryPreview : EntryEditor} {locale} />
+      <MainContent {locale} />
     </div>
   {:else if mode === 'edit'}
     <EmptyState>
diff --git a/src/lib/components/contents/details/pane-header.svelte b/src/lib/components/contents/details/pane-header.svelte
index ec310439..ef685306 100644
--- a/src/lib/components/contents/details/pane-header.svelte
+++ b/src/lib/components/contents/details/pane-header.svelte
@@ -25,45 +25,51 @@
   import { prefs } from '$lib/services/prefs';
 
   /**
-   * The wrapper element’s `id` attribute.
-   * @type {string}
+   * @typedef {object} Props
+   * @property {string} id - The wrapper element’s `id` attribute.
+   * @property {import('svelte/store').Writable<?EntryEditorPane>} thisPane - This pane’s mode and
+   * locale.
+   * @property {import('svelte/store').Writable<?EntryEditorPane>} [thatPane] - Another pane’s mode
+   * and locale.
    */
-  export let id;
-  /**
-   * This pane’s locale and mode.
-   * @type {import('svelte/store').Writable<?EntryEditorPane>}
-   */
-  export let thisPane;
-  /**
-   * @type {import('svelte/store').Writable<?EntryEditorPane>}
-   */
-  export let thatPane = writable(null);
 
-  $: ({ editor: { preview: showPreviewPane = true } = {} } =
-    $siteConfig ?? /** @type {SiteConfig} */ ({}));
-  $: ({
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    id,
+    thisPane,
+    thatPane = writable(null),
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const { editor: { preview: showPreviewPane = true } = {} } = $derived(
+    $siteConfig ?? /** @type {SiteConfig} */ ({}),
+  );
+  const {
     collection,
     collectionFile,
     originalEntry,
-    currentLocales = {},
-    currentValues = {},
     originalValues = {},
-    validities = {},
-  } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
-  $: ({ i18nEnabled, saveAllLocales, locales, defaultLocale } =
-    (collectionFile ?? collection)?._i18n ?? defaultI18nConfig);
-  $: isLocaleEnabled = currentLocales[$thisPane?.locale ?? ''];
-  $: isOnlyLocale = Object.values(currentLocales).filter((enabled) => enabled).length === 1;
-  $: otherLocales = i18nEnabled ? locales.filter((l) => l !== $thisPane?.locale) : [];
-  $: canPreview = (collectionFile ?? collection)?.editor?.preview ?? showPreviewPane;
-  $: canCopy = !!otherLocales.length;
-  $: canRevert =
+  } = $derived($entryDraft ?? /** @type {EntryDraft} */ ({}));
+  const { i18nEnabled, saveAllLocales, locales, defaultLocale } = $derived(
+    (collectionFile ?? collection)?._i18n ?? defaultI18nConfig,
+  );
+  const isLocaleEnabled = $derived($entryDraft?.currentLocales[$thisPane?.locale ?? '']);
+  const isOnlyLocale = $derived(
+    Object.values($entryDraft?.currentLocales ?? {}).filter((enabled) => enabled).length === 1,
+  );
+  const otherLocales = $derived(i18nEnabled ? locales.filter((l) => l !== $thisPane?.locale) : []);
+  const canPreview = $derived((collectionFile ?? collection)?.editor?.preview ?? showPreviewPane);
+  const canCopy = $derived(!!otherLocales.length);
+  const canRevert = $derived(
     $thisPane?.locale &&
-    !equal(currentValues[$thisPane?.locale], originalValues[$thisPane?.locale]);
-  $: previewURL =
+      !equal($entryDraft?.currentValues[$thisPane?.locale], originalValues[$thisPane?.locale]),
+  );
+  const previewURL = $derived(
     originalEntry && $thisPane?.locale
       ? getEntryPreviewURL(originalEntry, $thisPane?.locale, collection, collectionFile)
-      : undefined;
+      : undefined,
+  );
 </script>
 
 <div role="none" {id} class="header">
@@ -76,7 +82,9 @@
       >
         {#each locales as locale}
           {@const localeLabel = getLocaleLabel(locale)}
-          {@const invalid = Object.values(validities[locale]).some(({ valid }) => !valid)}
+          {@const invalid = Object.values($entryDraft?.validities[locale] ?? {}).some(
+            ({ valid }) => !valid,
+          )}
           {#if !($thatPane?.mode === 'edit' && $thatPane?.locale === locale)}
             <SelectButton
               selected={$thisPane?.mode === 'edit' && $thisPane?.locale === locale}
@@ -145,7 +153,7 @@
                 label={$_(
                   isLocaleEnabled
                     ? 'disable_x_locale'
-                    : currentValues[$thisPane.locale]
+                    : $entryDraft?.currentValues[$thisPane.locale]
                       ? 'reenable_x_locale'
                       : 'enable_x_locale',
                   { values: { locale: localeLabel } },
diff --git a/src/lib/components/contents/details/preview/entry-preview.svelte b/src/lib/components/contents/details/preview/entry-preview.svelte
index 5ed26ba1..b471032d 100644
--- a/src/lib/components/contents/details/preview/entry-preview.svelte
+++ b/src/lib/components/contents/details/preview/entry-preview.svelte
@@ -5,13 +5,19 @@
   import { entryDraft } from '$lib/services/contents/draft';
 
   /**
-   * @type {LocaleCode}
+   * @typedef {object} Props
+   * @property {LocaleCode} locale - Current pane’s locale.
    */
-  export let locale;
 
-  $: ({ collection, collectionFile } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    locale,
+    /* eslint-enable prefer-const */
+  } = $props();
 
-  $: fields = collectionFile?.fields ?? collection?.fields ?? [];
+  const { collection, collectionFile } = $derived($entryDraft ?? /** @type {EntryDraft} */ ({}));
+  const fields = $derived(collectionFile?.fields ?? collection?.fields ?? []);
 </script>
 
 <div role="document" aria-label={$_('content_preview')}>
diff --git a/src/lib/components/contents/details/preview/field-preview.svelte b/src/lib/components/contents/details/preview/field-preview.svelte
index cc90f6ab..08326c2c 100644
--- a/src/lib/components/contents/details/preview/field-preview.svelte
+++ b/src/lib/components/contents/details/preview/field-preview.svelte
@@ -6,45 +6,52 @@
   import { defaultI18nConfig } from '$lib/services/contents/i18n';
 
   /**
-   * @type {LocaleCode}
+   * @typedef {object} Props
+   * @property {LocaleCode} locale - Current pane’s locale.
+   * @property {FieldKeyPath} keyPath - Field key path.
+   * @property {Field} fieldConfig - Field configuration.
    */
-  export let locale;
-  /**
-   * @type {FieldKeyPath}
-   */
-  export let keyPath;
-  /**
-   * @type {Field}
-   */
-  export let fieldConfig;
 
-  $: ({
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    locale,
+    keyPath,
+    fieldConfig,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const {
     name: fieldName,
     label = '',
     widget: widgetName = 'string',
     preview = true,
     i18n = false,
-  } = fieldConfig);
-  $: hasMultiple = ['relation', 'select'].includes(widgetName);
-  $: multiple = hasMultiple
-    ? /** @type {RelationField | SelectField} */ (fieldConfig).multiple
-    : undefined;
-  $: isList = widgetName === 'list' || (hasMultiple && multiple);
-  $: ({ collectionName, fileName, collection, collectionFile, currentValues } =
-    $entryDraft ?? /** @type {EntryDraft} */ ({}));
-  $: valueMap = currentValues[locale];
-  $: ({ i18nEnabled, defaultLocale } = (collectionFile ?? collection)?._i18n ?? defaultI18nConfig);
-  $: canTranslate = i18nEnabled && (i18n === true || i18n === 'translate');
-  $: canDuplicate = i18nEnabled && i18n === 'duplicate';
-  $: keyPathRegex = new RegExp(`^${escapeRegExp(keyPath)}\\.\\d+$`);
-
+  } = $derived(fieldConfig);
+  const hasMultiple = $derived(['relation', 'select'].includes(widgetName));
+  const multiple = $derived(
+    hasMultiple ? /** @type {RelationField | SelectField} */ (fieldConfig).multiple : undefined,
+  );
+  const isList = $derived(widgetName === 'list' || (hasMultiple && multiple));
+  const { collectionName, fileName, collection, collectionFile } = $derived(
+    $entryDraft ?? /** @type {EntryDraft} */ ({}),
+  );
+  const valueMap = $derived($entryDraft?.currentValues[locale] ?? {});
+  const { i18nEnabled, defaultLocale } = $derived(
+    (collectionFile ?? collection)?._i18n ?? defaultI18nConfig,
+  );
+  const canTranslate = $derived(i18nEnabled && (i18n === true || i18n === 'translate'));
+  const canDuplicate = $derived(i18nEnabled && i18n === 'duplicate');
+  const keyPathRegex = $derived(new RegExp(`^${escapeRegExp(keyPath)}\\.\\d+$`));
   // Multiple values are flattened in the value map object
-  $: currentValue = isList
-    ? Object.entries(valueMap)
-        .filter(([_keyPath]) => keyPathRegex.test(_keyPath))
-        .map(([, val]) => val)
-        .filter((val) => val !== undefined)
-    : valueMap[keyPath];
+  const currentValue = $derived(
+    isList
+      ? Object.entries(valueMap)
+          .filter(([_keyPath]) => keyPathRegex.test(_keyPath))
+          .map(([, val]) => val)
+          .filter((val) => val !== undefined)
+      : valueMap[keyPath],
+  );
 
   /**
    * Called whenever the preview field is clicked. Highlight the corresponding editor field by
diff --git a/src/lib/components/contents/details/toolbar.svelte b/src/lib/components/contents/details/toolbar.svelte
index d0d7a8a5..2dcf7cef 100644
--- a/src/lib/components/contents/details/toolbar.svelte
+++ b/src/lib/components/contents/details/toolbar.svelte
@@ -32,49 +32,54 @@
   import { defaultI18nConfig, getLocaleLabel } from '$lib/services/contents/i18n';
   import { prefs } from '$lib/services/prefs';
 
-  let showValidationToast = false;
-  let showDeleteDialog = false;
-  let showErrorDialog = false;
-  let saving = false;
+  let showValidationToast = $state(false);
+  let showDeleteDialog = $state(false);
+  let showErrorDialog = $state(false);
+  let saving = $state(false);
   /** @type {any} */
-  let menuButton;
+  let menuButton = $state();
 
-  $: ({
+  const {
     isNew,
     collection,
     collectionFile,
     originalEntry,
     originalLocales = {},
-    currentLocales = {},
     originalValues = {},
-    currentValues = {},
-    validities = {},
-    expanderStates,
-  } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
-
-  $: ({
+  } = $derived($entryDraft ?? /** @type {EntryDraft} */ ({}));
+  const {
     editor: { preview: showPreviewPane = true } = {},
     backend: { automatic_deployments: autoDeployEnabled = undefined } = {},
-  } = $siteConfig ?? /** @type {SiteConfig} */ ({}));
-  $: showSaveOptions = $backendName !== 'local' && typeof autoDeployEnabled === 'boolean';
-  $: ({ defaultLocale } = (collectionFile ?? collection)?._i18n ?? defaultI18nConfig);
-  $: collectionName = collection?.name;
-  $: collectionLabel = collection?.label || collectionName;
-  $: collectionLabelSingular = collection?.label_singular || collectionLabel;
-  $: canPreview = (collectionFile ?? collection)?.editor?.preview ?? showPreviewPane;
-  $: modified =
-    isNew || !equal(originalLocales, currentLocales) || !equal(originalValues, currentValues);
-  $: errorCount = Object.values(validities ?? {})
-    .map((validity) => Object.values(validity).map(({ valid }) => !valid))
-    .flat(1)
-    .filter(Boolean).length;
-  $: associatedAssets =
+  } = $derived($siteConfig ?? /** @type {SiteConfig} */ ({}));
+  const showSaveOptions = $derived(
+    $backendName !== 'local' && typeof autoDeployEnabled === 'boolean',
+  );
+  const { defaultLocale } = $derived((collectionFile ?? collection)?._i18n ?? defaultI18nConfig);
+  const collectionName = $derived(collection?.name);
+  const collectionLabel = $derived(collection?.label || collectionName);
+  const collectionLabelSingular = $derived(collection?.label_singular || collectionLabel);
+  const canPreview = $derived((collectionFile ?? collection)?.editor?.preview ?? showPreviewPane);
+  const modified = $derived(
+    isNew ||
+      !equal(originalLocales, $entryDraft?.currentLocales) ||
+      !equal(originalValues, $entryDraft?.currentValues),
+  );
+  const errorCount = $derived(
+    Object.values($entryDraft?.validities ?? {})
+      .map((validity) => Object.values(validity).map(({ valid }) => !valid))
+      .flat(1)
+      .filter(Boolean).length,
+  );
+  const associatedAssets = $derived(
     !!originalEntry && !!collection._assetFolder?.entryRelative
       ? getAssociatedAssets({ entry: originalEntry, collectionName, relative: true })
-      : [];
-  $: previewURL = originalEntry
-    ? getEntryPreviewURL(originalEntry, defaultLocale, collection, collectionFile)
-    : undefined;
+      : [],
+  );
+  const previewURL = $derived(
+    originalEntry
+      ? getEntryPreviewURL(originalEntry, defaultLocale, collection, collectionFile)
+      : undefined,
+  );
 
   /**
    * Save the entry draft.
@@ -100,7 +105,12 @@
         }
 
         // Reset the draft
-        createDraft({ collection, collectionFile, originalEntry: savedEntry, expanderStates });
+        createDraft({
+          collection,
+          collectionFile,
+          originalEntry: savedEntry,
+          expanderStates: $entryDraft?.expanderStates,
+        });
       }
     } catch (/** @type {any} */ ex) {
       if (ex.message === 'validation_failed') {
@@ -202,7 +212,7 @@
         <MenuItemCheckbox
           label={$_('sync_scrolling')}
           checked={$entryEditorSettings?.syncScrolling}
-          disabled={!canPreview && Object.keys(currentValues).length === 1}
+          disabled={!canPreview && Object.keys($entryDraft?.currentValues ?? {}).length === 1}
           onChange={() => {
             entryEditorSettings.update((view = {}) => ({
               ...view,
diff --git a/src/lib/components/contents/list/entry-list-item.svelte b/src/lib/components/contents/list/entry-list-item.svelte
index 0efee547..3d36ceec 100644
--- a/src/lib/components/contents/list/entry-list-item.svelte
+++ b/src/lib/components/contents/list/entry-list-item.svelte
@@ -8,17 +8,20 @@
   import { getEntrySummary } from '$lib/services/contents/entry/summary';
 
   /**
-   * @type {EntryCollection}
+   * @typedef {object} Props
+   * @property {EntryCollection} collection - Selected collection.
+   * @property {Entry} entry - Entry.
+   * @property {ViewType} viewType - View type.
    */
-  export let collection;
-  /**
-   * @type {Entry}
-   */
-  export let entry;
-  /**
-   * @type {ViewType}
-   */
-  export let viewType;
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    collection,
+    entry,
+    viewType,
+    /* eslint-enable prefer-const */
+  } = $props();
 
   /**
    * Update the entry selection.
diff --git a/src/lib/components/contents/list/entry-list.svelte b/src/lib/components/contents/list/entry-list.svelte
index 25fbd32c..526c507e 100644
--- a/src/lib/components/contents/list/entry-list.svelte
+++ b/src/lib/components/contents/list/entry-list.svelte
@@ -10,9 +10,9 @@
   import { selectedCollection } from '$lib/services/contents/collection';
   import { currentView, entryGroups, listedEntries } from '$lib/services/contents/collection/view';
 
-  $: collection = (() => /** @type {EntryCollection | undefined} */ ($selectedCollection))();
-  $: viewType = $currentView.type;
-  $: allEntries = $entryGroups.map(({ entries }) => entries).flat(1);
+  const collection = $derived(/** @type {EntryCollection | undefined} */ ($selectedCollection));
+  const viewType = $derived($currentView.type);
+  const allEntries = $derived($entryGroups.map(({ entries }) => entries).flat(1));
 </script>
 
 <ListContainer aria-label={collection?.files ? $_('file_list') : $_('entry_list')}>
diff --git a/src/lib/components/contents/list/file-list.svelte b/src/lib/components/contents/list/file-list.svelte
index d3759187..633d62f4 100644
--- a/src/lib/components/contents/list/file-list.svelte
+++ b/src/lib/components/contents/list/file-list.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes={true} />
+
 <script>
   import { GridCell, GridRow } from '@sveltia/ui';
   import { _ } from 'svelte-i18n';
diff --git a/src/lib/components/contents/list/primary-sidebar.svelte b/src/lib/components/contents/list/primary-sidebar.svelte
index cf5d8e24..220f5f32 100644
--- a/src/lib/components/contents/list/primary-sidebar.svelte
+++ b/src/lib/components/contents/list/primary-sidebar.svelte
@@ -8,8 +8,8 @@
   import { selectedCollection } from '$lib/services/contents/collection';
   import { getEntriesByCollection } from '$lib/services/contents/collection/entries';
 
-  $: numberFormatter = Intl.NumberFormat($appLocale ?? undefined);
-  $: collections = $siteConfig?.collections.filter(({ hide }) => !hide) ?? [];
+  const numberFormatter = $derived(Intl.NumberFormat($appLocale ?? undefined));
+  const collections = $derived($siteConfig?.collections.filter(({ hide }) => !hide) ?? []);
 </script>
 
 <div role="none" class="primary-sidebar">
diff --git a/src/lib/components/contents/list/primary-toolbar.svelte b/src/lib/components/contents/list/primary-toolbar.svelte
index 4ba44346..cac594eb 100644
--- a/src/lib/components/contents/list/primary-toolbar.svelte
+++ b/src/lib/components/contents/list/primary-toolbar.svelte
@@ -8,7 +8,7 @@
   import { selectedCollection } from '$lib/services/contents/collection';
   import { selectedEntries } from '$lib/services/contents/collection/entries';
 
-  let showDeleteDialog = false;
+  let showDeleteDialog = $state(false);
 
   /**
    * Parse the given string as Markdown and sanitize the result to only allow certain tags.
@@ -21,15 +21,15 @@
       ALLOWED_ATTR: ['href'],
     });
 
-  $: ({
+  const {
     name,
     label,
     description,
     files,
     create = false,
     delete: canDelete = true,
-  } = $selectedCollection ?? /** @type {Collection} */ ({}));
-  $: collectionLabel = label || name;
+  } = $derived($selectedCollection ?? /** @type {Collection} */ ({}));
+  const collectionLabel = $derived(label || name);
 </script>
 
 {#if $selectedCollection}
diff --git a/src/lib/components/contents/list/secondary-sidebar.svelte b/src/lib/components/contents/list/secondary-sidebar.svelte
index 482f0922..aa7c7184 100644
--- a/src/lib/components/contents/list/secondary-sidebar.svelte
+++ b/src/lib/components/contents/list/secondary-sidebar.svelte
@@ -8,10 +8,11 @@
   import { selectedCollection } from '$lib/services/contents/collection';
   import { currentView } from '$lib/services/contents/collection/view';
 
-  $: ({ internalPath, entryRelative } =
-    $selectedCollection?._assetFolder ?? /** @type {CollectionAssetFolder} */ ({}));
+  const { internalPath, entryRelative } = $derived(
+    $selectedCollection?._assetFolder ?? /** @type {CollectionAssetFolder} */ ({}),
+  );
   // Can’t upload assets if collection assets are saved at entry-relative paths
-  $: uploadDisabled = !!entryRelative;
+  const uploadDisabled = $derived(!!entryRelative);
 </script>
 
 {#if internalPath}
diff --git a/src/lib/components/contents/list/secondary-toolbar.svelte b/src/lib/components/contents/list/secondary-toolbar.svelte
index b87c0f15..4a97cabd 100644
--- a/src/lib/components/contents/list/secondary-toolbar.svelte
+++ b/src/lib/components/contents/list/secondary-toolbar.svelte
@@ -15,12 +15,13 @@
     sortFields,
   } from '$lib/services/contents/collection/view';
 
-  $: ({ name: collectionName, _thumbnailFieldName } =
+  const { name: collectionName, _thumbnailFieldName } = $derived(
     $selectedCollection?._type === 'entry'
       ? /** @type {EntryCollection} */ ($selectedCollection)
-      : /** @type {EntryCollection} */ ({}));
-  $: hasListedEntries = !!$listedEntries.length;
-  $: hasMultipleEntries = $listedEntries.length > 1;
+      : /** @type {EntryCollection} */ ({}),
+  );
+  const hasListedEntries = $derived(!!$listedEntries.length);
+  const hasMultipleEntries = $derived($listedEntries.length > 1);
 </script>
 
 {#if $selectedCollection?._type === 'entry'}
diff --git a/src/lib/components/contents/shared/delete-entries-dialog.svelte b/src/lib/components/contents/shared/delete-entries-dialog.svelte
index a9f41cce..5fd46768 100644
--- a/src/lib/components/contents/shared/delete-entries-dialog.svelte
+++ b/src/lib/components/contents/shared/delete-entries-dialog.svelte
@@ -7,20 +7,29 @@
   import { listedEntries } from '$lib/services/contents/collection/view';
   import { getAssociatedAssets } from '$lib/services/contents/entry/assets';
 
-  export let open = false;
+  /**
+   * @typedef {object} Props
+   * @property {boolean} [open] - Whether the dialog is open.
+   */
 
-  $: associatedAssets =
-    !!$selectedEntries.length && !!$selectedCollection?._assetFolder?.entryRelative
-      ? $selectedEntries
-          .map((entry) =>
-            getAssociatedAssets({
-              entry,
-              collectionName: $selectedCollection.name,
-              relative: true,
-            }),
-          )
-          .flat(1)
-      : [];
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    open = $bindable(false),
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const associatedAssets = $derived.by(() => {
+    if (!!$selectedEntries.length && !!$selectedCollection?._assetFolder?.entryRelative) {
+      const collectionName = $selectedCollection.name;
+
+      return $selectedEntries
+        .map((entry) => getAssociatedAssets({ entry, collectionName, relative: true }))
+        .flat(1);
+    }
+
+    return [];
+  });
 </script>
 
 <ConfirmationDialog
diff --git a/src/lib/components/contents/shared/entry-parse-errors-toast.svelte b/src/lib/components/contents/shared/entry-parse-errors-toast.svelte
index 97531faf..06352fb1 100644
--- a/src/lib/components/contents/shared/entry-parse-errors-toast.svelte
+++ b/src/lib/components/contents/shared/entry-parse-errors-toast.svelte
@@ -3,7 +3,7 @@
   import { _ } from 'svelte-i18n';
   import { entryParseErrors } from '$lib/services/contents';
 
-  let showParseErrorToast = !!$entryParseErrors.length;
+  let showParseErrorToast = $state(!!$entryParseErrors.length);
 </script>
 
 <Toast bind:show={showParseErrorToast}>