Design updates (ekzhang#82)

* Adjust font weight

* Settings refactor and scrollback

* Fix embarrassing typo

* Text in -> with

src/lib/settings.ts

@@ -1,13 +1,40 @@
 import { persisted } from "svelte-persisted-store";
-import { type ThemeName, defaultTheme } from "./ui/themes";
+import themes, { type ThemeName, defaultTheme } from "./ui/themes";
+import { derived, type Readable } from "svelte/store";
 
-export type SettingsStore = {
+export type Settings = {
   name: string;
   theme: ThemeName;
+  scrollback: number;
 };
 
+const storedSettings = persisted<Partial<Settings>>("sshx-settings-store", {});
+
 /** A persisted store for settings of the current user. */
-export const settings = persisted<SettingsStore>("sshx-settings-store", {
-  name: "",
-  theme: defaultTheme,
-});
+export const settings: Readable<Settings> = derived(
+  storedSettings,
+  ($storedSettings) => {
+    // Do some validation on all of the stored settings.
+    const name = $storedSettings.name ?? "";
+
+    let theme = $storedSettings.theme;
+    if (!theme || !Object.hasOwn(themes, theme)) {
+      theme = defaultTheme;
+    }
+
+    let scrollback = $storedSettings.scrollback;
+    if (typeof scrollback !== "number" || scrollback < 0) {
+      scrollback = 5000;
+    }
+
+    return {
+      name,
+      theme,
+      scrollback,
+    };
+  },
+);
+
+export function updateSettings(values: Partial<Settings>) {
+  storedSettings.update((settings) => ({ ...settings, ...values }));
+}

src/lib/ui/Avatars.svelte

@@ -32,7 +32,7 @@
 
 <style lang="postcss">
   .avatar {
-    @apply w-7 h-7 rounded-full text-xs font-bold flex justify-center items-center;
+    @apply w-7 h-7 rounded-full text-xs font-medium flex justify-center items-center;
     @apply mr-1 first:mr-0;
   }
 </style>

src/lib/ui/Chat.svelte

@@ -60,7 +60,7 @@
     <CircleButtons>
       <CircleButton kind="red" on:click={() => dispatch("close")} />
     </CircleButtons>
-    <div class="ml-2.5 text-zinc-300 text-sm font-bold">Chat Messages</div>
+    <div class="ml-3 text-zinc-300 text-sm font-medium">Chat Messages</div>
   </div>
 
   <div class="px-3 py-2 flex-1 overflow-y-auto" bind:this={scroller}>

src/lib/ui/ChooseName.svelte

@@ -2,15 +2,12 @@
   import { browser } from "$app/environment";
 
   import OverlayMenu from "./OverlayMenu.svelte";
-  import { settings } from "$lib/settings";
+  import { settings, updateSettings } from "$lib/settings";
 
   let value = "";
 
   function handleSubmit() {
-    settings.update((curSettings) => ({
-      ...curSettings,
-      name: value,
-    }));
+    updateSettings({ name: value });
   }
 </script>
 

src/lib/ui/LiveCursor.svelte

@@ -51,7 +51,7 @@
   </svg>
   {#if showName || hovering || time - lastMove < 1500}
     <p
-      class="mt-4 bg-zinc-700 text-xs px-1.5 py-[1px] rounded font-bold"
+      class="mt-4 bg-zinc-700 text-xs px-1.5 py-[1px] rounded font-medium"
       transition:fade|local={{ duration: 150 }}
     >
       {user.name}

src/lib/ui/NameList.svelte

@@ -15,7 +15,7 @@
         class="w-3.5 h-3.5 rounded-full"
       />
       <div
-        class="text-sm font-semibold bg-zinc-800 px-1.5 py-0.5 rounded text-zinc-300"
+        class="text-sm font-medium bg-zinc-800 px-1.5 py-0.5 rounded text-zinc-300"
       >
         {user.name}
       </div>

src/lib/ui/Settings.svelte

@@ -1,32 +1,23 @@
 <script lang="ts">
-  import { settings } from "$lib/settings";
   import { ChevronDownIcon } from "svelte-feather-icons";
+
+  import { settings, updateSettings } from "$lib/settings";
   import OverlayMenu from "./OverlayMenu.svelte";
-  import themes, { defaultTheme, type ThemeName } from "./themes";
+  import themes, { type ThemeName } from "./themes";
 
   export let open: boolean;
 
-  let nameValue = "";
-  let initialized = false;
+  let inputName: string;
+  let inputTheme: ThemeName;
+  let inputScrollback: number;
 
+  let initialized = false;
   $: open, (initialized = false);
-  $: if (open && !initialized) {
+  $: if (!initialized) {
     initialized = true;
-    nameValue = $settings.name;
-  }
-
-  let selectedTheme: ThemeName; // Bound to the settings input.
-  if (Object.hasOwn(themes, $settings.theme)) {
-    selectedTheme = $settings.theme;
-  } else {
-    selectedTheme = defaultTheme;
-  }
-
-  function handleThemeChange() {
-    settings.update((curSettings) => ({
-      ...curSettings,
-      theme: selectedTheme,
-    }));
+    inputName = $settings.name;
+    inputTheme = $settings.theme;
+    inputScrollback = $settings.scrollback;
   }
 </script>
 
@@ -39,53 +30,69 @@
 >
   <div class="flex flex-col gap-4">
     <div class="item">
-      <div class="flex-1">
-        <p class="font-medium mb-2">Name</p>
-        <p class="text-sm text-zinc-400">
-          Choose how you appear to other users.
-        </p>
+      <div>
+        <p class="item-title">Name</p>
+        <p class="item-subtitle">Choose how you appear to other users.</p>
       </div>
       <div>
         <input
           class="input-common"
           placeholder="Your name"
-          bind:value={nameValue}
+          bind:value={inputName}
           maxlength="50"
           on:input={() => {
-            if (nameValue.length >= 2) {
-              settings.update((curSettings) => ({
-                ...curSettings,
-                name: nameValue,
-              }));
+            if (inputName.length >= 2) {
+              updateSettings({ name: inputName });
             }
           }}
         />
       </div>
     </div>
     <div class="item">
-      <div class="flex-1">
-        <p class="font-medium mb-2">Color palette</p>
-        <p class="text-sm text-zinc-400">Color theme for text in terminals.</p>
+      <div>
+        <p class="item-title">Color palette</p>
+        <p class="item-subtitle">Color theme for text in terminals.</p>
       </div>
       <div class="relative">
         <ChevronDownIcon
           class="absolute top-[11px] right-2.5 w-4 h-4 text-zinc-400"
         />
         <select
           class="input-common !pr-5"
-          bind:value={selectedTheme}
-          on:change={handleThemeChange}
+          bind:value={inputTheme}
+          on:change={() => updateSettings({ theme: inputTheme })}
         >
           {#each Object.keys(themes) as themeName (themeName)}
             <option value={themeName}>{themeName}</option>
           {/each}
         </select>
       </div>
     </div>
+    <div class="item">
+      <div>
+        <p class="item-title">Scrollback</p>
+        <p class="item-subtitle">
+          Lines of previous text displayed in the terminal window.
+        </p>
+      </div>
+      <div>
+        <input
+          type="number"
+          class="input-common"
+          bind:value={inputScrollback}
+          on:input={() => {
+            if (inputScrollback >= 0) {
+              updateSettings({ scrollback: inputScrollback });
+            }
+          }}
+          step="100"
+        />
+      </div>
+    </div>
     <!-- <div class="item">
-      <div class="flex-1">
-        <p class="font-medium mb-2">Cursor style</p>
-        <p class="text-sm text-zinc-400">Style of live cursors.</p>
+      <div>
+        <p class="item-title">Cursor style</p>
+        <p class="item-subtitle">Style of live cursors.</p>
       </div>
       <div class="text-red-500">Coming soon</div>
     </div> -->
@@ -104,6 +111,18 @@
     @apply bg-zinc-800/25 rounded-lg p-4 flex gap-4 flex-col sm:flex-row items-start;
   }
 
+  .item > div:first-child {
+    @apply flex-1;
+  }
+
+  .item-title {
+    @apply font-medium text-zinc-200 mb-1;
+  }
+
+  .item-subtitle {
+    @apply text-sm text-zinc-400;
+  }
+
   .input-common {
     @apply w-52 px-3 py-2 text-sm rounded-md bg-transparent hover:bg-white/5;
     @apply border border-zinc-700 outline-none focus:ring-2 focus:ring-indigo-500/50;

src/lib/ui/XTerm.svelte

@@ -39,7 +39,7 @@
   import type { Terminal } from "sshx-xterm";
   import { Buffer } from "buffer";
 
-  import themes, { defaultTheme } from "./themes";
+  import themes from "./themes";
   import CircleButton from "./CircleButton.svelte";
   import CircleButtons from "./CircleButtons.svelte";
   import { settings } from "$lib/settings";
@@ -67,13 +67,12 @@
   export let termEl: HTMLDivElement = null as any; // suppress "missing prop" warning
   let term: Terminal | null = null;
 
-  $: theme = Object.hasOwn(themes, $settings.theme)
-    ? themes[$settings.theme]
-    : themes[defaultTheme];
+  $: theme = themes[$settings.theme];
 
   $: if (term) {
     // If the theme changes, update existing terminals' appearance.
     term.options.theme = theme;
+    term.options.scrollback = $settings.scrollback;
   }
 
   let loaded = false;
@@ -140,7 +139,7 @@
       fontWeight: 400,
       fontWeightBold: 500,
       lineHeight: 1.06,
-      scrollback: 5000,
+      scrollback: $settings.scrollback,
       theme,
     });
 
@@ -247,7 +246,7 @@
       </CircleButtons>
     </div>
     <div
-      class="p-2 text-sm text-zinc-300 text-center font-bold overflow-hidden whitespace-nowrap text-ellipsis w-0 flex-grow-[4]"
+      class="p-2 text-sm text-zinc-300 text-center font-medium overflow-hidden whitespace-nowrap text-ellipsis w-0 flex-grow-[4]"
     >
       {currentTitle}
     </div>

src/routes/+error.svelte

@@ -31,7 +31,7 @@
 
   <a
     href="/"
-    class="inline-block font-semibold px-6 py-2 rounded-full bg-indigo-900 hover:bg-indigo-700"
+    class="inline-block font-medium px-6 py-2 rounded-full bg-indigo-900 hover:bg-indigo-700"
     >Return home</a
   >
 </main>

src/routes/+page.svelte

@@ -97,7 +97,7 @@
 
     <div class="pb-12 md:pb-36">
       <button
-        class="bg-pink-700 hover:bg-pink-600 active:ring-4 active:ring-pink-500/50 text-lg font-semibold px-8 py-2 rounded-full"
+        class="bg-pink-700 hover:bg-pink-600 active:ring-4 active:ring-pink-500/50 text-lg font-medium px-8 py-2 rounded-full"
         on:click={scrollToInstallation}
       >
         Get Started
@@ -163,7 +163,7 @@
     </div>
 
     <h2 bind:this={installationEl} class="mt-40 mb-16">
-      Get started in <span class="title-gradient">two quick steps</span>
+      Get started with <span class="title-gradient">two quick steps</span>
     </h2>
 
     <div
@@ -240,16 +240,16 @@
 
 <style lang="postcss">
   h1 {
-    @apply font-bold text-4xl sm:text-5xl max-w-[26ch] py-2;
+    @apply font-medium text-4xl sm:text-5xl max-w-[26ch] py-2 sm:tracking-tight;
     line-height: 1.15;
   }
 
   h2 {
-    @apply font-bold text-3xl sm:text-4xl md:text-center scroll-mt-16;
+    @apply font-medium text-3xl sm:text-4xl md:text-center scroll-mt-16;
   }
 
   b {
-    @apply text-zinc-300 font-semibold;
+    @apply text-zinc-300 font-medium;
   }
 
   code {
@@ -296,7 +296,7 @@
   }
 
   .feature-block h3 {
-    @apply font-semibold mb-2;
+    @apply font-medium mb-2;
   }
 
   .feature-block p {
@@ -308,7 +308,7 @@
   }
 
   .step-heading {
-    @apply text-2xl text-zinc-200 font-semibold flex items-center md:justify-center;
+    @apply text-2xl text-zinc-200 font-medium flex items-center md:justify-center;
   }
 
   .pill {