Files
readest/apps/readest-app/src/utils/misc.ts
T
Huang Xin 772bb73b46 ui/ux: codify design system and migrate settings to shared primitives (#4116)
* 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>
2026-05-10 17:46:25 +02:00

124 lines
4.3 KiB
TypeScript

import { OsPlatform } from '@/types/system';
import { md5 } from 'js-md5';
import { isCaselessLang } from './lang';
export const uniqueId = () => Math.random().toString(36).substring(2, 9);
export const randomMd5 = () => md5(Math.random().toString());
export const getContentMd5 = (content: unknown) => md5(JSON.stringify(content));
export const makeSafeFilename = (filename: string, replacement = '_') => {
// Windows restricted characters + control characters and reserved names
const unsafeCharacters = /[<>:%#"\/\\|?*\x00-\x1F]/g;
const reservedFilenames = /^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i;
// Unsafe to use filename including file extensions over 255 bytes on Android
const maxFilenameBytes = 250;
let safeName = filename.replace(unsafeCharacters, replacement);
if (reservedFilenames.test(safeName)) {
safeName = `${safeName}${replacement}`;
}
const encoder = new TextEncoder();
let utf8Bytes = encoder.encode(safeName);
while (utf8Bytes.length > maxFilenameBytes) {
safeName = safeName.slice(0, -1);
utf8Bytes = encoder.encode(safeName);
}
return safeName.trim();
};
export const getLocale = () => {
const locale = localStorage?.getItem('i18nextLng') || navigator?.language || '';
// POSIX locale values (e.g. 'C', 'C.UTF-8', 'POSIX') are not valid BCP 47
// tags and would cause Intl/toLocaleString to throw — fall back to en-US
if (!locale || /^(C|POSIX)(\..*)?$/i.test(locale)) return 'en-US';
return locale;
};
export const getUserLang = () => {
const locale = getLocale();
return locale.split('-')[0] || 'en';
};
export const getTargetLang = () => {
const locale = getLocale();
if (locale.startsWith('zh')) {
return locale === 'zh-Hant' || locale === 'zh-HK' || locale === 'zh-TW' ? 'zh-Hant' : 'zh-Hans';
}
return locale.split('-')[0] || 'en';
};
export const isCJKEnv = () => {
const browserLanguage = navigator.language || '';
const uiLanguage = localStorage?.getItem('i18nextLng') || '';
const isCJKUI = ['zh', 'ja', 'ko'].some((lang) => uiLanguage.startsWith(lang));
const isCJKLocale = ['zh', 'ja', 'ko'].some((lang) => browserLanguage.startsWith(lang));
return isCJKLocale || isCJKUI;
};
/**
* True when the active UI language uses a script with no upper/lower case
* distinction (CJK, Arabic-script, Hebrew, major Indic scripts, Thai,
* Tibetan). Use this to opt out of UI rules that depend on the `uppercase`
* CSS property for emphasis — those rules render as no-ops in caseless
* scripts and the affected text needs alternate visual weight (typically a
* larger font-size). Reads the active i18next locale from localStorage and
* falls back to navigator.language. Source list lives in `isCaselessLang`
* (utils/lang.ts).
*/
export const isCaselessUILang = () => {
const uiLanguage = localStorage?.getItem('i18nextLng') || navigator.language || '';
return isCaselessLang(uiLanguage);
};
export const getUserLocale = (lang: string): string | undefined => {
const languages =
navigator.languages && navigator.languages.length > 0
? navigator.languages
: [navigator.language];
const filteredLocales = languages.filter((locale) => locale.startsWith(lang));
return filteredLocales.length > 0 ? filteredLocales[0] : undefined;
};
// Note that iPad may have a user agent string like a desktop browser
// when possible please use appService.isIOSApp || getOSPlatform() === 'ios'
// to check if the app is running on iOS
export const getOSPlatform = (): OsPlatform => {
const userAgent = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(userAgent)) return 'ios';
if (userAgent.includes('android')) return 'android';
if (userAgent.includes('macintosh') || userAgent.includes('mac os x')) return 'macos';
if (userAgent.includes('windows nt')) return 'windows';
if (userAgent.includes('linux')) return 'linux';
return 'unknown';
};
export const isContentURI = (uri: string) => {
return uri.startsWith('content://');
};
export const isFileURI = (uri: string) => {
return uri.startsWith('file://');
};
export const isValidURL = (url: string, allowedSchemes: string[] = ['http', 'https']) => {
try {
const { protocol } = new URL(url);
return allowedSchemes.some((scheme) => `${scheme}:` === protocol);
} catch {
return false;
}
};
export const stubTranslation = (stubKey: string) => {
return stubKey;
};