Replace $effect with $derived

src/routes/projects/Project.svelte

@@ -4,19 +4,16 @@
   import EntryImage from '$routes/(entries)/EntryImage.svelte';
   import EntryMain from '$routes/(entries)/EntryMain.svelte';
   import EntryTitle from '$routes/(entries)/EntryTitle.svelte';
-  import { getCurrentProjectTransition } from '$routes/transitions';
+  import { getCurrentProjectOptions } from '$routes/transitions';
   import type { ProjectEntry } from '$routes/types.ts';
 
   interface Props {
     project: ProjectEntry;
   }
 
   let { project }: Props = $props();
-  let projectOptions = getCurrentProjectTransition();
-  let transition = $state(projectOptions.transition);
-  $effect(() => {
-    transition = projectOptions.transition;
-  });
+  let projectOptions = getCurrentProjectOptions();
+  let transition = $derived(projectOptions.transition);
 </script>
 
 <Entry type="project" id={project.id} {transition}>

src/routes/projects/ProjectArchive.svelte

@@ -56,13 +56,10 @@
   // initially and only set the actual transition when the component mounts
   let projectOptions: ProjectOptions = $state({ transition: noopTransition });
   setCurrentProjectOptions(projectOptions);
+  let transition = $derived(projectOptions.transition);
   onMount(() => {
     projectOptions.transition = projectFadeSlide;
   });
-  let transition = $state(projectOptions.transition);
-  $effect(() => {
-    transition = projectOptions.transition;
-  });
 </script>
 
 <article class="project-archive">

src/routes/projects/ProjectCategory.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Project from '$routes/projects/Project.svelte';
-  import { getCurrentProjectTransition } from '$routes/transitions';
+  import { getCurrentProjectOptions } from '$routes/transitions';
   import type { ProjectCategoryData, ProjectEntry } from '$routes/types.ts';
   import { keyBy } from 'es-toolkit';
 
@@ -40,11 +40,8 @@
       .filter(Boolean)
   ]);
 
-  let projectOptions = getCurrentProjectTransition();
-  let transition = $state(projectOptions.transition);
-  $effect(() => {
-    transition = projectOptions.transition;
-  });
+  let projectOptions = getCurrentProjectOptions();
+  let transition = $derived(projectOptions.transition);
 </script>
 
 <section class="entry-list project-category desktop-column-{category.column}">

src/routes/transitions.ts

@@ -49,15 +49,13 @@ export function noopTransition(node: Element): TransitionConfig {
 // accessible from any descendant component
 export type ProjectOptions = { transition: TransitionType };
 
-//
+// Persist the project options using context, so the descendants of the current
+// component will have access to the options
 export function setCurrentProjectOptions(projectOptions: ProjectOptions) {
   setContext('projectOptions', projectOptions);
 }
 
-export function getCurrentProjectTransition(): ProjectOptions {
-  return (
-    getContext('projectOptions') ?? {
-      transition: noopTransition
-    }
-  );
+// Retrieve the current project options from the context
+export function getCurrentProjectOptions(): ProjectOptions {
+  return getContext<ProjectOptions>('projectOptions');
 }