feat(web): redesign remote access setup

[cnjack]

Summary

• redesign the Cloud & Mobile surface as a focused Remote Access introduction with a direct handoff to Settings → Cloud
• open cloud device authorization in the system browser while retaining a copyable fallback link
• allow PATCH in local CORS preflight responses and align Tauri development URLs on 127.0.0.1
• add localized copy and regression coverage for the new navigation, login, and CORS behavior

Why

Remote access setup was embedded directly in the feature surface and the device-login link did not reliably open through the desktop shell. The Vite/Tauri host mismatch and missing PATCH preflight method could also block account-preference requests during desktop development.

Impact

Users get a clearer explanation of remote access, a direct setup path, and a more reliable browser-based device authorization flow. Desktop development uses one loopback origin, and account preference updates can complete across that origin.

Validation

• pnpm --dir web exec vitest run src/components/CloudMobileView.test.tsx src/components/settings/CloudTab.test.tsx
• pnpm --dir web typecheck
• go test ./internal/web
• pre-push checks: go build ./..., go vet ./..., incremental golangci-lint, and go test ./...

Summary by CodeRabbit

• New Features

  • Introduced a redesigned Remote Access landing page with feature highlights, responsive layouts, and remote desktop/mobile visuals.
  • Added navigation from the Remote Access call-to-action directly to cloud settings.
  • Improved cloud login by opening verification links in the desktop app, with a manual-link fallback if needed.
  • Enabled cross-origin PATCH requests for account preferences.

• Updates

  • Renamed “Cloud & Mobile” to “Remote Access” across supported languages.
  • Added updated remote-access descriptions and login error messaging.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 2a0917cd-8ae0-4b1f-9dce-56b1a344714f

📥 Commits

Reviewing files that changed from the base of the PR and between 7fd8fb4 and 4a7c181.

📒 Files selected for processing (13)

• desktop/src-tauri/tauri.conf.json
• internal/web/cors_test.go
• internal/web/server.go
• web/src/components/CloudMobileView.test.tsx
• web/src/components/CloudMobileView.tsx
• web/src/components/settings/CloudTab.test.tsx
• web/src/components/settings/CloudTab.tsx
• web/src/i18n/locales/en.ts
• web/src/i18n/locales/ja.ts
• web/src/i18n/locales/ko.ts
• web/src/i18n/locales/zh-Hans.ts
• web/src/i18n/locales/zh-Hant.ts
• web/src/styles.css

---

📝 Walkthrough

Walkthrough

The PR introduces a remote access landing page, updates cloud login URL handling, refreshes localized cloud copy, adds responsive styling and tests, binds Tauri development to loopback, and enables PATCH in CORS preflight responses.

Changes

Remote access experience

Layer / File(s)	Summary
Remote access copy and navigation contracts web/src/i18n/locales/*	Navigation and cloud translations define remote access labels, feature text, visual status text, and browser-opening failure messages across supported languages.
Remote access landing page web/src/components/CloudMobileView.tsx, web/src/components/CloudMobileView.test.tsx, web/src/styles.css	CloudMobileView renders the remote access hero, CTA, visual mock, and feature list; styles provide responsive layouts and reduced-motion handling, with tests covering rendering and navigation.
Cloud login URL opening web/src/components/settings/CloudTab.tsx, web/src/components/settings/CloudTab.test.tsx	Cloud verification URLs open through the desktop helper during login and from the pending-login state, with failure handling and interaction tests.

Connectivity setup

Layer / File(s)	Summary
Tauri loopback development endpoints desktop/src-tauri/tauri.conf.json	The Tauri development server command and URL use 127.0.0.1:5173.
CORS PATCH preflight support internal/web/server.go, internal/web/cors_test.go	CORS advertises PATCH support, and a preflight test verifies the 204 response and allowed-method header.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant CloudMobileView
  participant ReduxStore
  participant CloudTab
  CloudMobileView->>ReduxStore: Dispatch cloud settings navigation
  ReduxStore->>CloudTab: Render Settings → Cloud
  CloudTab->>CloudTab: Open verification URI through desktop helper

Loading

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch agent/remote-access-setup

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}