Feature/Search/683

package.json

@@ -71,6 +71,6 @@
         "node": "20.9.0"
     },
     "dependencies": {
-        "sql.js": "^1.12.0"
+        "sql.js": "^1.13.0"
     }
 }

src/lib/components/AlphabetStrip.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    export let alphabet: string[];
+    export let activeLetter: string;
+    export let onLetterSelect: (letter: string) => void;
+</script>
+
+<div
+    class="flex m-2 gap-1 md:gap-2 mb-4 justify-start overflow-x-auto whitespace-nowrap pb-2 snap-x min-w-[100vw]"
+    style="background-color: var(--TabBackgroundColor);"
+>
+    {#each alphabet as letter}
+        <button
+            class="px-3 py-2 text-sm font-bold border rounded-md cursor-pointer snap-start
+            sm:px-4 sm:py-3 sm:text-base
+            md:px-5 md:py-4 md:text-base
+            lg:px-6 lg:py-4 lg:text-lg"
+            style={activeLetter === letter
+                ? 'background-color: var(--TitleBackgroundColor); border-color: var(--PrimaryColor); color: var(--TextColor1);'
+                : 'background-color: var(--BackgroundColor); color: var(--TabTextColor); border-color: var(--SettingsSeparatorColor); hover:background-color: var(--TextHighlightColor);'}
+            on:click={() => onLetterSelect(letter)}
+        >
+            {letter}
+        </button>
+    {/each}
+</div>

src/lib/components/LexiconEntryView.svelte

@@ -186,3 +186,207 @@
 </script>
 
 <pre class="p-4 whitespace-pre-wrap break-words min-w-[100vw]">{@html xmlData}</pre>
+
+<script>
+    import { base } from '$app/paths';
+    import config from '$lib/data/config';
+    import { convertStyle } from '$lib/data/stores';
+    import initSqlJs from 'sql.js';
+    import { afterUpdate, onMount } from 'svelte';
+
+    export let selectedWord;
+    export let vernacularWordsList;
+    export let vernacularLanguage;
+    export let onSelectWord;
+    export let onSwitchLanguage;
+
+    let xmlData = '';
+
+    let singleEntryStyles = config.singleEntryStyles;
+
+    async function queryXmlByWordId(wordId) {
+        try {
+            const SQL = await initSqlJs({
+                locateFile: (file) => `${base}/wasm/sql-wasm.wasm`
+            });
+
+            const response = await fetch(`${base}/data.sqlite`);
+            if (!response.ok) {
+                throw new Error(
+                    `Failed to fetch database: ${response.status} ${response.statusText}`
+                );
+            }
+            const buffer = await response.arrayBuffer();
+            const db = new SQL.Database(new Uint8Array(buffer));
+            if (!db) {
+                console.error('Database not initialized');
+                return null;
+            }
+
+            const stmt = db.prepare('SELECT xml FROM entries WHERE id = ?');
+            stmt.bind([wordId]);
+
+            let result = null;
+            if (stmt.step()) {
+                result = stmt.getAsObject().xml;
+            }
+            stmt.free();
+            db.close();
+
+            return result;
+        } catch (error) {
+            console.error(`Error querying XML for word ID ${wordId}:`, error);
+            return null;
+        }
+    }
+
+    function formatXmlByClass(xmlString) {
+        if (!xmlString) return '';
+
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
+
+        // Check if parsing failed
+        const parseError = xmlDoc.querySelector('parsererror');
+        if (parseError) {
+            console.error('XML parsing error:', parseError.textContent);
+            return `<span class="text-error" style="color: var(--TextColor6);">Error parsing XML: Invalid format</span>`;
+        }
+
+        function processNode(node, parentHasSenseNumber = false) {
+            let output = '';
+
+            if (node.nodeType === Node.TEXT_NODE) {
+                return node.nodeValue.trim() ? node.nodeValue + ' ' : '';
+            }
+
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                let className = node.getAttribute('class') || '';
+                let isSenseNumber = className.includes('sensenumber');
+
+                let parentContainsSenseNumber =
+                    parentHasSenseNumber ||
+                    [...node.parentNode.children].some(
+                        (child) =>
+                            child.getAttribute &&
+                            (child.getAttribute('class') || '').includes('sensenumber')
+                    );
+
+                if (node.tagName === 'a' && node.hasAttribute('href')) {
+                    const href = node.getAttribute('href');
+                    const match = href.match(/E-(\d+)/); // Extract index number
+                    if (match) {
+                        const index = parseInt(match[1], 10); // Extracted number as integer
+                        const wordObject = vernacularWordsList.find((item) => item.id === index);
+                        const word = wordObject ? wordObject.name : 'Unknown'; // Fallback if not found
+                        const homonymIndex = wordObject ? wordObject.homonym_index : 1; // Default to 1 if not found
+
+                        let linkText = node.textContent.trim();
+
+                        // If the text inside the link matches the homonym index, use the homonym index as the text
+                        if (linkText === String(homonymIndex)) {
+                            linkText = homonymIndex.toString();
+                        }
+
+                        output += `<span class="clickable cursor-pointer" style="color: var(--LinkColor); text-decoration: underline;" data-word="${word}" data-index="${index}" data-homonym="${homonymIndex}">${linkText}</span>`;
+                        return output;
+                    }
+                } else {
+                    output += '<' + node.tagName;
+                    for (let attr of node.attributes) {
+                        output += ` ${attr.name}="${attr.value}"`;
+                    }
+
+                    // I've added appropriate styling based on class name
+                    if (className.includes('sensenumber')) {
+                        output += ` style="color: var(--TextColor1); font-weight: bold;"`;
+                    } else if (className.includes('vernacular')) {
+                        output += ` style="color: var(--TextColor2);"`;
+                    } else if (className.includes('example')) {
+                        output += ` style="color: var(--TextColor3); font-style: italic;"`;
+                    } else if (className.includes('definition')) {
+                        output += ` style="color: var(--TextColor); font-weight: normal;"`;
+                    }
+
+                    output += '>';
+
+                    for (let child of node.childNodes) {
+                        output += processNode(child, parentContainsSenseNumber || isSenseNumber);
+                    }
+
+                    output += `</${node.tagName}>`;
+                }
+            }
+
+            return output;
+        }
+
+        return processNode(xmlDoc.documentElement);
+    }
+
+    async function updateXmlData() {
+        if (
+            !selectedWord ||
+            (!selectedWord.index && (!selectedWord.indexes || selectedWord.indexes.length === 0))
+        ) {
+            xmlData = '';
+            return;
+        }
+
+        let wordIds = selectedWord.indexes ? selectedWord.indexes : [selectedWord.index];
+        let xmlResults = await Promise.all(wordIds.map(queryXmlByWordId));
+
+        // Insert an `<hr>` tag or a visible separator between entries
+        xmlData =
+            xmlResults
+                .filter((xml) => xml) // Ensure no null values are included
+                .map(formatXmlByClass)
+                .join('\n<hr style="border-color: var(--SettingsSeparatorColor);">\n') +
+            '\n<hr style="border-color: var(--SettingsSeparatorColor);">\n';
+    }
+
+    function attachEventListeners() {
+        const spans = document.querySelectorAll('.clickable');
+
+        spans.forEach((span) => {
+            const oldSpan = span.cloneNode(true);
+            span.parentNode.replaceChild(oldSpan, span);
+        });
+
+        const freshSpans = document.querySelectorAll('.clickable');
+        freshSpans.forEach((span) => {
+            span.addEventListener('click', () => {
+                onSwitchLanguage(vernacularLanguage);
+                const word = span.getAttribute('data-word');
+                const index = parseInt(span.getAttribute('data-index'), 10);
+                const homonym_index = parseInt(span.getAttribute('data-homonym'), 10);
+
+                onSelectWord({
+                    word,
+                    index,
+                    homonym_index
+                });
+            });
+        });
+    }
+
+    function applyStyles() {
+        for (let stl of singleEntryStyles) {
+            for (let elm of document.querySelectorAll(stl.name)) {
+                elm.style = convertStyle(stl.properties);
+            }
+        }
+    }
+
+    onMount(updateXmlData);
+
+    afterUpdate(() => {
+        updateXmlData();
+        applyStyles();
+        attachEventListeners();
+    });
+</script>
+
+<pre
+    class="p-4 whitespace-pre-wrap break-words min-w-[100vw]"
+    style="background-color: var(--BackgroundColor); color: var(--TextColor);">{@html xmlData}</pre>

