Fix project stores

src/lib/helpers/faker.ts

@@ -6,12 +6,15 @@ import type { DatabaseType, Field } from '$database/(entity)';
 import { coerceToNumber, isWithinSafeRange } from '$lib/helpers/numbers';
 
 export async function generateFields(
-    project: Models.Project,
+    project: {
+        id: string;
+        region: string;
+    },
     databaseId: string,
     tableId: string,
     databaseType: DatabaseType
 ): Promise<Field[]> {
-    const client = sdk.forProject(project.region, project.$id);
+    const client = sdk.forProject(project.region, project.id);
 
     switch (databaseType) {
         case 'legacy':

src/routes/(console)/project-[region]-[project]/auth/+layout.svelte

@@ -1,111 +1,122 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { TeamsPanel, UsersPanel } from '$lib/commandCenter/panels';
     import { readOnly } from '$lib/stores/billing';
     import { canWriteTeams, canWriteUsers } from '$lib/stores/roles';
     import { GRACE_PERIOD_OVERRIDE } from '$lib/system';
-    import { project } from '../store';
     import { showCreateUser } from './+page.svelte';
     import { showCreateTeam } from './teams/+page.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { resolveRoute, withPath } from '$lib/stores/navigation';
 
-    $: $registerCommands([
-        {
-            label: 'Create user',
-            callback: async () => {
-                if (!page.url.pathname.endsWith('auth')) {
-                    await goto(`${base}/project-${$project.region}-${$project.$id}/auth`);
-                }
-                showCreateUser.set(true);
-            },
-            keys: page.url.pathname.endsWith('auth') ? ['c'] : ['c', 'u'],
-            group: 'users',
-            icon: IconPlus,
-            rank: page.url.pathname.endsWith('auth') ? 10 : 0,
-            disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteUsers
-        },
-        {
-            label: 'Create team',
-            callback: async () => {
-                if (!page.url.pathname.endsWith('teams')) {
-                    await goto(`${base}/project-${$project.region}-${$project.$id}/auth/teams`);
-                }
-                showCreateTeam.set(true);
+    let { children } = $props();
+
+    const authProjectRoute = $derived.by(() => {
+        return resolveRoute('/(console)/project-[region]-[project]/auth', {
+            ...page.params
+        });
+    });
+
+    $effect(() => {
+        $registerCommands([
+            {
+                label: 'Create user',
+                callback: async () => {
+                    if (!page.url.pathname.endsWith('auth')) {
+                        await goto(authProjectRoute);
+                    }
+                    showCreateUser.set(true);
+                },
+                keys: page.url.pathname.endsWith('auth') ? ['c'] : ['c', 'u'],
+                group: 'users',
+                icon: IconPlus,
+                rank: page.url.pathname.endsWith('auth') ? 10 : 0,
+                disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteUsers
             },
-            keys: page.url.pathname.endsWith('teams') ? ['c'] : ['c', 't'],
+            {
+                label: 'Create team',
+                callback: async () => {
+                    if (!page.url.pathname.endsWith('teams')) {
+                        await goto(withPath(authProjectRoute, '/teams'));
+                    }
+                    showCreateTeam.set(true);
+                },
+                keys: page.url.pathname.endsWith('teams') ? ['c'] : ['c', 't'],
 
-            group: 'teams',
-            icon: IconPlus,
-            rank: page.url.pathname.endsWith('teams') ? 10 : 0,
-            disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteTeams
-        },
-        {
-            label: 'Go to teams',
-            keys: ['g', 't'],
-            callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/auth/teams`);
+                group: 'teams',
+                icon: IconPlus,
+                rank: page.url.pathname.endsWith('teams') ? 10 : 0,
+                disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteTeams
             },
-            group: 'navigation',
-            rank: 1,
-            disabled: page.url.pathname.endsWith('teams')
-        },
-        {
-            label: 'Go to usage',
-            keys: ['g', 'u'],
-            callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/auth/usage`);
+            {
+                label: 'Go to teams',
+                keys: ['g', 't'],
+                callback: async () => {
+                    await goto(withPath(authProjectRoute, '/teams'));
+                },
+                group: 'navigation',
+                rank: 1,
+                disabled: page.url.pathname.endsWith('teams')
             },
-            group: 'navigation',
-            rank: 1,
-            disabled: page.url.pathname.endsWith('usage')
-        },
-        {
-            label: 'Go to security',
-            keys: ['g', 'e'],
-            callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/auth/security`);
+            {
+                label: 'Go to usage',
+                keys: ['g', 'u'],
+                callback: async () => {
+                    await goto(withPath(authProjectRoute, '/usage'));
+                },
+                group: 'navigation',
+                rank: 1,
+                disabled: page.url.pathname.endsWith('usage')
             },
-            group: 'navigation',
-            rank: 1,
-            disabled: page.url.pathname.endsWith('security') || !$canWriteUsers
-        },
-        {
-            label: 'Go to settings',
-            keys: ['g', 's'],
-            callback() {
-                goto(`${base}/project-${$project.region}-${$project.$id}/auth/settings`);
+            {
+                label: 'Go to security',
+                keys: ['g', 'e'],
+                callback: async () => {
+                    await goto(withPath(authProjectRoute, '/security'));
+                },
+                group: 'navigation',
+                rank: 1,
+                disabled: page.url.pathname.endsWith('security') || !$canWriteUsers
             },
-            group: 'navigation',
-            rank: 1,
-            disabled: page.url.pathname.endsWith('settings') || !$canWriteUsers
-        },
-        {
-            label: 'Find users',
-            callback: () => {
-                addSubPanel(UsersPanel);
+            {
+                label: 'Go to settings',
+                keys: ['g', 's'],
+                callback: async () => {
+                    await goto(withPath(authProjectRoute, '/settings'));
+                },
+                group: 'navigation',
+                rank: 1,
+                disabled: page.url.pathname.endsWith('settings') || !$canWriteUsers
             },
-            group: 'users',
-            rank: -1
-        },
-        {
-            label: 'Find teams',
-            callback: () => {
-                addSubPanel(TeamsPanel);
+            {
+                label: 'Find users',
+                callback: () => {
+                    addSubPanel(UsersPanel);
+                },
+                group: 'users',
+                rank: -1
             },
-            group: 'teams',
-            rank: -1
-        }
-    ]);
+            {
+                label: 'Find teams',
+                callback: () => {
+                    addSubPanel(TeamsPanel);
+                },
+                group: 'teams',
+                rank: -1
+            }
+        ]);
+    });
 
     // To prioritize the groups!
-    $: $updateCommandGroupRanks({ users: 300, teams: 200, security: 100, navigation: 50 });
+    $effect(() => {
+        $updateCommandGroupRanks({ users: 300, teams: 200, security: 100, navigation: 50 });
+    });
 </script>
 
 <svelte:head>
     <title>Auth - Appwrite</title>
 </svelte:head>
 
-<slot />
+{@render children?.()}

src/routes/(console)/project-[region]-[project]/auth/+page.svelte

@@ -34,7 +34,6 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
-
     import type { PageProps } from './$types';
 
     let { data }: PageProps = $props();

src/routes/(console)/project-[region]-[project]/auth/breadcrumbs.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
+    import { page } from '$app/state';
     import { base } from '$app/paths';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
-    import { project } from '../store';
 
     $: breadcrumbs = [
         {
             href: `${base}/organization-${$organization?.$id}`,
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project?.$id}`,
-            title: $project?.name
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            title: page.data?.project?.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project?.$id}/auth`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/auth`,
             title: 'Auth'
         }
     ];

src/routes/(console)/project-[region]-[project]/auth/security/+page.svelte

@@ -13,11 +13,11 @@
 </script>
 
 <Container>
-    <UpdateUsersLimit />
-    <UpdateSessionLength />
-    <UpdateSessionsLimit />
+    <UpdateUsersLimit project={data.project} />
+    <UpdateSessionLength project={data.project} />
+    <UpdateSessionsLimit project={data.project} />
     <PasswordPolicies project={data.project} />
     <SessionSecurity project={data.project} />
-    <UpdateMockNumbers />
-    <UpdateMembershipPrivacy />
+    <UpdateMockNumbers project={data.project} />
+    <UpdateMembershipPrivacy project={data.project} />
 </Container>

src/routes/(console)/project-[region]-[project]/auth/security/updateMembershipPrivacy.svelte

@@ -7,16 +7,22 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Selector } from '@appwrite.io/pink-svelte';
-    import { project } from '../../store';
+    import type { Models } from '@appwrite.io/console';
 
-    let authMembershipsUserName = $project?.authMembershipsUserName ?? true;
-    let authMembershipsUserEmail = $project?.authMembershipsUserEmail ?? true;
-    let authMembershipsMfa = $project?.authMembershipsMfa ?? true;
+    const {
+        project
+    }: {
+        project: Models.Project;
+    } = $props();
+
+    let authMembershipsMfa = $state(project?.authMembershipsMfa ?? true);
+    let authMembershipsUserName = $state(project?.authMembershipsUserName ?? true);
+    let authMembershipsUserEmail = $state(project?.authMembershipsUserEmail ?? true);
 
     async function updateMembershipsPrivacy() {
         try {
             await sdk.forConsole.projects.updateMembershipsPrivacy({
-                projectId: $project.$id,
+                projectId: project.$id,
                 userName: authMembershipsUserName,
                 userEmail: authMembershipsUserEmail,
                 mfa: authMembershipsMfa
@@ -60,9 +66,9 @@
         </svelte:fragment>
         <svelte:fragment slot="actions">
             <Button
-                disabled={authMembershipsUserName === ($project?.authMembershipsUserName ?? true) &&
-                    authMembershipsUserEmail === ($project?.authMembershipsUserEmail ?? true) &&
-                    authMembershipsMfa === ($project?.authMembershipsMfa ?? true)}
+                disabled={authMembershipsUserName === (project?.authMembershipsUserName ?? true) &&
+                    authMembershipsUserEmail === (project?.authMembershipsUserEmail ?? true) &&
+                    authMembershipsMfa === (project?.authMembershipsMfa ?? true)}
                 submit>Update</Button>
         </svelte:fragment>
     </CardGrid>