Update README.md Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com> Signed-off-by: Clriks <241179063+clauderiks@users.noreply.github.com>

[zskbot]

Summary

Closes #

• [] I have read the Contributing and the strict No-AI Policy guides.

How Did You Test this Change?

Images/Videos

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 7672bd72-6ac0-411d-8016-226fa379c7ec

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

Redesign README with Vietnamese-first layout and mobile-responsive demo app UI

📝 Documentation ✨ Enhancement 🕐 10-20 Minutes

AI Description

• Rewrote README.md with a centered hero, larger badges, and a Vietnamese-first, concise
 structure.
• Removed fabricated/duplicate sections (cloud sync, 2FA, telemetry, REST API) not part of the
 actual project.
• Added responsive/mobile-friendly styling to the README demo web app (Header, ReadmeViewer, App,
 global CSS).
• Added missing vite.config.ts to properly configure the Vite + React + Tailwind build.

Diagram

graph TD
  subgraph Docs
    A["README.md"]
  end
  subgraph Demo Web App
    B["vite.config.ts"] --> C["App.tsx"] --> D["Header.tsx"]
    C --> E["ReadmeViewer.tsx"]
    C --> F["index.css"]
  end
  E -.renders.-> A

Loading

High-Level Assessment

The PR appropriately scopes the README rewrite to documentation content and pairs it with necessary responsive-styling fixes in the demo viewer app so the new README renders well on mobile; no architecturally significant alternative approach is warranted for a documentation-focused change.

Files changed (6) +297 / -194

Enhancement (4) +128 / -32

App.tsxImprove mobile layout of main content and footer +3/-3

Improve mobile layout of main content and footer

• Added overflow-x-hidden to main container and switched footer layout to stack vertically on small screens with wrapped utility links.

src/App.tsx

Header.tsxMake header responsive for mobile viewports +15/-15

Make header responsive for mobile viewports

• Reworked header flex layout to stack and wrap on small screens, shortened labels on mobile, made utility bar horizontally scrollable, and removed unused Command icon import.

src/components/Header.tsx

ReadmeViewer.tsxAdd mobile-responsive README viewer with auto preview mode +26/-14

Add mobile-responsive README viewer with auto preview mode

• Added a resize listener that defaults to preview-only view mode on small screens, reorganized the toolbar and TOC/editor grid to stack responsively, and adjusted spacing/min-height for mobile.

src/components/ReadmeViewer.tsx

index.cssAdd global markdown styling and scrollbar utility classes +84/-0

Add global markdown styling and scrollbar utility classes

• Introduced base layer styles for dark color scheme, component-layer styles for rendered markdown (headings, tables, code blocks, blockquotes), and a scrollbar-hiding utility class.

src/index.css

Documentation (1) +162 / -162

README.mdRedesigned README with Vietnamese-first, concise layout +162/-162

Redesigned README with Vietnamese-first, concise layout

• Replaced the elaborate English README with a concise, centered-hero, Vietnamese-first layout. Removed fictitious sections (cloud sync, 2FA, telemetry API, disaster recovery) and consolidated content into install, preview, keybindings, config, developer setup, troubleshooting, and contribution guidance.

README.md

Other (1) +7 / -0

vite.config.tsAdd missing Vite configuration file +7/-0

Add missing Vite configuration file

• Introduced vite.config.ts wiring up the React and Tailwind CSS Vite plugins, required for the build to pick up Tailwind v4 processing.

vite.config.ts

[qodo-code-review]

Code Review by Qodo

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

1. README/viewer mismatch 🐞 Bug ≡ Correctness

Description

The PR rewrites README.md, but the app’s ReadmeViewer still sources content from
src/data/readmeData.ts, so the UI and export feature will continue to show/export the old README
text. This creates conflicting documentation between the repository README and the in-app README
viewer/editor.

Code

README.md[R1-16]

+<div align="center">

-> A sleek, highly customizable terminal UI (TUI) extension for the GitHub CLI (`gh`). Manage Pull Requests, Issues, Notifications, and Workflows with lightning speed.
+# ⚡ gh-dash

