feat: 支持导出配置为文件和导入

[Joe-Bao]

多了一个子选项，有用户抱怨配置长了剪贴板/聊天软件装不下（？）

Summary by Sourcery

通过在现有基于剪贴板分享的基础上，新增对通过 txt 文件导出和导入标签页配置的支持，并增强右键菜单，使这些选项通过嵌套子菜单的形式呈现。

新功能：

• 在浏览器和 Tauri 环境中允许将标签页配置导出为 txt 文件。
• 在浏览器和 Tauri 环境中允许从 txt 文件导入标签页配置。
• 在任务列表和标签栏的右键菜单中，为剪贴板和文件导入/导出提供单独的操作入口。

改进：

• 重构标签页配置导入/导出工具，使剪贴板和文件流程共享文本构建与解析逻辑。
• 改进右键菜单行为，支持嵌套子菜单，并根据视口空间自适应选择左/右侧展开。

文档：

• 更新所有受支持语言中的 i18n 字符串，描述新的基于文件的导入/导出选项以及优化后的右键菜单标签。

Original summary in English

Summary by Sourcery

Add support for exporting and importing tab configurations via txt files alongside existing clipboard-based sharing, and enhance context menus to surface these options with nested submenus.

New Features:

• Allow exporting tab configurations to txt files in both browser and Tauri environments.
• Allow importing tab configurations from txt files in both browser and Tauri environments.
• Expose separate import/export actions for clipboard and file in task list and tab bar context menus.

Enhancements:

• Refactor tab configuration export/import utilities to share text-building and parsing logic across clipboard and file workflows.
• Improve context menu behavior to support nested submenus with adaptive left/right placement based on viewport space.

Documentation:

• Update i18n strings in all supported languages to describe new file-based import/export options and refined context menu labels.

[sourcery-ai]

Hey - 我发现了 1 个问题，并给出了一些整体性反馈：

• 在 ContextMenu.tsx 中，MenuItemComponent 现在把所有条目都渲染为按钮，而且没有对 divider 条目做特殊处理，这会导致子菜单中的分隔符被渲染成可点击的条目；建议对子菜单中的 item.divider 也进行一致处理（例如渲染为分隔线而不是按钮）。
• 用于构建导出时 exportHint 和 exportFooter 字符串的逻辑在 TaskList 和 TabBar 中各自重复了一遍；可以考虑抽取到一个共享的 helper（或者复用一个通用的 hook），以减少重复，并让将来修改导出文案格式时只需要改一个地方。

给 AI Agent 的提示

Please address the comments from this code review:

## Overall Comments
- 在 `ContextMenu.tsx` 中，`MenuItemComponent` 现在把所有条目都渲染为按钮，而且没有对 `divider` 条目做特殊处理，这会导致子菜单中的分隔符被渲染成可点击的条目；建议对子菜单中的 `item.divider` 也进行一致处理（例如渲染为分隔线而不是按钮）。
- 用于构建导出时 `exportHint` 和 `exportFooter` 字符串的逻辑在 `TaskList` 和 `TabBar` 中各自重复了一遍；可以考虑抽取到一个共享的 helper（或者复用一个通用的 hook），以减少重复，并让将来修改导出文案格式时只需要改一个地方。

## Individual Comments

### Comment 1
<location path="src/components/ContextMenu.tsx" line_range="106-112" />
<code_context>
+  submenuDirection: 'left' | 'right';
+  depth?: number;
+}) {
+  const hasChildren = !!item.children?.length;
+
   const handleClick = () => {
</code_context>
<issue_to_address>
**issue (bug_risk):** 分隔符菜单项仍然被渲染为可交互按钮，而不是仅作为视觉分隔符。

`MenuItemComponent` 将所有条目都视为可点击项，但 `MenuItem` 是支持 `divider` 条目的（可参考在生成 key 时对 `divider` 的检查）。这些 `divider` 条目目前会被渲染为空的、可点击的行。

请在处理 `hasChildren` / `handleClick` 逻辑之前为 `divider` 条目添加一个提前返回，例如：
```tsx
if (item.divider) {
  return <div className="my-1 h-px bg-border" role="separator" />;
}
```
对子级条目也应用同样的处理，以便嵌套的分隔符也被渲染为不可交互的分隔线。
</issue_to_address>

---

Sourcery 对开源项目是免费的——如果你觉得我们的代码审查对你有帮助，欢迎分享给更多人 ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{帮我变得更有用！请在每条评论上点击 👍 或 👎，我会根据你的反馈不断改进代码审查质量。}

Original comment in English

Hey - I've found 1 issue, and left some high level feedback:

• In ContextMenu.tsx, MenuItemComponent now renders all items as buttons and doesn’t special‑case divider items, which means dividers inside submenus will render as clickable entries; consider handling item.divider consistently (e.g., render a separator instead of a button) for child menus as well.
• The logic that builds exportHint and exportFooter strings for exports is duplicated in both TaskList and TabBar; extracting this into a shared helper (or reusing a common hook) would reduce repetition and keep future changes to the export message format in one place.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `ContextMenu.tsx`, `MenuItemComponent` now renders all items as buttons and doesn’t special‑case `divider` items, which means dividers inside submenus will render as clickable entries; consider handling `item.divider` consistently (e.g., render a separator instead of a button) for child menus as well.
- The logic that builds `exportHint` and `exportFooter` strings for exports is duplicated in both `TaskList` and `TabBar`; extracting this into a shared helper (or reusing a common hook) would reduce repetition and keep future changes to the export message format in one place.

## Individual Comments

### Comment 1
<location path="src/components/ContextMenu.tsx" line_range="106-112" />
<code_context>
+  submenuDirection: 'left' | 'right';
+  depth?: number;
+}) {
+  const hasChildren = !!item.children?.length;
+
   const handleClick = () => {
</code_context>
<issue_to_address>
**issue (bug_risk):** Divider menu items are still rendered as interactive buttons instead of visual separators.

`MenuItemComponent` treats all items as clickable, but `MenuItem` supports `divider` items (see the `divider` checks when generating keys). These divider items are currently rendered as empty, clickable rows.

Add an early return for divider items (before `hasChildren`/`handleClick`), e.g.:
```tsx
if (item.divider) {
  return <div className="my-1 h-px bg-border" role="separator" />;
}
```
Apply the same handling for child items so nested dividers are rendered as non-interactive separators as well.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

issue (bug_risk): 分隔符菜单项仍然被渲染为可交互按钮，而不是仅作为视觉分隔符。

MenuItemComponent 将所有条目都视为可点击项，但 MenuItem 是支持 divider 条目的（可参考在生成 key 时对 divider 的检查）。这些 divider 条目目前会被渲染为空的、可点击的行。

请在处理 hasChildren / handleClick 逻辑之前为 divider 条目添加一个提前返回，例如：

if (item.divider) {
  return <div className="my-1 h-px bg-border" role="separator" />;
}

对子级条目也应用同样的处理，以便嵌套的分隔符也被渲染为不可交互的分隔线。

Original comment in English

issue (bug_risk): Divider menu items are still rendered as interactive buttons instead of visual separators.

MenuItemComponent treats all items as clickable, but MenuItem supports divider items (see the divider checks when generating keys). These divider items are currently rendered as empty, clickable rows.

Add an early return for divider items (before hasChildren/handleClick), e.g.:

if (item.divider) {
  return <div className="my-1 h-px bg-border" role="separator" />;
}

Apply the same handling for child items so nested dividers are rendered as non-interactive separators as well.