From a051ec84083762c0efc1456613436e78f639d5f6 Mon Sep 17 00:00:00 2001
From: axel <contact@axel.moe>
Date: Sat, 19 Apr 2025 19:52:26 +0200
Subject: [PATCH] refactor: change global store from stores to states

---
 src/lib/v2/globalStore.svelte.ts              | 7 +++++++
 src/lib/v2/globalStores.ts                    | 3 ---
 src/routes/dash/+layout.svelte                | 6 +++---
 src/routes/dash/account/+page.svelte          | 4 ++--
 src/routes/dash/account/sessions/+page.svelte | 4 ++--
 src/routes/dash/devices/+page.svelte          | 4 ++--
 src/routes/dash/devices/[id]/+page.svelte     | 4 ++--
 src/routes/dash/groups/+page.svelte           | 4 ++--
 src/routes/dash/groups/[id]/+page.svelte      | 4 ++--
 src/routes/dash/users/+page.svelte            | 4 ++--
 src/routes/dash/users/[id]/+page.svelte       | 4 ++--
 11 files changed, 26 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/v2/globalStore.svelte.ts
 delete mode 100644 src/lib/v2/globalStores.ts

diff --git a/src/lib/v2/globalStore.svelte.ts b/src/lib/v2/globalStore.svelte.ts
new file mode 100644
index 0000000..51d2430
--- /dev/null
+++ b/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 ?? '',
+});
diff --git a/src/lib/v2/globalStores.ts b/src/lib/v2/globalStores.ts
deleted file mode 100644
index 8bf91e9..0000000
--- a/src/lib/v2/globalStores.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const pageTitle = writable('');
diff --git a/src/routes/dash/+layout.svelte b/src/routes/dash/+layout.svelte
index 6e53896..b749212 100644
--- a/src/routes/dash/+layout.svelte
+++ b/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">
diff --git a/src/routes/dash/account/+page.svelte b/src/routes/dash/account/+page.svelte
index dd7e371..c9054c9 100644
--- a/src/routes/dash/account/+page.svelte
+++ b/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>
diff --git a/src/routes/dash/account/sessions/+page.svelte b/src/routes/dash/account/sessions/+page.svelte
index 6a8142d..a3e0b36 100644
--- a/src/routes/dash/account/sessions/+page.svelte
+++ b/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) {
diff --git a/src/routes/dash/devices/+page.svelte b/src/routes/dash/devices/+page.svelte
index 1c73430..96cc5b0 100644
--- a/src/routes/dash/devices/+page.svelte
+++ b/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">
diff --git a/src/routes/dash/devices/[id]/+page.svelte b/src/routes/dash/devices/[id]/+page.svelte
index c4eac6e..f59369a 100644
--- a/src/routes/dash/devices/[id]/+page.svelte
+++ b/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
diff --git a/src/routes/dash/groups/+page.svelte b/src/routes/dash/groups/+page.svelte
index 3dceba3..17b67fa 100644
--- a/src/routes/dash/groups/+page.svelte
+++ b/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">
diff --git a/src/routes/dash/groups/[id]/+page.svelte b/src/routes/dash/groups/[id]/+page.svelte
index f46ebd6..0153c4a 100644
--- a/src/routes/dash/groups/[id]/+page.svelte
+++ b/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) {
diff --git a/src/routes/dash/users/+page.svelte b/src/routes/dash/users/+page.svelte
index 703cdd0..127fe1d 100644
--- a/src/routes/dash/users/+page.svelte
+++ b/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">
diff --git a/src/routes/dash/users/[id]/+page.svelte b/src/routes/dash/users/[id]/+page.svelte
index 4fa0350..9f5cf59 100644
--- a/src/routes/dash/users/[id]/+page.svelte
+++ b/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) {