Fix: improve root directory modal behavior and UX

src/lib/components/git/selectRootModal.svelte

@@ -7,141 +7,260 @@
     import { installation, repository } from '$lib/stores/vcs';
     import { VCSDetectionType, type Models } from '@appwrite.io/console';
     import { DirectoryPicker } from '@appwrite.io/pink-svelte';
-    import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
 
     type Directory = {
         title: string;
         fullPath: string;
-        fileCount: number;
-        thumbnailUrl: string;
+        fileCount?: number;
+        thumbnailUrl?: string;
         children?: Directory[];
         loading?: boolean;
     };
 
-    export let show = false;
-    export let rootDir: string;
-    export let product: 'sites' | 'functions' = 'functions';
-    export let branch: string;
+    let {
+        show = $bindable(false),
+        rootDir = $bindable(''),
+        product = 'functions' as 'sites' | 'functions',
+        branch
+    }: {
+        show?: boolean;
+        rootDir?: string;
+        product?: 'sites' | 'functions';
+        branch: string;
+    } = $props();
 
-    let isLoading = true;
-    let directories: Directory[] = [
+    let isLoading = $state(true);
+    let directories = $state<Directory[]>([
         {
             title: 'Root',
-            fullPath: './',
+            fullPath: '/',
             fileCount: 0,
-            thumbnailUrl: 'root',
+            thumbnailUrl: $iconPath('empty', 'grayscale'),
             children: [],
             loading: false
         }
-    ];
-    let currentPath: string = './';
-    let currentDir: Directory;
-    export let expanded = writable(['lib-0', 'tree-0']);
+    ]);
+    let currentPath = $state('/');
+    let expandedStore = writable<string[]>([]);
+    let initialized = $state(false);
+    let treeVersion = $state(0);
+    let initialPath = $state('/');
+    const inFlightPaths = new Set<string>();
 