src/lib/components/LexiconReversalListView.svelte

@@ -3,13 +3,14 @@
     export let onSelectWord;
 </script>
 
-<ul class="space-y-3 px-4 pb-4">
+<ul class="space-y-3 px-4 pb-4" style="background-color: var(--BackgroundColor);">
     {#each reversalWordsList as { word, indexes, vernacularWords, letter }}
         <li class="cursor-pointer text-lg mb-3" id="letter-{letter}">
             <button
                 type="button"
                 class="w-full text-left py-1"
                 aria-label={`Select word ${word}`}
+                style="color: var(--TextColor); border-bottom: 1px solid var(--SettingsSeparatorColor);"
                 on:click={() => onSelectWord({ word, indexes })}
                 on:keydown={(event) => {
                     if (event.key === 'Enter' || event.key === ' ') {
@@ -18,12 +19,14 @@
                     }
                 }}
             >
-                <p class="font-bold break-words">{word}</p>
-                <p class="text-md ml-4">
+                <p class="font-bold break-words" style="color: var(--TextColor);">{word}</p>
+                <p class="text-md ml-4" style="color: var(--TextColor);">
                     {#each vernacularWords as { name, homonymIndex }, i}
                         {#if i > 0},
                         {/if}
-                        {name}{#if homonymIndex > 0}<sub>{homonymIndex}</sub>{/if}
+                        <span style="color: var(--TextColor);"
+                            >{name}{#if homonymIndex > 0}<sub>{homonymIndex}</sub>{/if}</span
+                        >
                     {/each}
                 </p>
             </button>

src/lib/components/LexiconReversalView.svelte

@@ -0,0 +1,35 @@
+<script>
+    import AlphabetStrip from './AlphabetStrip.svelte';
+    import LexiconLanguageTabs from './LexiconLanguageTabs.svelte';
+
+    export let alphabet = [];
+    export let selectedLanguage;
+    export let vernacularLanguage;
+    export let reversalLanguage;
+    export let selectedLetter;
+    export let onSwitchLanguage;
+    export let onLetterChange;
+
+    let currentLetter = alphabet[0];
+
+    async function handleLetterSelect(letter) {
+        currentLetter = letter;
+        onLetterChange(letter);
+    }
+
+    $: if (alphabet && alphabet.length > 0) {
+        currentLetter = alphabet[0];
+    }
+    $: if (selectedLetter !== currentLetter) {
+        currentLetter = selectedLetter;
+    }
+</script>
+
+<LexiconLanguageTabs
+    {reversalLanguage}
+    {selectedLanguage}
+    {onSwitchLanguage}
+    {vernacularLanguage}
+/>
+
+<AlphabetStrip {alphabet} activeLetter={currentLetter} onLetterSelect={handleLetterSelect} />

src/lib/components/LexiconVernacularListView.svelte

@@ -3,13 +3,14 @@
     export let onSelectWord;
 </script>
 
-<ul class="space-y-3 px-4 pb-4">
+<ul class="space-y-3 px-4 pb-4" style="background-color: var(--BackgroundColor);">
     {#each vernacularWordsList as { id, name, homonym_index, type, num_senses, summary, letter }}
         <li class="cursor-pointer text-lg mb-3 scroll-mt-16" id="letter-{letter}">
             <button
                 type="button"
                 class="w-full text-left py-1"
                 aria-label={`Select word ${name}`}
+                style="color: var(--TextColor); border-bottom: 1px solid var(--SettingsSeparatorColor);"
                 on:click={() => onSelectWord({ word: name, index: id })}
                 on:keydown={(event) => {
                     if (event.key === 'Enter' || event.key === ' ') {
@@ -18,11 +19,11 @@
                     }
                 }}
             >
-                <p class="font-bold break-words">
+                <p class="font-bold break-words" style="color: var(--TextColor);">
                     {name}{#if homonym_index > 0}<sub>{homonym_index}</sub>{/if}
                 </p>
                 {#if summary}
-                    <p class="ml-4 italic">
+                    <p class="ml-4 italic" style="color: var(--TextColor2);">
                         {#each summary.match(/{(.*?)}/g) || [] as match}
                             {match.replace(/[{}]/g, '')}
                         {/each}