fix(web): sync home iframe theme and language

[guoruqiang]

📝 变更描述 / Description

旧版前端在使用 URL 形式的自定义首页时，会把当前主题和语言状态传递给 iframe 页面，因此自定义 HTML 可以跟随系统的深色模式和语言切换。

新版默认前端重构后，这部分同步逻辑没有保留下来。当前自定义首页仍然可以通过 iframe 加载，但 iframe 内页面无法感知父页面的主题和语言变化，导致嵌入页面和主界面状态不一致。

本次修改补回这部分逻辑：在自定义首页 iframe 加载完成后，以及主题或语言变化时，向 iframe 发送当前的 themeMode 和 lang。嵌入的自定义 HTML 页面可以通过 postMessage 接收这些状态，并自行同步深色模式和语言显示。

The previous frontend passed the current theme and language state to URL-based custom home page iframes, allowing embedded custom HTML pages to follow the app's dark mode and language changes.

After the new default frontend refactor, this synchronization logic was not carried over. The custom home page can still be loaded through an iframe, but the iframe page cannot detect theme or language changes from the parent page, which may cause inconsistent UI state.

This change restores that behavior by sending the current themeMode and lang to the custom home iframe on iframe load and when theme or language changes. Embedded custom HTML pages can receive these values through postMessage and update their own theme and language accordingly.

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix) - 请关联对应 Issue，避免将设计取舍、理解偏差或预期不一致直接归类为 bug
• ✨ 新功能 (New feature) - 重大特性建议先通过 Issue 沟通
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

• N/A

✅ 提交前检查项 / Checklist

• 人工确认: 我已亲自整理并撰写此描述，没有直接粘贴未经处理的 AI 输出。
• 非重复提交: 我已搜索现有的 Issues 与 PRs，确认不是重复提交。
• Bug fix 说明: 若此 PR 标记为 Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。
• 变更理解: 我已理解这些更改的工作原理及可能影响。
• 范围聚焦: 本 PR 未包含任何与当前任务无关的代码改动。
• 本地验证: 已在本地运行并通过测试或手动验证，维护者可以据此复核结果。
• 安全合规: 代码中无敏感凭据，且符合项目代码规范。

📸 运行证明 / Proof of Work

已使用自定义 iframe 页面进行验证。

iframe 页面可以正确接收到父页面传入的两个状态：

• themeMode：用于同步浅色 / 深色主题
• lang：用于同步当前选择的界面语言

验证结果：嵌入的自定义首页可以跟随主页面的主题和语言切换保持一致。

Verified with a custom iframe page.

The iframe page correctly receives both values from the parent page:

• themeMode: used to sync light / dark theme
• lang: used to sync the currently selected interface language

Result: the embedded custom home page stays in sync with the parent frontend when theme or language changes.

截图 / Screenshot:

Summary by CodeRabbit

• New Features

  • The embedded page on the Home screen now stays in sync with the app’s current theme and language.
  • Preference updates are applied when the embedded content loads, helping it match the rest of the experience more consistently.

• Bug Fixes

  • Improved handling for cases where the embedded content changes location or is temporarily unavailable, reducing sync-related errors.

[coderabbitai]

Walkthrough

The Home page component adds logic to synchronize theme mode and language preferences with an embedded iframe, using postMessage calls triggered on iframe load and when the iframe URL becomes available.

Changes

Iframe Preference Sync

Layer / File(s)	Summary
Sync callback and iframe wiring web/default/src/features/home/index.tsx	Adds iframeRef, a syncIframePreferences callback that posts themeMode and lang to the iframe (try/catch guarded), triggers it via useEffect when the URL is set and via onLoad on the iframe element.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Home
  participant Iframe
  Home->>Home: useEffect detects isUrl set
  Home->>Iframe: postMessage(themeMode)
  Home->>Iframe: postMessage(lang)
  Iframe-->>Home: onLoad triggers syncIframePreferences
  Home->>Iframe: postMessage(themeMode, lang) again

Loading

Poem

A rabbit hops with theme in paw,
Whispers language through iframe's door,
postMessage sent with a happy hop,
Sync complete, no need to stop!
🐰🌓🌐

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: syncing the home iframe's theme and language with the parent app.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

web/default/src/features/home/index.tsx (1)

40-53: 🔒 Security & Privacy | 🔵 Trivial | ⚡ Quick win

Avoid wildcard postMessage target origin.

Both postMessage calls use '*' as targetOrigin, broadcasting theme/language to whatever origin the iframe currently holds — including after a same-window navigation (sandbox permits allow-popups-to-escape-sandbox/allow-scripts). Prefer deriving the target origin from the content URL instead of '*'.

🔒 Proposed fix using explicit origin

   const syncIframePreferences = useCallback(() => {
     try {
+      const targetOrigin = new URL(content).origin
       iframeRef.current?.contentWindow?.postMessage(
         { themeMode: resolvedTheme },
-        '*'
+        targetOrigin
       )
       iframeRef.current?.contentWindow?.postMessage(
         { lang: i18n.language },
-        '*'
+        targetOrigin
       )
     } catch {
       // Cross-origin frames may reject access while navigating.
     }
-  }, [i18n.language, resolvedTheme])
+  }, [content, i18n.language, resolvedTheme])

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/default/src/features/home/index.tsx` around lines 40 - 53, The iframe
sync in syncIframePreferences uses wildcard targetOrigin in both postMessage
calls, which should be replaced with an explicit origin. Derive the allowed
target origin from the iframe/content URL or a known constant associated with
the iframe source, then pass that value instead of '*'. Keep the existing
useCallback and iframeRef/contentWindow logic, but ensure both themeMode and
lang messages use the same validated origin.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@web/default/src/features/home/index.tsx`:
- Around line 40-53: The iframe sync in syncIframePreferences uses wildcard
targetOrigin in both postMessage calls, which should be replaced with an
explicit origin. Derive the allowed target origin from the iframe/content URL or
a known constant associated with the iframe source, then pass that value instead
of '*'. Keep the existing useCallback and iframeRef/contentWindow logic, but
ensure both themeMode and lang messages use the same validated origin.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 11e573dc-58b6-42cb-9b98-8cdfb7c50c23

📥 Commits

Reviewing files that changed from the base of the PR and between 2281c9e and 6fc79a8.

📒 Files selected for processing (1)

• web/default/src/features/home/index.tsx