-    onMount(async () => {
+    let hasChanges = $derived(currentPath !== initialPath);
+
+    function normalizePath(path: string): string {
+        if (!path || path === './' || path === '/') return '/';
+        const trimmed = path.replace(/^\.\//, '').replace(/^\/+/, '').replace(/\/$/, '');
+        return `/${trimmed}`;
+    }
+
+    function toProviderPath(path: string): string {
+        const normalized = normalizePath(path);
+        if (normalized === '/') return './';
+        return `./${normalized.slice(1)}`;
+    }
+
+    function bumpTreeVersion() {
+        treeVersion += 1;
+    }
+
+    async function detectRuntimeOrFramework(path: string): Promise<string | null> {
         try {
-            const content = await sdk
+            const detection = await sdk
                 .forProject(page.params.region, page.params.project)
-                .vcs.getRepositoryContents({
+                .vcs.createRepositoryDetection({
                     installationId: $installation.$id,
                     providerRepositoryId: $repository.id,
-                    providerRootDirectory: currentPath,
-                    providerReference: branch
+                    type:
+                        product === 'sites' ? VCSDetectionType.Framework : VCSDetectionType.Runtime,
+                    providerRootDirectory: toProviderPath(path)
                 });
-            directories[0].fileCount = content.contents?.length ?? 0;
-            directories[0].children = content.contents
-                .filter((e) => e.isDirectory)
-                .map((dir) => ({
-                    title: dir.name,
-                    fullPath: currentPath + dir.name,
-                    fileCount: undefined,
-                    thumbnailUrl: dir.name,
-                    loading: false
-                }));
-            currentDir = directories[0];
-            isLoading = false;
-        } catch {
-            return;
-        }
-    });
-
-    async function fetchContents(e: CustomEvent) {
-        const path = e.detail.fullPath as string;
-        currentPath = path;
 
-        const pathSegments = path.split('/').filter((segment) => segment !== '.' && segment !== '');
-        let traversedDir = directories[0]; // Start at root
-
-        for (const segment of pathSegments) {
-            const nextDir = traversedDir.children?.find((dir) => dir.title === segment);
-            if (!nextDir) break;
-            traversedDir = nextDir;
+            const iconName =
+                product === 'sites'
+                    ? detection.framework
+                    : (detection as unknown as Models.DetectionRuntime).runtime;
+            return iconName ? $iconPath(iconName, 'color') : null;
+        } catch (err) {
+            return null;
         }
+    }
 
-        currentDir = traversedDir;
-
-        if (!currentDir.fileCount) {
-            currentDir.loading = true;
-            directories = [...directories];
+    $effect(() => {
+        if (!isLoading) return;
 
+        (async () => {
             try {
                 const content = await sdk
                     .forProject(page.params.region, page.params.project)
                     .vcs.getRepositoryContents({
                         installationId: $installation.$id,
                         providerRepositoryId: $repository.id,
-                        providerRootDirectory: path,
+                        providerRootDirectory: './',
                         providerReference: branch
                     });
 
-                const fileCount = content.contents?.length ?? 0;
-                const contentDirectories = content.contents.filter((e) => e.isDirectory);
+                directories[0] = {
+                    ...directories[0],
+                    fileCount: content.contents?.length ?? 0,
+                    children: content.contents
+                        .filter((e) => e.isDirectory)
+                        .map((dir) => ({
+                            title: dir.name,
+                            fullPath: `/${dir.name}`,
+                            fileCount: undefined,
+                            // set logo for root directories
+                            thumbnailUrl: $iconPath('empty', 'grayscale'),
+                            loading: false
+                        }))
+                };
 
-                if (contentDirectories.length === 0) {
-                    return;
+                const detectedIcon = await detectRuntimeOrFramework('/');
+                if (detectedIcon) {
+                    directories[0].thumbnailUrl = detectedIcon;
                 }
 
-                currentDir.fileCount = fileCount;
-                currentDir.children = contentDirectories.map((dir) => ({
-                    title: dir.name,
-                    fullPath: path + '/' + dir.name,
-                    fileCount: undefined,
-                    thumbnailUrl: undefined
-                }));
-                const runtime = await sdk
-                    .forProject(page.params.region, page.params.project)
-                    .vcs.createRepositoryDetection({
-                        installationId: $installation.$id,
-                        providerRepositoryId: $repository.id,
-                        type:
-                            product === 'sites'
-                                ? VCSDetectionType.Framework
-                                : VCSDetectionType.Runtime,
-                        providerRootDirectory: path
-                    });
-                if (product === 'sites') {
-                    currentDir.children.forEach((dir) => {
-                        dir.thumbnailUrl = $iconPath(runtime.framework, 'color');
-                    });
-                } else if (product === 'functions') {
-                    currentDir.children.forEach((dir) => {
-                        dir.thumbnailUrl = $iconPath(
-                            (runtime as unknown as Models.DetectionRuntime).runtime,
-                            'color'
-                        );
-                    });
-                }
-                directories = [...directories];
-                $expanded = [...$expanded, path];
+                isLoading = false;
+                expandedStore.update((exp) => [...new Set([...exp, '/'])]);
+                bumpTreeVersion();
             } catch (error) {
-                console.error(error);
-            } finally {
-                currentDir.loading = false;
+                console.error('Failed to load root directory:', error);
+                isLoading = false;
+            }
+        })();
+    });
+
+    function getDirByPath(path: string): Directory | null {
+        const segments = path.split('/').filter((s) => s !== '');
+        let node: Directory | null = directories[0] ?? null;
+        for (const seg of segments) {
+            const next = node?.children?.find((d) => d.title === seg) ?? null;
+            if (!next) return null;
+            node = next;
+        }
+        return node;
+    }
+
+    async function loadPath(path: string) {
+        // skip loading if this directory was donee
+        const targetDir = getDirByPath(path);
+        if (!targetDir || targetDir.fileCount !== undefined) return;
+
+        if (inFlightPaths.has(path)) return;
+        inFlightPaths.add(path);
+        targetDir.loading = true;
+
+        try {
+            const content = await sdk
+                .forProject(page.params.region, page.params.project)
+                .vcs.getRepositoryContents({
+                    installationId: $installation.$id,
+                    providerRepositoryId: $repository.id,
+                    providerRootDirectory: toProviderPath(path),
+                    providerReference: branch
+                });
+
+            const fileCount = content.contents?.length ?? 0;
+            const contentDirectories = content.contents.filter((e) => e.isDirectory);
+
+            if (contentDirectories.length === 0) {
+                expandedStore.update((exp) => [...new Set([...exp, path])]);
+                return;
+            }
+
+            targetDir.fileCount = fileCount;
+
+            // set logo only for the current folder, not for the children
+            const detectedIcon = await detectRuntimeOrFramework(path);
+            if (detectedIcon) {
+                targetDir.thumbnailUrl = detectedIcon;
             }
+
+            const nextChildren = contentDirectories.map((dir) => ({
+                title: dir.name,
+                fullPath: path === '/' ? `/${dir.name}` : `${path}/${dir.name}`,
+                fileCount: undefined,
+                thumbnailUrl: $iconPath('empty', 'grayscale')
+            }));
+            targetDir.children = nextChildren;
+            bumpTreeVersion();
+
+            expandedStore.update((exp) => [...new Set([...exp, path])]);
+        } catch (error) {
+            console.error('Failed to load directory:', error);
+        } finally {
+            targetDir.loading = false;
+            inFlightPaths.delete(path);
         }
     }
 
+    async function expandToPath(path: string) {
+        const normalized = normalizePath(path);
+        const segments = normalized.split('/').filter((s) => s !== '');
+
+        const pathsToExpand = ['/'];
+
+        let currentDir = directories[0];
+        let currentPath = '/';
+
+        for (const segment of segments) {
+            currentPath = currentPath === '/' ? `/${segment}` : `${currentPath}/${segment}`;
+            pathsToExpand.push(currentPath);
+
+            if (!currentDir.children) {
+                currentDir.children = [];
+            }
+
+            let nextDir = currentDir.children.find((d) => d.title === segment);
+            if (!nextDir) {
+                nextDir = {
+                    title: segment,
+                    fullPath: currentPath,
+                    fileCount: undefined,
+                    thumbnailUrl: $iconPath('empty', 'grayscale'),
+                    children: []
+                };
+                currentDir.children = [...currentDir.children, nextDir];
+            }
+
+            currentDir = nextDir;
+        }
+
+        expandedStore.update((exp) => [...new Set([...exp, ...pathsToExpand])]);
+        bumpTreeVersion();
+
+        for (const pathToLoad of pathsToExpand) {
+            loadPath(pathToLoad);
+        }
+
+        currentPath = normalized;
+    }
+
+    $effect(() => {
+        if (show && !initialized && !isLoading) {
+            initialized = true;
+            const normalized = normalizePath(rootDir || '/');
+            initialPath = normalized;
+            currentPath = normalized;
+            expandToPath(normalized);
+        }
+    });
+
+    // reset state when modal closes
+    $effect(() => {
+        if (!show && initialized) {
+            initialized = false;
+        }
+    });
+
+    async function handleSelect(detail: { fullPath: string }) {
+        const path = detail.fullPath as string;
+        currentPath = path;
+        loadPath(path);
+    }
+
     function handleSubmit() {
         rootDir = currentPath;
         show = false;
@@ -152,16 +271,18 @@
     <span slot="description">
         Select the directory where your site code is located using the menu below.
     </span>
-    <DirectoryPicker
-        {directories}
-        {isLoading}
-        bind:expanded
-        selected={currentPath}
-        openTo={currentPath}
-        on:select={fetchContents} />
+    {#key treeVersion}
+        <DirectoryPicker
+            {directories}
+            {isLoading}
+            bind:expanded={expandedStore}
+            bind:selected={currentPath}
+            openTo={initialPath}
+            onSelect={handleSelect} />
+    {/key}
 
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
-        <Button submit disabled={isLoading}>Save</Button>
+        <Button submit disabled={isLoading || !hasChanges}>Save</Button>
     </svelte:fragment>
 </Modal>