From 084131f9563d68056a24898c1302674391b0c7c7 Mon Sep 17 00:00:00 2001
From: Eric Zhang <ekzhang1@gmail.com>
Date: Sat, 6 Apr 2024 17:12:11 -0400
Subject: [PATCH] Design updates (#82)

* Adjust font weight

* Settings refactor and scrollback

* Fix embarrassing typo

* Text in -> with
---
 src/lib/settings.ts          | 39 ++++++++++++---
 src/lib/ui/Avatars.svelte    |  2 +-
 src/lib/ui/Chat.svelte       |  2 +-
 src/lib/ui/ChooseName.svelte |  7 +--
 src/lib/ui/LiveCursor.svelte |  2 +-
 src/lib/ui/NameList.svelte   |  2 +-
 src/lib/ui/Settings.svelte   | 97 +++++++++++++++++++++---------------
 src/lib/ui/XTerm.svelte      | 11 ++--
 src/routes/+error.svelte     |  2 +-
 src/routes/+page.svelte      | 14 +++---
 10 files changed, 110 insertions(+), 68 deletions(-)

diff --git a/src/lib/settings.ts b/src/lib/settings.ts
index c5febe5..ad3dd8e 100644
--- a/src/lib/settings.ts
+++ b/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 }));
+}
diff --git a/src/lib/ui/Avatars.svelte b/src/lib/ui/Avatars.svelte
index 92f1904..f87dc0c 100644
--- a/src/lib/ui/Avatars.svelte
+++ b/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>
diff --git a/src/lib/ui/Chat.svelte b/src/lib/ui/Chat.svelte
index 63203a6..c9df9d3 100644
--- a/src/lib/ui/Chat.svelte
+++ b/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}>
diff --git a/src/lib/ui/ChooseName.svelte b/src/lib/ui/ChooseName.svelte
index 4a24a97..54d4db6 100644
--- a/src/lib/ui/ChooseName.svelte
+++ b/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>
 
diff --git a/src/lib/ui/LiveCursor.svelte b/src/lib/ui/LiveCursor.svelte
index 2ec32bd..b26aeb7 100644
--- a/src/lib/ui/LiveCursor.svelte
+++ b/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}
diff --git a/src/lib/ui/NameList.svelte b/src/lib/ui/NameList.svelte
index f4f03e6..732accb 100644
--- a/src/lib/ui/NameList.svelte
+++ b/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>
diff --git a/src/lib/ui/Settings.svelte b/src/lib/ui/Settings.svelte
index e12fa6a..8f7d2f5 100644
--- a/src/lib/ui/Settings.svelte
+++ b/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,33 +30,28 @@
 >
   <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
@@ -73,8 +59,8 @@
         />
         <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>
@@ -82,10 +68,31 @@
         </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;
diff --git a/src/lib/ui/XTerm.svelte b/src/lib/ui/XTerm.svelte
index 8b7010c..19785d2 100644
--- a/src/lib/ui/XTerm.svelte
+++ b/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>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index e18d964..977e998 100644
--- a/src/routes/+error.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cde4414..281497c 100644
--- a/src/routes/+page.svelte
+++ b/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 {