diff --git a/src/components/settings/MoreSettings.jsx b/src/components/settings/MoreSettings.jsx new file mode 100644 index 0000000..cf34215 --- /dev/null +++ b/src/components/settings/MoreSettings.jsx @@ -0,0 +1,121 @@ +// Settings → Preferences: the choices that used to be reachable only from the screen they affect +// (highlight colour names, the dashboard's layout, the verse of the day, saved study templates). +import { useEffect, useState } from 'react'; +import { useApp } from '../../context/AppContext.js'; +import { useLocalSetting } from '../../hooks/useLocalSetting.js'; +import { useIqAvailable } from '../../hooks/useIq.js'; +import { READER_TRANSLATIONS } from '../../utils/bibleText.js'; +import { COLOR_NAMES, COLOR_SUGGESTIONS, HIGHLIGHT_COLORS } from '../../utils/highlightColors.js'; +import { SCENES, loadPhotoList } from '../../utils/verseBackgrounds.js'; +import { BACKGROUND_KEY } from '../VerseShareImage.jsx'; + +const card = 'rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-6'; +const field = 'rounded-xl border border-[var(--r-line)] bg-[var(--r-bg)] px-3 py-2 text-sm text-[var(--r-text)] focus:outline-none focus:ring-2 focus:ring-[var(--r-line)]'; + +function Row({ label, hint, children }) { + return ( +
+
+

{label}

+ {hint &&

{hint}

} +
+ {children} +
+ ); +} + +export function HighlightColours() { + const { readerColorLabels = {}, setReaderColorLabel } = useApp(); + return ( +
+

Highlight colours

+

Give each colour a meaning, such as “Promise” or “Command”. The names show in your Highlights list and exports, and sync to your other devices.

+ {HIGHLIGHT_COLORS.map((c) => ( +
+
+ ))} +
+ ); +} + +export function DashboardSettings() { + const [view, setView] = useLocalSetting('homeView', 'grid'); + const [sort, setSort] = useLocalSetting('homeSort', 'recent'); + return ( +
+

My Studies page

+ +
+ {[['grid', 'Grid'], ['list', 'List']].map(([id, text]) => ( + + ))} +
+
+ + + +
+ ); +} + +export function VerseOfDaySettings() { + const on = useIqAvailable(); + const { readerTranslation } = useApp(); + const [translation, setTranslation] = useLocalSetting('votd-translation', ''); + const [background, setBackground] = useLocalSetting(BACKGROUND_KEY, 'auto'); + const [photos, setPhotos] = useState([]); + useEffect(() => { let live = true; loadPhotoList().then((list) => { if (live) setPhotos(list); }); return () => { live = false; }; }, []); + if (!on) return null; + const shown = READER_TRANSLATIONS.some((t) => t.id === translation) ? translation : ''; + return ( +
+

Verse of the day

+

The card on your My Studies page. Turn on the daily reminder under Notifications.

+ + + + + + +
+ ); +} + +export function StudyTemplates() { + const { userTemplates = [], deleteUserTemplate } = useApp(); + return ( +
+

Study templates

+

Templates you saved from a study’s Setup stage. They sync to your other devices.

+ {userTemplates.length === 0 ? ( +

None saved yet.

+ ) : ( + + )} +
+ ); +} diff --git a/src/components/study/PageShell.jsx b/src/components/study/PageShell.jsx index 55b73e8..faaa10b 100644 --- a/src/components/study/PageShell.jsx +++ b/src/components/study/PageShell.jsx @@ -95,7 +95,7 @@ export default function PageShell({ title, onBack, actions, active = null, maxWi
Skip to content
-
+