Replacing stores reads with $ syntax instead of manual subscriptions

src/routes/settings/maintenance/+page.svelte

@@ -2,31 +2,15 @@
     import Menu from "$components/ui/menu/Menu.svelte";
     import MenuLink from "$components/ui/menu/MenuLink.svelte";
     import {activeProfileStore, maintenanceProfilesStore} from "$stores/maintenance-profiles-store.js";
-    import {onDestroy} from "svelte";
 
     /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */
     let profiles = [];
-    /** @type {string|null} */
-    let activeProfileId = null;
 
-    const unsubscribeFromProfiles = maintenanceProfilesStore.subscribe(updatedProfiles => {
-        profiles = updatedProfiles.sort(
-                (a, b) => b.settings.name.localeCompare(a.settings.name)
-        );
-    });
-
-    const unsubscribeFromActiveProfile = activeProfileStore.subscribe(profileId => {
-        activeProfileId = profileId;
-    });
+    $: profiles = $maintenanceProfilesStore.sort((a, b) => b.settings.name.localeCompare(a.settings.name));
 
     function resetActiveProfile() {
-        activeProfileStore.set(null);
+        $activeProfileStore = null;
     }
-
-    onDestroy(() => {
-        unsubscribeFromProfiles();
-        unsubscribeFromActiveProfile();
-    });
 </script>
 
 <Menu>
@@ -37,10 +21,10 @@
     {/if}
     {#each profiles as profile}
         <MenuLink href="/settings/maintenance/{profile.id}"
-                  icon="{activeProfileId === profile.id ? 'tag' : null}">
+                  icon="{$activeProfileStore === profile.id ? 'tag' : null}">
             {profile.settings.name}
         </MenuLink>
     {/each}
     <hr>
     <MenuLink href="#" on:click={resetActiveProfile}>Reset Active Profile</MenuLink>
-</Menu>
+</Menu>

src/routes/settings/maintenance/[id]/+page.svelte

@@ -16,34 +16,26 @@
         goto('/maintenance/profiles/new/edit');
     }
 
-    const unsubscribeFromProfiles = maintenanceProfilesStore.subscribe(profiles => {
-        const resolvedProfile = profiles.find(p => p.id === profileId);
+    $: {
+        const resolvedProfile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
 
         if (resolvedProfile) {
             profile = resolvedProfile;
-            return;
+        } else {
+            console.warn(`Profile ${profileId} not found.`);
+            goto('/settings/maintenance');
         }
+    }
 
-        console.warn(`Profile ${profileId} not found.`);
-        goto('/settings/maintenance');
-    });
-
-    const unsubscribeFromActiveProfile = activeProfileStore.subscribe(activeProfileId => {
-        isActiveProfile = activeProfileId === profileId;
-    })
+    $: isActiveProfile = $activeProfileStore === profileId;
 
     function activateProfile() {
         if (isActiveProfile) {
             return;
         }
 
-        activeProfileStore.set(profileId);
+        $activeProfileStore = profileId;
     }
-
-    onDestroy(() => {
-        unsubscribeFromProfiles();
-        unsubscribeFromActiveProfile();
-    });
 </script>
 
 <Menu>
@@ -81,4 +73,4 @@
         flex-wrap: wrap;
         gap: 6px;
     }
-</style>
+</style>

src/routes/settings/maintenance/[id]/edit/+page.svelte

@@ -21,28 +21,19 @@
     /** @type {string[]} */
     let tagsList = [];
 
-    const unsubscribeFromProfiles = maintenanceProfilesStore.subscribe(profiles => {
-        if (profileId === 'new') {
-            targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});
-            return;
-        }
+    if (profileId === 'new') {
+        targetProfile = new MaintenanceProfile(crypto.randomUUID(), {});
+    } else {
+        const maybeExistingProfile = $maintenanceProfilesStore.find(profile => profile.id === profileId);
 
-        const maybeProfile = profiles.find(p => p.id === profileId);
-
-        if (!maybeProfile) {
+        if (maybeExistingProfile) {
+            targetProfile = maybeExistingProfile;
+            profileName = targetProfile.settings.name;
+            tagsList = [...targetProfile.settings.tags];
+        } else {
             goto('/settings/maintenance');
-            return;
         }
-
-        targetProfile = maybeProfile;
-
-        profileName = targetProfile.settings.name;
-        tagsList = [...targetProfile.settings.tags];
-
-        queueMicrotask(() => {
-            unsubscribeFromProfiles();
-        })
-    });
+    }
 
     async function saveProfile() {
         if (!targetProfile) {
@@ -66,8 +57,6 @@
         await targetProfile.delete();
         await goto('/settings/maintenance');
     }
-
-    onDestroy(unsubscribeFromProfiles);
 </script>
 
 <Menu>