fix: switch docs layout to svelte 5, avoiding state mismatch

- Replaces PascalCase import with kebab-case, switches to modern Svelte 5 syntax including SVGAttributes type
- afterNavigate instead of navigating store
- snippet-based slots
- Makes Icon name prop optional and fixes aria attribute format.

Author: TorstenDittmann

src/lib/components/shared/button.svelte

@@ -2,7 +2,7 @@
     import { classNames } from '$lib/utils/classnames';
     import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
     import { cva, type VariantProps } from 'cva';
-    import InlineTag from '../ui/InlineTag.svelte';
+    import InlineTag from '../ui/inline-tag.svelte';
 
     const button = cva(
         [

src/lib/components/ui/icon/icon.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-    import { classNames } from '$lib/utils/classnames';
-    import type { SvelteHTMLElements } from 'svelte/elements';
+    import type { SVGAttributes } from 'svelte/elements';
     import type { IconType } from './types';
 
-    type Props = SvelteHTMLElements['svg'] & {
+    type Props = SVGAttributes<SVGElement> & {
         class?: string;
-        name: IconType;
+        name?: IconType;
     };
-
     const {
         xmlns = 'http://www.w3.org/2000/svg',
         viewBox = '0 0 24 24',

src/lib/layouts/Docs.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { navigating } from '$app/stores';
     import { writable } from 'svelte/store';
 
     export type DocsLayoutVariant = 'default' | 'expanded' | 'two-side-navs';
@@ -40,15 +39,14 @@
 </script>
 
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { Search, IsLoggedIn } from '$lib/components';
     import { isMac } from '$lib/utils/platform';
     import { getContext, setContext } from 'svelte';
     import { SOCIAL_STATS } from '$lib/constants';
     import { page } from '$app/state';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
     import { Button, Icon, InlineTag } from '$lib/components/ui';
+    import { afterNavigate } from '$app/navigation';
 
     interface Props {
         variant?: DocsLayoutVariant;
@@ -67,10 +65,10 @@
     let variantClass = $derived(variantClasses[variant]);
 
     $effect(() => {
-        $layoutState.currentVariant = variant;
+        $layoutState.currentVariant = isReferences ? 'expanded' : variant;
     });
 
-    navigating.subscribe(() => {
+    afterNavigate(() => {
         layoutState.update((n) => ({
             ...n,
             showReferences: false,

src/lib/layouts/Sidebar.svelte

@@ -138,7 +138,7 @@
                 rel="noopener noreferrer"
                 class="web-u-inline-width-100-percent-mobile"
             >
-                <Icon class="star" aria-hidden="true"></Icon>
+                <Icon class="star" aria-hidden />
                 <span class="text">Star on GitHub</span>
                 <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
             </Button>

src/routes/docs/references/+layout.svelte

@@ -3,21 +3,25 @@
     import Docs from '$lib/layouts/Docs.svelte';
     import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
     import { preferredPlatform, preferredVersion } from '$lib/utils/references';
+    import type { Snippet } from 'svelte';
 
-    $: expandable = !!page.url.pathname.match(
-        /\/docs\/references\/.*?\/(client|server).*?\/.*?\/?/
+    const { children }: { children: Snippet } = $props();
+
+    const expandable = $derived(
+        !!page.url.pathname.match(/\/docs\/references\/.*?\/(client|server).*?\/.*?\/?/)
     );
 
-    $: platform = $preferredPlatform ?? page.params?.platform ?? 'client-web';
+    const platform = $derived($preferredPlatform ?? page.params?.platform ?? 'client-web');
 
-    /* correct platform prefix for references page */
-    $: resolvedPlatformPrefix = /^server-|^client-/.test(platform)
-        ? platform
-        : `server-${platform}`;
+    const resolvedPlatformPrefix = $derived(
+        /^server-|^client-/.test(platform) ? platform : `server-${platform}`
+    );
 
-    $: prefix = `/docs/references/${$preferredVersion ?? page.params?.version ?? 'cloud'}/${resolvedPlatformPrefix}`;
+    const prefix = $derived(
+        `/docs/references/${$preferredVersion ?? page.params?.version ?? 'cloud'}/${resolvedPlatformPrefix}`
+    );
 
-    $: navigation = [
+    const navigation: NavTree = $derived([
         {
             label: 'Getting started',
             items: [
@@ -93,22 +97,7 @@
                 }
             ]
         }
-        // {
-        // 	label: 'Debugging',
-        // 	items: [
-        // 		{
-        // 			icon: 'icon-document-search',
-        // 			label: 'Response codes',
-        // 			href: '/docs/advanced/platform/response-codes'
-        // 		},
-        // 		{
-        // 			icon: 'icon-document-report',
-        // 			label: 'Rate-limits',
-        // 			href: '/docs/advanced/platform/rate-limits'
-        // 		}
-        // 	]
-        // }
-    ] as NavTree;
+    ]);
 
     const parent: NavParent = {
         href: '/docs',
@@ -118,5 +107,5 @@
 
 <Docs variant={expandable ? 'expanded' : 'two-side-navs'} isReferences={expandable}>
     <Sidebar {navigation} {expandable} {parent} />
-    <slot />
+    {@render children()}
 </Docs>