mirror of
https://github.com/bulwarkmail/native.git
synced 2026-10-31 00:06:17 +00:00
feat: add content senders and language settings components
- Implemented ContentSendersSettings component for managing trusted senders. - Added LanguageSettings component to allow users to select their preferred language. - Introduced minimal i18n support with locale detection and translation functions. - Created a locale store using Zustand for managing locale state and persistence with AsyncStorage. - Added a script to sync locale JSON files from the parent webmail repository.
This commit is contained in:
Linus Rath
@@ -35,6 +35,7 @@ import { useCalendarStore } from './src/stores/calendar-store';
|
||||
import { useContactsStore } from './src/stores/contacts-store';
|
||||
import { useEmailStore } from './src/stores/email-store';
|
||||
import { useSettingsStore } from './src/stores/settings-store';
|
||||
import { useLocaleStore } from './src/stores/locale-store';
|
||||
import { useUpdatesStore } from './src/stores/updates-store';
|
||||
import { UpdateBanner } from './src/components/UpdateBanner';
|
||||
import { colors, spacing, typography } from './src/theme/tokens';
|
||||
@@ -175,6 +176,7 @@ export default function App() {
|
||||
|
||||
React.useEffect(() => {
|
||||
void useSettingsStore.getState().hydrate();
|
||||
void useLocaleStore.getState().hydrate();
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
@@ -1,227 +0,0 @@
|
||||
# React Native Calendar - Parity Plan
|
||||
|
||||
Bring `repos/react-native/` calendar to parity with the webmail calendar at
|
||||
`components/calendar/`. Webmail totals ~5,940 lines across 19 components plus
|
||||
utility libs; mobile port targets ~2,500 lines with feature parity on the
|
||||
essentials and explicit deferrals for things that don't fit a phone UX.
|
||||
|
||||
## Current state
|
||||
|
||||
- `src/screens/CalendarScreenNew.tsx` - month grid + agenda-for-selected-day,
|
||||
all rendering `MOCK_EVENTS`. Doesn't touch the store.
|
||||
- `src/stores/calendar-store.ts` - CRUD wiring exists (`fetchCalendars`,
|
||||
`fetchEvents`, `createEvent`, `updateEvent`, `deleteEvent`) but no
|
||||
`handleStateChange`, no per-calendar visibility, no range tracking.
|
||||
- `src/api/calendar.ts` - JMAP methods wired (`Calendar/get`,
|
||||
`CalendarEvent/query`, `CalendarEvent/get`, `CalendarEvent/set`).
|
||||
- `src/api/types.ts` - `CalendarEvent` and `Calendar` types match webmail.
|
||||
- No event modal, no detail view, no week/day view, no sidebar, no recurrence.
|
||||
|
||||
## In scope
|
||||
|
||||
### Phase 1 - Data layer (foundation for everything else)
|
||||
|
||||
**`src/stores/calendar-store.ts`** - expand to match webmail's store semantics:
|
||||
|
||||
- `hiddenCalendarIds: Set<string>` persisted via AsyncStorage (matches webmail's
|
||||
`CalendarSidebar` toggle state).
|
||||
- `loadedRange: { after: string; before: string } | null` - track what's fetched
|
||||
so view changes don't re-fetch unnecessarily.
|
||||
- `ensureRange(after, before)` - fetch only if the requested window isn't
|
||||
covered by `loadedRange`; expand the loaded range in place instead of
|
||||
replacing events wholesale, so switching Month → Week doesn't drop data.
|
||||
- `handleStateChange(change)` - subscribe to `Calendar` and `CalendarEvent`
|
||||
typeState keys; on push, refetch calendars and re-query the current window.
|
||||
Already referenced from `App.tsx` push handler - this finally implements it.
|
||||
- `toggleCalendarVisibility(id)` / `setCalendarHidden(id, hidden)`.
|
||||
- Selectors: `visibleCalendars`, `visibleEvents` (filtered by hidden set).
|
||||
|
||||
**`src/lib/calendar-utils.ts`** (new) - port from webmail's `lib/calendar-utils.ts`:
|
||||
|
||||
- `parseLocalDateTime(iso)` - JSCalendar start strings are floating local time
|
||||
(`2026-04-20T09:00:00`, no Z). Parse without timezone shifts.
|
||||
- `parseDuration(iso8601)` - `PT1H30M` → milliseconds.
|
||||
- `eventTimeRange(event)` - returns `{ start: Date, end: Date, allDay: boolean }`
|
||||
handling `showWithoutTime`.
|
||||
- `eventsOnDay(events, day)` - day overlap check (not just start-matches-day).
|
||||
- `getCalendarColor(cal)` - fallback to a deterministic palette when `color`
|
||||
is missing, matching `theme/tokens.ts` `colors.calendar.*`.
|
||||
|
||||
**`src/lib/recurrence-expansion.ts`** (new) - minimal port of webmail's RRULE
|
||||
expander. Webmail's version supports `byDay`/`byMonth`/`byMonthDay`/`count`/`until`.
|
||||
Mobile port: same surface, same tests. This is the hard part - allocate ~400
|
||||
lines. Drives correct rendering of recurring events across the visible window.
|
||||
|
||||
### Phase 2 - Views
|
||||
|
||||
**`src/screens/CalendarScreenNew.tsx`** - replace mocks, gain view switching:
|
||||
|
||||
- On mount: `fetchCalendars()`, then `ensureRange` for visible window.
|
||||
- View mode toggle → Month / Week / Agenda (Day view folded into Week for phone).
|
||||
- Header shows month/week label; prev/next shifts by the current view's step.
|
||||
- "Today" button resets both `currentDate` and `selectedDate`.
|
||||
- FAB opens create modal with `start = selectedDate at next half hour`.
|
||||
|
||||
**`src/components/calendar/MonthView.tsx`** (extract from current screen,
|
||||
~180 lines) - real events, up to 3 colored dots per day, "+N" indicator when
|
||||
more. Tap day → selects + scrolls agenda below. Long-press day → opens create
|
||||
modal with that date.
|
||||
|
||||
**`src/components/calendar/WeekView.tsx`** (new, ~350 lines) - port of
|
||||
`calendar-week-view.tsx` (511 lines) trimmed for mobile:
|
||||
|
||||
- 7 day columns, hour rows from 6am–10pm scrollable to 0–24.
|
||||
- All-day strip at top.
|
||||
- Events positioned absolutely by `utcStart`/`utcEnd`, width shared among
|
||||
overlapping events (port webmail's stacking algorithm).
|
||||
- Tap event → detail modal. Long-press empty slot → create modal pre-filled.
|
||||
- Horizontal swipe → prev/next week (react-native-gesture-handler already
|
||||
available via react-navigation).
|
||||
- _Deferred_: drag-to-reschedule, drag-to-resize. Phone targets are too small
|
||||
for it to be better than tap-edit.
|
||||
|
||||
**`src/components/calendar/AgendaView.tsx`** (new, ~120 lines) - port of
|
||||
`calendar-agenda-view.tsx`. Flat list of upcoming events grouped by day, 30
|
||||
days forward. Taps open detail modal.
|
||||
|
||||
### Phase 3 - Event interaction
|
||||
|
||||
**`src/components/calendar/EventDetailSheet.tsx`** (new, ~280 lines) - bottom
|
||||
sheet presenting a single event, port of `event-detail-popover.tsx` (631 lines
|
||||
on web - phone version drops the hover card chrome and the inline-edit fields):
|
||||
|
||||
- Header: calendar color bar, title, date/time range (or "All day"), calendar name.
|
||||
- Sections: location, description (linkified), participants with RSVP status,
|
||||
recurrence summary (e.g. "Weekly on Mon, Wed - until 2026-06-01"), reminders.
|
||||
- Actions row: Edit, Delete, Duplicate, "Open in email" if created from invite.
|
||||
- If recurring: delete/edit prompts via `RecurrenceScopeDialog` ("This event
|
||||
only" / "This and following" / "All events").
|
||||
|
||||
**`src/components/calendar/EventModal.tsx`** (new, ~550 lines) - full-screen
|
||||
modal for create + edit, port of `event-modal.tsx` (1,072 lines on web, trimmed):
|
||||
|
||||
- Title, calendar picker (color swatches), all-day toggle.
|
||||
- Start/end date+time pickers (`@react-native-community/datetimepicker` - add dep).
|
||||
- Location, description (multiline).
|
||||
- Participant input with autocomplete from contacts store (port of
|
||||
`participant-input.tsx`, ~180 lines).
|
||||
- Repeat picker: None / Daily / Weekly (weekday chips) / Monthly / Yearly,
|
||||
plus end: Never / After N / On date. Advanced iCal rules (BYSETPOS etc.)
|
||||
are deferred - covers the 95% case.
|
||||
- Alerts: None / At start / 5m / 15m / 30m / 1h / 1d before, mapping to
|
||||
`Alert.trigger.offset`.
|
||||
- Timezone: default to device TZ; optional override picker hidden behind
|
||||
"Advanced" disclosure.
|
||||
- Save path handles "this instance only" override vs master update for
|
||||
recurring events (write to `recurrenceOverrides[recurrenceId]`).
|
||||
|
||||
**`src/components/calendar/RecurrenceScopeDialog.tsx`** (new, ~90 lines) -
|
||||
direct port of `recurrence-scope-dialog.tsx`. Three-button picker before
|
||||
edit/delete of a recurring instance.
|
||||
|
||||
### Phase 4 - Multi-calendar
|
||||
|
||||
**`src/components/calendar/CalendarSidebarDrawer.tsx`** (new, ~200 lines) -
|
||||
port of `calendar-sidebar-panel.tsx` (273 lines). Slides in from the left
|
||||
(reuses `SidebarDrawer.tsx`):
|
||||
|
||||
- List of calendars with color swatch + visibility toggle + name.
|
||||
- "My calendars" vs "Subscribed" sections if `myRights` differs.
|
||||
- Tap calendar → highlight; long-press → rename/color/hide (optional, phase 4.5).
|
||||
- Footer: "Add calendar" (deferred to Phase 6).
|
||||
|
||||
**`src/theme/tokens.ts`** - audit `colors.calendar.*` palette against webmail's
|
||||
calendar color constants (`lib/calendar-utils.ts` `CALENDAR_COLOR_PALETTE`);
|
||||
add any missing shades.
|
||||
|
||||
### Phase 5 - Polish
|
||||
|
||||
- Pull-to-refresh on each view → forces re-fetch of current window.
|
||||
- Empty states per view (no calendars yet / no events this month).
|
||||
- Loading skeleton for month grid and week grid.
|
||||
- Error banner when fetch fails (pattern from `EmailListScreen`).
|
||||
- Respect `email-store` push via `handleStateChange` so events update live
|
||||
when another client creates one.
|
||||
|
||||
## Explicitly deferred (out of scope)
|
||||
|
||||
These are in the webmail but don't make sense for a first mobile pass:
|
||||
|
||||
- **iCal import/subscribe modals** (`ical-import-modal.tsx` 455 lines,
|
||||
`ical-subscription-modal.tsx` 220 lines) - file picker + URL subscription
|
||||
with auth flows. Better as a dedicated settings flow later.
|
||||
- **Tasks module** (`task-list-view.tsx`, `task-modal.tsx`, `task-toolbar.tsx`) -
|
||||
JSCalendar `@type: 'Task'` is a separate surface from events; worth its own
|
||||
screen, not bolted onto calendar.
|
||||
- **Drag to reschedule / resize** - mobile tap targets are too small for the
|
||||
fine-grained control the web drag gives; tap-edit is the mobile idiom.
|
||||
- **Quick event input** (`quick-event-input.tsx`) - NLP parser ("Lunch tomorrow
|
||||
at noon"). Neat on desktop, marginal on phone where typing is already slow.
|
||||
- **Event context menu** (`event-context-menu.tsx`) - right-click is desktop-
|
||||
only. Actions move into the detail sheet's action row.
|
||||
- **Mini-calendar** (`mini-calendar.tsx`) - web uses it as a sidebar date
|
||||
picker. Mobile already has the main month view; redundant.
|
||||
- **Birthday calendar auto-derived events** - lower priority; leave the
|
||||
contacts-store integration for a follow-up.
|
||||
|
||||
## Dependencies to add
|
||||
|
||||
- `@react-native-community/datetimepicker` - native date/time pickers.
|
||||
- `react-native-reanimated` is already in (via react-navigation); reuse for
|
||||
bottom-sheet animations on `EventDetailSheet`.
|
||||
- No new calendar library - reimplement RRULE expansion in ~400 lines rather
|
||||
than pulling in `rrule.js` (which adds ~180KB and expects browser APIs).
|
||||
|
||||
## File map (new / modified)
|
||||
|
||||
```
|
||||
repos/react-native/src/
|
||||
├── screens/
|
||||
│ └── CalendarScreenNew.tsx [rewrite]
|
||||
├── components/
|
||||
│ └── calendar/ [new directory]
|
||||
│ ├── MonthView.tsx [new]
|
||||
│ ├── WeekView.tsx [new]
|
||||
│ ├── AgendaView.tsx [new]
|
||||
│ ├── EventCard.tsx [new]
|
||||
│ ├── EventDetailSheet.tsx [new]
|
||||
│ ├── EventModal.tsx [new]
|
||||
│ ├── ParticipantInput.tsx [new]
|
||||
│ ├── RecurrenceScopeDialog.tsx [new]
|
||||
│ ├── CalendarSidebarDrawer.tsx [new]
|
||||
│ └── index.ts [new]
|
||||
├── stores/
|
||||
│ └── calendar-store.ts [extend]
|
||||
├── lib/
|
||||
│ ├── calendar-utils.ts [new]
|
||||
│ └── recurrence-expansion.ts [new]
|
||||
└── theme/
|
||||
└── tokens.ts [audit calendar palette]
|
||||
```
|
||||
|
||||
## Testing approach
|
||||
|
||||
- `vitest.config.ts` already exists. Unit tests for:
|
||||
- `recurrence-expansion` (daily/weekly/monthly, count+until, byDay).
|
||||
- `calendar-utils` (duration parse, all-day overlap, DST boundary).
|
||||
- Store: `ensureRange` dedup, `handleStateChange` refetch trigger.
|
||||
- Manual emulator test matrix:
|
||||
- Create event (timed, all-day, recurring), verify server round-trip.
|
||||
- Edit recurring event via scope dialog.
|
||||
- Delete recurring instance vs series.
|
||||
- Toggle calendar visibility, confirm events disappear.
|
||||
- Push update from webmail, confirm mobile refreshes.
|
||||
|
||||
## Build order (suggested)
|
||||
|
||||
1. Phase 1 in full - nothing else works without real data.
|
||||
2. MonthView + EventDetailSheet (read path) - first thing user sees.
|
||||
3. EventModal create path - unblocks manual testing of write path.
|
||||
4. AgendaView + CalendarSidebarDrawer - pulls the rest of month together.
|
||||
5. WeekView - biggest UI, easiest to defer if time runs short.
|
||||
6. EventModal edit + recurrence scope - finishes the edit surface.
|
||||
7. Phase 5 polish.
|
||||
|
||||
Rough size estimate: ~2,500 lines of new RN code + ~300 lines of store/util
|
||||
changes. Each phase is ship-safe on its own - the app stays functional even if
|
||||
we stop at Phase 2.
|
||||
+1
-1
@@ -45,7 +45,7 @@ module.exports = {
|
||||
web: {
|
||||
favicon: './assets/favicon.png',
|
||||
},
|
||||
plugins: ['expo-secure-store', '@react-native-community/datetimepicker'],
|
||||
plugins: ['expo-secure-store', '@react-native-community/datetimepicker', 'expo-localization'],
|
||||
extra: {
|
||||
commit: COMMIT,
|
||||
},
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Generated
+20
@@ -19,6 +19,7 @@
|
||||
"expo-file-system": "~19.0.21",
|
||||
"expo-image-picker": "~17.0.10",
|
||||
"expo-intent-launcher": "~13.0.8",
|
||||
"expo-localization": "~17.0.8",
|
||||
"expo-secure-store": "~15.0.8",
|
||||
"expo-sharing": "~14.0.8",
|
||||
"expo-status-bar": "~3.0.9",
|
||||
@@ -5245,6 +5246,19 @@
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-localization": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/expo-localization/-/expo-localization-17.0.8.tgz",
|
||||
"integrity": "sha512-UrdwklZBDJ+t+ZszMMiE0SXZ2eJxcquCuQcl6EvGHM9K+e6YqKVRQ+w8qE+iIB3H75v2RJy6MHAaLK+Mqeo04g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"rtl-detect": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"expo": "*",
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-modules-autolinking": {
|
||||
"version": "3.0.24",
|
||||
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.24.tgz",
|
||||
@@ -8789,6 +8803,12 @@
|
||||
"@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12"
|
||||
}
|
||||
},
|
||||
"node_modules/rtl-detect": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.1.2.tgz",
|
||||
"integrity": "sha512-PGMBq03+TTG/p/cRB7HCLKJ1MgDIi07+QU1faSjiYRfmY5UsAttV9Hs08jDAHVwcOwmVLcSJkpwyfXszVjWfIQ==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
|
||||
+3
-1
@@ -10,7 +10,8 @@
|
||||
"web": "expo start --web",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest",
|
||||
"bump": "node scripts/bump-version.mjs"
|
||||
"bump": "node scripts/bump-version.mjs",
|
||||
"sync-locales": "node scripts/sync-locales.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "2.2.0",
|
||||
@@ -23,6 +24,7 @@
|
||||
"expo-file-system": "~19.0.21",
|
||||
"expo-image-picker": "~17.0.10",
|
||||
"expo-intent-launcher": "~13.0.8",
|
||||
"expo-localization": "~17.0.8",
|
||||
"expo-secure-store": "~15.0.8",
|
||||
"expo-sharing": "~14.0.8",
|
||||
"expo-status-bar": "~3.0.9",
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
// Copy locale JSON files from the parent webmail repo into ./locales/.
|
||||
// Run from the RN repo root: `node scripts/sync-locales.mjs`.
|
||||
// In environments where the parent repo isn't checked out (e.g. CI clone of
|
||||
// the standalone RN repo), this is a no-op — vendored files stay as-is.
|
||||
import { readdir, mkdir, copyFile, stat } from 'node:fs/promises';
|
||||
import { existsSync } from 'node:fs';
|
||||
import { join, dirname } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const RN_LOCALES = join(__dirname, '..', 'locales');
|
||||
const WEBMAIL_LOCALES = join(__dirname, '..', '..', '..', 'locales');
|
||||
|
||||
if (!existsSync(WEBMAIL_LOCALES)) {
|
||||
console.log(`No webmail locales at ${WEBMAIL_LOCALES} — skipping (vendored files will be used).`);
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
async function copyDir(src, dest) {
|
||||
await mkdir(dest, { recursive: true });
|
||||
for (const entry of await readdir(src, { withFileTypes: true })) {
|
||||
const s = join(src, entry.name);
|
||||
const d = join(dest, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
await copyDir(s, d);
|
||||
} else if (entry.isFile() && entry.name.endsWith('.json')) {
|
||||
await copyFile(s, d);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const langs = (await readdir(WEBMAIL_LOCALES, { withFileTypes: true }))
|
||||
.filter((e) => e.isDirectory())
|
||||
.map((e) => e.name);
|
||||
|
||||
let copied = 0;
|
||||
for (const lang of langs) {
|
||||
const src = join(WEBMAIL_LOCALES, lang);
|
||||
const dest = join(RN_LOCALES, lang);
|
||||
await copyDir(src, dest);
|
||||
copied++;
|
||||
}
|
||||
console.log(`Synced ${copied} locale(s) from ${WEBMAIL_LOCALES} → ${RN_LOCALES}`);
|
||||
@@ -1,14 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, StyleSheet, Pressable } from 'react-native';
|
||||
import { PlayCircle } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
|
||||
import Button from '../Button';
|
||||
import { colors, spacing, radius, typography } from '../../theme/tokens';
|
||||
import { useSettingsStore, type ThemeMode, type FontSize, type Density } from '../../stores/settings-store';
|
||||
|
||||
type Theme = 'light' | 'dark' | 'system';
|
||||
type FontSize = 'small' | 'medium' | 'large';
|
||||
type Density = 'extra-compact' | 'compact' | 'regular' | 'comfortable';
|
||||
type ToolbarPosition = 'top' | 'below-subject';
|
||||
type Theme = ThemeMode;
|
||||
|
||||
const DENSITY_PREVIEW: Record<Density, { py: number; gap: number; showAvatar: boolean; showPreview: boolean }> = {
|
||||
'extra-compact': { py: 2, gap: 6, showAvatar: false, showPreview: false },
|
||||
@@ -80,16 +76,22 @@ function DensityPreview({ density }: { density: Density }) {
|
||||
}
|
||||
|
||||
export function AppearanceSettings() {
|
||||
const [theme, setTheme] = useState<Theme>('dark');
|
||||
const [fontSize, setFontSize] = useState<FontSize>('medium');
|
||||
const [density, setDensity] = useState<Density>('regular');
|
||||
const [toolbarPosition, setToolbarPosition] = useState<ToolbarPosition>('top');
|
||||
const [showToolbarLabels, setShowToolbarLabels] = useState(true);
|
||||
const [hideAccountSwitcher, setHideAccountSwitcher] = useState(false);
|
||||
const [showRailAccountList, setShowRailAccountList] = useState(false);
|
||||
const [colorfulSidebarIcons, setColorfulSidebarIcons] = useState(true);
|
||||
const [animationsEnabled, setAnimationsEnabled] = useState(true);
|
||||
const [language, setLanguage] = useState('en');
|
||||
const theme = useSettingsStore((s) => s.theme);
|
||||
const setTheme = useSettingsStore((s) => s.setTheme);
|
||||
const fontSize = useSettingsStore((s) => s.fontSize);
|
||||
const setFontSize = useSettingsStore((s) => s.setFontSize);
|
||||
const density = useSettingsStore((s) => s.density);
|
||||
const setDensity = useSettingsStore((s) => s.setDensity);
|
||||
const showToolbarLabels = useSettingsStore((s) => s.showToolbarLabels);
|
||||
const setShowToolbarLabels = useSettingsStore((s) => s.setShowToolbarLabels);
|
||||
const animationsEnabled = useSettingsStore((s) => s.animationsEnabled);
|
||||
const setAnimationsEnabled = useSettingsStore((s) => s.setAnimationsEnabled);
|
||||
const hydrated = useSettingsStore((s) => s.hydrated);
|
||||
const hydrate = useSettingsStore((s) => s.hydrate);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!hydrated) void hydrate();
|
||||
}, [hydrated, hydrate]);
|
||||
|
||||
return (
|
||||
<SettingsSection title="Appearance" description="Customize how the interface looks and feels.">
|
||||
@@ -105,18 +107,6 @@ export function AppearanceSettings() {
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="Language" description="Interface language.">
|
||||
<RadioGroup
|
||||
value={language}
|
||||
onChange={setLanguage}
|
||||
options={[
|
||||
{ value: 'en', label: 'EN' },
|
||||
{ value: 'de', label: 'DE' },
|
||||
{ value: 'fr', label: 'FR' },
|
||||
]}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="Font Size" description="Adjust text size.">
|
||||
<RadioGroup
|
||||
value={fontSize}
|
||||
@@ -145,42 +135,13 @@ export function AppearanceSettings() {
|
||||
<View style={styles.divider} />
|
||||
</View>
|
||||
|
||||
<SettingItem label="Toolbar Position" description="Where to place the message toolbar.">
|
||||
<RadioGroup
|
||||
value={toolbarPosition}
|
||||
onChange={(v) => setToolbarPosition(v as ToolbarPosition)}
|
||||
options={[
|
||||
{ value: 'top', label: 'Top' },
|
||||
{ value: 'below-subject', label: 'Below' },
|
||||
]}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="Toolbar Labels" description="Show text labels on toolbar buttons.">
|
||||
<ToggleSwitch checked={showToolbarLabels} onChange={setShowToolbarLabels} />
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="Hide Account Switcher" description="Hide the account switcher from the navigation rail.">
|
||||
<ToggleSwitch checked={hideAccountSwitcher} onChange={setHideAccountSwitcher} />
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="Rail Account List" description="Show all accounts inside the navigation rail.">
|
||||
<ToggleSwitch checked={showRailAccountList} onChange={setShowRailAccountList} />
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="Colorful Sidebar Icons" description="Display sidebar icons with their brand colors.">
|
||||
<ToggleSwitch checked={colorfulSidebarIcons} onChange={setColorfulSidebarIcons} />
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="Animations" description="Enable or disable interface animations.">
|
||||
<ToggleSwitch checked={animationsEnabled} onChange={setAnimationsEnabled} />
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="Restart Tour" description="Replay the onboarding walkthrough.">
|
||||
<Button variant="outline" size="sm" icon={<PlayCircle size={14} color={colors.text} />}>
|
||||
Restart
|
||||
</Button>
|
||||
</SettingItem>
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
View, Text, StyleSheet, Pressable, TextInput, FlatList, Modal,
|
||||
} from 'react-native';
|
||||
import { ChevronRight, X, Plus, Trash2 } from 'lucide-react-native';
|
||||
import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
|
||||
import Button from '../Button';
|
||||
import { colors, spacing, radius, typography } from '../../theme/tokens';
|
||||
import { useSettingsStore, type ExternalContentPolicy } from '../../stores/settings-store';
|
||||
|
||||
export function ContentSendersSettings() {
|
||||
const externalContentPolicy = useSettingsStore((s) => s.externalContentPolicy);
|
||||
const setExternalContentPolicy = useSettingsStore((s) => s.setExternalContentPolicy);
|
||||
const emailAlwaysLightMode = useSettingsStore((s) => s.emailAlwaysLightMode);
|
||||
const setEmailAlwaysLightMode = useSettingsStore((s) => s.setEmailAlwaysLightMode);
|
||||
const trustedSenders = useSettingsStore((s) => s.trustedSenders);
|
||||
const addTrustedSender = useSettingsStore((s) => s.addTrustedSender);
|
||||
const removeTrustedSender = useSettingsStore((s) => s.removeTrustedSender);
|
||||
const hydrated = useSettingsStore((s) => s.hydrated);
|
||||
const hydrate = useSettingsStore((s) => s.hydrate);
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [newSender, setNewSender] = useState('');
|
||||
|
||||
useEffect(() => { if (!hydrated) void hydrate(); }, [hydrated, hydrate]);
|
||||
|
||||
const trustedCount = trustedSenders.length;
|
||||
const trustedLabel = trustedCount === 0 ? 'None' : trustedCount === 1 ? '1 sender' : `${trustedCount} senders`;
|
||||
|
||||
return (
|
||||
<View style={{ gap: spacing.xxxl }}>
|
||||
<SettingsSection
|
||||
title="Content & Senders"
|
||||
description="Control how external resources and tracking pixels are handled."
|
||||
>
|
||||
<SettingItem
|
||||
label="External content"
|
||||
description="What to do when an email links to remote images or media."
|
||||
>
|
||||
<RadioGroup
|
||||
value={externalContentPolicy}
|
||||
onChange={(v) => setExternalContentPolicy(v as ExternalContentPolicy)}
|
||||
options={[
|
||||
{ value: 'ask', label: 'Ask' },
|
||||
{ value: 'block', label: 'Block' },
|
||||
{ value: 'allow', label: 'Allow' },
|
||||
]}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
label="Always view emails in light mode"
|
||||
description="Force a light background for the message body, even when the app is in dark mode."
|
||||
>
|
||||
<ToggleSwitch checked={emailAlwaysLightMode} onChange={setEmailAlwaysLightMode} />
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
label="Trusted senders"
|
||||
description="External content always loads for senders on this list."
|
||||
>
|
||||
<Pressable
|
||||
onPress={() => setModalOpen(true)}
|
||||
style={({ pressed }) => [styles.trustedButton, pressed && styles.trustedButtonPressed]}
|
||||
>
|
||||
<Text style={styles.trustedButtonText}>{trustedLabel}</Text>
|
||||
<ChevronRight size={14} color={colors.textMuted} />
|
||||
</Pressable>
|
||||
</SettingItem>
|
||||
</SettingsSection>
|
||||
|
||||
<Modal
|
||||
visible={modalOpen}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={() => setModalOpen(false)}
|
||||
>
|
||||
<Pressable style={styles.modalBackdrop} onPress={() => setModalOpen(false)}>
|
||||
<Pressable style={styles.modalCard} onPress={() => {}}>
|
||||
<View style={styles.modalHeader}>
|
||||
<Text style={styles.modalTitle}>Trusted senders</Text>
|
||||
<Pressable onPress={() => setModalOpen(false)} hitSlop={6}>
|
||||
<X size={18} color={colors.textSecondary} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<View style={styles.addRow}>
|
||||
<TextInput
|
||||
value={newSender}
|
||||
onChangeText={setNewSender}
|
||||
placeholder="sender@example.com"
|
||||
placeholderTextColor={colors.textMuted}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
keyboardType="email-address"
|
||||
style={styles.input}
|
||||
onSubmitEditing={() => {
|
||||
if (newSender.trim()) {
|
||||
addTrustedSender(newSender);
|
||||
setNewSender('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onPress={() => {
|
||||
if (newSender.trim()) {
|
||||
addTrustedSender(newSender);
|
||||
setNewSender('');
|
||||
}
|
||||
}}
|
||||
disabled={!newSender.trim()}
|
||||
icon={<Plus size={14} color={colors.primaryForeground} />}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
{trustedSenders.length === 0 ? (
|
||||
<Text style={styles.emptyText}>No trusted senders yet.</Text>
|
||||
) : (
|
||||
<FlatList
|
||||
data={trustedSenders}
|
||||
keyExtractor={(item) => item}
|
||||
style={styles.list}
|
||||
ItemSeparatorComponent={() => <View style={styles.separator} />}
|
||||
renderItem={({ item }) => (
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.rowText} numberOfLines={1}>{item}</Text>
|
||||
<Pressable
|
||||
onPress={() => removeTrustedSender(item)}
|
||||
hitSlop={6}
|
||||
style={({ pressed }) => [styles.removeBtn, pressed && styles.removeBtnPressed]}
|
||||
>
|
||||
<Trash2 size={16} color={colors.error} />
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
trustedButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingVertical: 6,
|
||||
backgroundColor: colors.muted,
|
||||
borderRadius: radius.sm,
|
||||
},
|
||||
trustedButtonPressed: { opacity: 0.7 },
|
||||
trustedButtonText: { ...typography.body, color: colors.text },
|
||||
|
||||
modalBackdrop: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: spacing.lg,
|
||||
},
|
||||
modalCard: {
|
||||
backgroundColor: colors.card,
|
||||
borderRadius: radius.lg,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
padding: spacing.lg,
|
||||
maxHeight: '80%',
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
modalTitle: { ...typography.h3, color: colors.text },
|
||||
addRow: { flexDirection: 'row', gap: spacing.sm, marginBottom: spacing.md },
|
||||
input: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
borderRadius: radius.sm,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingVertical: 8,
|
||||
color: colors.text,
|
||||
...typography.body,
|
||||
},
|
||||
list: { maxHeight: 300 },
|
||||
separator: { height: 1, backgroundColor: colors.border },
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: spacing.md,
|
||||
},
|
||||
rowText: { ...typography.body, color: colors.text, flex: 1, marginRight: spacing.sm },
|
||||
removeBtn: { padding: 6, borderRadius: radius.sm },
|
||||
removeBtnPressed: { backgroundColor: colors.muted },
|
||||
emptyText: {
|
||||
...typography.body,
|
||||
color: colors.textMuted,
|
||||
textAlign: 'center',
|
||||
paddingVertical: spacing.xl,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,73 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { View, Text, StyleSheet, Pressable } from 'react-native';
|
||||
import { Check } from 'lucide-react-native';
|
||||
import { SettingsSection, SettingItem } from './settings-section';
|
||||
import { colors, spacing, radius, typography } from '../../theme/tokens';
|
||||
import { useLocaleStore } from '../../stores/locale-store';
|
||||
import { SUPPORTED_LOCALES, detectDeviceLocale, type LocaleCode } from '../../i18n';
|
||||
|
||||
export function LanguageSettings() {
|
||||
const override = useLocaleStore((s) => s.override);
|
||||
const setOverride = useLocaleStore((s) => s.setOverride);
|
||||
const hydrated = useLocaleStore((s) => s.hydrated);
|
||||
const hydrate = useLocaleStore((s) => s.hydrate);
|
||||
const t = useLocaleStore((s) => s.t);
|
||||
|
||||
useEffect(() => { if (!hydrated) void hydrate(); }, [hydrated, hydrate]);
|
||||
|
||||
const deviceCode = detectDeviceLocale();
|
||||
const selected: LocaleCode | 'system' = override ?? 'system';
|
||||
|
||||
const renderRow = (code: LocaleCode | 'system', label: string, sublabel?: string) => {
|
||||
const active = selected === code;
|
||||
return (
|
||||
<Pressable
|
||||
key={code}
|
||||
onPress={() => setOverride(code === 'system' ? null : (code as LocaleCode))}
|
||||
style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
{sublabel ? <Text style={styles.sublabel}>{sublabel}</Text> : null}
|
||||
</View>
|
||||
{active ? <Check size={16} color={colors.primary} /> : null}
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
const deviceLabel =
|
||||
SUPPORTED_LOCALES.find((l) => l.code === deviceCode)?.label ?? 'English';
|
||||
|
||||
return (
|
||||
<SettingsSection
|
||||
title={t('settings.appearance.language.label', 'Language')}
|
||||
description={t('settings.appearance.language.description', 'Choose your preferred language')}
|
||||
>
|
||||
<SettingItem
|
||||
label={t('settings.appearance.language.label', 'Language')}
|
||||
description={t('settings.appearance.language.description', 'Choose your preferred language')}
|
||||
noBorder
|
||||
/>
|
||||
<View style={styles.list}>
|
||||
{renderRow('system', `System default (${deviceLabel})`)}
|
||||
<View style={styles.divider} />
|
||||
{SUPPORTED_LOCALES.map((l) => renderRow(l.code, l.label))}
|
||||
</View>
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
list: { borderRadius: radius.md, overflow: 'hidden', backgroundColor: colors.background },
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: spacing.md,
|
||||
gap: spacing.sm,
|
||||
},
|
||||
rowPressed: { backgroundColor: colors.muted },
|
||||
divider: { height: 1, backgroundColor: colors.border, marginHorizontal: spacing.md },
|
||||
label: { ...typography.body, color: colors.text },
|
||||
sublabel: { ...typography.caption, color: colors.textMuted, marginTop: 2 },
|
||||
});
|
||||
@@ -282,57 +282,6 @@ export function ReadingSettings() {
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="Always Light Mode for Emails" description="Render email content on a white background.">
|
||||
<ToggleSwitch checked={emailAlwaysLightMode} onChange={setEmailAlwaysLightMode} />
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label="External Content" description="How to handle images and remote resources in incoming email.">
|
||||
<Select
|
||||
value={externalContentPolicy}
|
||||
onChange={(v) => setExternalContentPolicyStore(v as ExternalContentPolicy)}
|
||||
options={[
|
||||
{ value: 'ask', label: 'Ask' },
|
||||
{ value: 'block', label: 'Block' },
|
||||
{ value: 'allow', label: 'Allow' },
|
||||
]}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<View style={styles.group}>
|
||||
<SettingItem
|
||||
label="Trusted Senders"
|
||||
description="Senders whose external content loads without asking."
|
||||
noBorder
|
||||
>
|
||||
<Pressable style={styles.inlineBtn} onPress={() => setShowTrustedList((v) => !v)}>
|
||||
<Text style={styles.inlineBtnText}>
|
||||
{trustedSenders.length === 0
|
||||
? 'No trusted senders'
|
||||
: `${trustedSenders.length} sender${trustedSenders.length === 1 ? '' : 's'}`}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</SettingItem>
|
||||
{showTrustedList && trustedSenders.length > 0 && (
|
||||
<View style={styles.trustedList}>
|
||||
{trustedSenders.map((email) => (
|
||||
<View key={email} style={styles.trustedRow}>
|
||||
<Text style={styles.trustedEmail} numberOfLines={1}>{email}</Text>
|
||||
<Pressable onPress={() => removeTrustedSender(email)} hitSlop={8}>
|
||||
<X size={14} color={colors.mutedForeground} />
|
||||
</Pressable>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.divider} />
|
||||
</View>
|
||||
|
||||
<SettingItem label="Sync Trusted Senders" description="Store trusted senders in the address book.">
|
||||
<ToggleSwitch
|
||||
checked={trustedSendersAddressBook}
|
||||
onChange={setTrustedSendersAddressBook}
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
// Minimal i18n: lookup keys like `settings.tabs.account` against a flat
|
||||
// dictionary loaded from ./locales/<lang>/common.json. Picks language from
|
||||
// the user override (locale-store) → device locale → English fallback.
|
||||
import { getLocales } from 'expo-localization';
|
||||
import en from '../../locales/en/common.json';
|
||||
import de from '../../locales/de/common.json';
|
||||
import cs from '../../locales/cs/common.json';
|
||||
import es from '../../locales/es/common.json';
|
||||
import fr from '../../locales/fr/common.json';
|
||||
import it from '../../locales/it/common.json';
|
||||
import ja from '../../locales/ja/common.json';
|
||||
import ko from '../../locales/ko/common.json';
|
||||
import lv from '../../locales/lv/common.json';
|
||||
import nl from '../../locales/nl/common.json';
|
||||
import pl from '../../locales/pl/common.json';
|
||||
import pt from '../../locales/pt/common.json';
|
||||
import ru from '../../locales/ru/common.json';
|
||||
import uk from '../../locales/uk/common.json';
|
||||
import zh from '../../locales/zh/common.json';
|
||||
|
||||
export const SUPPORTED_LOCALES = [
|
||||
{ code: 'en', label: 'English' },
|
||||
{ code: 'cs', label: 'Čeština' },
|
||||
{ code: 'de', label: 'Deutsch' },
|
||||
{ code: 'es', label: 'Español' },
|
||||
{ code: 'fr', label: 'Français' },
|
||||
{ code: 'it', label: 'Italiano' },
|
||||
{ code: 'nl', label: 'Nederlands' },
|
||||
{ code: 'pl', label: 'Polski' },
|
||||
{ code: 'pt', label: 'Português' },
|
||||
{ code: 'ru', label: 'Русский' },
|
||||
{ code: 'uk', label: 'Українська' },
|
||||
{ code: 'ja', label: '日本語' },
|
||||
{ code: 'ko', label: '한국어' },
|
||||
{ code: 'zh', label: '中文' },
|
||||
{ code: 'lv', label: 'Latviešu' },
|
||||
] as const;
|
||||
|
||||
export type LocaleCode = typeof SUPPORTED_LOCALES[number]['code'];
|
||||
|
||||
const dictionaries: Record<LocaleCode, Record<string, unknown>> = {
|
||||
en, cs, de, es, fr, it, nl, pl, pt, ru, uk, ja, ko, zh, lv,
|
||||
};
|
||||
|
||||
export function detectDeviceLocale(): LocaleCode {
|
||||
const codes = SUPPORTED_LOCALES.map((l) => l.code) as readonly string[];
|
||||
for (const l of getLocales()) {
|
||||
const lang = l.languageCode?.toLowerCase();
|
||||
if (lang && codes.includes(lang)) return lang as LocaleCode;
|
||||
}
|
||||
return 'en';
|
||||
}
|
||||
|
||||
function lookup(dict: Record<string, unknown>, key: string): string | undefined {
|
||||
let current: unknown = dict;
|
||||
for (const part of key.split('.')) {
|
||||
if (current && typeof current === 'object' && part in (current as Record<string, unknown>)) {
|
||||
current = (current as Record<string, unknown>)[part];
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
return typeof current === 'string' ? current : undefined;
|
||||
}
|
||||
|
||||
export function translate(locale: LocaleCode, key: string, fallback?: string): string {
|
||||
return lookup(dictionaries[locale], key)
|
||||
?? lookup(dictionaries.en, key)
|
||||
?? fallback
|
||||
?? key;
|
||||
}
|
||||
@@ -18,6 +18,20 @@ import { VacationSettings } from '../components/settings/VacationSettings';
|
||||
import { FolderSettings } from '../components/settings/FolderSettings';
|
||||
import { AboutDataSettings } from '../components/settings/AboutDataSettings';
|
||||
import { UpdatesSettings } from '../components/settings/UpdatesSettings';
|
||||
import { AppearanceSettings } from '../components/settings/AppearanceSettings';
|
||||
import { CalendarSettings } from '../components/settings/CalendarSettings';
|
||||
import { ContactsSettings } from '../components/settings/ContactsSettings';
|
||||
import { FilesSettings } from '../components/settings/FilesSettings';
|
||||
import { FilterSettings } from '../components/settings/FilterSettings';
|
||||
import { TemplateSettings } from '../components/settings/TemplateSettings';
|
||||
import { KeywordSettings } from '../components/settings/KeywordSettings';
|
||||
import { AccountSecuritySettings } from '../components/settings/AccountSecuritySettings';
|
||||
import { SmimeSettings } from '../components/settings/SmimeSettings';
|
||||
import { SidebarAppsSettings } from '../components/settings/SidebarAppsSettings';
|
||||
import { ThemesSettings } from '../components/settings/ThemesSettings';
|
||||
import { PluginsSettings } from '../components/settings/PluginsSettings';
|
||||
import { ContentSendersSettings } from '../components/settings/ContentSendersSettings';
|
||||
import { LanguageSettings } from '../components/settings/LanguageSettings';
|
||||
|
||||
type Tab =
|
||||
| 'account' | 'language' | 'notifications'
|
||||
@@ -53,11 +67,11 @@ const GROUP_ORDER: TabGroup[] = ['general', 'appearance', 'mail', 'privacy', 'ap
|
||||
const TABS: TabDef[] = [
|
||||
// General
|
||||
{ id: 'account', label: 'Account', icon: User, group: 'general', implemented: true },
|
||||
{ id: 'language', label: 'Language', icon: Languages, group: 'general', implemented: false },
|
||||
{ id: 'language', label: 'Language', icon: Languages, group: 'general', implemented: true },
|
||||
{ id: 'notifications', label: 'Notifications', icon: Bell, group: 'general', implemented: true },
|
||||
|
||||
// Appearance
|
||||
{ id: 'appearance', label: 'Appearance', icon: Palette, group: 'appearance', implemented: false },
|
||||
{ id: 'appearance', label: 'Appearance', icon: Palette, group: 'appearance', implemented: true },
|
||||
{ id: 'layout', label: 'Layout', icon: LayoutGrid, group: 'appearance', implemented: false },
|
||||
|
||||
// Mail
|
||||
@@ -65,38 +79,52 @@ const TABS: TabDef[] = [
|
||||
{ id: 'composing', label: 'Composing', icon: PenLine, group: 'mail', implemented: false },
|
||||
{ id: 'identities', label: 'Identities', icon: UserPen, group: 'mail', implemented: true },
|
||||
{ id: 'vacation', label: 'Vacation Responder', icon: Palmtree, group: 'mail', implemented: true },
|
||||
{ id: 'filters', label: 'Filters & Rules', icon: Filter, group: 'mail', implemented: false },
|
||||
{ id: 'templates', label: 'Templates', icon: FileText, group: 'mail', implemented: false },
|
||||
{ id: 'filters', label: 'Filters & Rules', icon: Filter, group: 'mail', implemented: true },
|
||||
{ id: 'templates', label: 'Templates', icon: FileText, group: 'mail', implemented: true },
|
||||
{ id: 'folders', label: 'Folders', icon: FolderOpen, group: 'mail', implemented: true },
|
||||
{ id: 'keywords', label: 'Keywords & Labels', icon: Tags, group: 'mail', implemented: false },
|
||||
{ id: 'keywords', label: 'Keywords & Labels', icon: Tags, group: 'mail', implemented: true },
|
||||
|
||||
// Privacy & Security
|
||||
{ id: 'security', label: 'Security', icon: Shield, group: 'privacy', implemented: false },
|
||||
{ id: 'encryption', label: 'S/MIME Encryption', icon: KeyRound, group: 'privacy', implemented: false },
|
||||
{ id: 'content_senders', label: 'Content & Senders', icon: EyeOff, group: 'privacy', implemented: false },
|
||||
{ id: 'security', label: 'Security', icon: Shield, group: 'privacy', implemented: true },
|
||||
{ id: 'encryption', label: 'S/MIME Encryption', icon: KeyRound, group: 'privacy', implemented: true },
|
||||
{ id: 'content_senders', label: 'Content & Senders', icon: EyeOff, group: 'privacy', implemented: true },
|
||||
|
||||
// Apps
|
||||
{ id: 'calendar', label: 'Calendar', icon: Calendar, group: 'apps', implemented: false },
|
||||
{ id: 'contacts', label: 'Contacts', icon: BookUser, group: 'apps', implemented: false },
|
||||
{ id: 'files', label: 'Files', icon: HardDrive, group: 'apps', implemented: false },
|
||||
{ id: 'sidebar_apps', label: 'Sidebar Apps', icon: PanelLeftClose, group: 'apps', implemented: false },
|
||||
{ id: 'calendar', label: 'Calendar', icon: Calendar, group: 'apps', implemented: true },
|
||||
{ id: 'contacts', label: 'Contacts', icon: BookUser, group: 'apps', implemented: true },
|
||||
{ id: 'files', label: 'Files', icon: HardDrive, group: 'apps', implemented: true },
|
||||
{ id: 'sidebar_apps', label: 'Sidebar Apps', icon: PanelLeftClose, group: 'apps', implemented: true },
|
||||
|
||||
// Advanced
|
||||
{ id: 'about_data', label: 'About & Data', icon: Info, group: 'advanced', implemented: true },
|
||||
{ id: 'themes', label: 'Themes', icon: Palette, group: 'advanced', experimental: true, implemented: false },
|
||||
{ id: 'plugins', label: 'Plugins', icon: Puzzle, group: 'advanced', experimental: true, implemented: false },
|
||||
{ id: 'themes', label: 'Themes', icon: Palette, group: 'advanced', experimental: true, implemented: true },
|
||||
{ id: 'plugins', label: 'Plugins', icon: Puzzle, group: 'advanced', experimental: true, implemented: true },
|
||||
{ id: 'updates', label: 'Updates', icon: RefreshCw, group: 'advanced', implemented: true },
|
||||
{ id: 'debug', label: 'Debug', icon: Bug, group: 'advanced', implemented: false },
|
||||
];
|
||||
|
||||
const TAB_COMPONENTS: Partial<Record<Tab, React.ComponentType<any>>> = {
|
||||
account: AccountSettings,
|
||||
language: LanguageSettings,
|
||||
notifications: NotificationSettings,
|
||||
appearance: AppearanceSettings,
|
||||
reading: ReadingSettings,
|
||||
identities: IdentitySettings,
|
||||
vacation: VacationSettings,
|
||||
filters: FilterSettings,
|
||||
templates: TemplateSettings,
|
||||
folders: FolderSettings,
|
||||
keywords: KeywordSettings,
|
||||
security: AccountSecuritySettings,
|
||||
encryption: SmimeSettings,
|
||||
content_senders: ContentSendersSettings,
|
||||
calendar: CalendarSettings,
|
||||
contacts: ContactsSettings,
|
||||
files: FilesSettings,
|
||||
sidebar_apps: SidebarAppsSettings,
|
||||
about_data: AboutDataSettings,
|
||||
themes: ThemesSettings,
|
||||
plugins: PluginsSettings,
|
||||
updates: UpdatesSettings,
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import { create } from 'zustand';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { detectDeviceLocale, translate, type LocaleCode } from '../i18n';
|
||||
|
||||
const STORAGE_KEY = 'webmail:locale:v1';
|
||||
|
||||
interface LocaleState {
|
||||
locale: LocaleCode;
|
||||
override: LocaleCode | null;
|
||||
hydrated: boolean;
|
||||
hydrate: () => Promise<void>;
|
||||
setOverride: (locale: LocaleCode | null) => void;
|
||||
t: (key: string, fallback?: string) => string;
|
||||
}
|
||||
|
||||
export const useLocaleStore = create<LocaleState>((set, get) => ({
|
||||
locale: detectDeviceLocale(),
|
||||
override: null,
|
||||
hydrated: false,
|
||||
|
||||
hydrate: async () => {
|
||||
if (get().hydrated) return;
|
||||
try {
|
||||
const raw = await AsyncStorage.getItem(STORAGE_KEY);
|
||||
const override = raw ? (JSON.parse(raw).override as LocaleCode | null) : null;
|
||||
const locale = override ?? detectDeviceLocale();
|
||||
set({ override, locale, hydrated: true });
|
||||
} catch {
|
||||
set({ hydrated: true });
|
||||
}
|
||||
},
|
||||
|
||||
setOverride: (override) => {
|
||||
const locale = override ?? detectDeviceLocale();
|
||||
set({ override, locale });
|
||||
void AsyncStorage.setItem(STORAGE_KEY, JSON.stringify({ override })).catch(() => {});
|
||||
},
|
||||
|
||||
t: (key, fallback) => translate(get().locale, key, fallback),
|
||||
}));
|
||||
@@ -4,6 +4,9 @@ import type { Identity } from '../api/types';
|
||||
import { getIdentities as fetchIdentities } from '../api/identity';
|
||||
|
||||
export type ExternalContentPolicy = 'allow' | 'block' | 'ask';
|
||||
export type ThemeMode = 'light' | 'dark' | 'system';
|
||||
export type FontSize = 'small' | 'medium' | 'large';
|
||||
export type Density = 'extra-compact' | 'compact' | 'regular' | 'comfortable';
|
||||
|
||||
const STORAGE_KEY = 'webmail:settings:v1';
|
||||
|
||||
@@ -12,6 +15,13 @@ interface PersistedSettings {
|
||||
trustedSenders: string[];
|
||||
senderFavicons: boolean;
|
||||
groupContactsByLetter: boolean;
|
||||
// Appearance
|
||||
theme: ThemeMode;
|
||||
fontSize: FontSize;
|
||||
density: Density;
|
||||
showToolbarLabels: boolean;
|
||||
animationsEnabled: boolean;
|
||||
emailAlwaysLightMode: boolean;
|
||||
}
|
||||
|
||||
const DEFAULT_PERSISTED: PersistedSettings = {
|
||||
@@ -19,17 +29,18 @@ const DEFAULT_PERSISTED: PersistedSettings = {
|
||||
trustedSenders: [],
|
||||
senderFavicons: true,
|
||||
groupContactsByLetter: true,
|
||||
theme: 'system',
|
||||
fontSize: 'medium',
|
||||
density: 'regular',
|
||||
showToolbarLabels: true,
|
||||
animationsEnabled: true,
|
||||
emailAlwaysLightMode: false,
|
||||
};
|
||||
|
||||
export interface SettingsState {
|
||||
export interface SettingsState extends PersistedSettings {
|
||||
identities: Identity[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
|
||||
externalContentPolicy: ExternalContentPolicy;
|
||||
trustedSenders: string[];
|
||||
senderFavicons: boolean;
|
||||
groupContactsByLetter: boolean;
|
||||
hydrated: boolean;
|
||||
|
||||
fetchIdentities: () => Promise<void>;
|
||||
@@ -37,12 +48,33 @@ export interface SettingsState {
|
||||
setExternalContentPolicy: (policy: ExternalContentPolicy) => void;
|
||||
setSenderFavicons: (enabled: boolean) => void;
|
||||
setGroupContactsByLetter: (enabled: boolean) => void;
|
||||
setTheme: (theme: ThemeMode) => void;
|
||||
setFontSize: (size: FontSize) => void;
|
||||
setDensity: (density: Density) => void;
|
||||
setShowToolbarLabels: (enabled: boolean) => void;
|
||||
setAnimationsEnabled: (enabled: boolean) => void;
|
||||
setEmailAlwaysLightMode: (enabled: boolean) => void;
|
||||
addTrustedSender: (email: string) => void;
|
||||
removeTrustedSender: (email: string) => void;
|
||||
isSenderTrusted: (email: string) => boolean;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
function snapshot(state: SettingsState): PersistedSettings {
|
||||
return {
|
||||
externalContentPolicy: state.externalContentPolicy,
|
||||
trustedSenders: state.trustedSenders,
|
||||
senderFavicons: state.senderFavicons,
|
||||
groupContactsByLetter: state.groupContactsByLetter,
|
||||
theme: state.theme,
|
||||
fontSize: state.fontSize,
|
||||
density: state.density,
|
||||
showToolbarLabels: state.showToolbarLabels,
|
||||
animationsEnabled: state.animationsEnabled,
|
||||
emailAlwaysLightMode: state.emailAlwaysLightMode,
|
||||
};
|
||||
}
|
||||
|
||||
function persist(state: PersistedSettings): void {
|
||||
void AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(state)).catch((err) => {
|
||||
console.warn('[settings-store] persist failed', err);
|
||||
@@ -50,14 +82,10 @@ function persist(state: PersistedSettings): void {
|
||||
}
|
||||
|
||||
export const useSettingsStore = create<SettingsState>((set, get) => ({
|
||||
...DEFAULT_PERSISTED,
|
||||
identities: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
|
||||
externalContentPolicy: DEFAULT_PERSISTED.externalContentPolicy,
|
||||
trustedSenders: DEFAULT_PERSISTED.trustedSenders,
|
||||
senderFavicons: DEFAULT_PERSISTED.senderFavicons,
|
||||
groupContactsByLetter: DEFAULT_PERSISTED.groupContactsByLetter,
|
||||
hydrated: false,
|
||||
|
||||
fetchIdentities: async () => {
|
||||
@@ -81,6 +109,12 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
|
||||
trustedSenders: Array.isArray(parsed.trustedSenders) ? parsed.trustedSenders : [],
|
||||
senderFavicons: typeof parsed.senderFavicons === 'boolean' ? parsed.senderFavicons : DEFAULT_PERSISTED.senderFavicons,
|
||||
groupContactsByLetter: typeof parsed.groupContactsByLetter === 'boolean' ? parsed.groupContactsByLetter : DEFAULT_PERSISTED.groupContactsByLetter,
|
||||
theme: parsed.theme ?? DEFAULT_PERSISTED.theme,
|
||||
fontSize: parsed.fontSize ?? DEFAULT_PERSISTED.fontSize,
|
||||
density: parsed.density ?? DEFAULT_PERSISTED.density,
|
||||
showToolbarLabels: typeof parsed.showToolbarLabels === 'boolean' ? parsed.showToolbarLabels : DEFAULT_PERSISTED.showToolbarLabels,
|
||||
animationsEnabled: typeof parsed.animationsEnabled === 'boolean' ? parsed.animationsEnabled : DEFAULT_PERSISTED.animationsEnabled,
|
||||
emailAlwaysLightMode: typeof parsed.emailAlwaysLightMode === 'boolean' ? parsed.emailAlwaysLightMode : DEFAULT_PERSISTED.emailAlwaysLightMode,
|
||||
hydrated: true,
|
||||
});
|
||||
return;
|
||||
@@ -91,61 +125,29 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
|
||||
set({ hydrated: true });
|
||||
},
|
||||
|
||||
setExternalContentPolicy: (policy) => {
|
||||
set({ externalContentPolicy: policy });
|
||||
persist({
|
||||
externalContentPolicy: policy,
|
||||
trustedSenders: get().trustedSenders,
|
||||
senderFavicons: get().senderFavicons,
|
||||
groupContactsByLetter: get().groupContactsByLetter,
|
||||
});
|
||||
},
|
||||
|
||||
setSenderFavicons: (enabled) => {
|
||||
set({ senderFavicons: enabled });
|
||||
persist({
|
||||
externalContentPolicy: get().externalContentPolicy,
|
||||
trustedSenders: get().trustedSenders,
|
||||
senderFavicons: enabled,
|
||||
groupContactsByLetter: get().groupContactsByLetter,
|
||||
});
|
||||
},
|
||||
|
||||
setGroupContactsByLetter: (enabled) => {
|
||||
set({ groupContactsByLetter: enabled });
|
||||
persist({
|
||||
externalContentPolicy: get().externalContentPolicy,
|
||||
trustedSenders: get().trustedSenders,
|
||||
senderFavicons: get().senderFavicons,
|
||||
groupContactsByLetter: enabled,
|
||||
});
|
||||
},
|
||||
setExternalContentPolicy: (policy) => { set({ externalContentPolicy: policy }); persist(snapshot(get())); },
|
||||
setSenderFavicons: (enabled) => { set({ senderFavicons: enabled }); persist(snapshot(get())); },
|
||||
setGroupContactsByLetter: (enabled) => { set({ groupContactsByLetter: enabled }); persist(snapshot(get())); },
|
||||
setTheme: (theme) => { set({ theme }); persist(snapshot(get())); },
|
||||
setFontSize: (fontSize) => { set({ fontSize }); persist(snapshot(get())); },
|
||||
setDensity: (density) => { set({ density }); persist(snapshot(get())); },
|
||||
setShowToolbarLabels: (enabled) => { set({ showToolbarLabels: enabled }); persist(snapshot(get())); },
|
||||
setAnimationsEnabled: (enabled) => { set({ animationsEnabled: enabled }); persist(snapshot(get())); },
|
||||
setEmailAlwaysLightMode: (enabled) => { set({ emailAlwaysLightMode: enabled }); persist(snapshot(get())); },
|
||||
|
||||
addTrustedSender: (email) => {
|
||||
const normalized = email.toLowerCase().trim();
|
||||
if (!normalized) return;
|
||||
const current = get().trustedSenders;
|
||||
if (current.includes(normalized)) return;
|
||||
const next = [...current, normalized];
|
||||
set({ trustedSenders: next });
|
||||
persist({
|
||||
externalContentPolicy: get().externalContentPolicy,
|
||||
trustedSenders: next,
|
||||
senderFavicons: get().senderFavicons,
|
||||
groupContactsByLetter: get().groupContactsByLetter,
|
||||
});
|
||||
set({ trustedSenders: [...current, normalized] });
|
||||
persist(snapshot(get()));
|
||||
},
|
||||
|
||||
removeTrustedSender: (email) => {
|
||||
const normalized = email.toLowerCase().trim();
|
||||
const next = get().trustedSenders.filter((e) => e !== normalized);
|
||||
set({ trustedSenders: next });
|
||||
persist({
|
||||
externalContentPolicy: get().externalContentPolicy,
|
||||
trustedSenders: next,
|
||||
senderFavicons: get().senderFavicons,
|
||||
groupContactsByLetter: get().groupContactsByLetter,
|
||||
});
|
||||
set({ trustedSenders: get().trustedSenders.filter((e) => e !== normalized) });
|
||||
persist(snapshot(get()));
|
||||
},
|
||||
|
||||
isSenderTrusted: (email) => {
|
||||
|
||||
+2
-1
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
"strict": true,
|
||||
"resolveJsonModule": true
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user