feat(standalone/setup): basic styling of cards

apps/client-standalone/src/lightweight/browser_routes.ts

@@ -227,7 +227,9 @@ function bootstrapRoute(): BootstrapDefinition {
         return {
             dbInitialized: false,
             baseApiUrl: "../api/",
-            assetPath
+            assetPath,
+            themeCssUrl: false,
+            themeUseNextAsBase: "next",
         };
     }
 

apps/client/src/setup.css

@@ -1,9 +1,52 @@
-.setup-body-wrapper {
-    padding: 2rem;
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
+}
 
-    .setup-options {
+body.setup {
+    margin: 0;
+    padding: 0;
+
+    &>div {
+        background: var(--left-pane-background-color);
+        padding: 2em;
+        width: 600px;
+        width: 100vw;
+        height: 100vh;
         display: flex;
-        flex-direction: column;
-        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+
+        .setup-container {
+            background-color: var(--main-background-color);
+            border-radius: 16px;
+            padding: 2em;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+            height: 550px;
+
+            .setup-options {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+
+                .tn-card-frame {
+                    padding: 1.5em;
+                    h3 {
+                        font-size: 1.5em;
+                        font-weight: normal;
+                    }
+
+                    p:last-of-type {
+                        margin-bottom: 0;
+                        color: var(--muted-text-color);
+                    }
+                }
+            }
+        }
     }
 }

apps/client/src/setup.tsx

@@ -3,32 +3,39 @@ import "./setup.css";
 import { render } from "preact";
 
 import { initLocale, t } from "./services/i18n";
-import Button from "./widgets/react/Button";
+import { CardFrame } from "./widgets/react/Card";
 
 async function main() {
     await initLocale();
 
     const bodyWrapper = document.createElement("div");
-    bodyWrapper.classList.add("setup-body-wrapper");
+    document.body.classList.add("setup");
     render(<App />, bodyWrapper);
     document.body.replaceChildren(bodyWrapper);
 }
 
 function App() {
     return (
-        <>
+        <div class="setup-container">
             <h1>{t("setup.heading")}</h1>
 
             <div class="setup-options">
-                <Button
-                    text={t("setup.new-document")}
-                />
+                <CardFrame>
+                    <h3>{t("setup.new-document")}</h3>
+                    <p>{t("setup.new-document-description")}</p>
+                </CardFrame>
 
-                <Button
-                    text={t("setup.sync-from-server")}
-                />
+                <CardFrame>
+                    <h3>{t("setup.sync-from-server")}</h3>
+                    <p>{t("setup.sync-from-server-description")}</p>
+                </CardFrame>
+
+                <CardFrame>
+                    <h3>{t("setup.sync-from-desktop")}</h3>
+                    <p>{t("setup.sync-from-desktop-description")}</p>
+                </CardFrame>
             </div>
-        </>
+        </div>
     );
 }
 

apps/client/src/translations/en/translation.json

@@ -2233,9 +2233,12 @@
   },
   "setup": {
     "heading": "Trilium Notes setup",
-    "new-document": "I'm a new user, and I want to create a new Trilium document for my notes",
-    "sync-from-desktop": "I have a desktop instance already, and I want to set up sync with it",
-    "sync-from-server": "I have a server instance already, and I want to set up sync with it",
+    "new-document": "New document",
+    "new-document-description": "I'm a new user, and I want to create a new Trilium document for my notes",
+    "sync-from-desktop": "Sync from desktop",
+    "sync-from-desktop-description": "I have a desktop instance already, and I want to set up sync with it",
+    "sync-from-server": "Sync from server",
+    "sync-from-server-description": "I have a server instance already, and I want to set up sync with it",
     "next": "Next",
     "init-in-progress": "Document initialization in progress",
     "redirecting": "You will be shortly redirected to the application.",

packages/commons/src/lib/server_api.ts

@@ -312,17 +312,23 @@ export interface DefinitionObject {
     inverseRelation?: string;
 }
 
+/**
+ * Subset of bootstrap items that are available both in the main client and in the setup page.
+ */
 interface BootstrapCommonItems {
     baseApiUrl: string;
     assetPath: string;
+    themeCssUrl: string | false;
+    themeUseNextAsBase?: "next" | "next-light" | "next-dark";
 }
 
+/**
+ * Bootstrap items that the client needs to start up. These are sent by the server in the HTML and made available as `window.glob`.
+ */
 export type BootstrapDefinition = BootstrapCommonItems & ({
     dbInitialized: true;
     device: "mobile" | "desktop" | "print" | false;
     csrfToken: string;
-    themeCssUrl: string | false;
-    themeUseNextAsBase?: "next" | "next-light" | "next-dark";
     headingStyle: "plain" | "underline" | "markdown";
     layoutOrientation: "vertical" | "horizontal";
     platform?: typeof process.platform | "web";