feat(standalone/setup): page to select whether to import demo or not

This commit is contained in:
Elian Doran
2026-03-25 19:37:27 +02:00
parent 1620b0be62
commit 51ed4dece2
3 changed files with 38 additions and 8 deletions

View File

@@ -219,6 +219,15 @@ body.setup {
}
}
.illustration-icon {
font-size: 4em;
text-align: center;
color: var(--muted-text-color);
opacity: 0.6;
margin-top: 2rem;
margin-bottom: 1rem;
}
h1 {
font-size: 1.4em;
text-align: center;

View File

@@ -27,14 +27,15 @@ async function main() {
document.body.replaceChildren(bodyWrapper);
}
type State = "firstOptions" | "createNewDocument" | "syncFromDesktop" | "syncFromServer" | "syncInProgress" | "syncFailed";
type State = "firstOptions" | "createNewDocumentOptions" | "createNewDocument" | "syncFromDesktop" | "syncFromServer" | "syncInProgress" | "syncFailed";
const STATE_ORDER: State[] = ["firstOptions", "createNewDocument", "syncFromDesktop", "syncFromServer", "syncInProgress", "syncFailed"];
const STATE_ORDER: State[] = ["firstOptions", "createNewDocumentOptions", "createNewDocument", "syncFromDesktop", "syncFromServer", "syncInProgress", "syncFailed"];
function renderState(state: State, setState: (state: State) => void) {
switch (state) {
case "firstOptions": return <SetupOptions setState={setState} />;
case "createNewDocument": return <CreateNewDocument />;
case "createNewDocumentOptions": return <CreateNewDocumentOptions setState={setState} />;
case "createNewDocument": return <CreateNewDocumentInProgress />;
case "syncFromServer": return <SyncFromServer setState={setState} />;
case "syncFromDesktop": return <SyncFromDesktop setState={setState} />;
case "syncInProgress": return <SyncInProgress device="server" />;
@@ -87,7 +88,7 @@ function SetupOptions({ setState }: { setState: (state: State) => void }) {
icon="bx bx-file-blank"
title={t("setup.new-document")}
description={t("setup.new-document-description")}
onClick={() => setState("createNewDocument")}
onClick={() => setState("createNewDocumentOptions")}
/>
<SetupOptionCard
@@ -204,7 +205,22 @@ function Spinner() {
</div>);
}
function CreateNewDocument() {
function CreateNewDocumentOptions({ setState }: { setState: (state: State) => void }) {
return (
<SetupPage
className="create-new-document-options"
title={t("setup.create-new-document-options-title")}
illustration={<Icon icon="bx bx-star" className="illustration-icon" />}
>
<div class="setup-options">
<SetupOptionCard icon="bx bx-book-open" title={t("setup.create-new-document-options-with-demo")} description={t("setup.create-new-document-options-with-demo-description")} onClick={() => setState("createNewDocumentWithDemo")} />
<SetupOptionCard icon="bx bx-file-blank" title={t("setup.create-new-document-options-empty")} description={t("setup.create-new-document-options-empty-description")} onClick={() => setState("createNewDocumentEmpty")} />
</div>
</SetupPage>
);
}
function CreateNewDocumentInProgress() {
useEffect(() => {
server.post("setup/new-document").then(() => {
location.reload();

View File

@@ -2232,9 +2232,9 @@
"sample_ishikawa": "Ishikawa"
},
"setup": {
"heading": "Trilium Notes setup",
"new-document": "New document",
"new-document-description": "Start with a clean workspace and begin immediately.",
"heading": "Get started with Trilium",
"new-document": "New knowledge base",
"new-document-description": "Start with a clean knowledge base and begin right away.",
"sync-from-desktop": "Connect a desktop app",
"sync-from-desktop-description": "You only have a Trilium desktop app running on another device. This device will sync its data from that desktop app.",
"sync-from-server": "Connect to an existing server",
@@ -2251,6 +2251,11 @@
"sync-step-connecting": "Connecting to server",
"sync-step-syncing": "Syncing data",
"sync-step-finalizing": "Setting up options",
"create-new-document-options-title": "How would you like to start?",
"create-new-document-options-with-demo": "With demo content",
"create-new-document-options-with-demo-description": "Explore Trilium with example content.",
"create-new-document-options-empty": "Empty",
"create-new-document-options-empty-description": "Start with a blank knowledge base. You can import demo notes later.",
"create-new-document-title": "Preparing your new document",
"create-new-document-description": "Youll be redirected automatically in a moment.",
"sync-illustration-this-device": "This device",