refactor: change global store from stores to states

src/lib/v2/globalStore.svelte.ts

@@ -0,0 +1,7 @@
+import { env } from '$env/dynamic/public';
+
+export const store = $state<{
+  pageTitle: string;
+}>({
+  pageTitle: env.PUBLIC_SITE_NAME ?? '',
+});

src/lib/v2/globalStores.ts

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const pageTitle = writable('');

src/routes/dash/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { env } from '$env/dynamic/public';
-  import { pageTitle } from '$lib/v2/globalStores.js';
+  import { store } from '$lib/v2/globalStore.svelte.js';
   import { slideFade } from '$lib/v2/transitions/slideFade.js';
   import NavBar from '$lib/v2/ui/NavBar.svelte';
   import NavBarLink from '$lib/v2/ui/NavBarLink.svelte';
@@ -23,7 +23,7 @@
 </script>
 
 <svelte:head>
-  <title>{env.PUBLIC_SITE_NAME} - {$pageTitle}</title>
+  <title>{env.PUBLIC_SITE_NAME} - {store.pageTitle}</title>
 </svelte:head>
 
 <div
@@ -44,7 +44,7 @@
       class="flex grow items-center gap-3 text-neutral-100 text-sm sm:text-base font-light shadow"
     >
       <IconChevronRight />
-      <p>{$pageTitle}</p>
+      <p>{store.pageTitle}</p>
     </div>
     <DropdownMenu.Root>
       <div class="rounded-full bg-neutral-950 border border-neutral-600 p-1">

src/routes/dash/account/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import InputText from '$lib/v2/forms/InputText.svelte';
-  import { pageTitle } from '$lib/v2/globalStores';
+  import { store } from '$lib/v2/globalStore.svelte.js';
   import EditPage from '$lib/v2/snippets/EditPage.svelte';
 
   let { data, form } = $props();
 
-  $pageTitle = 'Account details';
+  store.pageTitle = 'Account details';
 </script>
 
 <p class="text-white">{form?.error}</p>

src/routes/dash/account/sessions/+page.svelte

@@ -1,13 +1,13 @@
 <script>
   import { browser } from '$app/environment';
-  import { pageTitle } from '$lib/v2/globalStores.js';
+  import { store } from '$lib/v2/globalStore.svelte.js';
   import ListPage from '$lib/v2/snippets/ListPage.svelte';
   import { Button, Separator } from 'bits-ui';
   import IconPlugConnectedX from '~icons/tabler/plug-connected-x';
 
   let { data, form } = $props();
 
-  $pageTitle = 'My active sessions';
+  store.pageTitle = 'My active sessions';
 
   $effect(() => {
     if (form?.success && browser) {

src/routes/dash/devices/+page.svelte

@@ -1,11 +1,11 @@
 <script>
-  import { pageTitle } from '$lib/v2/globalStores.js';
+  import { store } from '$lib/v2/globalStore.svelte.js';
   import ListPage from '$lib/v2/snippets/ListPage.svelte';
   import ResCard from '$lib/v2/ui/ResCard.svelte';
 
   let { data } = $props();
 
-  $pageTitle = 'Listing all devices';
+  store.pageTitle = 'Listing all devices';
 </script>
 
 <ListPage createHref={data.user.admin ? '/dash/devices/new' : null} msgAdd="Add Device">

src/routes/dash/devices/[id]/+page.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { browser } from '$app/environment';
   import InputText from '$lib/v2/forms/InputText.svelte';
-  import { pageTitle } from '$lib/v2/globalStores';
+  import { store } from '$lib/v2/globalStore.svelte.js';
   import EditPage from '$lib/v2/snippets/EditPage.svelte';
   import Collapsible from '$lib/v2/ui/Collapsible.svelte';
 
   let { data, form } = $props();
 
-  $pageTitle = data.device ? 'Editing device: ' + data.device.name : 'Adding new Device';
+  store.pageTitle = data.device ? 'Editing device: ' + data.device.name : 'Adding new Device';
 
   // store the state of data that can be collapsed on the form and bind to it
   // as to not lose user edits when the form is collapsed and expanded again

src/routes/dash/groups/+page.svelte

@@ -1,11 +1,11 @@
 <script>
-  import { pageTitle } from '$lib/v2/globalStores.js';
+  import { store } from '$lib/v2/globalStore.svelte.js';
   import ListPage from '$lib/v2/snippets/ListPage.svelte';
   import ResCard from '$lib/v2/ui/ResCard.svelte';
 
   let { data } = $props();
 
-  $pageTitle = 'Listing all groups';
+  store.pageTitle = 'Listing all groups';
 </script>
 
 <ListPage createHref={data.user.admin ? '/dash/groups/new' : null} msgAdd="Add Group">

src/routes/dash/groups/[id]/+page.svelte

@@ -2,12 +2,12 @@
   import { browser } from '$app/environment';
   import InputCombobox from '$lib/v2/forms/InputCombobox.svelte';
   import InputText from '$lib/v2/forms/InputText.svelte';
-  import { pageTitle } from '$lib/v2/globalStores';
+  import { store } from '$lib/v2/globalStore.svelte.js';
   import EditPage from '$lib/v2/snippets/EditPage.svelte';
 
   let { data, form } = $props();
 
-  $pageTitle = data.group ? 'Editing group: ' + data.group.name : 'Adding new group';
+  store.pageTitle = data.group ? 'Editing group: ' + data.group.name : 'Adding new group';
 
   $effect(() => {
     if (form?.success && browser) {

src/routes/dash/users/+page.svelte

@@ -1,11 +1,11 @@
 <script>
-  import { pageTitle } from '$lib/v2/globalStores.js';
+  import { store } from '$lib/v2/globalStore.svelte.js';
   import ListPage from '$lib/v2/snippets/ListPage.svelte';
   import ResCard from '$lib/v2/ui/ResCard.svelte';
 
   let { data } = $props();
 
-  $pageTitle = 'Listing all users';
+  store.pageTitle = 'Listing all users';
 </script>
 
 <ListPage createHref={data.user.admin ? '/dash/users/new' : null} msgAdd="Add User">

src/routes/dash/users/[id]/+page.svelte

@@ -3,12 +3,12 @@
   import InputCheckbox from '$lib/v2/forms/InputCheckbox.svelte';
   import InputCombobox from '$lib/v2/forms/InputCombobox.svelte';
   import InputText from '$lib/v2/forms/InputText.svelte';
-  import { pageTitle } from '$lib/v2/globalStores';
+  import { store } from '$lib/v2/globalStore.svelte.js';
   import EditPage from '$lib/v2/snippets/EditPage.svelte';
 
   let { data, form } = $props();
 
-  $pageTitle = data.user ? 'Editing user: ' + data.user.name : 'Adding new user';
+  store.pageTitle = data.user ? 'Editing user: ' + data.user.name : 'Adding new user';
 
   $effect(() => {
     if (form?.success && browser) {