Skip to content

Feature/migrate FontList, FontSelector, and HistoryCard #863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KarsonDahl wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Feature/migrate FontList, FontSelector, and HistoryCard #863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
98507a6
Migrate remaining Search files to Svelte 5
KarsonDahl Jun 9, 2025
e136974
Migrate Search files and page to Svelte 5
KarsonDahl Jun 11, 2025
fe4fdd1
Migrate Search Files to Svelte
KarsonDahl Jun 16, 2025
a0dd69e
Migrate Search Edits
KarsonDahl Jun 16, 2025
2ecd459
fix lint failure in types.ts
KarsonDahl Jun 16, 2025
5fa65a5
Migrate FontList, FontSelector, HistoryCard
KarsonDahl Jun 26, 2025
68f5b4f
Migrate
KarsonDahl Jun 26, 2025
d1d8658
Migrate FontList and FontSelector
KarsonDahl Jul 7, 2025
0ba05a5
Migrate Font List and Selector, TextAppearanceSel
KarsonDahl Jul 7, 2025
2a2beb8
Migrate History Card:
KarsonDahl Jul 10, 2025
98bd1d6
Merge branch 'main' into feature/migrate-font-list
KarsonDahl Jul 10, 2025
7a37fa5
Resolve Conflict TextAppearanceSel
KarsonDahl Jul 10, 2025
effd72c
Reslove TextAppearanceSel
KarsonDahl Jul 10, 2025
fdd2fa9
Reslove Prettier compliance issue
KarsonDahl Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions src/lib/components/FontList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,32 @@
@component
Font list component.
-->
<svelte:options accessors />
<svelte:options />

<script>
import config from '$lib/data/config';
import { fontChoices, monoIconColor, themeColors } from '$lib/data/stores';
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();
export let selectedFont;
let { selectedFont = $bindable() } = $props();

function handleClick(font) {
selectedFont = font;
dispatch('menuaction', {
font: font
});
}
</script>

