Rewrite README: Vietnamese localization and mobile-friendly redesign

[zskbot]

Motivation

• Improve accessibility and readability on mobile and non-English speaking users by translating and restructuring the README.
• Surface key usage flows, visuals and quick-install steps up front so new users can get started faster.
• Simplify and modernize the presentation (badges, hero, image gallery) and align docs with actual developer workflows.

Description

• Fully rewrote README.md into Vietnamese and reorganized the document into compact, mobile-friendly blocks with a centered hero and badge layout.
• Replaced many English sections with localized equivalents and updated illustrations, demo GIFs and an image gallery; moved the table of contents to a concise set of anchors.
• Streamlined installation and usage instructions (gh extension, Homebrew, go install) and normalized code blocks and example config.yml content.
• Updated developer and contribution guidance to include commands like go test ./..., go run ., npm install, and npm run dev, and removed several previously documented advanced parameters (cloud sync/security extras) from the examples.

Testing

• No automated tests were run because this is a documentation-only change; there are no code changes that affect unit/integration tests.

---

Codex Task

---

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (6)

• README.md is excluded by none and included by none
• src/App.tsx is excluded by none and included by none
• src/components/Header.tsx is excluded by none and included by none
• src/components/ReadmeViewer.tsx is excluded by none and included by none
• src/index.css is excluded by none and included by none
• vite.config.ts is excluded by none and included by none

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Team

Run ID: aa5c9ba6-697f-49d8-95c8-d822ff33754f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[qodo-code-review]

PR Summary by Qodo

Localize and redesign README in Vietnamese with a mobile-first layout

📝 Documentation 🕐 10-20 Minutes

AI Description

• Rewrite README content in Vietnamese with a centered hero, badges, and concise sections.
• Reorganize onboarding into quick install, visuals, keybindings, config, and troubleshooting.
• Remove previously documented advanced/extra features to match core gh-dash workflows.

Diagram

graph TD
  R["README.md"] --> H["Hero + badges"] --> I["Quick install"] --> G["Image gallery"] --> U["Terminal flow"] --> C["Config + tweaks"] --> D["Dev + contribute"] --> T["Troubleshooting"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Keep English README; add README.vi.md

• ➕ Preserves default expectations for the broader GitHub audience
• ➕ Avoids breaking existing deep links/anchors from external references
• ➕ Makes translation scope explicit and easier to maintain incrementally
• ➖ Vietnamese content is no longer the first thing new users see
• ➖ Requires duplication/sync effort across two documents

2. Bilingual README with collapsible language blocks

• ➕ Single entrypoint; readers choose language without switching files
• ➕ Keeps install/config snippets unified to reduce drift
• ➖ Longer README and heavier mobile scrolling
• ➖ Harder to keep formatting clean (HTML/Markdown mixing)

3. Move long-form docs to a dedicated docs site; keep README minimal

• ➕ README stays short; richer navigation/search on the docs site
• ➕ Better place for screenshots, keybindings, and troubleshooting depth
• ➖ Adds maintenance/deploy overhead for docs
• ➖ Increases friction for users who expect everything in README

Recommendation: If the project targets a global audience, consider keeping an English default README and adding a clearly linked Vietnamese version (README.vi.md) to avoid surprising first-time visitors and breaking external anchors. If Vietnamese-first is intentional for this fork/community, this PR’s approach is fine; in that case, ensure anchor stability (or add redirects/alias links) and keep install/config snippets aligned with actual behavior over time.

Files changed (1) +162 / -162

Documentation (1) +162 / -162

README.mdVietnamese localization and mobile-friendly README restructure +162/-162

Vietnamese localization and mobile-friendly README restructure

• Replaces the previous English-heavy README with a Vietnamese-first, centered hero/badge layout and reorganized sections. Updates install instructions, adds a screenshot/gallery and terminal usage flow, refreshes keybindings/config examples, and simplifies content by removing advanced/extra feature documentation (e.g., cloud sync/security/API examples).

README.md

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

1. Docs commands target wrong project 🐞 Bug ⚙ Maintainability

Description

In "Dành cho nhà phát triển", the README says to run the documentation UI with npm install / `npm
run dev / npm run build but it doesn’t specify cd docs, and the /docs` site is an Astro
project configured for pnpm. If a contributor runs these commands from repo root (typical), they
will operate on the root Vite app instead of the docs site, leading to incorrect dev workflow.

Code

README.md[R225-231]

+Nếu bạn làm việc với giao diện tài liệu trong repo này:

-run();
+```bash
+npm install
+npm run dev
+npm run build

</details>

Evidence

README instructs running npm commands for the “documentation UI”, but /docs is a separate Astro
project configured for pnpm; root npm run dev runs Vite instead. This mismatch is directly
verifiable from the repo’s package manifests and docs README.

README.md[225-231]
docs/package.json[1-32]
docs/README.mdx[30-41]
package.json[1-12]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
README’s developer section suggests using `npm` to work on the documentation UI, but the docs site actually lives under `/docs` and is configured for pnpm/Astro. Running the shown commands from repo root will target the root Node project (Vite) instead of the docs site.

### Issue Context
- Repo has **two** Node projects: root (`package.json`) and docs (`docs/package.json`).
- `docs/package.json` declares `packageManager: pnpm@...` and `docs/README.mdx` documents `pnpm` commands.

### Fix Focus Areas
- README.md[225-231]

### Suggested fix
Update the README to either:
1) explicitly say these commands are for the **root app**, OR
2) if it’s meant for the docs site, change it to:
```bash
cd docs
pnpm install
pnpm dev
pnpm build
```
(and optionally mention expected port / Astro).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Conflicting version references 🐞 Bug ⚙ Maintainability

Description

The README shows v4.12.0 in the version badge but the newly added terminal diagram contains
v4.16.x, which is inconsistent within the same document and can mislead users about the current
version. This mismatch is introduced by the new diagram text.

Code

README.md[128]

+│ 🔍 | My Pull Requests | Needs My Review | Issues | v4.16.x     │

Evidence

The version badge in the README is v4.12.0, while the PR-added terminal diagram explicitly shows
v4.16.x, creating an internal inconsistency.

README.md[7-12]
README.md[126-132]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
README contains two different version references (`v4.12.0` badge vs `v4.16.x` in the diagram), which is confusing.

### Issue Context
This PR introduces the `v4.16.x` text in the UI diagram while keeping the existing badge.

### Fix Focus Areas
- README.md[9-12]
- README.md[126-138]

### Suggested fix
Change the diagram’s `v4.16.x` to match the badge version, or update the badge to match the intended version, or label the diagram as illustrative (e.g., `vX.Y.Z`).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

_{To customize comments, go to the Qodo configuration screen, or learn more in the docs.}

[devin-ai-integration]

Devin Review found 7 new potential issues.