From 68b45c91f8f0090fce58a4b8b0980d5bc6aa463e Mon Sep 17 00:00:00 2001
From: Steven Weathers <steven@weathers.me>
Date: Sun, 7 Apr 2024 19:35:02 -0400
Subject: [PATCH 1/3] Fix storyboards page pagination missing import

---
 ui/src/pages/storyboard/Storyboards.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/pages/storyboard/Storyboards.svelte b/ui/src/pages/storyboard/Storyboards.svelte
index cabfd4b2..3a3981b2 100644
--- a/ui/src/pages/storyboard/Storyboards.svelte
+++ b/ui/src/pages/storyboard/Storyboards.svelte
@@ -7,6 +7,7 @@
   import LL from '../../i18n/i18n-svelte';
   import CreateStoryboard from '../../components/storyboard/CreateStoryboard.svelte';
   import BoxList from '../../components/BoxList.svelte';
+  import Pagination from '../../components/global/Pagination.svelte';
 
   export let xfetch;
   export let notifications;

From f3954cc9048b197a605e94c2dbf2808b09812454 Mon Sep 17 00:00:00 2001
From: Steven Weathers <steven@weathers.me>
Date: Sun, 7 Apr 2024 19:43:55 -0400
Subject: [PATCH 2/3] Reduce pageload flicker by adding backup font and moving
 locale initialization

---
 ui/src/App.svelte | 14 ++++++--------
 ui/src/app.css    |  2 +-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index e2a93e2b..f558dfff 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -4,7 +4,7 @@
   import '../node_modules/quill/dist/quill.core.css';
   import '../node_modules/quill/dist/quill.snow.css';
   import Navaid from 'navaid';
-  import { onDestroy, onMount } from 'svelte';
+  import { onDestroy } from 'svelte';
 
   import { AppConfig, appRoutes } from './config';
   import apiclient from './apiclient';
@@ -52,12 +52,12 @@
   import AdminSubscription from './pages/admin/Subscription.svelte';
   import { setLocale } from './i18n/i18n-svelte';
   import { detectLocale } from './i18n/i18n-util';
-  import { loadLocaleAsync } from './i18n/i18n-util.async';
   import Confirmation from './pages/subscription/Confirmation.svelte';
   import Pricing from './pages/subscription/Pricing.svelte';
   import PrivacyPolicy from './pages/support/PrivacyPolicy.svelte';
   import TermsConditions from './pages/support/TermsConditions.svelte';
   import Support from './pages/support/Support.svelte';
+  import { loadLocale } from './i18n/i18n-util.sync';
 
   const {
     FeaturePoker,
@@ -73,6 +73,10 @@
     activeWarrior = w;
   });
 
+  const detectedLocale = activeWarrior.locale || detectLocale();
+  loadLocale(detectedLocale);
+  setLocale(detectedLocale);
+
   $: if (document.dir !== $dir) {
     document.dir = $dir;
   }
@@ -529,12 +533,6 @@
     });
   }
 
-  onMount(async () => {
-    const detectedLocale = activeWarrior.locale || detectLocale();
-    await loadLocaleAsync(detectedLocale);
-    setLocale(detectedLocale);
-  });
-
   onDestroy(router.unlisten);
 </script>
 
