Convert stores and page loads to TS

src/lib/components/AudioBar.svelte

@@ -20,7 +20,7 @@ TODO:
         audioPlayer,
         convertStyle,
         modal,
-        MODAL_PLAYBACK_SPEED,
+        ModalType,
         playMode,
         refs,
         s,
@@ -153,7 +153,7 @@ TODO:
     {#if showSpeed}
         <button
             class="audio-speed audio-control-buttons"
-            onclick={() => modal.open(MODAL_PLAYBACK_SPEED)}
+            onclick={() => modal.open(ModalType.PlaybackSpeed)}
         >
             <AudioIcon.Speed color={iconColor} />
         </button>

src/lib/components/PlayButton.svelte

@@ -21,7 +21,7 @@
     }
     let { color = 'black', state, onclick }: Props = $props();
 
-    const size = config.mainFeatures['audio-play-button-size'] === 'normal' ? 24 : 48;
+    const size = String(config.mainFeatures['audio-play-button-size'] === 'normal' ? 24 : 48);
     const style = config.mainFeatures['audio-play-button-style'] as keyof typeof icons;
     const icon_style = icons[style];
     const Icon = $derived(icon_style[state]);

src/lib/components/ScriptureViewSofria.svelte

@@ -31,7 +31,7 @@ LOGGING:
         language,
         logs,
         modal,
-        MODAL_NOTE,
+        ModalType,
         plan,
         refs,
         t,
@@ -729,7 +729,7 @@ LOGGING:
         return '<svg fill="#000000" style="display:inline" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 96 96"><path d="M 21.07 74.80 L 8.76 87.35 Q 8.00 88.12 8.00 87.03 Q 8.00 52.12 8.00 18.00 Q 8.00 7.73 18.00 7.80 Q 48.00 8.00 78.00 8.00 Q 88.27 8.00 88.18 18.00 Q 88.00 40.13 88.09 62.25 Q 88.13 72.31 78.00 72.22 C 72.03 72.17 25.23 70.89 23.56 72.37 Q 22.78 73.07 21.07 74.80 Z M 72.00 21.60 A 0.60 0.60 0.0 0 0 71.40 21.00 L 24.60 21.00 A 0.60 0.60 0.0 0 0 24.00 21.60 L 24.00 28.40 A 0.60 0.60 0.0 0 0 24.60 29.00 L 71.40 29.00 A 0.60 0.60 0.0 0 0 72.00 28.40 L 72.00 21.60 Z M 72.00 35.60 A 0.60 0.60 0.0 0 0 71.40 35.00 L 24.60 35.00 A 0.60 0.60 0.0 0 0 24.00 35.60 L 24.00 42.40 A 0.60 0.60 0.0 0 0 24.60 43.00 L 71.40 43.00 A 0.60 0.60 0.0 0 0 72.00 42.40 L 72.00 35.60 Z M 60.00 49.60 A 0.60 0.60 0.0 0 0 59.40 49.00 L 24.60 49.00 A 0.60 0.60 0.0 0 0 24.00 49.60 L 24.00 56.40 A 0.60 0.60 0.0 0 0 24.60 57.00 L 59.40 57.00 A 0.60 0.60 0.0 0 0 60.00 56.40 L 60.00 49.60 Z"</path></svg>';
     };
     function editNote(note) {
-        modal.open(MODAL_NOTE, note);
+        modal.open(ModalType.Note, note);
     }
     function addNotedVerses(notesInChapter) {
         notesInChapter.then((notes) => {

src/lib/components/Sidebar.svelte

@@ -16,8 +16,7 @@ The sidebar/drawer.
         language,
         languageDefault,
         modal,
-        MODAL_COLLECTION,
-        MODAL_TEXT_APPEARANCE,
+        ModalType,
         refs,
         s,
         showDesktopSidebar,
@@ -172,7 +171,10 @@ The sidebar/drawer.
             {#if showLayouts}
                 <li>
                     <!-- svelte-ignore a11y_missing_attribute -->
-                    <button style:color={textColor} onclick={() => modal.open(MODAL_COLLECTION)}>
+                    <button
+                        style:color={textColor}
+                        onclick={() => modal.open(ModalType.Collection)}
+                    >
                         <BibleIcon color={iconColor} />{$t['Menu_Layout']}
                     </button>
                 </li>
@@ -238,7 +240,7 @@ The sidebar/drawer.
                 <li>
                     <button
                         style:color={textColor}
-                        onclick={() => modal.open(MODAL_TEXT_APPEARANCE)}
+                        onclick={() => modal.open(ModalType.TextAppearance)}
                     >
                         <TextAppearanceIcon color={iconColor} />{$t['Menu_Text_Appearance']}
                     </button>

src/lib/components/TextAppearanceSelector.svelte

@@ -45,7 +45,7 @@ The navbar component. We have sliders that update reactively to both font size a
         language,
         languages,
         modal,
-        MODAL_FONT,
+        ModalType,
         monoIconColor,
         theme,
         themeColors,
@@ -185,7 +185,7 @@ The navbar component. We have sliders that update reactively to both font size a
                         style:font-family={$currentFont}
                         style:font-size="large"
                         style:color={$monoIconColor}
-                        on:click={() => modal.open(MODAL_FONT)}
+                        on:click={() => modal.open(ModalType.Font)}
                         >{config.fonts.find((x) => x.family === $currentFont)?.name}</button
                     >
                 </div>

src/lib/data/analytics.ts

@@ -1,6 +1,5 @@
 import { scriptureConfig } from '$assets/config';
-import { analytics } from '$lib/data/stores';
-import type { AudioPlayer } from './audio';
+import { analytics, type AudioPlayer } from '$lib/data/stores';
 import type { HistoryItem } from './history';
 
 export function getBook(item: { collection?: string; book: string }) {