forked from akai/readest
772bb73b46
* ui/ux: codify design system and migrate settings to shared primitives Document Readest's design language in DESIGN.md (Adwaita-aligned, e-ink-first, RTL-correct) and migrate every settings panel onto a small set of primitives (BoxedList, SettingsRow, SettingsSwitchRow, SettingsSelect, SettingsInput, NavigationRow, Tips, SubPageHeader). AGENTS.md links to DESIGN.md so contributors land there before inventing new chassis classes. Replace the standalone KOReader/Readwise/Hardcover Config dialogs with a single Integrations panel (Reading Sync + Content Sources sub-pages). The reader's BookMenu now hides each provider until it's configured, and Hardcover's per-book "Enable for This Book" toggle is dropped — there's no auto-sync to gate, so the flag was just extra clicks. Refresh highlight colors (two-trigger swatch + label, translatable default names), background texture / theme color selectors (border-current keeps selection legible on any backdrop), CustomFonts/CustomDictionaries (quiet list-extension style + shared Tips primitive), the OPDS catalog manager (debounced auto-download, right-aligned Browse), Set PIN, and the KOSync conflict resolver. Translate the ~30 new strings across all 33 locales. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * ui/ux: responsive typography, OPDS card polish, deep-link return paths Restore the .settings-content responsive cascade (14px desktop / 16px mobile) the legacy panels relied on by dropping hardcoded `text-sm`/`text-xs` from the new primitives. Secondary text moves to em-relative `text-[0.85em]` so it scales with the parent. Form controls (`<input>`, `<select>`) re-apply the cascade explicitly via the `settings-content` class since browsers don't inherit font-size onto form elements. Extract `<SectionTitle>` primitive (caseless-language aware via `isCaselessUILang`/`isCaselessLang`) and route every uppercase tag-style header through it: BoxedList groups, Reading Sync, Content Sources, Theme Color, Background Image, integration form labels, KOSyncResolver device labels, and the OPDS My Catalogs / Popular Catalogs sections. CJK / Arabic / Hebrew / Indic / Thai / Tibetan locales bump to `1em` since `uppercase` is a no-op on those scripts. Redesign the OPDS My Catalogs cards: whole card becomes the browse trigger (role='button'), edit/delete collapse into a 3-dot dropdown menu, and the sync-status moves to a sub-line under Auto-download so the card height stays constant whether the toggle is on/off or sync data has arrived. Plumb a `from=settings-integrations` URL marker through the OPDS browser so both manual close and auto-close-on-failure (preserved as `router.back()` for transient failures, paired with a new `stashOPDSReturnTarget` helper) return the user to Settings -> Integrations -> OPDS Catalogs sub-page rather than the dialog's top level. Backed by new `requestedSubPage` deep-link store field. Skip the OPDS catalog passphrase prompt when credentials sync is disabled -- `replicaPublish` already drops encrypted fields at the wire, so prompting was both pointless and confusing. Fix `SettingsDialog` calling `setRequestedPanel(null)` inside a `useState` lazy initializer (zustand setter during render -> React warning); move the clear into a one-shot `useEffect`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * ui/ux: opt Settings into OverlayScrollbars + caseless typography polish Add an opt-in `useOverlayScroll` prop to `<Dialog>` that swaps the body's native `overflow-y-auto` for `<OverlayScrollbarsComponent>` (autohide, click-scroll, no native overlaid bars). SettingsDialog flips it on so the long Layout / Color panels keep a visible, theme-aware scroll track on Android / iOS webviews where native scrollbars auto-hide entirely. Other short-modal callers stay on the native scrollbar. Drop the `uppercase tracking-wider` SectionTitle styling for caseless scripts and pair it with body-weight `font-medium` instead — those typographic effects are no-ops on Han / Hangul / Devanagari / Thai etc., so a plain medium-weight body-size title reads more correctly than a shrunken pseudo-uppercase one. SettingsRow / NavigationRow primary labels follow the same rule (drop `font-medium` in caseless locales since the inherited body weight already carries; CJK fonts bold poorly at body size). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * ui/ux: SettingLabel primitive + KOSyncForm select polish + Tips alignment Add `<SettingLabel>` primitive — caseless-aware row/field label that pairs with `<SectionTitle>` (groups) for per-item labels. Cased scripts get `font-medium`; caseless scripts (CJK / Arabic / Hebrew / Indic / Thai / Tibetan) drop the weight since Han / Hangul / Devanagari etc. bold poorly at body size. No font-size class so it inherits the `.settings-content` 14/16 cascade. Routed through `SettingsRow`, `NavigationRow`, and the ~12 ad-hoc inline `text-sm font-medium` callsites in AIPanel / FontPanel / ColorPanel / IntegrationsPanel / KOSync / Readwise / Hardcover forms. Refactor KOSyncForm's Sync Strategy + Checksum Method rows onto the shared `<SettingsSelect>` primitive — the inline 17-line div/select/ MdArrowDropDown chassis becomes a single SettingsSelect call with an options array. Drops the unused MdArrowDropDown import and ~25 lines. Fix Tips list-item alignment: callers traditionally pass `<li>` elements (semantic) but the primitive was double-wrapping into `<li><span><li>...</li></span></li>` — invalid HTML, and the inner `<li>`'s `display: list-item` broke line-wrap alignment on multi-line items. Unwrap caller `<li>` to its content; add `flex-1` on the text span so wrapped lines align under the first line instead of falling back to the bullet column. Bullet container switches to `h-[1.4em]` so it tracks the text line-height and pins to the first line's optical center via `items-center` regardless of how much the content wraps. DESIGN.md §5 typography updated to point primary-label callers at `<SettingLabel>`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
173 lines
4.9 KiB
TypeScript
173 lines
4.9 KiB
TypeScript
import { LocaleWithTextInfo } from '@/types/misc';
|
|
import { franc } from 'franc-min';
|
|
import { iso6392 } from 'iso-639-2';
|
|
import { iso6393To1 } from 'iso-639-3';
|
|
|
|
export const isCJKStr = (str: string) => {
|
|
return /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u.test(str ?? '');
|
|
};
|
|
|
|
export const isCJKLang = (lang: string | null | undefined): boolean => {
|
|
if (!lang) return false;
|
|
const normalizedLang = normalizedLangCode(lang);
|
|
return ['zh', 'ja', 'ko', 'zho', 'jpn', 'kor'].includes(normalizedLang);
|
|
};
|
|
|
|
/**
|
|
* Languages whose primary script has no uppercase/lowercase distinction.
|
|
* Matters for UI rules that lean on the `uppercase` CSS property for visual
|
|
* emphasis — those rules are no-ops here, so callers usually pair this with
|
|
* an alternate weight/size treatment (e.g. bigger font-size in section
|
|
* headers). Covers CJK, Arabic-script (Arabic, Persian), Hebrew, the major
|
|
* Indic scripts (Devanagari, Bengali, Tamil, Sinhala), Thai, and Tibetan.
|
|
*/
|
|
export const isCaselessLang = (lang: string | null | undefined): boolean => {
|
|
if (!lang) return false;
|
|
const normalizedLang = normalizedLangCode(lang);
|
|
return [
|
|
'zh',
|
|
'ja',
|
|
'ko', // CJK
|
|
'ar',
|
|
'fa', // Arabic script
|
|
'he', // Hebrew
|
|
'hi',
|
|
'bn',
|
|
'ta',
|
|
'si', // Indic scripts
|
|
'th', // Thai
|
|
'bo', // Tibetan
|
|
'zho',
|
|
'jpn',
|
|
'kor',
|
|
'ara',
|
|
'fas', // ISO-639-3 aliases
|
|
'heb',
|
|
'hin',
|
|
'ben',
|
|
'tam',
|
|
'sin',
|
|
'tha',
|
|
'bod',
|
|
].includes(normalizedLang);
|
|
};
|
|
|
|
const ZH_SCRIPTS_MAPPING: Record<string, string> = {
|
|
zh: 'zh-Hans',
|
|
'zh-cn': 'zh-Hans',
|
|
'zh-hk': 'zh-Hant',
|
|
'zh-tw': 'zh-Hant',
|
|
'zh-mo': 'zh-Hant',
|
|
'zh-hans': 'zh-Hans',
|
|
'zh-hant': 'zh-Hant',
|
|
};
|
|
|
|
export const normalizeToFullLang = (langCode: string): string => {
|
|
try {
|
|
const locale = new Intl.Locale(langCode.toLowerCase());
|
|
const maximized = locale.maximize();
|
|
|
|
if (maximized.language === 'zh') {
|
|
return maximized.script === 'Hant' ? 'zh-Hant' : 'zh-Hans';
|
|
}
|
|
|
|
return maximized.region ? `${maximized.language}-${maximized.region}` : langCode;
|
|
} catch {
|
|
return ZH_SCRIPTS_MAPPING[langCode.toLowerCase()] || langCode;
|
|
}
|
|
};
|
|
|
|
export const normalizeToShortLang = (langCode: string): string => {
|
|
const lang = langCode.toLowerCase();
|
|
if (lang.startsWith('zh')) {
|
|
return ZH_SCRIPTS_MAPPING[lang] || 'zh-Hans';
|
|
}
|
|
return lang.split('-')[0]!;
|
|
};
|
|
|
|
export const normalizedLangCode = (lang: string | null | undefined): string => {
|
|
if (!lang) return '';
|
|
return lang.split('-')[0]!.toLowerCase();
|
|
};
|
|
|
|
export const isSameLang = (lang1?: string | null, lang2?: string | null): boolean => {
|
|
if (!lang1 || !lang2) return false;
|
|
const normalizedLang1 = normalizedLangCode(lang1);
|
|
const normalizedLang2 = normalizedLangCode(lang2);
|
|
return normalizedLang1 === normalizedLang2;
|
|
};
|
|
|
|
export const isValidLang = (lang?: string) => {
|
|
if (!lang) return false;
|
|
if (typeof lang !== 'string') return false;
|
|
if (['und', 'mul', 'mis', 'zxx'].includes(lang)) return false;
|
|
const code = normalizedLangCode(lang);
|
|
return iso6392.some((l) => l.iso6391 === code || l.iso6392B === code);
|
|
};
|
|
|
|
export const code6392to6391 = (code: string): string => {
|
|
const lang = iso6392.find((l) => l.iso6392B === code);
|
|
return lang?.iso6391 || '';
|
|
};
|
|
|
|
const commonIndivToMacro: Record<string, string> = {
|
|
cmn: 'zho',
|
|
arb: 'ara',
|
|
arz: 'ara',
|
|
ind: 'msa',
|
|
zsm: 'msa',
|
|
nob: 'nor',
|
|
nno: 'nor',
|
|
pes: 'fas',
|
|
quy: 'que',
|
|
};
|
|
|
|
export const code6393to6391 = (code: string): string => {
|
|
const macro = commonIndivToMacro[code] || code;
|
|
return iso6393To1[macro] || '';
|
|
};
|
|
|
|
export const getLanguageName = (code: string): string => {
|
|
const lang = normalizedLangCode(code);
|
|
const language = iso6392.find((l) => l.iso6391 === lang || l.iso6392B === lang);
|
|
return language ? language.name : lang;
|
|
};
|
|
|
|
export const inferLangFromScript = (text: string, lang: string): string => {
|
|
if (!lang || lang === 'en') {
|
|
if (/[\p{Script=Hangul}]/u.test(text)) {
|
|
return 'ko';
|
|
} else if (/[\p{Script=Hiragana}\p{Script=Katakana}]/u.test(text)) {
|
|
return 'ja';
|
|
} else if (/[\p{Script=Han}]/u.test(text)) {
|
|
return 'zh';
|
|
}
|
|
}
|
|
return lang;
|
|
};
|
|
|
|
export const detectLanguage = (content: string): string => {
|
|
try {
|
|
const iso6393Lang = franc(content.substring(0, 1000));
|
|
const iso6391Lang = code6393to6391(iso6393Lang) || 'en';
|
|
return iso6391Lang;
|
|
} catch {
|
|
console.warn('Language detection failed, defaulting to en.');
|
|
return 'en';
|
|
}
|
|
};
|
|
|
|
export const getLanguageInfo = (lang: string) => {
|
|
if (!lang) return {};
|
|
try {
|
|
const canonical = Intl.getCanonicalLocales(lang)[0]!;
|
|
const locale = new Intl.Locale(canonical) as LocaleWithTextInfo;
|
|
const isCJK = ['zh', 'ja', 'kr'].includes(locale.language);
|
|
const direction = (locale.getTextInfo?.() ?? locale.textInfo)?.direction;
|
|
return { canonical, locale, isCJK, direction };
|
|
} catch (e) {
|
|
console.warn(e);
|
|
return {};
|
|
}
|
|
};
|