Skip to content

feat: improve Gmail setup UX with easy/advanced options#248

Open
atani wants to merge 6 commits intoavihaymenahem:mainfrom
atani:feat/gmail-setup-ux
Open

feat: improve Gmail setup UX with easy/advanced options#248
atani wants to merge 6 commits intoavihaymenahem:mainfrom
atani:feat/gmail-setup-ux

Conversation

@atani
Copy link
Copy Markdown

@atani atani commented Apr 4, 2026 •
edited
Loading

Summary

  • Two-path Gmail setup: Users now choose between "Easy Setup" (IMAP + App Password, no developer setup required) and "Fast Sync" (Gmail API via Google Cloud Console). This makes Gmail accessible to non-technical users while keeping the advanced option for power users.
  • Redesigned SetupClientId wizard: Replaced the text-only instruction list with a 3-step guided wizard that includes direct buttons to open the Google Cloud Console pages and a one-click copy for the redirect URI.
  • Inline App Password guide: When a Gmail address is detected in the IMAP setup form, an inline guide appears with a direct link to Google's App Passwords page and contextual placeholder text.
  • Gmail auto-discovery: Added Gmail (imap.gmail.com / smtp.gmail.com) to the IMAP auto-discovery provider list so server settings are pre-filled automatically.
  • Translation cleanup: Removed unused translation keys that were defined but never referenced in components.

Note: This PR depends on feat/i18n-japanese (stacked PR). All new UI strings include both English and Japanese translations.

Test plan

  • Open Add Account > select Gmail > verify two options appear (Easy Setup and Fast Sync)
  • Click "Easy Setup" > verify it routes to the IMAP wizard with Gmail fields pre-filled
  • Enter a @gmail.com address in the IMAP wizard > verify the App Password guide appears inline
  • Enter a @googlemail.com address > verify the same guide appears
  • Enter a non-Gmail address > verify no App Password guide appears
  • Click "Fast Sync" > verify it triggers the OAuth flow (or shows SetupClientId if not configured)
  • In SetupClientId, verify the 3-step wizard renders with working external links and copy button
  • Verify the redirect URI displayed matches http://127.0.0.1:17248
  • Switch language to Japanese > verify all new strings are translated
  • Run npx tsc --noEmit -- passes
  • Run npm run test -- all 1566 tests pass

atani added 6 commits April 3, 2026 17:57
@atani
feat: add Japanese localization with react-i18next
230a951 
- Add i18next and react-i18next for internationalization
- Create English (en.json) and Japanese (ja.json) translation files
  with 700+ translation keys covering all UI strings
- Refactor 65+ components to use useTranslation() hook
- Add language switcher in Settings > General (English / Japanese)
- Persist language preference in SQLite, restore on startup
- Default language auto-detected from OS locale
- Refactor constants/shortcuts.ts to getShortcuts(t) factory
- Add nameKey to color themes for translatable theme names
- Initialize i18n in test setup with English translations
@atani
fix: complete i18n coverage and address review findings
cc1529b 
Round 1-3 review-fix loop results:

- Refactor 14 additional components: ContextMenuPortal, CalDavSettings,
  AddCalDavAccount, ContactSidebar, SubscriptionManager, SmartLabelEditor,
  SmartFolderEditor, QuickStepEditor, TemplateEditor, ContactEditor,
  CalendarReauthBanner, EventDetailModal, ConfirmDialog, InputDialog, etc.
- Translate entire help content system (1300+ lines, 14 categories, ~50 cards)
  via getHelpCategories(t) factory function
- Add App.tsx sync status translations (syncing/complete/failed)
- Fix SettingsPage.tsx remaining strings (categories, sidebar, DAY_NAMES)
- Fix AddImapAccount.tsx placeholder strings
- Fix networkErrors.ts with i18n.t() for non-component context
- Fix App.tsx stale closure: use i18n.t() instead of hook t in useEffect
- Add en/ja key parity test (1619 keys, perfect match)
- Add getShortcuts(t) translated output tests
- Add initImmediate: false for synchronous test setup
@atani
feat: improve Gmail setup UX with easy/advanced options
b8714f7 
- Add two-path Gmail setup: "Easy Setup" (IMAP + App Password, recommended)
  and "Fast Sync" (Gmail API, advanced)
- Easy Setup sends users directly to IMAP wizard — no Google Cloud Console needed
- Add Gmail to IMAP auto-discovery (imap.gmail.com:993, smtp.gmail.com:465)
- Redesign SetupClientId as 3-step wizard with direct links:
  Step 1: Open Gmail API page (direct link)
  Step 2: Create OAuth credentials (direct link + one-click URI copy)
  Step 3: Paste Client ID and Secret
- Add translations for all new strings (en + ja)
@atani
feat: add Gmail app password guide in IMAP setup
bfe306d 
When Gmail address is detected in the IMAP wizard, show an inline guide
panel with a direct link to Google's App Password page and clear
instructions. Replaces the generic password hint with Gmail-specific
guidance.
@atani
fix: add missing addImap.title translation key
b25104f
@atani
chore: remove unused translation keys from Gmail setup
4e46fab 
Remove gmailEasyStep1/Step1Link/Step2/Step3 and requires2fa keys
that were defined in both en.json and ja.json but never referenced
in any component.
@atani atani requested a review from avihaymenahem as a code owner April 4, 2026 02:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@avihaymenahem avihaymenahem Awaiting requested review from avihaymenahem avihaymenahem is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@atani