diff --git a/ui/src/app.css b/ui/src/app.css
index 9905f5bb..d168f2b8 100644
--- a/ui/src/app.css
+++ b/ui/src/app.css
@@ -3,7 +3,7 @@
 @import 'tailwindcss/utilities';
 
 .font-rajdhani {
-  font-family: 'Rajdhani', sans-serif;
+  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
 }
 
 ::-webkit-calendar-picker-indicator {

From 5780ba66bbbb87e5caed8670ec8da81571e63e05 Mon Sep 17 00:00:00 2001
From: Steven Weathers <steven@weathers.me>
Date: Sun, 7 Apr 2024 19:52:17 -0400
Subject: [PATCH 3/3] Abstract quill editor to new component to reduce future
 replacement efforts

---
 ui/package.json                               |  3 +-
 ui/src/components/Editor.svelte               | 22 ++++++++
 ui/src/components/checkin/Checkin.svelte      | 54 ++++++++-----------
 ui/src/components/poker/AddStory.svelte       | 30 +++++------
 ui/src/components/storyboard/StoryForm.svelte | 19 +++----
 5 files changed, 65 insertions(+), 63 deletions(-)
 create mode 100644 ui/src/components/Editor.svelte

diff --git a/ui/package.json b/ui/package.json
index d363be66..9d5856eb 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -23,7 +23,8 @@
     "test:watch": "npm run test -- --watch",
     "test:snapshot": "npm test -- -u",
     "locales": "npx typesafe-i18n --no-watch",
-    "locales:watch": "typesafe-i18n"
+    "locales:watch": "typesafe-i18n",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
     "compute-scroll-into-view": "^3.1.0",
diff --git a/ui/src/components/Editor.svelte b/ui/src/components/Editor.svelte
new file mode 100644
index 00000000..97391b8a
--- /dev/null
+++ b/ui/src/components/Editor.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { quill } from '../quill';
+
+  export let content = '';
+  export let placeholder = '';
+  export let handleTextChange = text => {};
+  export let id = '';
+
+  function onTextChange(e) {
+    handleTextChange(e.detail.html);
+  }
+</script>
+
+<div
+  class="w-full"
+  use:quill="{{
+    placeholder: `${placeholder}`,
+    content: content,
+  }}"
+  on:text-change="{onTextChange}"
+  id="{id}"
+></div>
diff --git a/ui/src/components/checkin/Checkin.svelte b/ui/src/components/checkin/Checkin.svelte
index edf9651f..5fbe434b 100644
--- a/ui/src/components/checkin/Checkin.svelte
+++ b/ui/src/components/checkin/Checkin.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import Modal from '../global/Modal.svelte';
   import SolidButton from '../global/SolidButton.svelte';
-  import { quill } from '../../quill';
   import LL from '../../i18n/i18n-svelte';
+  import Editor from '../Editor.svelte';
 
   export let toggleCheckin = () => {};
   export let handleCheckin = () => {};
@@ -50,15 +50,12 @@
             {$LL.yesterday()}
           </div>
           <div class="bg-white">
-            <div
-              class="w-full"
-              use:quill="{{
-                placeholder: `${$LL.yesterdayPlaceholder()}`,
-                content: yesterday,
-              }}"
-              on:text-change="{e => (yesterday = e.detail.html)}"
+            <Editor
+              content="{yesterday}"
+              placeholder="{$LL.yesterdayPlaceholder()}"
               id="yesterday"
-            ></div>
+              handleTextChange="{c => (yesterday = c)}"
+            />
           </div>
         </div>
         <div class="mb-4">
@@ -93,15 +90,12 @@
             {$LL.today()}
           </div>
           <div class="bg-white">
-            <div
-              class="w-full"
-              use:quill="{{
-                placeholder: `${$LL.todayPlaceholder()}`,
-                content: today,
-              }}"
-              on:text-change="{e => (today = e.detail.html)}"
+            <Editor
+              content="{today}"
+              placeholder="{$LL.todayPlaceholder()}"
               id="today"
-            ></div>
+              handleTextChange="{c => (today = c)}"
+            />
           </div>
         </div>
       </div>
@@ -114,15 +108,12 @@
         {$LL.blockers()}
       </div>
       <div class="bg-white">
-        <div
-          class="w-full"
-          use:quill="{{
-            placeholder: `${$LL.blockersPlaceholder()}`,
-            content: blockers,
-          }}"
-          on:text-change="{e => (blockers = e.detail.html)}"
+        <Editor
+          content="{blockers}"
+          placeholder="{$LL.blockersPlaceholder()}"
           id="blockers"
-        ></div>
+          handleTextChange="{c => (blockers = c)}"
+        />
       </div>
     </div>
 
