refactor: remove deprecated kit page store

fixes #118

Author: moonlitgrace

frontend/src/app.d.ts

@@ -1,5 +1,5 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
-import type { components } from '$lib/clients/v1';
+import type { components } from '$lib/clients/v1/schema';
 
 type Profile = components['schemas']['Profile'];
 

frontend/src/lib/components/header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import ChartBarsIcon from '$lib/components/icons/chart_bars.svelte';
   import QuibbleLogo from '$lib/components/icons/logos/quibble.svelte';
   import QuibbleTextLogo from '$lib/components/icons/logos/quibble_text.svelte';
@@ -15,7 +15,7 @@
   let { on_menu_click }: Props = $props();
 
   const show_search_in_community = $derived(
-    $page.url.pathname.includes('/q/') && $page.data.community
+    page.url.pathname.includes('/q/') && page.data.community
   );
 
   const modalsStore = createModalsStore(),
@@ -61,17 +61,17 @@
         <div
           class="ml-2 flex items-center gap-2 rounded-lg border border-neutral bg-base-100 p-1 px-1.5"
         >
-          <Avatar src={$page.data.community.avatar} class="size-5 rounded-full" />
+          <Avatar src={page.data.community.avatar} class="size-5 rounded-full" />
           <h5 class="whitespace-nowrap text-xs font-medium">
-            q/{$page.data.community.name}
+            q/{page.data.community.name}
           </h5>
         </div>
       {/if}
       <input
         type="text"
         class="grow border-none text-sm font-medium focus:ring-0"
         placeholder={show_search_in_community
-          ? `Search in q/${$page.params.name}`
+          ? `Search in q/${page.params.name}`
           : 'Search...'}
       />
     </label>

frontend/src/lib/components/post.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import type { components } from '$lib/clients/v1/schema';
   import Avatar from '$lib/components/ui/avatar.svelte';
   import BackdropImage from '$lib/components/ui/backdrop_image.svelte';
@@ -30,11 +30,11 @@
   }
 
   function get_avatar() {
-    return $page.url.pathname.includes('/q/') ? post.poster.avatar : post.poster.avatar;
+    return page.url.pathname.includes('/q/') ? post.poster.avatar : post.poster.avatar;
   }
 
   function get_name() {
-    return $page.url.pathname.includes('/q/')
+    return page.url.pathname.includes('/q/')
       ? `u/${post.poster.username}`
       : `q/${post.community.name}`;
   }

frontend/src/routes/(app)/q/+error.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import Quibble404 from '$lib/assets/vectors/quibble_404.svg';
 </script>
 
@@ -12,7 +12,7 @@
   <div class="flex flex-col">
     <h4 class="text-xl font-bold text-error">oh noh!!</h4>
     <!-- eslint-disable svelte/no-at-html-tags -->
-    <h5>{@html $page.error?.message}</h5>
+    <h5>{@html page.error?.message}</h5>
     <!-- eslint-enable svelte/no-at-html-tags -->
     <a href="/" aria-label="home" class="btn btn-primary btn-sm mt-4 w-max">
       <coreicons-shape-home class="size-4"></coreicons-shape-home>

frontend/src/routes/+error.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import Quibble404 from '$lib/assets/vectors/quibble_404.svg';
 </script>
 
@@ -11,7 +11,7 @@
   <img src={Quibble404} class="w-28" alt="" />
   <div class="flex flex-col">
     <h4 class="text-xl font-bold text-error">oops!!</h4>
-    <h5>{$page.error?.message}</h5>
+    <h5>{page.error?.message}</h5>
     <a href="/" aria-label="home" class="btn btn-primary btn-sm mt-4 w-max">
       <coreicons-shape-home class="size-4"></coreicons-shape-home>
       Back to home