Refactoring storage viewer and its route

src/routes/preferences/debug/storage/[...path]/+page.svelte

@@ -1,24 +1,32 @@
-<script>
-  import { run } from 'svelte/legacy';
+<script lang="ts">
   import StorageViewer from "$components/debugging/StorageViewer.svelte";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
   import { goto } from "$app/navigation";
 
-  let pathString = $state('');
-  /** @type {string[]} */
-  let pathArray = $state([]);
-  /** @type {string|undefined} */
-  let storageName = $state(void 0);
+  let pathArray = $derived.by<string[]>(() => {
+    const pathString = page.params.path;
 
-  run(() => {
-    pathString = $page.params.path;
-    pathArray = pathString.length ? pathString.split("/") : [];
-    storageName = pathArray.shift()
+    return pathString.length ? pathString.split('/') : [];
+  });
 
-    if (pathArray.length && pathArray[pathArray.length - 1] === '') {
-      pathArray.pop();
+  let storageName = $derived.by<string | undefined>(() => {
+    return pathArray[0];
+  });
+
+  // Copy of the array without the storage or empty string at the end.
+  let normalizedPathArray = $derived.by<string[]>(() => {
+    // Excludes storage name
+    const resultArray = pathArray.slice(1);
+
+    // Getting rid of trailing empty entry
+    if (resultArray.length && resultArray[resultArray.length - 1] === '') {
+      resultArray.pop();
     }
 
+    return resultArray;
+  });
+
+  $effect(() => {
     if (!storageName) {
       goto("/preferences/debug/storage");
     }
@@ -26,5 +34,5 @@
 </script>
 
 {#if storageName}
-  <StorageViewer storage="{storageName}" path="{pathArray}"></StorageViewer>
+  <StorageViewer storage={storageName} path={normalizedPathArray}></StorageViewer>
 {/if}