{#snippet cloudMenu( id: string, onopen: (() => void) | null, ondownload: () => void, onremove: (() => void) | null, ondelete: (() => void) | null, )} {#if cloudMenuFor === id}
{#if onopen} {:else} {/if} {#if onremove} {/if} {#if ondelete} {/if}
{/if} {/snippet} {#snippet cloudCard( id: string, icon: string, title: string, meta: string, link: { sync_state: string | null; path: string } | undefined, onopen: (() => void) | null, ondownload: () => void, onremove: (() => void) | null, ondelete: (() => void) | null, )}
openCloudContextMenu(event, id)} > {@render cloudMenu(id, onopen, ondownload, onremove, ondelete)}
{#if link && cloudThumbs[link.path]} {#if cloudThumbs[link.path].kind === "svg"} {@html cloudThumbs[link.path].data} {:else} {title} {/if} {:else} {/if}

{title}

{meta}

{#if link} {link.sync_state === "pending" ? "Unsynced" : "Synced"} {/if}
{#if link && onopen} {:else} {/if} {#if onremove || ondelete} {/if}
{/snippet} {#snippet syncBadge(entry: BrowseEntry)} {#if entry.cloud_linked} {#if entry.sync_state === "pending"} {:else} {/if} {/if} {/snippet} {#snippet actions(entry: BrowseEntry)} {#if menuFor === entry.path}
{#if entry.kind === "project" || entry.kind === "document"} {:else if api.isImagePath(entry.path)} {/if} {#if entry.kind === "project" && !entry.cloud_project_id && app.account} {/if} {#if entry.kind === "document" && !entry.cloud_linked && app.account} {/if}
{/if} {/snippet} { if (!(event.target as HTMLElement).closest("[data-card-menu]")) { menuFor = null; } cloudMenuFor = null; }} />
event.preventDefault()} >
{#each [["local", "Local", "ph:hard-drives"], ["cloud", "Cloud", "ph:cloud"]] as [value, label, icon]} {/each}
{#if app.scope === "local"} {:else if app.account} {/if}
{#if app.scope === "local"}
{#each trail as crumb, index} {/each}
{#if app.entries.length === 0}

This folder is empty.

{:else}
{#if containers.length > 0}

Folders

{#each containers as entry (entry.path)}
startDrag(event, entry.path)} ondragend={endDrag} ondragover={(event) => allowDrop(event, entry.path)} ondragleave={() => { if (dropTarget === entry.path) dropTarget = null; }} ondrop={(event) => handleDrop(event, entry.path)} oncontextmenu={(event) => openContextMenu(event, entry.path)} > {@render actions(entry)}
{/each}
{/if} {#if documents.length > 0}

Documents

{#each documents as entry (entry.path)}
startDrag(event, entry.path)} ondragend={endDrag} oncontextmenu={(event) => openContextMenu(event, entry.path)} >
{@render actions(entry)}
{/each}
{/if}
{/if}
{:else}
{#if !app.account}

Connect a TypstDrive account to sync your projects across devices.

{:else}
{#if app.cloudLoading} {/if}
{#if cloudTrail.length > 0}
{#each cloudTrail as folder, index} {/each}
{/if} {#if app.cloudFolders.length > 0}
{#each app.cloudFolders as folder (folder.id)}
{@render cloudMenu( `folder:${folder.id}`, () => openCloudFolder(folder.id), () => {}, null, null, )}
{/each}
{/if} {#if app.cloudDocuments.length > 0}

Documents

{#each app.cloudDocuments as entry (entry.id)} {@const linked = linkedDocument(entry.id)} {@render cloudCard( `document:${entry.id}`, "ph:file-text", entry.title, linked ? `Document · ${entry.role}` : `${entry.role} · ${formatDate(entry.updated_at)}`, linked, linked ? () => openTarget(linked.path) : null, () => ondownloaddocument(entry.id, entry.title), linked ? () => onremovedownload(linked.path) : null, () => ondeletedocument(entry.id), )} {/each}
{/if} {#if app.cloudFiles.length > 0}

Images and fonts

{#each app.cloudFiles as file (file.id)}
openCloudContextMenu(event, `file:${file.id}`)} > {@render cloudMenu( `file:${file.id}`, null, () => ondownloadfile(file.id, file.name), null, () => ondeletefile(file.id), )}

{file.name}

{formatDate(file.created_at)}

{/each}
{/if} {#if app.cloudProjects.length === 0 && app.cloudDocuments.length === 0 && app.cloudFolders.length === 0 && app.cloudFiles.length === 0}

Nothing here yet.

{#if app.cloudFolder !== "shared"}
{/if}
{/if} {#if app.cloudProjects.length > 0}

Cloud projects

{/if}
{#each app.cloudProjects as project (project.id)} {@const linked = linkedProject(project.id)} {@render cloudCard( `project:${project.id}`, "ph:folder-star", project.name, linked ? `Project · ${project.role}` : `${project.role} · ${formatDate(project.updated_at)}`, linked, linked ? () => openTarget(linked.path) : null, () => oncloneproject(project.id, project.name), null, project.role === "owner" ? () => ondeleteproject(project.id) : null, )} {/each}
{/if}
{/if}