Fix local state warnings

Author: FyreByrd

src/lib/components/BookmarkButton.svelte

@@ -3,14 +3,14 @@
 
     let { fillColor, emptyColor, onclick, filled } = $props();
 
-    const icons_filled = {
+    const icons_filled = $derived({
         color: fillColor,
         Icon: BookmarkIcon
-    };
-    const icons_empty = {
+    });
+    const icons_empty = $derived({
         color: emptyColor,
         Icon: BookmarkOutlineIcon
-    };
+    });
 
     const { color, Icon } = $derived(filled ? icons_filled : icons_empty);
 </script>

src/lib/components/ScriptureViewSofria.svelte

@@ -37,7 +37,6 @@ LOGGING:
 <script lang="ts">
     /* eslint-disable svelte/no-dom-manipulating */
 
-    import { base } from '$app/paths';
     import { scriptureConfig } from '$assets/config';
     import { hasAudioPlayed, seekToVerse } from '$lib/data/audio';
     import {
@@ -258,6 +257,7 @@ LOGGING:
         }
     });
 
+    // svelte-ignore state_referenced_locally
     const stateSelectedVerses = fromStore(selectedVerses);
     $effect(() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions

src/lib/components/SearchResultList.svelte

@@ -24,7 +24,7 @@
     // Changes to signal when to clear results
     const showSpinner = $derived(!queryDone && results.length === 0);
     let resultsShown = $state<SearchResult[]>([]);
-    let displayQueryId = $state(queryId);
+    let displayQueryId = $derived(queryId);
 
     const resultCountText = $derived(formatResultCount(results.length));
 

src/routes/history/+page.svelte

@@ -6,7 +6,7 @@
     import DeleteSweepIcon from '$lib/icons/DeleteSweepIcon.svelte';
 
     let { data } = $props();
-    let history = $state([...data.history].reverse());
+    let history = $derived([...data.history].reverse());
 
     async function onClearHistory() {
         await clearHistory();

src/routes/lexicon/+page.svelte

@@ -25,16 +25,16 @@
 
     const { data }: Props = $props();
 
-    const { vernacularAlphabet } = data;
+    const { vernacularAlphabet } = $derived(data);
 
-    const alphabets = {
+    const alphabets = $derived({
         reversal: Object.fromEntries(
-            reversals.entries().map(([code, alpha]) => [code, Array.from(alpha.keys())])
+            reversals.entries().map(([code, alpha]) => [code, Array.from(alpha?.keys() ?? [])])
         ),
         vernacular: vernacularAlphabet
-    };
+    });
 
-    let selectedLetter = alphabets.vernacular[0];
+    let selectedLetter = $derived(alphabets.vernacular?.[0]);
     let scrollContainer: HTMLDivElement | undefined = $state(undefined);
 
     //$: selectedLanguage = currentReversal.selectedLanguage;
@@ -45,7 +45,9 @@
         currentReversal.languageId = vernacularLanguageId.value;
     });
 
-    const validReversal = $derived(reversals.has(currentReversal.languageId));
+    const validReversal = $derived(
+        !!currentReversal.languageId && reversals.has(currentReversal.languageId)
+    );
 
     async function scrollToLetter(letter: string) {
         await tick();
@@ -68,7 +70,7 @@
 
     function switchLanguage(language: string) {
         currentReversal.languageId = language;
-        selectedLetter = currentAlphabet[0];
+        selectedLetter = currentAlphabet?.[0];
         const scrollableDiv = document.querySelector('.flex-1.overflow-y-auto.bg-base-100');
         if (scrollableDiv) {
             scrollableDiv.scrollTop = 0;
@@ -90,16 +92,16 @@
             const threshold = 100;
 
             if (div.scrollHeight - div.scrollTop - div.clientHeight < threshold) {
-                const currentIndex = currentAlphabet.indexOf(selectedLetter);
-                if (!currentReversal.letters.has(currentAlphabet[currentIndex + 1])) {
-                    if (currentIndex < currentAlphabet.length - 1) {
+                const currentIndex = currentAlphabet?.indexOf(selectedLetter ?? '') ?? -1;
+                if (!currentReversal.letters.has(currentAlphabet?.[currentIndex + 1] ?? '')) {
+                    if (currentIndex < (currentAlphabet?.length ?? 0) - 1) {
                         isFetching = true;
 
                         isFetching = false;
                     }
                 }
             } else if (
-                (validReversal && currentReversal.letters.has(selectedLetter)) ||
+                (validReversal && currentReversal.letters.has(selectedLetter ?? '')) ||
                 currentReversal.languageId === vernacularLanguageId.value
             ) {
                 const allLetters = div.querySelectorAll('[id^="letter-"]');
@@ -120,7 +122,9 @@
     }
 
     let currentAlphabet = $derived(
-        validReversal ? alphabets.reversal[currentReversal.languageId] : alphabets.vernacular
+        validReversal && currentReversal.languageId
+            ? alphabets.reversal[currentReversal.languageId]
+            : alphabets.vernacular
     );
 
     onMount(() => {
@@ -136,7 +140,7 @@
     <WordNavigationStrip />
 {:else}
     {@const tabs = [vernacularLanguageId.value, ...reversals.keys()]}
-    {@const indexOfPrevious = tabs.indexOf(previousLanguage)}
+    {@const indexOfPrevious = previousLanguage ? tabs.indexOf(previousLanguage) : 0}
     <div class="flex w-full" style="background-color: var(--TabBackgroundColor);">
         {#each tabs as lang, i}
             <button
@@ -168,7 +172,10 @@
                 style="border-color: var(--SettingsSeparatorColor);"
                 disabled={currentReversal.languageId !== vernacularLanguageId.value &&
                     !Array.from(
-                        reversals.get(currentReversal.languageId)?.get(letter)?.values() || []
+                        reversals
+                            .get(currentReversal.languageId ?? '')
+                            ?.get(letter)
+                            ?.values() || []
                     ).find((w) => w.length)}
                 onclick={() => handleLetterChange(letter)}
             >

src/routes/notes/edit/[noteid]/+page.svelte

@@ -15,7 +15,7 @@
     let textarea: HTMLTextAreaElement | undefined = $state();
     const note = $derived(data.note);
     const isNew = $derived(note ? false : true);
-    let text = $state(note?.text ?? '');
+    let text = $derived(note?.text ?? '');
     const reference = $derived(note?.reference ?? $selectedVerses[0]?.reference);
     const title = $derived(isNew ? 'Annotation_Note_Add' : 'Annotation_Note_Edit');
 

src/routes/plans/[id]/+page.svelte

@@ -47,7 +47,7 @@
     let inUse = $state(false);
     //could be info or calendar for a plan thats not in use, if the plan is in use, there is a settings tab
     checkPlanState();
-    let selectedDay = $state(data.planData.items?.[0]);
+    let selectedDay = $derived(data.planData.items?.[0]);
     const planId = $derived(data.planData.id);
     let currentPlanStatus = $state('');
     let currentStatusDateString = '';