SirBlob/TypstDrive
1
0
Fork 0
Code Actions Packages Activity

Rework UI to match typst-desktop's design system

Browse Source
This commit is contained in:
SirBlob
2026-07-20 23:59:12 -04:00
parent de2c2aaccc
commit 2110d408bd
48 changed files with 1319 additions and 1315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/project/FileTree.svelte
+9 -9
View File
@@ -54,15 +54,15 @@
}
</script>
<div class="h-full flex flex-col bg-[var(--theme-bg)] border-r border-gray-200 dark:border-white/10">
<div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-white/10">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Files</span>
<div class="h-full flex flex-col bg-[var(--color-surface)] border-r border-[var(--color-line)]">
<div class="flex items-center justify-between px-3 py-2 border-b border-[var(--color-line)]">
<span class="text-xs font-semibold uppercase tracking-wide text-[var(--color-ink-muted)]">Files</span>
{#if !readOnly}
<div class="flex items-center gap-1">
<button onclick={handleCreate} title="New file" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-white/10 text-gray-600 dark:text-gray-300">
<button onclick={handleCreate} title="New file" class="p-1 rounded hover:bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]">
<Icon icon="mdi:file-plus-outline" class="text-lg" />
</button>
<button onclick={() => fileInput.click()} title="Upload file" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-white/10 text-gray-600 dark:text-gray-300">
<button onclick={() => fileInput.click()} title="Upload file" class="p-1 rounded hover:bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]">
<Icon icon="mdi:upload" class="text-lg" />
</button>
<input bind:this={fileInput} type="file" multiple class="hidden" onchange={(e) => { const t = e.target as HTMLInputElement; if (t.files) onUpload(t.files); t.value = ''; }} />
@@ -72,7 +72,7 @@
<div class="flex-1 overflow-y-auto py-1">
{#each files as file (file.id)}
<div class="group flex items-center gap-1 px-2 py-1.5 text-sm cursor-pointer {activeFileId === file.id ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5'}">
<div class="group flex items-center gap-1 px-2 py-1.5 text-sm cursor-pointer {activeFileId === file.id ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : 'text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)]'}">
<button class="flex items-center gap-2 flex-1 min-w-0 text-left" onclick={() => onSelect(file)}>
<Icon icon={iconFor(file.path)} class="text-base flex-shrink-0" />
<span class="truncate">{file.path}</span>
@@ -85,14 +85,14 @@
{#if !readOnly}
<div class="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
{#if file.kind === 'text' && file.path.toLowerCase().endsWith('.typ') && file.path !== entrypoint}
<button onclick={() => onSetEntry(file)} title="Set as entrypoint" class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-white/10 text-gray-500">
<button onclick={() => onSetEntry(file)} title="Set as entrypoint" class="p-0.5 rounded hover:bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]">
<Icon icon="mdi:star-outline" class="text-sm" />
</button>
{/if}
<button onclick={() => handleRename(file)} title="Rename" class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-white/10 text-gray-500">
<button onclick={() => handleRename(file)} title="Rename" class="p-0.5 rounded hover:bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]">
<Icon icon="mdi:pencil-outline" class="text-sm" />
</button>
<button onclick={() => onDelete(file)} title="Delete" class="p-0.5 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-500 hover:text-red-600">
<button onclick={() => onDelete(file)} title="Delete" class="p-0.5 rounded hover:bg-[var(--color-danger)]/10 text-[var(--color-ink-muted)] hover:text-[var(--color-danger)]">
<Icon icon="mdi:trash-can-outline" class="text-sm" />
</button>
</div>