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

Cloud folder organization, file uploads, appearance themes, title bar rework, faster autosync

Browse Source
This commit is contained in:
SirBlob
2026-07-20 23:58:53 -04:00
parent 46e2de2af9
commit 62f2f8483f
9 changed files with 808 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/FileViewer.svelte
+166 -53
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import Icon from "@iconify/svelte";
import * as api from "$lib/ts/api";
import type { BrowseEntry, EntryKind } from "$lib/ts/api";
import type { BrowseEntry, CloudFile, CloudFolder, EntryKind } from "$lib/ts/api";
import { clampMenu } from "$lib/ts/menu-position";
import {
app,
@@ -31,11 +31,16 @@
onremovedownload: (path: string) => void;
ondownloadfile: (fileId: string, name: string) => void;
ondeletefile: (fileId: string) => void;
onuploadfile: () => void;
onrenamefile: (file: CloudFile) => void;
oncloneproject: (cloudProjectId: string, name: string) => void;
ondeleteproject: (cloudProjectId: string) => void;
ondeletedocument: (documentId: string) => void;
onnewcloudproject: () => void;
onnewclouddocument: () => void;
onnewcloudfolder: () => void;
onrenamecloudfolder: (folder: CloudFolder) => void;
ondeletecloudfolder: (folder: CloudFolder) => void;
onsignin: () => void;
}
@@ -53,11 +58,16 @@
onremovedownload,
ondownloadfile,
ondeletefile,
onuploadfile,
onrenamefile,
oncloneproject,
ondeleteproject,
ondeletedocument,
onnewcloudproject,
onnewclouddocument,
onnewcloudfolder,
onrenamecloudfolder,
ondeletecloudfolder,
onsignin,
}: Props = $props();
@@ -234,6 +244,55 @@
if (source) moveTo(source, destination);
}
type CloudDragItem = {
kind: "project" | "document" | "folder" | "file";
id: string;
};
let cloudDragging = $state<CloudDragItem | null>(null);
let cloudDropTarget = $state<string | null>(null);
async function moveCloudItem(item: CloudDragItem, folderId: string | null) {
try {
if (item.kind === "folder") {
await api.cloudMoveFolder(item.id, folderId);
} else if (item.kind === "project") {
await api.cloudMoveProject(item.id, folderId);
} else if (item.kind === "document") {
await api.cloudMoveDocument(item.id, folderId);
} else {
await api.cloudMoveFile(item.id, folderId);
}
await refreshCloud();
} catch (error) {
setError(error);
}
}
function startCloudDrag(event: DragEvent, item: CloudDragItem) {
cloudDragging = item;
event.dataTransfer?.setData("text/plain", item.id);
}
function endCloudDrag() {
cloudDragging = null;
cloudDropTarget = null;
}
function allowCloudDrop(event: DragEvent, folderId: string) {
if (!cloudDragging) return;
if (cloudDragging.kind === "folder" && cloudDragging.id === folderId) return;
event.preventDefault();
cloudDropTarget = folderId;
}
function handleCloudDrop(event: DragEvent, folderId: string) {
event.preventDefault();
const item = cloudDragging;
cloudDragging = null;
cloudDropTarget = null;
if (item) moveCloudItem(item, folderId === "" ? null : folderId);
}
function activate(entry: BrowseEntry) {
if (entry.kind === "folder") {
browseTo(entry.path);
@@ -262,6 +321,7 @@
onopen: (() => void) | null,
ondownload: () => void,
onremove: (() => void) | null,
onrename: (() => void) | null,
ondelete: (() => void) | null,
)}
{#if cloudMenuFor === id}
@@ -302,6 +362,17 @@
Remove from this device
</button>
{/if}
{#if onrename}
<button
class="px-3 py-1.5 text-left hover:bg-[var(--color-surface-sunken)]"
onclick={() => {
onrename();
cloudMenuFor = null;
}}
>
Rename
</button>
{/if}
{#if ondelete}
<button
class="px-3 py-1.5 text-left text-[var(--color-danger)] hover:bg-[var(--color-surface-sunken)]"
@@ -328,11 +399,18 @@
onremove: (() => void) | null,
ondelete: (() => void) | null,
)}
{@const [dragKind, dragId] = id.split(":") as [
"project" | "document",
string,
]}
<div
class="group flex flex-col overflow-hidden rounded-lg border border-[var(--color-line)] bg-[var(--color-surface)] transition hover:border-[var(--color-accent)] hover:shadow-sm"
oncontextmenu={(event) => openCloudContextMenu(event, id)}
draggable="true"
ondragstart={(event) => startCloudDrag(event, { kind: dragKind, id: dragId })}
ondragend={endCloudDrag}
>
{@render cloudMenu(id, onopen, ondownload, onremove, ondelete)}
{@render cloudMenu(id, onopen, ondownload, onremove, null, ondelete)}
<div
class="flex h-24 items-center justify-center overflow-hidden border-b border-[var(--color-line)] bg-[var(--color-surface-muted)]"
>
@@ -545,20 +623,39 @@
<div
class="flex items-center gap-2 border-b border-[var(--color-line)] bg-[var(--color-surface)] px-4 py-2.5"
>
<div class="flex rounded-lg bg-[var(--color-surface-sunken)] p-0.5 text-xs font-medium">
{#each [["local", "Local", "ph:hard-drives"], ["cloud", "Cloud", "ph:cloud"]] as [value, label, icon]}
{#if app.scope === "local"}
<button
class="flex items-center gap-1.5 rounded px-2 py-1 text-xs transition hover:bg-[var(--color-surface-muted)]
{app.currentDir === '' ? 'font-medium' : 'text-[var(--color-ink-muted)]'}
{dropTarget === '' ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : ''}"
onclick={() => browseTo("")}
ondragover={(event) => allowDrop(event, "")}
ondragleave={() => {
if (dropTarget === "") dropTarget = null;
}}
ondrop={(event) => handleDrop(event, "")}
>
<Icon icon="ph:house" />
Workspace
</button>
{#each trail as crumb, index}
<Icon icon="ph:caret-right" class="text-[10px] text-[var(--color-ink-muted)]" />
<button
class="flex items-center gap-1.5 rounded-md px-3 py-1.5 transition
{app.scope === value
? 'bg-[var(--color-surface)] text-[var(--color-ink)] shadow-sm'
: 'text-[var(--color-ink-muted)] hover:text-[var(--color-ink)]'}"
onclick={() => (app.scope = value as "local" | "cloud")}
class="rounded px-2 py-1 text-xs transition hover:bg-[var(--color-surface-muted)]
{index === trail.length - 1 ? 'font-medium' : 'text-[var(--color-ink-muted)]'}
{dropTarget === crumb.path ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : ''}"
onclick={() => browseTo(crumb.path)}
ondragover={(event) => allowDrop(event, crumb.path)}
ondragleave={() => {
if (dropTarget === crumb.path) dropTarget = null;
}}
ondrop={(event) => handleDrop(event, crumb.path)}
>
<Icon {icon} />
{label}
{crumb.name}
</button>
{/each}
</div>
{/if}
<div class="flex-1"></div>
@@ -592,6 +689,20 @@
New document
</button>
{:else if app.account}
<button
class="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-ink)]"
onclick={onuploadfile}
>
<Icon icon="ph:upload-simple" />
Upload
</button>
<button
class="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-ink)]"
onclick={onnewcloudfolder}
>
<Icon icon="ph:folder-plus" />
Folder
</button>
<button
class="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-ink)]"
onclick={onnewcloudproject}
@@ -610,42 +721,6 @@
</div>
{#if app.scope === "local"}
<div
class="flex items-center gap-1 border-b border-[var(--color-line)] bg-[var(--color-surface)] px-4 py-2 text-xs"
>
<button
class="flex items-center gap-1.5 rounded px-2 py-1 transition hover:bg-[var(--color-surface-muted)]
{app.currentDir === '' ? 'font-medium' : 'text-[var(--color-ink-muted)]'}
{dropTarget === '' ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : ''}"
onclick={() => browseTo("")}
ondragover={(event) => allowDrop(event, "")}
ondragleave={() => {
if (dropTarget === "") dropTarget = null;
}}
ondrop={(event) => handleDrop(event, "")}
>
<Icon icon="ph:house" />
Workspace
</button>
{#each trail as crumb, index}
<Icon icon="ph:caret-right" class="text-[10px] text-[var(--color-ink-muted)]" />
<button
class="rounded px-2 py-1 transition hover:bg-[var(--color-surface-muted)]
{index === trail.length - 1 ? 'font-medium' : 'text-[var(--color-ink-muted)]'}
{dropTarget === crumb.path ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : ''}"
onclick={() => browseTo(crumb.path)}
ondragover={(event) => allowDrop(event, crumb.path)}
ondragleave={() => {
if (dropTarget === crumb.path) dropTarget = null;
}}
ondrop={(event) => handleDrop(event, crumb.path)}
>
{crumb.name}
</button>
{/each}
</div>
<div class="scroll-thin flex-1 overflow-y-auto p-4">
{#if app.entries.length === 0}
<div
@@ -840,8 +915,14 @@
class="flex items-center gap-2 rounded-lg border px-3.5 py-2 text-xs font-medium transition
{app.cloudFolder !== 'shared'
? 'border-[var(--color-accent)] bg-[var(--color-accent)] text-white shadow-sm'
: 'border-[var(--color-line)] bg-[var(--color-surface)] text-[var(--color-ink-muted)] hover:border-[var(--color-accent)] hover:text-[var(--color-ink)]'}"
: 'border-[var(--color-line)] bg-[var(--color-surface)] text-[var(--color-ink-muted)] hover:border-[var(--color-accent)] hover:text-[var(--color-ink)]'}
{cloudDropTarget === '' ? 'ring-2 ring-[var(--color-accent)]' : ''}"
onclick={() => openCloudFolder(null)}
ondragover={(event) => allowCloudDrop(event, "")}
ondragleave={() => {
if (cloudDropTarget === "") cloudDropTarget = null;
}}
ondrop={(event) => handleCloudDrop(event, "")}
>
<Icon icon="ph:cloud-fill" class="text-base" />
My Drive
@@ -869,8 +950,14 @@
{#if cloudTrail.length > 0}
<div class="mb-3 flex flex-wrap items-center gap-1 text-xs">
<button
class="rounded px-2 py-1 text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface)] hover:text-[var(--color-ink)]"
class="rounded px-2 py-1 text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface)] hover:text-[var(--color-ink)]
{cloudDropTarget === '' ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : ''}"
onclick={() => openCloudFolder(null)}
ondragover={(event) => allowCloudDrop(event, "")}
ondragleave={() => {
if (cloudDropTarget === "") cloudDropTarget = null;
}}
ondrop={(event) => handleCloudDrop(event, "")}
>
My Drive
</button>
@@ -884,8 +971,16 @@
class="rounded px-2 py-1 transition hover:bg-[var(--color-surface)]
{index === cloudTrail.length - 1
? 'font-medium'
: 'text-[var(--color-ink-muted)] hover:text-[var(--color-ink)]'}"
: 'text-[var(--color-ink-muted)] hover:text-[var(--color-ink)]'}
{cloudDropTarget === folder.id
? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]'
: ''}"
onclick={() => openCloudFolder(folder.id)}
ondragover={(event) => allowCloudDrop(event, folder.id)}
ondragleave={() => {
if (cloudDropTarget === folder.id) cloudDropTarget = null;
}}
ondrop={(event) => handleCloudDrop(event, folder.id)}
>
{folder.name}
</button>
@@ -900,10 +995,22 @@
{#each app.cloudFolders as folder (folder.id)}
<div class="relative">
<button
class="flex w-full items-center gap-2.5 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface-sunken)] px-3 py-2.5 text-left transition hover:border-[var(--color-accent)] hover:bg-[var(--color-surface)]"
class="flex w-full items-center gap-2.5 rounded-lg border px-3 py-2.5 text-left transition hover:border-[var(--color-accent)] hover:bg-[var(--color-surface)]
{cloudDropTarget === folder.id
? 'border-[var(--color-accent)] bg-[var(--color-accent-soft)]'
: 'border-[var(--color-line)] bg-[var(--color-surface-sunken)]'}"
onclick={() => openCloudFolder(folder.id)}
oncontextmenu={(event) =>
openCloudContextMenu(event, `folder:${folder.id}`)}
draggable="true"
ondragstart={(event) =>
startCloudDrag(event, { kind: "folder", id: folder.id })}
ondragend={endCloudDrag}
ondragover={(event) => allowCloudDrop(event, folder.id)}
ondragleave={() => {
if (cloudDropTarget === folder.id) cloudDropTarget = null;
}}
ondrop={(event) => handleCloudDrop(event, folder.id)}
>
<Icon
icon="ph:folder-fill"
@@ -916,7 +1023,8 @@
() => openCloudFolder(folder.id),
() => {},
null,
null,
() => onrenamecloudfolder(folder),
() => ondeletecloudfolder(folder),
)}
</div>
{/each}
@@ -965,12 +1073,17 @@
class="flex items-center gap-2.5 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface)] p-3 transition hover:border-[var(--color-accent)]"
oncontextmenu={(event) =>
openCloudContextMenu(event, `file:${file.id}`)}
draggable="true"
ondragstart={(event) =>
startCloudDrag(event, { kind: "file", id: file.id })}
ondragend={endCloudDrag}
>
{@render cloudMenu(
`file:${file.id}`,
null,
() => ondownloadfile(file.id, file.name),
null,
() => onrenamefile(file),
() => ondeletefile(file.id),
)}
<Icon
src/lib/components/SettingsModal.svelte
+39 -7
View File
@@ -9,10 +9,12 @@
import {
app,
applyTheme,
applyColorTheme,
applyAccent,
applyTextScale,
applyReduceMotion,
applyContrast,
colorThemes,
refreshEntries,
restartAutoSync,
setError,
@@ -85,7 +87,7 @@
}, 600);
});
let autosaveSeconds = $state(untrack(() => app.settings?.autosave_seconds ?? 0));
let syncMinutes = $state(untrack(() => app.settings?.sync_minutes ?? 0));
let syncSeconds = $state(untrack(() => app.settings?.sync_seconds ?? 0));
let saving = $state(false);
let info = $state<AppInfo | null>(null);
@@ -107,9 +109,11 @@
const syncOptions = [
{ value: 0, label: "Off" },
{ value: 1, label: "1 minute" },
{ value: 2, label: "2 minutes" },
{ value: 5, label: "5 minutes" },
{ value: 15, label: "15 seconds" },
{ value: 30, label: "30 seconds" },
{ value: 60, label: "1 minute" },
{ value: 120, label: "2 minutes" },
{ value: 300, label: "5 minutes" },
];
const links = [
@@ -149,7 +153,7 @@
workspaceRoot,
serverUrl,
autosaveSeconds,
syncMinutes,
syncSeconds,
});
restartAutoSync();
await refreshEntries();
@@ -250,6 +254,30 @@
</span>
</div>
<div class="flex flex-col gap-2 text-xs">
<span class="font-medium text-[var(--color-ink-muted)]">Color theme</span>
<div class="flex flex-wrap gap-2">
{#each colorThemes as entry}
<button
class="flex items-center gap-1.5 rounded-md border px-3 py-2 transition
{app.colorTheme === entry.id
? 'border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-accent)]'
: 'border-[var(--color-line)] text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)]'}"
onclick={() => applyColorTheme(entry.id)}
>
<span
class="h-3 w-3 rounded-full"
style="background-color: {entry.accent}"
></span>
{entry.label}
</button>
{/each}
</div>
<span class="text-[var(--color-ink-muted)]">
Sets the surface colors and default accent for the app.
</span>
</div>
<div class="flex flex-col gap-2 text-xs">
<span class="font-medium text-[var(--color-ink-muted)]">
Accent color
@@ -420,7 +448,7 @@
<span class="font-medium text-[var(--color-ink-muted)]">
Automatic sync
</span>
<select class={fieldClass} bind:value={syncMinutes}>
<select class={fieldClass} bind:value={syncSeconds}>
{#each syncOptions as option}
<option value={option.value}>{option.label}</option>
{/each}
@@ -434,7 +462,11 @@
{:else}
<div class="flex flex-col gap-4">
<div class="flex items-center gap-3">
<Icon icon="ph:file-code" class="text-3xl text-[var(--color-accent)]" />
<span
class="flex h-16 w-16 items-center justify-center rounded-lg bg-[var(--color-accent)]"
>
<img src="/favicon.png" alt="Typst Desktop" class="h-11 w-11" />
</span>
<div>
<p class="text-sm font-semibold">Typst Desktop</p>
<p class="text-xs text-[var(--color-ink-muted)]">
src/lib/ts/api.ts
+50 -8
View File
@@ -7,7 +7,7 @@ export interface Settings {
account_email: string | null;
account_username: string | null;
autosave_seconds: number;
sync_minutes: number;
sync_seconds: number;
}
export interface FileEntry {
@@ -57,6 +57,7 @@ export interface ProjectSummary {
id: string;
name: string;
entrypoint: string;
folder_id: string | null;
role: string;
updated_at: string;
}
@@ -248,7 +249,7 @@ export const updateSettings = (changes: {
workspaceRoot?: string;
serverUrl?: string;
autosaveSeconds?: number;
syncMinutes?: number;
syncSeconds?: number;
}) => invoke<Settings>("update_settings", changes);
export interface CompatibilityStatus {
@@ -305,6 +306,21 @@ export interface DocumentLink {
export const cloudListFolders = () =>
invoke<CloudFolder[]>("cloud_list_folders");
export const cloudCreateFolder = (name: string, parentId?: string | null) =>
invoke<CloudFolder>("cloud_create_folder", {
name,
parentId: parentId ?? null,
});
export const cloudRenameFolder = (folderId: string, name: string) =>
invoke<CloudFolder>("cloud_rename_folder", { folderId, name });
export const cloudMoveFolder = (folderId: string, parentId: string | null) =>
invoke<CloudFolder>("cloud_move_folder", { folderId, parentId });
export const cloudDeleteFolder = (folderId: string) =>
invoke<void>("cloud_delete_folder", { folderId });
export const cloudListDocuments = (folderId?: string | null) =>
invoke<CloudDocument[]>("cloud_list_documents", {
folderId: folderId ?? null,
@@ -329,6 +345,15 @@ export const cloudDownloadFile = (fileId: string) =>
export const cloudDeleteFile = (fileId: string) =>
invoke<void>("cloud_delete_file", { fileId });
export const cloudUploadFile = (path: string, folderId?: string | null) =>
invoke<CloudFile>("cloud_upload_file", { path, folderId: folderId ?? null });
export const cloudRenameFile = (fileId: string, name: string) =>
invoke<CloudFile>("cloud_rename_file", { fileId, name });
export const cloudMoveFile = (fileId: string, folderId: string | null) =>
invoke<CloudFile>("cloud_move_file", { fileId, folderId });
export const cloudDownloadDocument = (documentId: string, parent: string) =>
invoke<string>("cloud_download_document", { documentId, parent });
@@ -338,6 +363,9 @@ export const cloudDeleteDocument = (documentId: string) =>
export const cloudCreateDocument = (path: string, title: string) =>
invoke<string>("cloud_create_document", { path, title });
export const cloudMoveDocument = (documentId: string, folderId: string | null) =>
invoke<CloudDocument>("cloud_move_document", { documentId, folderId });
export interface DocumentContent {
id: string;
title: string;
@@ -346,8 +374,11 @@ export interface DocumentContent {
content: string;
}
export const cloudNewDocument = (title: string) =>
invoke<DocumentContent>("cloud_new_document", { title });
export const cloudNewDocument = (title: string, folderId?: string | null) =>
invoke<DocumentContent>("cloud_new_document", {
title,
folderId: folderId ?? null,
});
export const cloudSyncDocument = (path: string) =>
invoke<SyncReport>("cloud_sync_document", { path });
@@ -384,14 +415,25 @@ export const cloudDocumentLink = (path: string) =>
export const cloudUnlinkDocument = (path: string) =>
invoke<void>("cloud_unlink_document", { path });
export const cloudCreateProject = (name: string) =>
invoke<ProjectSummary>("cloud_create_project", { name });
export const cloudCreateProject = (name: string, folderId?: string | null) =>
invoke<ProjectSummary>("cloud_create_project", {
name,
folderId: folderId ?? null,
});
export const cloudDeleteProject = (cloudProjectId: string) =>
invoke<void>("cloud_delete_project", { cloudProjectId });
export const cloudCloneProject = (cloudProjectId: string, projectName: string) =>
invoke<SyncReport>("cloud_clone_project", { cloudProjectId, projectName });
export const cloudMoveProject = (
cloudProjectId: string,
folderId: string | null,
) => invoke<ProjectSummary>("cloud_move_project", { cloudProjectId, folderId });
export const cloudCloneProject = (
cloudProjectId: string,
projectName: string,
parent: string,
) => invoke<SyncReport>("cloud_clone_project", { cloudProjectId, projectName, parent });
export const cloudLinkProject = (project: string, cloudProjectId?: string) =>
invoke<SyncReport>("cloud_link_project", {
src/lib/ts/state.svelte.ts
+35 -5
View File
@@ -22,6 +22,15 @@ export type LspStatus = "off" | "starting" | "on" | "unavailable";
export type ThemePreference = "light" | "dark" | "system";
export type TextScale = "small" | "default" | "large" | "xlarge";
export type ContrastLevel = "normal" | "high";
export type ColorTheme = "default" | "slate" | "sunset" | "forest" | "grape";
export const colorThemes: { id: ColorTheme; label: string; accent: string }[] = [
{ id: "default", label: "Default", accent: "#3b6cf6" },
{ id: "slate", label: "Slate", accent: "#0f9b8e" },
{ id: "sunset", label: "Sunset", accent: "#e8623f" },
{ id: "forest", label: "Forest", accent: "#2f9457" },
{ id: "grape", label: "Grape", accent: "#8b47d6" },
];
interface AppState {
view: View;
@@ -58,6 +67,7 @@ interface AppState {
error: string;
theme: "light" | "dark";
themePreference: ThemePreference;
colorTheme: ColorTheme;
accent: string | null;
textScale: TextScale;
reduceMotion: boolean;
@@ -99,6 +109,7 @@ export const app = $state<AppState>({
error: "",
theme: "light",
themePreference: "light",
colorTheme: "default",
accent: null,
textScale: "default",
reduceMotion: false,
@@ -146,6 +157,7 @@ export function clearMessages() {
}
const THEME_KEY = "typst-desktop-theme";
const COLOR_THEME_KEY = "typst-desktop-color-theme";
const ACCENT_KEY = "typst-desktop-accent";
const TEXT_SCALE_KEY = "typst-desktop-text-scale";
const REDUCE_MOTION_KEY = "typst-desktop-reduce-motion";
@@ -182,6 +194,13 @@ export function applyTheme(preference: ThemePreference) {
if (app.accent) applyAccent(app.accent);
}
export function applyColorTheme(theme: ColorTheme) {
app.colorTheme = theme;
document.documentElement.dataset.colorTheme = theme;
localStorage.setItem(COLOR_THEME_KEY, theme);
applyAccent(null);
}
function hexToRgb(hex: string): [number, number, number] {
const value = parseInt(hex.replace("#", ""), 16);
return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
@@ -296,6 +315,13 @@ export async function bootstrap() {
: "light",
);
const storedColorTheme = localStorage.getItem(COLOR_THEME_KEY);
const validColorTheme = colorThemes.some((entry) => entry.id === storedColorTheme);
document.documentElement.dataset.colorTheme = validColorTheme
? (storedColorTheme as ColorTheme)
: "default";
app.colorTheme = validColorTheme ? (storedColorTheme as ColorTheme) : "default";
const storedAccent = localStorage.getItem(ACCENT_KEY);
if (storedAccent) applyAccent(storedAccent);
@@ -382,7 +408,11 @@ export async function refreshCloud() {
(folder) => (folder.parent_id ?? null) === app.cloudFolder,
);
app.cloudDocuments = documents;
app.cloudProjects = projects;
app.cloudProjects = projects.filter(
(project) =>
project.role !== "owner" ||
(project.folder_id ?? null) === app.cloudFolder,
);
app.cloudFiles = files;
}
} catch (error) {
@@ -414,7 +444,7 @@ export async function openCloudFolder(id: string | null | "shared") {
export async function downloadDocument(documentId: string, title: string) {
try {
const path = await api.cloudDownloadDocument(documentId, "");
const path = await api.cloudDownloadDocument(documentId, app.currentDir);
await refreshCloud();
setStatus(`Downloaded '${title}' to this device`);
return path;
@@ -634,12 +664,12 @@ export function restartAutoSync() {
syncTimer = null;
}
const minutes = app.settings?.sync_minutes ?? 0;
if (minutes <= 0) return;
const seconds = app.settings?.sync_seconds ?? 0;
if (seconds <= 0) return;
syncTimer = setInterval(() => {
autoSync();
}, minutes * 60 * 1000);
}, seconds * 1000);
}
async function autoSync() {