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: bc20236b-81c6-4e83-8c85-b16be68ebf88

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 and improve mobile responsiveness of docs site UI

📝 Documentation ✨ Enhancement 🕐 10-20 Minutes

AI Description

• Redesigned README.md with a centered hero, larger badges, and Vietnamese-first copy for a
 clearer first impression.
• Consolidated and translated sections (install, keybindings, config, troubleshooting, contribution)
 while removing unrelated API/cloud-sync/2FA content.
• Improved mobile responsiveness across the docs app (Header, ReadmeViewer, App) with
 responsive flex/grid layouts and markdown styling.
• Added vite.config.ts to configure Vite with React and Tailwind plugins.

Diagram

graph TD
  A["README.md"] --> B["Vietnamese-first hero"] --> C["Concise sections"]
  D["docs site app"] --> E["Header.tsx"] --> F["Responsive layout"]
  D --> G["ReadmeViewer.tsx"] --> F
  D --> H["index.css"] --> F
  I["vite.config.ts"] --> D

Loading

High-Level Assessment

This is a documentation refresh paired with minor responsive CSS fixes to an existing internal docs-preview app; the scope is appropriately limited and there is no significant architectural alternative to consider.

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 content wrapper and switched footer layout to a responsive flex-col/row arrangement for small screens.

src/App.tsx

Header.tsxMake header responsive for small screens +15/-15

Make header responsive for small screens

• Reworked header layout to stack vertically on mobile, added truncation/shrink handling for auth button and utility bar, and removed unused Command icon import.

src/components/Header.tsx

ReadmeViewer.tsxAdd mobile-friendly defaults and responsive grid to README viewer +26/-14

Add mobile-friendly defaults and responsive grid to README viewer

• Introduced a resize-based effect that defaults to preview mode on small screens, and adjusted grid/flex classes for search bar, view mode switcher, action buttons, and TOC ordering to be responsive.

src/components/ReadmeViewer.tsx

index.cssAdd base styles, markdown body typography, and scrollbar-hiding utility +84/-0

Add base styles, markdown body typography, and scrollbar-hiding utility

• Added base html/root background styles, markdown-body component classes for headings, code, tables, and a new scrollbar-none utility class used for overflow scroll areas.

src/index.css

Documentation (1) +162 / -162

README.mdRedesign README with Vietnamese-first hero and condensed sections +162/-162

Redesign README with Vietnamese-first hero and condensed sections

• Replaced the English-first README with a centered hero, larger badges, and Vietnamese-first descriptions. Reorganized content into concise sections (install, image gallery, usage flow, keybindings, sample config, dev setup, troubleshooting, contribution) and removed unrelated cloud-sync, 2FA, and REST/Node SDK documentation that didn't reflect the actual project.

README.md

Other (1) +7 / -0

vite.config.tsAdd Vite configuration with React and Tailwind plugins +7/-0

Add Vite configuration with React and Tailwind plugins

• New vite.config.ts wiring up @vitejs/plugin-react and @tailwindcss/vite plugins for the build.

vite.config.ts

[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. Broken README TOC links 🐞 Bug ≡ Correctness

Description

README.md’s Table of Contents uses fragments like #-cài-đặt-nhanh that won’t match GitHub’s
generated heading anchors for sections like ## 🚀 Cài đặt nhanh, so clicking TOC entries won’t
navigate to the intended sections.

Code

README.md[R56-64]

+- [Cài đặt nhanh](#-cài-đặt-nhanh)
+- [Bộ sưu tập hình ảnh](#-bộ-sưu-tập-hình-ảnh)
+- [Luồng sử dụng trong terminal](#-luồng-sử-dụng-trong-terminal)
+- [Phím tắt mặc định](#-phím-tắt-mặc-định)
+- [Cấu hình mẫu](#-cấu-hình-mẫu)
+- [Tùy biến thường dùng](#-tùy-biến-thường-dùng)
+- [Dành cho nhà phát triển](#-dành-cho-nhà-phát-triển)
+- [Khắc phục sự cố](#-khắc-phục-sự-cố)
+- [Đóng góp](#-đóng-góp)

Evidence

The TOC entries include a leading hyphen in the hash fragment, while the actual headings are plain
## … headings; GitHub’s slug for these headings will not include that extra leading -, so the
fragments won’t resolve.

README.md[54-69]

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 README Table of Contents links use the wrong fragment identifiers (they include a leading `-`), causing section navigation to fail.

## Issue Context
GitHub generates heading IDs by stripping emojis and trimming whitespace; it does not prefix the slug with an extra hyphen.

## Fix Focus Areas
- README.md[56-65]

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

---

2. Mobile resize forces preview ✓ Resolved 🐞 Bug ≡ Correctness

Description

ReadmeViewer installs a resize listener that sets viewMode to preview whenever the viewport is
<768px, which can override a user’s explicit selection of split or editor after
orientation/resize events.

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 newly added effect registers a resize listener and unconditionally forces preview mode for
widths <768px; this competes with the view-mode buttons that allow selecting other modes.

src/components/ReadmeViewer.tsx[27-37]
src/components/ReadmeViewer.tsx[107-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
On small viewports, the resize handler always calls `setViewMode('preview')`, so user-selected modes can be reset unexpectedly.

## Issue Context
The component provides UI buttons to select `split`/`editor`/`preview`, but the resize handler can override those choices whenever the window is resized while still under the mobile breakpoint.

## Fix Focus Areas
- src/components/ReadmeViewer.tsx[27-37]

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

---

3. Theme forced dark scheme 🐞 Bug ≡ Correctness

Description

Global CSS sets html { color-scheme: dark; } unconditionally, so browser-native UI
(inputs/scrollbars/etc.) stays in dark mode even when the app switches to light theme.

Code

src/index.css[R41-45]

+@layer base {
+  html {
+    color-scheme: dark;
+    background: #09090b;
+  }

Evidence

The CSS forces dark color-scheme globally, while the app’s theme system removes/adds the dark
class and exposes a Light Mode toggle—so the forced scheme conflicts with the intended theme
switching behavior.

src/index.css[41-45]
src/App.tsx[25-34]
src/components/Header.tsx[146-177]

Agent prompt

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

## Issue description
`color-scheme: dark` is applied globally regardless of the selected theme, causing UA/native control styling to remain dark.

## Issue Context
The app exposes a light theme control and toggles theme classes on the document element; `color-scheme` should follow that selection (e.g., conditional on `.dark`).

## Fix Focus Areas
- src/index.css[41-45]
- src/App.tsx[25-34]
- src/components/Header.tsx[146-177]

ⓘ 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 8 new potential issues.