Root directory

v2/pink-sb/package.json

@@ -39,6 +39,7 @@
         "svelte": "^4.0.0"
     },
     "devDependencies": {
+        "@melt-ui/pp": "^0.3.2",
         "@storybook/addon-a11y": "^8.2.9",
         "@storybook/addon-essentials": "^8.2.9",
         "@storybook/addon-interactions": "^8.2.9",

v2/pink-sb/src/lib/DirectoryPicker/DirectoryItem.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+    import { melt, type TreeView } from '@melt-ui/svelte';
+    import { getContext } from 'svelte';
+    import type { Directory } from '$lib/DirectoryPicker/index.js';
+    import { IconChevronRight } from '@appwrite.io/pink-icons-svelte';
+    import Radio from '$lib/selector/Radio.svelte';
+    import Spinner from '$lib/Spinner.svelte';
+
+    export let directories: Directory[];
+    export let level = 0;
+    export let containerWidth: number | undefined;
+    let radioInputs: HTMLInputElement[] = [];
+
+    let thumbnailStates = directories.map(() => ({
+        loading: true,
+        error: false
+    }));
+
+    function handleThumbnailLoad(index) {
+        thumbnailStates[index].loading = false;
+        thumbnailStates[index].error = false;
+    }
+
+    function handleThumbnailError(index) {
+        thumbnailStates[index].loading = false;
+        thumbnailStates[index].error = true;
+    }
+
+    const {
+        elements: { item, group },
+        helpers: { isExpanded }
+    } = getContext<TreeView>('tree');
+
+    const paddingLeftStyle = `padding-left: ${32 * level + 8}px`;
+</script>
+
+{#each directories as { title, fileCount, thumbnailUrl, children }, i}
+    {@const itemId = `${title}-${i}`}
+    {@const hasChildren = !!children?.length}
+    {@const thumb = thumbnailUrl}
+
+    <div class="container">
+        <button
+            class="folder"
+            style={paddingLeftStyle}
+            on:click={() => {
+                radioInputs[i].checked = true;
+            }}
+            use:melt={$item({
+                id: itemId,
+                hasChildren
+            })}
+        >
+            <div class="info">
+                <Radio
+                    group="directory"
+                    name="directory"
+                    size="small"
+                    bind:radioInput={radioInputs[i]}
+                />
+                <div
+                    class="chevron-container"
+                    class:folder-open={$isExpanded(itemId)}
+                    class:disabled={!hasChildren}
+                >
+                    <IconChevronRight />
+                </div>
+                <div class="meta">
+                    <span
+                        class="title"
+                        style={containerWidth &&
+                            `max-width: ${containerWidth - 100 - level * 40}px`}>{title}</span
+                    >
+                    <span class="fileCount">({fileCount} files)</span>
+                </div>
+            </div>
+            <div class="thumbnail-container">
+                {#if thumbnailStates[i].loading}
+                    <Spinner />
+                {/if}
+
+                {#if thumbnailStates[i].error}
+                    <div class="thumbnail-fallback" />
+                {:else}
+                    <img
+                        src={thumb}
+                        alt="Directory thumbnail"
+                        class="thumbnail"
+                        class:hidden={thumbnailStates[i].loading}
+                        on:load={() => handleThumbnailLoad(i)}
+                        on:error={() => handleThumbnailError(i)}
+                    />
+                {/if}
+            </div>
+        </button>
+
+        {#if children}
+            <div use:melt={$group({ id: itemId })}>
+                <svelte:self directories={children} level={level + 1} {containerWidth} />
+            </div>
+        {/if}
+    </div>
+{/each}
+
+<style>
+    .container {
+        width: 100%;
+    }
+    .folder {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        padding: var(--space-3, 6px) var(--space-4, 8px);
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+        &:hover,
+        &:focus {
+            border-radius: var(--border-radius-S, 8px);
+            background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
+        }
+    }
+    .info {
+        display: flex;
+    }
+    .chevron-container {
+        width: 20px;
+        height: 20px;
+        transition: transform ease-in-out 0.1s;
+        margin-left: 8px;
+        margin-right: 4px;
+        flex-shrink: 0;
+    }
+    .folder-open {
+        transform: rotate(90deg);
+    }
+    .disabled {
+        color: var(--color-fgcolor-neutral-tertiary);
+    }
+
+    .meta {
+        display: flex;
+        gap: var(--space-2, 4px);
+    }
+
+    .title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-grow: 0;
+    }
+
+    .fileCount {
+        color: var(--color-fgColor-neutral-tertiary, #97979b);
+        display: none;
+
+        @media (min-width: 1024px) {
+            display: block;
+        }
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    .thumbnail-container {
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        width: var(--icon-size-l, 24px);
+        height: var(--icon-size-l, 24px);
+    }
+
+    .thumbnail {
+        width: var(--icon-size-l, 24px);
+        height: var(--icon-size-l, 24px);
+        flex-shrink: 0;
+        border-radius: var(--border-radius-circle, 99999px);
+    }
+
+    .thumbnail-fallback {
+        width: var(--icon-size-l, 24px);
+        height: var(--icon-size-l, 24px);
+        flex-shrink: 0;
+        border-radius: var(--border-radius-circle, 99999px);
+        border: var(--border-width-s, 1px) dashed var(--color-border-neutral-strong, #d8d8db);
+        background: var(--color-bgcolor-neutral-primary, #fff);
+    }
+</style>

v2/pink-sb/src/lib/DirectoryPicker/DirectoryPicker.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { createTreeView } from '@melt-ui/svelte';
+    import { setContext } from 'svelte';
+
+    import type { Directory } from './index.js';
+    import DirectoryItem from './DirectoryItem.svelte';
+    import Spinner from '$lib/Spinner.svelte';
+
+    const ctx = createTreeView({
+        defaultExpanded: ['lib-0', 'tree-0']
+    });
+    setContext('tree', ctx);
+
+    const {
+        elements: { tree }
+    } = ctx;
+
+    export let directories: Directory[];
+    export let isLoading = true;
+    let rootContainer: HTMLDivElement;
+    let containerWidth: number | undefined;
+    monitorResize();
+
+    function monitorResize() {
+        window.addEventListener('resize', updateWidth);
+
+        return {
+            destroy() {
+                window.removeEventListener('resize', updateWidth);
+            }
+        };
+    }
+
+    function updateWidth() {
+        containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
+    }
+
+    $: containerWidth = rootContainer ? rootContainer.getBoundingClientRect().width : undefined;
+</script>
+
+<div class="container" class:isLoading {...$tree} bind:this={rootContainer}>
+    {#if isLoading}<div class="loading-container">
+            <Spinner /><span>Loading directory data...</span>
+        </div>{:else}<DirectoryItem {directories} {containerWidth} />{/if}
+</div>
+
+<style>
+    .container {
+        width: 560px;
+        max-width: 100%;
+        height: 316px;
+        overflow-y: scroll;
+        flex-shrink: 0;
+        display: flex;
+        padding: var(--space-2, 4px);
+
+        border-radius: var(--border-radius-m, 12px);
+        border: var(--border-width-s, 1px) solid var(--color-border-neutral, #ededf0);
+        background: var(--color-bgcolor-neutral-primary, #fff);
+    }
+
+    .isLoading {
+        justify-content: center;
+        align-items: center;
+    }
+
+    .loading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--gap-m);
+    }
+</style>

v2/pink-sb/src/lib/DirectoryPicker/index.ts

@@ -0,0 +1,10 @@
+export type Directory = {
+    id: string;
+    title: string;
+    fullPath: string;
+    fileCount: number;
+    thumbnailUrl: string;
+    children?: Directory[];
+};
+
+export type Icon = 'svelte' | 'folder' | 'js';

v2/pink-sb/src/lib/index.ts

@@ -20,6 +20,8 @@ export { default as Upload } from './upload/index.js';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Empty } from './Empty.svelte';
 export { default as Skeleton } from './Skeleton.svelte';
+export { default as DirectoryPicker } from './DirectoryPicker/DirectoryPicker.svelte';
+export { default as DirectoryItem } from './DirectoryPicker/DirectoryItem.svelte';
 export { default as Keyboard } from './Keyboard.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Pagination } from './Pagination.svelte';

v2/pink-sb/src/lib/selector/Radio.svelte

@@ -8,17 +8,27 @@
     } & Partial<{
             size: 's' | 'm';
             label: string;
+            radioInput: HTMLInputElement;
         }>;
 
     export let group: $$Props['group'];
     export let value: $$Props['value'];
     export let size: $$Props['size'] = 'm';
     export let id: string | undefined = undefined;
     export let label: $$Props['label'] = undefined;
+    export let radioInput: $$Props['radioInput'];
 </script>
 
 <Base {label} {id}>
-    <input type="radio" bind:group {value} {id} class:s={size === 's'} {...$$restProps} />
+    <input
+        type="radio"
+        bind:this={radioInput}
+        bind:group
+        {value}
+        {id}
+        class:s={size === 's'}
+        {...$$restProps}
+    />
 </Base>
 
 <style lang="scss">