-[![Build Status](https://img.shields.io/badge/build-passing-brightgreen.svg?style=flat-square)](https://github.com/dlvhdr/gh-dash)
-[![Version](https://img.shields.io/badge/version-v4.12.0-blue.svg?style=flat-square)](https://github.com/dlvhdr/gh-dash/releases)
-[![License](https://img.shields.io/badge/license-MIT-purple.svg?style=flat-square)](LICENSE)
-[![GitHub stars](https://img.shields.io/github/stars/dlvhdr/gh-dash?style=flat-square)](https://github.com/dlvhdr/gh-dash/stargazers)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=flat-square)](CONTRIBUTING.md)
+### Terminal dashboard tối giản, nhanh và đẹp cho GitHub CLI
+
+<p>
+  <a href="https://github.com/dlvhdr/gh-dash/actions"><img alt="Build" src="https://img.shields.io/badge/build-passing-brightgreen?style=for-the-badge"></a>
+  <a href="https://github.com/dlvhdr/gh-dash/releases"><img alt="Version" src="https://img.shields.io/badge/version-v4.12.0-blue?style=for-the-badge"></a>
+  <a href="LICENSE.txt"><img alt="License" src="https://img.shields.io/badge/license-MIT-purple?style=for-the-badge"></a>
+  <a href="https://github.com/dlvhdr/gh-dash/stargazers"><img alt="Stars" src="https://img.shields.io/github/stars/dlvhdr/gh-dash?style=for-the-badge"></a>
+</p>
+
+> Quản lý Pull Request, Issue, Notification và Workflow ngay trong terminal — tập trung, gọn gàng và dùng hoàn toàn bằng bàn phím.
+
+<img src="docs/src/assets/overview.gif" alt="Demo giao diện dòng lệnh gh-dash" width="100%">

Evidence

README.md is rewritten to a new Vietnamese hero/structure, but ReadmeViewer still loads markdown
from readmeTexts which begins with the old English header, so the app UI/export remains out of
sync with the repo README.

README.md[1-16]
src/data/readmeData.ts[3-12]
src/components/ReadmeViewer.tsx[19-25]

Agent prompt

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

## Issue description
The in-app README viewer/editor exports content from `readmeTexts` (hardcoded in `src/data/readmeData.ts`). After this PR’s README.md rewrite, the app still displays and exports the old embedded README content, causing documentation divergence.

## Issue Context
- `ReadmeViewer` sets `markdownContent` from `readmeTexts[language]` and uses that same content for copy/export.
- This PR updates `README.md` structure/language, but does not update the embedded `readmeTexts`.

## Fix Focus Areas
- Update the embedded `readmeTexts` to match the new README (at least the default language), OR
- Load README.md as a canonical source (e.g., Vite raw import) and derive the in-app viewer content from it.

### Code pointers
- src/data/readmeData.ts[3-30]
- src/components/ReadmeViewer.tsx[19-25]
- README.md[1-80]

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

---

2. Resize overrides view mode ✓ Resolved 🐞 Bug ☼ Reliability

Description

ReadmeViewer forces viewMode to 'preview' on every window resize while <768px, which can
overwrite an explicit user choice of split/editor mode. On mobile, frequent resize events
(orientation/address bar/keyboard) can make the view-mode toggle feel broken and disrupt editing.

Code

src/components/ReadmeViewer.tsx[R27-37]

+  useEffect(() => {
+    const applyMobileDefault = () => {
+      if (window.innerWidth < 768) {
+        setViewMode('preview');
+      }
+    };
+
+    applyMobileDefault();
+    window.addEventListener('resize', applyMobileDefault);
+    return () => window.removeEventListener('resize', applyMobileDefault);
+  }, []);

Evidence

The new effect forces viewMode to preview for small widths and subscribes to resize; the component
also exposes buttons to set viewMode, so subsequent resize events can overwrite the user’s
selection.

src/components/ReadmeViewer.tsx[27-37]
src/components/ReadmeViewer.tsx[108-138]

Agent prompt

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

## Issue description
`ReadmeViewer` adds a resize listener that sets `viewMode` to `preview` whenever `window.innerWidth < 768`. This can override a user-selected `split` or `editor` mode on mobile whenever a resize event fires.

## Issue Context
- The UI provides buttons to select `split/editor/preview`.
- The new resize handler can reset the state back to `preview` after the user selects another mode.

## Fix Focus Areas
- Apply the mobile default only once on mount (no resize listener), OR
- Only auto-switch when crossing the breakpoint (use `matchMedia('(max-width: 767px)')`) and avoid overriding if the user has manually selected a mode (track a `userSelectedViewMode` flag).

### Code pointers
- src/components/ReadmeViewer.tsx[27-37]
- src/components/ReadmeViewer.tsx[108-138]

ⓘ 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 1 new potential issue.