SirBlob/typst-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Compact editor UI, move LSP info to settings, redesign status badges

Browse Source 
Claude-Session: https://claude.ai/code/session_01PoLmSR1pFVyHf8i5b1rNWk
This commit is contained in:
SirBlob
2026-07-21 15:56:40 -04:00
parent a16edeb876
commit 5f6b2b3883
3 changed files with 210 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/EditorToolbar.svelte
+6 -20
View File
@@ -5,9 +5,7 @@
import {
insertText,
prefixLines,
redoEdit,
setTypstConfig,
undoEdit,
wrapSelection,
} from "$lib/ts/editor-actions";
import { app } from "$lib/ts/state.svelte";
@@ -37,10 +35,10 @@
icon: string,
label: string,
run: () => void,
size = "text-base",
size = "text-sm",
)}
<button
class="rounded p-1.5 text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] disabled:opacity-40 disabled:hover:bg-transparent"
class="rounded p-1 text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] disabled:opacity-40 disabled:hover:bg-transparent"
title={label}
aria-label={label}
{disabled}
@@ -51,17 +49,12 @@
{/snippet}
{#snippet divider()}
<div class="mx-1 h-4 w-px shrink-0 bg-[var(--color-line)]"></div>
<div class="mx-0.5 h-3.5 w-px shrink-0 bg-[var(--color-line)]"></div>
{/snippet}
<div
class="scroll-thin flex shrink-0 items-center gap-0.5 overflow-x-auto border-b border-[var(--color-line)] bg-[var(--color-surface)] px-2 py-1"
class="scroll-thin flex shrink-0 items-center gap-px overflow-x-auto border-b border-[var(--color-line)] bg-[var(--color-surface)] px-1.5 py-0.5"
>
{@render action("ph:arrow-counter-clockwise", "Undo", () => undoEdit(view))}
{@render action("ph:arrow-clockwise", "Redo", () => redoEdit(view))}
{@render divider()}
{@render action("ph:text-h", "Heading", () => prefixLines(view, "= ", "Heading"))}
{@render action("ph:text-b", "Bold", () => wrapSelection(view, "*", "*", "bold"))}
{@render action("ph:text-italic", "Italic", () =>
@@ -103,7 +96,7 @@
{@render divider()}
<select
class="max-w-36 rounded border border-[var(--color-line)] bg-[var(--color-surface)] px-1.5 py-1 text-xs text-[var(--color-ink)] focus:border-[var(--color-accent)] focus:outline-none disabled:opacity-40"
class="max-w-24 rounded border border-[var(--color-line)] bg-[var(--color-surface)] px-1 py-0.5 text-xs text-[var(--color-ink)] focus:border-[var(--color-accent)] focus:outline-none disabled:opacity-40"
aria-label="Document font"
{disabled}
bind:value={selectedFont}
@@ -118,14 +111,7 @@
{/each}
</select>
<button
class="flex items-center gap-1.5 rounded px-2 py-1 text-xs text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] disabled:opacity-40"
{disabled}
onclick={onpagesettings}
>
<Icon icon="ph:file-text" />
Page
</button>
{@render action("ph:file-text", "Page settings", onpagesettings)}
<div class="flex-1"></div>
</div>
src/lib/components/SettingsModal.svelte
+50 -2
View File
@@ -34,6 +34,7 @@
| "appearance"
| "accessibility"
| "account"
| "lsp"
| "about";
const sections: { id: Section; label: string; icon: string }[] = [
@@ -41,9 +42,17 @@
{ id: "appearance", label: "Appearance", icon: "ph:palette" },
{ id: "accessibility", label: "Accessibility", icon: "ph:wheelchair" },
{ id: "account", label: "Account", icon: "ph:user-circle" },
{ id: "lsp", label: "Language Server", icon: "ph:plugs-connected" },
{ id: "about", label: "About", icon: "ph:info" },
];
const lspLabel: Record<string, string> = {
off: "Off",
starting: "Starting…",
on: "Running",
unavailable: "Unavailable",
};
const accentPresets = [
"#3b6cf6",
"#7c5cfc",
@@ -227,7 +236,9 @@
{/each}
</select>
<span class="text-[var(--color-ink-muted)]">
Saves the file being edited after you stop typing.
Saves the file being edited after you stop typing. Cloud-linked
files always save to disk every few seconds regardless of this
setting, since they sync live and have no manual Save button.
</span>
</div>
</div>
@@ -460,6 +471,42 @@
</span>
</div>
</div>
{:else if section === "lsp"}
<div class="flex flex-col gap-5">
<div class="flex items-center gap-3 rounded-md border border-[var(--color-line)] bg-[var(--color-surface-muted)] p-3">
<span
class="h-2.5 w-2.5 rounded-full
{app.lspStatus === 'on'
? 'bg-[var(--color-success)]'
: app.lspStatus === 'starting'
? 'bg-[var(--color-accent)]'
: 'bg-[var(--color-ink-muted)]'}"
></span>
<div class="text-xs">
<p class="font-medium">{lspLabel[app.lspStatus]}</p>
<p class="text-[var(--color-ink-muted)]">
Reflects the file currently open in the editor.
</p>
</div>
</div>
<p class="text-xs text-[var(--color-ink-muted)]">
Typst Desktop uses <span class="font-medium">tinymist</span>, the
official Typst language server, to provide autocomplete, diagnostics,
and hover info while editing. It must be installed and available on
your system PATH — Typst Desktop does not bundle or install it for
you.
</p>
{#if app.lspStatus === "unavailable"}
<div
class="rounded-md border border-[var(--color-danger)]/30 bg-[var(--color-danger)]/10 p-3 text-xs text-[var(--color-danger)]"
>
tinymist could not be started. Confirm it's installed and on your
PATH, then reopen the file.
</div>
{/if}
</div>
{:else}
<div class="flex flex-col gap-4">
<div class="flex items-center gap-3">
@@ -521,7 +568,8 @@
{@const draftless =
section === "about" ||
section === "appearance" ||
section === "accessibility"}
section === "accessibility" ||
section === "lsp"}
<button
class="rounded-md px-3 py-1.5 text-xs text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)]"
onclick={onclose}