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}
} +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) => ( +The card on your My Studies page. Turn on the daily reminder under Notifications.
+Templates you saved from a study’s Setup stage. They sync to your other devices.
+ {userTemplates.length === 0 ? ( +None saved yet.
+ ) : ( +