chore: use writable derived in more places (#17248)

chore(web): use writable derived in more places

web/src/lib/components/album-page/album-title.svelte

@@ -13,11 +13,7 @@
 
   let { id, albumName = $bindable(), isOwned, onUpdate }: Props = $props();
 
-  let newAlbumName = $state(albumName);
-
-  $effect(() => {
-    newAlbumName = albumName;
-  });
+  let newAlbumName = $derived(albumName);
 
   const handleUpdateName = async () => {
     if (newAlbumName === albumName) {

web/src/lib/components/elements/date-input.svelte

@@ -16,10 +16,7 @@
 
   // Updating `value` directly causes the date input to reset itself or
   // interfere with user changes.
-  let updatedValue = $state<string>();
-  $effect(() => {
-    updatedValue = value;
-  });
+  let updatedValue = $derived(value);
 </script>
 
 <input

web/src/lib/components/shared-components/autogrow-textarea.svelte

@@ -11,10 +11,7 @@
 
   let { content = '', class: className = '', onContentUpdate = () => null, placeholder = '' }: Props = $props();
 
-  let newContent = $state(content);
-  $effect(() => {
-    newContent = content;
-  });
+  let newContent = $derived(content);
 
   const updateContent = () => {
     if (content === newContent) {

web/src/lib/components/shared-components/combobox.svelte

@@ -71,7 +71,7 @@
    * Keeps track of whether the combobox is actively being used.
    */
   let isActive = $state(false);
-  let searchQuery = $state(selectedOption?.label || '');
+  let searchQuery = $derived(selectedOption?.label || '');
   let selectedIndex: number | undefined = $state();
   let optionRefs: HTMLElement[] = $state([]);
   let input = $state<HTMLInputElement>();
@@ -228,10 +228,6 @@
 
   const getInputPosition = () => input?.getBoundingClientRect();
 
-  $effect(() => {
-    searchQuery = selectedOption ? selectedOption.label : '';
-  });
-
   let filteredOptions = $derived.by(() => {
     const _options = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
 

web/src/lib/components/shared-components/star-rating.svelte

@@ -14,15 +14,11 @@
 
   let { count = 5, rating, readOnly = false, onRating }: Props = $props();
 
-  let ratingSelection = $state(rating);
+  let ratingSelection = $derived(rating);
   let hoverRating = $state(0);
   let focusRating = $state(0);
   let timeoutId: ReturnType<typeof setTimeout> | undefined;
 
-  $effect(() => {
-    ratingSelection = rating;
-  });
-
   const starIcon =
     'M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z';
   const id = generateId();

web/src/lib/components/shared-components/tree/tree.svelte

@@ -16,14 +16,11 @@
 
   let { tree, parent, value, active = '', icons, getLink, getColor }: Props = $props();
 
-  let path = $derived(normalizeTreePath(`${parent}/${value}`));
-  let isActive = $derived(active === path || active.startsWith(`${path}/`));
-  let isOpen = $state(false);
-  $effect(() => {
-    isOpen = isActive;
-  });
-  let isTarget = $derived(active === path);
-  let color = $derived(getColor(path));
+  const path = $derived(normalizeTreePath(`${parent}/${value}`));
+  const isActive = $derived(active === path || active.startsWith(`${path}/`));
+  const isTarget = $derived(active === path);
+  const color = $derived(getColor(path));
+  let isOpen = $derived(isActive);
 
   const onclick = (event: MouseEvent) => {
     event.preventDefault();

web/src/routes/auth/register/+page.svelte

@@ -13,8 +13,10 @@
   let password = $state('');
   let confirmPassword = $state('');
   let name = $state('');
-  let errorMessage = $state('');
-  let valid = $derived(password === confirmPassword && confirmPassword.length > 0);
+  let errorMessage = $derived(
+    password === confirmPassword || confirmPassword.length === 0 ? '' : $t('password_does_not_match'),
+  );
+  const valid = $derived(password === confirmPassword && confirmPassword.length > 0);
 
   interface Props {
     data: PageData;
@@ -22,10 +24,6 @@
 
   let { data }: Props = $props();
 
-  $effect(() => {
-    errorMessage = password === confirmPassword || confirmPassword.length === 0 ? '' : $t('password_does_not_match');
-  });
-
   const onSubmit = async (event: Event) => {
     event.preventDefault();