Group settings into categories

src/lib/components/InfoModal.svelte

@@ -1,107 +0,0 @@
-<script lang="ts">
-  import Icon from "@iconify/svelte";
-  import { openUrl } from "@tauri-apps/plugin-opener";
-  import Modal from "./Modal.svelte";
-  import * as api from "$lib/ts/api";
-  import type { AppInfo } from "$lib/ts/api";
-
-  interface Props {
-    onclose: () => void;
-  }
-
-  let { onclose }: Props = $props();
-
-  let info = $state<AppInfo | null>(null);
-
-  $effect(() => {
-    api
-      .appInfo()
-      .then((result) => (info = result))
-      .catch(() => (info = null));
-  });
-
-  const links = [
-    {
-      label: "Typst Documentation",
-      url: "https://typst.app/docs/",
-      icon: "ph:book-open",
-    },
-    {
-      label: "Typst Universe",
-      url: "https://typst.app/universe/",
-      icon: "ph:planet",
-    },
-  ];
-</script>
-
-<Modal title="About Typst Desktop" icon="ph:info" {onclose}>
-  <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)]" />
-      <div>
-        <p class="text-sm font-semibold">Typst Desktop</p>
-        <p class="text-xs text-[var(--color-ink-muted)]">
-          A local editor for Typst documents
-        </p>
-      </div>
-    </div>
-
-    {#if info}
-      <dl class="flex flex-col gap-1 text-xs">
-        <div class="flex justify-between border-b border-[var(--color-line)] py-1.5">
-          <dt class="text-[var(--color-ink-muted)]">Version</dt>
-          <dd class="font-medium">{info.version}</dd>
-        </div>
-        <div class="flex justify-between border-b border-[var(--color-line)] py-1.5">
-          <dt class="text-[var(--color-ink-muted)]">Typst</dt>
-          <dd class="font-medium">{info.typst_version}</dd>
-        </div>
-        <div class="flex justify-between border-b border-[var(--color-line)] py-1.5">
-          <dt class="text-[var(--color-ink-muted)]">Tauri</dt>
-          <dd class="font-medium">{info.tauri_version}</dd>
-        </div>
-        <div class="flex justify-between border-b border-[var(--color-line)] py-1.5">
-          <dt class="text-[var(--color-ink-muted)]">Author</dt>
-          <dd class="font-medium">{info.authors}</dd>
-        </div>
-        <div class="flex justify-between py-1.5">
-          <dt class="text-[var(--color-ink-muted)]">License</dt>
-          <dd class="font-medium">{info.license}</dd>
-        </div>
-      </dl>
-    {/if}
-
-    <div class="flex flex-col gap-1.5">
-      {#each links as link}
-        <button
-          class="flex items-center gap-2 rounded-md border border-[var(--color-line)] px-3 py-2 text-xs transition hover:border-[var(--color-accent)] hover:bg-[var(--color-surface-muted)]"
-          onclick={() => openUrl(link.url)}
-        >
-          <Icon icon={link.icon} class="text-base text-[var(--color-accent)]" />
-          <span class="flex-1 text-left">{link.label}</span>
-          <Icon
-            icon="ph:arrow-square-out"
-            class="text-[var(--color-ink-muted)]"
-          />
-        </button>
-      {/each}
-    </div>
-
-    <p
-      class="rounded-md border border-[var(--color-line)] bg-[var(--color-surface-muted)] p-3 text-[11px] leading-relaxed text-[var(--color-ink-muted)]"
-    >
-      Typst Desktop is a community application and is not affiliated with,
-      endorsed by, or supported by the official Typst project. The links above
-      open the official Typst website in your browser.
-    </p>
-  </div>
-
-  {#snippet footer()}
-    <button
-      class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90"
-      onclick={onclose}
-    >
-      Close
-    </button>
-  {/snippet}
-</Modal>

src/lib/components/SettingsModal.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import Icon from "@iconify/svelte";
+  import { untrack } from "svelte";
   import { open } from "@tauri-apps/plugin-dialog";
+  import { openUrl } from "@tauri-apps/plugin-opener";
   import Modal from "./Modal.svelte";
   import * as api from "$lib/ts/api";
-  import { untrack } from "svelte";
+  import type { AppInfo } from "$lib/ts/api";
   import {
     app,
     applyTheme,
@@ -19,11 +21,32 @@
 
   let { onclose, onsignin }: Props = $props();
 
+  type Section = "files" | "appearance" | "account" | "about";
+
+  const sections: { id: Section; label: string; icon: string }[] = [
+    { id: "files", label: "Files", icon: "ph:folder" },
+    { id: "appearance", label: "Appearance", icon: "ph:palette" },
+    { id: "account", label: "Account", icon: "ph:user-circle" },
+    { id: "about", label: "About", icon: "ph:info" },
+  ];
+
+  let section = $state<Section>("files");
+
   let workspaceRoot = $state(untrack(() => app.settings?.workspace_root ?? ""));
   let serverUrl = $state(untrack(() => app.settings?.server_url ?? ""));
   let autosaveSeconds = $state(untrack(() => app.settings?.autosave_seconds ?? 0));
   let syncMinutes = $state(untrack(() => app.settings?.sync_minutes ?? 0));
   let saving = $state(false);
+  let info = $state<AppInfo | null>(null);
+
+  $effect(() => {
+    if (section === "about" && !info) {
+      api
+        .appInfo()
+        .then((result) => (info = result))
+        .catch(() => (info = null));
+    }
+  });
 
   const autosaveOptions = [
     { value: 0, label: "Off" },
@@ -39,6 +62,19 @@
     { value: 5, label: "5 minutes" },
   ];
 
+  const links = [
+    {
+      label: "Typst Documentation",
+      url: "https://typst.app/docs/",
+      icon: "ph:book-open",
+    },
+    {
+      label: "Typst Universe",
+      url: "https://typst.app/universe/",
+      icon: "ph:planet",
+    },
+  ];
+
   async function browse() {
     const selected = await open({ directory: true, multiple: false });
     if (typeof selected === "string") {
@@ -75,17 +111,37 @@
       setError(error);
     }
   }
+
+  const fieldClass =
+    "rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none";
 </script>
 
-<Modal title="Settings" icon="ph:gear-six" {onclose}>
+<Modal title="Settings" icon="ph:gear-six" width="max-w-3xl" {onclose}>
+  <div class="flex min-h-[360px] gap-5">
+    <nav class="flex w-36 shrink-0 flex-col gap-0.5">
+      {#each sections as item}
+        <button
+          class="flex items-center gap-2 rounded-md px-2.5 py-2 text-xs transition
+            {section === item.id
+            ? 'bg-[var(--color-accent-soft)] font-medium text-[var(--color-accent)]'
+            : 'text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-ink)]'}"
+          onclick={() => (section = item.id)}
+        >
+          <Icon icon={item.icon} class="text-base" />
+          {item.label}
+        </button>
+      {/each}
+    </nav>
+
+    <div class="min-w-0 flex-1">
+      {#if section === "files"}
         <div class="flex flex-col gap-5">
           <div class="flex flex-col gap-1 text-xs">
-      <span class="font-medium text-[var(--color-ink-muted)]">Workspace folder</span>
+            <span class="font-medium text-[var(--color-ink-muted)]">
+              Workspace folder
+            </span>
             <div class="flex gap-2">
-        <input
+              <input class="flex-1 {fieldClass}" bind:value={workspaceRoot} />
-          class="flex-1 rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none"
-          bind:value={workspaceRoot}
-        />
               <button
                 class="flex items-center gap-1 rounded-md border border-[var(--color-line)] px-3 text-xs hover:bg-[var(--color-surface-muted)]"
                 onclick={browse}
@@ -95,24 +151,13 @@
               </button>
             </div>
             <span class="text-[var(--color-ink-muted)]">
-        Projects are stored as plain folders here.
+              Projects and documents are stored as plain files here.
             </span>
           </div>
 
-    <div class="flex flex-col gap-1 text-xs">
-      <span class="font-medium text-[var(--color-ink-muted)]">TypstDrive server</span>
-      <input
-        class="rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none"
-        bind:value={serverUrl}
-      />
-    </div>
-
           <div class="flex flex-col gap-1 text-xs">
             <span class="font-medium text-[var(--color-ink-muted)]">Autosave</span>
-      <select
+            <select class={fieldClass} bind:value={autosaveSeconds}>
-        class="rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none"
-        bind:value={autosaveSeconds}
-      >
               {#each autosaveOptions as option}
                 <option value={option.value}>{option.label}</option>
               {/each}
@@ -121,29 +166,40 @@
               Saves the file being edited after you stop typing.
             </span>
           </div>
-
+        </div>
-    <div class="flex flex-col gap-1 text-xs">
+      {:else if section === "appearance"}
-      <span class="font-medium text-[var(--color-ink-muted)]">Automatic sync</span>
+        <div class="flex flex-col gap-5">
-      <select
+          <div class="flex flex-col gap-2 text-xs">
-        class="rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none"
+            <span class="font-medium text-[var(--color-ink-muted)]">Theme</span>
-        bind:value={syncMinutes}
+            <div class="flex gap-2">
+              {#each [["light", "Light", "ph:sun"], ["dark", "Dark", "ph:moon"]] as [value, label, icon]}
+                <button
+                  class="flex flex-1 items-center justify-center gap-1.5 rounded-md border px-3 py-2.5 transition
+                    {app.theme === value
+                    ? '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={() => applyTheme(value as "light" | "dark")}
                 >
-        {#each syncOptions as option}
+                  <Icon {icon} class="text-base" />
-          <option value={option.value}>{option.label}</option>
+                  {label}
+                </button>
               {/each}
-      </select>
+            </div>
             <span class="text-[var(--color-ink-muted)]">
-        Pulls and pushes cloud-linked projects on a timer. Conflicts pause
+              Applies immediately to the editor and preview.
-        syncing until they are resolved.
             </span>
           </div>
-
+        </div>
+      {:else if section === "account"}
+        <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"
           >
             <Icon
               icon={app.account ? "ph:user-circle-check" : "ph:user-circle"}
-        class="text-2xl {app.account ? 'text-[var(--color-success)]' : 'text-[var(--color-ink-muted)]'}"
+              class="text-2xl {app.account
+                ? 'text-[var(--color-success)]'
+                : 'text-[var(--color-ink-muted)]'}"
             />
             <div class="flex-1 text-xs">
               {#if app.account}
@@ -173,22 +229,78 @@
             {/if}
           </div>
 
-    <div class="flex items-center justify-between text-xs">
+          <div class="flex flex-col gap-1 text-xs">
-      <span class="font-medium text-[var(--color-ink-muted)]">Appearance</span>
+            <span class="font-medium text-[var(--color-ink-muted)]">
-      <div class="flex gap-1">
+              TypstDrive server
-        {#each [["light", "ph:sun"], ["dark", "ph:moon"]] as [value, icon]}
+            </span>
-          <button
+            <input class={fieldClass} bind:value={serverUrl} />
-            class="flex items-center gap-1.5 rounded-md border px-3 py-1.5 transition
+          </div>
-              {app.theme === value
+
-              ? 'border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-accent)]'
+          <div class="flex flex-col gap-1 text-xs">
-              : 'border-[var(--color-line)] text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)]'}"
+            <span class="font-medium text-[var(--color-ink-muted)]">
-            onclick={() => applyTheme(value as "light" | "dark")}
+              Automatic sync
+            </span>
+            <select class={fieldClass} bind:value={syncMinutes}>
+              {#each syncOptions as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+            <span class="text-[var(--color-ink-muted)]">
+              Pulls and pushes cloud-linked projects on a timer. Conflicts pause
+              syncing until they are resolved.
+            </span>
+          </div>
+        </div>
+      {: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)]" />
+            <div>
+              <p class="text-sm font-semibold">Typst Desktop</p>
+              <p class="text-xs text-[var(--color-ink-muted)]">
+                A local editor for Typst documents
+              </p>
+            </div>
+          </div>
+
+          {#if info}
+            <dl class="flex flex-col text-xs">
+              {#each [["Version", info.version], ["Typst", info.typst_version], ["Tauri", info.tauri_version], ["Author", info.authors], ["License", info.license]] as [label, value]}
+                <div
+                  class="flex justify-between border-b border-[var(--color-line)] py-1.5 last:border-0"
                 >
-            <Icon {icon} />
+                  <dt class="text-[var(--color-ink-muted)]">{label}</dt>
-            {value === "light" ? "Light" : "Dark"}
+                  <dd class="font-medium">{value}</dd>
+                </div>
+              {/each}
+            </dl>
+          {/if}
+
+          <div class="flex flex-col gap-1.5">
+            {#each links as link}
+              <button
+                class="flex items-center gap-2 rounded-md border border-[var(--color-line)] px-3 py-2 text-xs transition hover:border-[var(--color-accent)] hover:bg-[var(--color-surface-muted)]"
+                onclick={() => openUrl(link.url)}
+              >
+                <Icon icon={link.icon} class="text-base text-[var(--color-accent)]" />
+                <span class="flex-1 text-left">{link.label}</span>
+                <Icon
+                  icon="ph:arrow-square-out"
+                  class="text-[var(--color-ink-muted)]"
+                />
               </button>
             {/each}
           </div>
+
+          <p
+            class="rounded-md border border-[var(--color-line)] bg-[var(--color-surface-muted)] p-3 text-[11px] leading-relaxed text-[var(--color-ink-muted)]"
+          >
+            Typst Desktop is a community application and is not affiliated with,
+            endorsed by, or supported by the official Typst project. The links
+            above open the official Typst website in your browser.
+          </p>
+        </div>
+      {/if}
     </div>
   </div>
 
@@ -197,14 +309,16 @@
       class="rounded-md px-3 py-1.5 text-xs text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)]"
       onclick={onclose}
     >
-      Cancel
+      {section === "about" || section === "appearance" ? "Close" : "Cancel"}
     </button>
+    {#if section !== "about" && section !== "appearance"}
       <button
         class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90 disabled:opacity-50"
         disabled={saving}
         onclick={save}
       >
-      Save
+        {saving ? "Saving..." : "Save"}
       </button>
+    {/if}
   {/snippet}
 </Modal>

src/routes/+page.svelte

@@ -17,7 +17,6 @@
   import AssetsModal from "$lib/components/AssetsModal.svelte";
   import WindowControls from "$lib/components/WindowControls.svelte";
   import ImageViewer from "$lib/components/ImageViewer.svelte";
-  import InfoModal from "$lib/components/InfoModal.svelte";
   import EditorToolbar from "$lib/components/EditorToolbar.svelte";
   import PageSettingsModal from "$lib/components/PageSettingsModal.svelte";
 
@@ -67,7 +66,6 @@
     | { kind: "delete-file"; path: string }
     | { kind: "login" }
     | { kind: "settings" }
-    | { kind: "info" }
     | { kind: "assets" }
     | { kind: "page-settings" }
     | { kind: "conflicts" };
@@ -514,14 +512,6 @@
       <Icon icon="ph:gear-six" />
     </button>
 
-    <button
-      class="rounded-md p-1.5 text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface-muted)] hover:text-[var(--color-ink)]"
-      onclick={() => (dialog = { kind: "info" })}
-      aria-label="About"
-    >
-      <Icon icon="ph:info" />
-    </button>
-
     <div class="ml-1 h-5 w-px bg-[var(--color-line)]"></div>
 
     <WindowControls />
@@ -838,8 +828,6 @@
   />
 {:else if dialog.kind === "settings"}
   <SettingsModal onclose={close} onsignin={() => (dialog = { kind: "login" })} />
-{:else if dialog.kind === "info"}
-  <InfoModal onclose={close} />
 {:else if dialog.kind === "assets"}
   <AssetsModal
     oninsert={app.view === "editor" && editorView