progress

website/src/routes/[[language]]/help/[...guide]/+page.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { getNextGuide, getPreviousGuide } from '$lib/components/docs/docs';
     import DocsContainer from '$lib/components/docs/DocsContainer.svelte';
     import { Button } from '$lib/components/ui/button';
     import { getURLForLanguage } from '$lib/utils';
-    import { ChevronLeft, ChevronRight, PenLine, CornerDownRight } from 'lucide-svelte';
-    import { _, locale } from '$lib/i18n';
+    import { ChevronLeft, ChevronRight, PenLine, CornerDownRight } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
 
-    export let data: {
-        guideModule: any;
-        guideTitles: Record<string, string>;
-    };
+    let { data }: { data: { guideModule: any; guideTitles: Record<string, string> } } = $props();
 
-    $: previousGuide = getPreviousGuide($page.params.guide);
-    $: nextGuide = getNextGuide($page.params.guide);
+    let previousGuide = $derived(getPreviousGuide(page.params.guide));
+    let nextGuide = $derived(getNextGuide(page.params.guide));
 </script>
 
 <div class="markdown flex flex-col gap-3">
@@ -25,9 +22,9 @@
         <Button
             variant="outline"
             class="mr-auto"
-            href={getURLForLanguage($locale, `/help/${previousGuide}`)}
+            href={getURLForLanguage(i18n.lang, `/help/${previousGuide}`)}
         >
-            <ChevronLeft size="14" class="mr-1 mt-0.5" />
+            <ChevronLeft size="14" class="mt-0.5" />
             {data.guideTitles[previousGuide]}
         </Button>
     {/if}
@@ -35,47 +32,47 @@
         <Button
             variant="outline"
             class="ml-auto"
-            href={getURLForLanguage($locale, `/help/${nextGuide}`)}
+            href={getURLForLanguage(i18n.lang, `/help/${nextGuide}`)}
         >
             {data.guideTitles[nextGuide]}
-            <ChevronRight size="14" class="ml-1 mt-0.5" />
+            <ChevronRight size="14" class="mt-0.5" />
         </Button>
     {/if}
 </div>
 
 <div class="flex flex-row flex-wrap justify-between items-start mt-10 gap-3">
     <div class="flex flex-col items-start">
-        <p class="text-sm text-muted-foreground">{$_('docs.answer_not_found')}</p>
+        <p class="text-sm text-muted-foreground">{i18n._('docs.answer_not_found')}</p>
         <Button
             variant="link"
             href="https://www.reddit.com/r/gpxstudio/"
             target="_blank"
             class="p-0 h-6 text-link"
         >
-            <CornerDownRight size="16" class="mr-1" />
-            {$_('docs.ask_on_reddit')}
+            <CornerDownRight size="16" />
+            {i18n._('docs.ask_on_reddit')}
         </Button>
     </div>
-    {#if $locale === 'en'}
+    {#if i18n.lang === 'en'}
         <Button
             variant="link"
-            href="https://github.com/gpxstudio/gpx.studio/edit/dev/website/src/lib/docs/en/{$page
+            href="https://github.com/gpxstudio/gpx.studio/edit/dev/website/src/lib/docs/en/{page
                 .params.guide}.mdx"
             target="_blank"
             class="p-0 h-6 ml-auto text-link"
         >
-            <PenLine size="16" class="mr-1" />
+            <PenLine size="16" />
             Edit this page on GitHub
         </Button>
     {:else}
         <Button
             variant="link"
-            href="https://crowdin.com/project/gpxstudio/{$locale}"
+            href="https://crowdin.com/project/gpxstudio/{i18n.lang}"
             target="_blank"
             class="p-0 h-6 ml-auto text-link"
         >
-            <PenLine size="16" class="mr-1" />
-            {$_('docs.translate')}
+            <PenLine size="16" />
+            {i18n._('docs.translate')}
         </Button>
     {/if}
 </div>