<ul class="dy-menu">
{#each $fontChoices as font}
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y_missing_attribute -->
<li style:font-family={font} style:font-size="large">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-interactive-supports-focus -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_interactive_supports_focus -->
<a
on:click={() => handleClick(font)}
onclick={() => handleClick(font)}
style:background-color={font === selectedFont
? $themeColors['ButtonSelectedColor']
: ''}
style:color={$monoIconColor}
style:font-famly={font}
style:font-family={font}
role="button"
>
{config.fonts.find((x) => x.family === font).name}
Expand Down
40 changes: 22 additions & 18 deletions src/lib/components/FontSelector.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!-- svelte-ignore non_reactive_update -->
<!--
@component
Font Selector component.
Expand All @@ -8,35 +9,38 @@ Font Selector component.
import Modal from './Modal.svelte';

const modalId = 'fontSelector';
let modal;
let fontList;
let modal = $state();
let selectedFont = $state(currentFont);

export function showModal() {
fontList.selectedFont = $currentFont;
selectedFont = currentFont;
modal.showModal();
}

function handleOk() {
currentFonts.update((fonts) => {
fonts[$refs.collection] = fontList.selectedFont;
fonts[$refs.collection] = selectedFont;
return fonts;
});
//currentFont.set(selectedFont);
}
</script>

<Modal bind:this={modal} id={modalId}>
<FontList bind:this={fontList} selectedFont={$currentFont} />
<div class="flex w-full justify-between dy-modal-action">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<button
style={convertStyle($s['ui.dialog.button'])}
class="dy-btn dy-btn-sm dy-btn-ghost no-animation">{$t['Button_Cancel']}</button
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<button
style={convertStyle($s['ui.dialog.button'])}
class="dy-btn dy-btn-sm dy-btn-ghost no-animation"
on:click={() => handleOk()}>{$t['Button_OK']}</button
>
</div>
{#snippet content()}
<FontList bind:selectedFont />
<div class="flex w-full justify-between dy-modal-action">
<!-- svelte-ignore a11y_click_events_have_key_events -->
<button
style={convertStyle($s['ui.dialog.button'])}
class="dy-btn dy-btn-sm dy-btn-ghost no-animation">{$t['Button_Cancel']}</button
>
<!-- svelte-ignore a11y_click_events_have_key_events -->
<button
style={convertStyle($s['ui.dialog.button'])}
class="dy-btn dy-btn-sm dy-btn-ghost no-animation"
onclick={() => handleOk()}>{$t['Button_OK']}</button
>
</div>
{/snippet}
</Modal>
32 changes: 18 additions & 14 deletions src/lib/components/HistoryCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,22 @@ TODO:
import { gotoRoute } from '$lib/navigate';
import { formatDateAndTime } from '$lib/scripts/dateUtils';

export let history: HistoryItem;
interface Prop {
history: HistoryItem;
}

let { history }: Prop = $props();

$: bc = config.bookCollections.find((x) => x.id === history.collection);
$: docSet = bc.languageCode + '_' + bc.id;
$: bcName = config.bookCollections.length == 1 ? null : bc.collectionName;
$: bookName = bc.books.find((x) => x.id === history.book)?.name;
$: chapterVerseSeparator = bc.features['ref-chapter-verse-separator'];
$: reference = history.verse
? history.chapter + chapterVerseSeparator + history.verse
: history.chapter;
$: dateFormat = formatDateAndTime(new Date(history.date));
$: textDirection = bc.style.textDirection;
let bc = $derived(config.bookCollections.find((x) => x.id === history.collection));
let docSet = $derived(bc.languageCode + '_' + bc.id);
let bcName = $derived(config.bookCollections.length == 1 ? null : bc.collectionName);
let bookName = $derived(bc.books.find((x) => x.id === history.book)?.name);
let chapterVerseSeparator = $derived(bc.features['ref-chapter-verse-separator']);
let reference = $derived(
history.verse ? history.chapter + chapterVerseSeparator + history.verse : history.chapter
);
let dateFormat = $derived(formatDateAndTime(new Date(history.date)));
let textDirection = $derived(bc.style.textDirection);

function onHistoryClick() {
if (history.url) {
Expand All @@ -42,9 +46,9 @@ TODO:

<!-- history cards are alway LTR with the reference following the text direction -->
<div class="history-item-block dy-card w-100 bg-base-100 shadow-lg my-4" style:direction="ltr">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div style="text-decoration:none;" on:click={onHistoryClick}>
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div style="text-decoration:none;" onclick={onHistoryClick}>
<div
class="history-card grid grid-cols-1"
class:grid-rows-2={!bcName}
Expand Down
29 changes: 15 additions & 14 deletions src/lib/components/TextAppearanceSelector.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,21 @@ The navbar component. We have sliders that update reactively to both font size a
{contentsMode ? $contentsFontSize : $bodyFontSize}
</div>
</div>
{#if showFonts}
<div class="grid gap-4 items-center range-row m-2">
<ImageIcon.FontChoice color={$monoIconColor} />
<button
class="dy-btn-sm col-span-2 rounded"
style:border="1px dotted"
style:font-family={$currentFont}
style:font-size="large"
style:color={$monoIconColor}
on:click={() => modal.open(MODAL_FONT)}
>{config.fonts.find((x) => x.family === $currentFont)?.name ??
$currentFont}
</button>
</div>
{/if}
{/if}
{#if showLineHeight}
<div class="grid gap-4 items-center range-row m-2">
Expand All @@ -148,20 +163,6 @@ The navbar component. We have sliders that update reactively to both font size a
</div>
</div>
{/if}
{#if showFonts}
<div class="grid gap-4 items-center range-row m-2">
<ImageIcon.FontChoice color={$monoIconColor} />
<button
class="dy-btn-sm col-span-2 rounded"
style:border="1px dotted"
style:font-family={$currentFont}
style:font-size="large"
style:color={$monoIconColor}
on:click={() => modal.open(MODAL_FONT)}
>{config.fonts.find((x) => x.family === $currentFont).name}</button
>
</div>
{/if}
<!-- Theme Selction buttons-->
{#if showThemes}
<div
Expand Down
16 changes: 10 additions & 6 deletions src/routes/search/[collection]/[[savedResults]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,27 @@
} from '$lib/search/domain/interfaces/presentation-interfaces';
import { makeSearchSession } from '$lib/search/factories';
import type { SearchFormSubmitEvent } from '$lib/types';
import { onMount } from 'svelte';
import { onMount, tick } from 'svelte';

let { data } = $props();

let phrase: string = $state();
let wholeWords: boolean = $state();
let matchAccents: boolean = $state();

let phrase: string = $state('');
let wholeWords: boolean = $state(false);
let matchAccents: boolean = $state(false);
let results: SearchResult[] = $state([]);
let queryId = $state(0);
let queryDone = $state(true);
let restoreResults = $state(false); // Whether saved results are currently being loaded

let scrollDiv: HTMLDivElement;
let scrollDiv: HTMLDivElement | null = $state(null);
let scrollPosition = 0;
let scrollSaved = false;

// The following block should be inside a function or reactive statement, not at top-level
// if (scrollDiv) {
// scrollPosition = scrollDiv.scrollTop;
// }
Comment on lines +30 to +33
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove or fix the commented code.

This commented code appears to be an incomplete refactoring attempt. Accessing scrollDiv at the top level would fail since reactive state can't be accessed outside of reactive contexts.

Either remove this commented code or move it into an appropriate reactive context like an event handler or $effect:

-// The following block should be inside a function or reactive statement, not at top-level
-// if (scrollDiv) {
-//     scrollPosition = scrollDiv.scrollTop;
-// }
+$effect(() => {
+    if (scrollDiv) {
+        scrollPosition = scrollDiv.scrollTop;
+    }
+});

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In src/routes/search/[collection]/[[savedResults]]/+page.svelte around lines 30
to 33, the commented code attempts to access scrollDiv at the top level, which
is invalid. Remove this commented code or move it inside a reactive statement or
an event handler where scrollDiv is accessible, such as within a $: reactive
block or a function triggered by a scroll event.


const presenter: SearchPresenter = {
setOptions: function (newPhrase: string, options: UserSearchOptions): void {
phrase = newPhrase;
Expand Down