@@ -133,15 +124,12 @@
         {$LL.discuss()}
       </div>
       <div class="bg-white">
-        <div
-          class="w-full"
-          use:quill="{{
-            placeholder: `${$LL.discussPlaceholder()}`,
-            content: discuss,
-          }}"
-          on:text-change="{e => (discuss = e.detail.html)}"
+        <Editor
+          content="{discuss}"
+          placeholder="{$LL.discussPlaceholder()}"
           id="discuss"
-        ></div>
+          handleTextChange="{c => (discuss = c)}"
+        />
       </div>
     </div>
 
diff --git a/ui/src/components/poker/AddStory.svelte b/ui/src/components/poker/AddStory.svelte
index 9c7a1945..9eb49f69 100644
--- a/ui/src/components/poker/AddStory.svelte
+++ b/ui/src/components/poker/AddStory.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { quill } from '../../quill';
   import SolidButton from '../global/SolidButton.svelte';
   import Modal from '../global/Modal.svelte';
   import NoSymbol from '../icons/NoSymbol.svelte';
@@ -12,6 +11,7 @@
   import { AppConfig } from '../../config';
   import TextInput from '../global/TextInput.svelte';
   import SelectInput from '../global/SelectInput.svelte';
+  import Editor from '../Editor.svelte';
 
   export let handlePlanAdd = () => {};
   export let toggleAddPlan = () => {};
@@ -186,15 +186,12 @@
       {#if descriptionExpanded}
         <div class="mb-2">
           <div class="bg-white">
-            <div
-              class="w-full bg-white"
-              use:quill="{{
-                placeholder: $LL.planDescriptionPlaceholder(),
-                content: description,
-              }}"
-              on:text-change="{e => (description = e.detail.html)}"
-              id="description"
-            ></div>
+            <Editor
+              content="{description}"
+              placeholder="{$LL.planDescriptionPlaceholder()}"
+              id="storyDescription"
+              handleTextChange="{c => (description = c)}"
+            />
           </div>
         </div>
       {/if}
@@ -218,15 +215,12 @@
       {#if acceptanceExpanded}
         <div class="mb-2">
           <div class="bg-white">
-            <div
-              class="w-full"
-              use:quill="{{
-                placeholder: $LL.planAcceptanceCriteriaPlaceholder(),
-                content: acceptanceCriteria,
-              }}"
-              on:text-change="{e => (acceptanceCriteria = e.detail.html)}"
+            <Editor
+              content="{acceptanceCriteria}"
+              placeholder="{$LL.planAcceptanceCriteriaPlaceholder()}"
               id="acceptanceCriteria"
-            ></div>
+              handleTextChange="{c => (acceptanceCriteria = c)}"
+            />
           </div>
         </div>
       {/if}
diff --git a/ui/src/components/storyboard/StoryForm.svelte b/ui/src/components/storyboard/StoryForm.svelte
index 9f81b021..e0b8e207 100644
--- a/ui/src/components/storyboard/StoryForm.svelte
+++ b/ui/src/components/storyboard/StoryForm.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { quill } from '../../quill';
   import Modal from '../global/Modal.svelte';
   import HollowButton from '../global/HollowButton.svelte';
   import UserIcon from '../icons/UserIcon.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import TextInput from '../global/TextInput.svelte';
+  import Editor from '../Editor.svelte';
 
   export let toggleStoryForm = () => {};
   export let sendSocketEvent = () => {};
@@ -279,18 +279,15 @@
             Story Content
           </label>
           <div class="bg-white">
-            <div
-              class="w-full bg-white"
-              use:quill="{{
-                placeholder: 'Enter story content',
-                content: story.content,
-              }}"
-              on:text-change="{e => {
-                story.content = e.detail.html;
+            <Editor
+              content="{story.content}"
+              placeholder="Enter story content"
+              id="storyDescription"
+              handleTextChange="{c => {
+                story.content = c;
                 updateContent();
               }}"
-              id="storyDescription"
-            ></div>
+            />
           </div>
         </div>
         <div class="mb-4">