diff --git a/.cursor/rules/communication-guidelines.mdc b/.cursor/rules/communication-guidelines.mdc new file mode 100644 index 0000000000..9fe844695b --- /dev/null +++ b/.cursor/rules/communication-guidelines.mdc @@ -0,0 +1,14 @@ +--- +description: Nguyên tắc phản hồi và không lặp lại câu hỏi cũ +alwaysApply: true +--- + +# Nguyên Tắc Phản Hồi & Giao Tiếp + +1. **Tuyệt đối không nhắc lại, lặp lại các kết luận hoặc câu hỏi cũ**: + - Không lặp lại việc so sánh trạng thái cũ (ví dụ: việc Beta behind Prod hay các thông báo trạng thái cũ) khi user không yêu cầu. + - Khi user hỏi câu hỏi mới hoặc đặt câu hỏi phản biện, chỉ tập trung giải quyết trực diện vấn đề được nêu. + +2. **Trả lời đúng trọng tâm kỹ thuật**: + - Phân tích đúng bản chất kiến trúc (OAuth 2.1, PKCE Bridge, Redirect URI security model). + - Giải thích ngắn gọn, súc tích, mạch lạc và đi thẳng vào giải pháp kỹ thuật. diff --git a/docs/ui-ux-rework-plan.md b/docs/ui-ux-rework-plan.md new file mode 100644 index 0000000000..0bc1090458 --- /dev/null +++ b/docs/ui-ux-rework-plan.md @@ -0,0 +1,99 @@ +# 📐 Crove Post - UI/UX Rework Master Plan & Benchmark Blueprint + +> **Status:** Draft / Architectural Standard +> **Target:** Frontend Engineering (`apps/frontend`), Design System (`DESIGN.md`) +> **Benchmark Sources:** Publer, Typefully, Buffer, Linear, Raycast +> **Core Architecture:** Zero-Conflict / Layer-Isolated (Preserve 100% Upstream Workflow & Provider Engines) + +--- + +## 1. 🎨 Brand Color & Visual Identity Analysis ("Crove") + +### 1.1 Color Psychology & Brand Fit + +| Option | Primary Accent | Vibe & Psychology | Industry Benchmark | Fit with Crove Ecosystem | +| :--- | :--- | :--- | :--- | :--- | +| **Option A: Emerald Tech Green (Xanh Ngọc Lục Bảo)** | `#10B981`
`#059669` | **Growth, Harvest, High-ROI, Freshness, Audience Expansion.**
Gợi liên tưởng trực tiếp đến *Grove* (vườn cây trĩu quả), *Crops* (thu hoạch thành quả kinh doanh). | Supabase, Warp.dev, Spotify, OpenAI | ⭐⭐⭐⭐⭐
Tách biệt hoàn toàn với màu Đỏ của DOS, tạo cảm giác tăng trưởng doanh thu mạnh mẽ. | +| **Option B: Royal Electric Purple (Tím Hoàng Gia)** | `#7C3AED`
`#6366F1` | **Intelligence, Premium SaaS, AI-Driven, Creator Authority.**
Mang tính nghệ thuật, nền tảng Business OS quyền lực và thông minh. | Raycast, Linear, Loom, Vercel AI | ⭐⭐⭐⭐
Sang trọng, hiện đại, nhưng dễ trùng lặp với màu tím mặc định của Postiz cũ nếu không tinh chỉnh. | + +### 1.2 Khuyến Nghị Phối Màu (Hybrid Synergy) +- **Primary Brand Accent (Crove Core):** **Emerald Green (`#10B981` / `#059669`)** — Đại diện cho kênh phân phối, tăng trưởng Traffic, Leads & Khách hàng. +- **Secondary AI / Copilot Accent:** **Electric Purple / Violet (`#7C3AED`)** — Đại diện cho trợ lý AI Copilot, Magic Prompt & Tự động hóa thông minh. +- **Canvas Base:** **Obsidian Dark (`#08080f`)** & **Elevated Cards (`#0f0f1c` / `#121224`)** với viền mỏng `border-zinc-800/70`. + +--- + +## 2. 🔍 Benchmark Nghiên Cứu UI/UX Từ Các Nền Tảng Hàng Đầu + +### 2.1 Publer (Master of Multi-Brand Workspaces & Calendar UX) +* **Điểm sáng cần học hỏi:** + - **Workspace & Brand Switcher:** Phân tách rõ ràng giữa các Client/Brand, cho phép switch workspace chỉ bằng 1 click với Avatar thương hiệu sắc nét. + - **Interactive Calendar:** Phân màu trực quan theo từng trạng thái bài đăng (`Draft` = Xám, `Scheduled` = Xanh/Tím, `Failed` = Đỏ, `Published` = Xanh lá), kéo thả đổi giờ xuất bản mượt mà. + - **Bulk Scheduling & Recycling:** Lên lịch hàng loạt và tái sử dụng bài đăng evergreen hiệu quả. + +### 2.2 Typefully (Master of Post Composer & Distraction-Free Writing) +* **Điểm sáng cần học hỏi:** + - **Split-View Post Composer:** Cột trái là trình soạn thảo siêu sạch (Distraction-free), cột phải là **Live Pixel-Perfect Mobile/Desktop Preview** mô phỏng 100% giao diện mạng xã hội thật. + - **Thread & Multi-Channel Switcher:** Chuyển đổi tab xem trước giữa X, LinkedIn, Facebook, Instagram trong chớp mắt. + - **Smart Character Meter:** Bộ đếm ký tự thanh thoát, cảnh báo trực quan khi vượt giới hạn của từng nền tảng. + +### 2.3 Buffer & Metricool (Simplicity & Queue Slots) +* **Điểm sáng cần học hỏi:** + - **Posting Schedule Queues:** Cài đặt trước các "Khung giờ vàng" (Posting Slots), khi soạn bài chỉ cần bấm *"Add to Queue"* là tự động vào khung giờ tối ưu tiếp theo. + - **Clean Analytics Overview:** Các thẻ KPI tóm tắt (Reach, Engagement, Clicks) kèm biểu đồ sparkline thanh lịch. + +### 2.4 Hootsuite (Bài Học Cần Tránh) +* **Nhược điểm cần tránh:** + - Quá tải thông tin (Information Overload), bố cục nhiều cột dày đặc gây rối mắt và làm chậm hiệu năng. + - Crove Post phải giữ triết lý **Linear/Raycast-Dense**: Gọn gàng, tốc độ phản hồi dưới 100ms, phím tắt tiện lợi. + +--- + +## 3. 🏗️ Kiến Trúc Rework 4 Module Trọng Tâm (Zero-Conflict) + +``` +┌─────────────────────────────────────────────────────────────────────────────────┐ +│ CROVE POST REWORK ARCHITECTURE │ +├─────────────────────┬──────────────────────┬───────────────────┬────────────────┤ +│ MODULE 1 │ MODULE 2 │ MODULE 3 │ MODULE 4 │ +│ Shell & Navigation │ Post Composer Split │ Visual Calendar │ Smart Analytics│ +├─────────────────────┼──────────────────────┼───────────────────┼────────────────┤ +│ • Popover Workspace │ • Distraction-free │ • Drag & Drop │ • KPI Cards │ +│ • Collapsible Bar │ • Live Mobile Prev │ • Status Badges │ • Sparklines │ +│ • Raycast-style Nav │ • Platform Overrides │ • Slot Auto-Fill │ • Heatmaps │ +└─────────────────────┴──────────────────────┴───────────────────┴────────────────┘ +``` + +### Module 1: App Shell & Workspace Switcher +- **Mục tiêu:** Thay thế dropdown cũ bằng Popover hiện đại. +- **Thiết kế:** + - Component `CroveWorkspaceSelector`: Hiển thị Logo/Initials của Org, Role badge (`Super-Admin` / `Admin` / `Member`), Active checkmark. + - Tích hợp tìm kiếm nhanh khi user có nhiều Org. + - Chuyển đổi Workspace mượt mà qua SWR mutate (không reload trang). + - Thu gọn Super-Admin Toolbar thành Floating Drawer / Toggle Button góc trên bên phải. + +### Module 2: Post Composer Studio (Typefully Style) +- **Mục tiêu:** Tách Post Composer thành Split-View 2 cột độc lập. +- **Thiết kế:** + - **Cột Trái (Editor Panel - 55%):** Channel selector, Rich Editor, Media Uploader từ R2, First Comment, AI Copilot Prompt, Time picker. + - **Cột Phải (Live Platform Preview - 45%):** Tab chuyển đổi X, LinkedIn, Facebook, Instagram, TikTok, Threads với frame mô phỏng điện thoại/máy tính sắc nét. + +### Module 3: Visual Interactive Calendar (Publer Style) +- **Mục tiêu:** Trải nghiệm quản lý lịch xuất bản trực quan, kéo thả linh hoạt. +- **Thiết kế:** + - Kéo - thả (Drag-and-Drop) bài viết giữa các ngày và khung giờ. + - Filter Bar ở đầu Calendar để lọc nhanh bài theo từng mạng xã hội hoặc theo trạng thái (`Draft`, `Scheduled`, `Published`). + +### Module 4: Analytics & Insights Dashboard +- **Mục tiêu:** Thống kê hiệu quả bài đăng và kênh tăng trưởng mạnh nhất. +- **Thiết kế:** + - Thẻ KPI tổng quan: Tổng Impressions, Engagement Rate, Top Channels. + - Heatmap khung giờ có tương tác cao nhất trong tuần. + +--- + +## 4. 🛡️ Quy Tắc Đảm Bảo "Zero-Conflict" Khi Merge Upstream + +1. **Không sửa đổi core workflow và activity files:** Giữ nguyên các files trong `apps/orchestrator` và `libraries/nestjs-libraries/src/integrations/`. +2. **Theme thông qua CSS Variables:** Toàn bộ palette màu mới được định nghĩa trong `colors.scss` và `tailwind.config.cjs`, không hardcode mã màu lạ vào JSX của upstream. +3. **Component Isolation:** Các tính năng riêng của Crove (như DOS ID Workspace Switcher, AI Gateway settings) được đóng gói thành các sub-components riêng biệt, chỉ import vào tầng layout wrapper ngoài cùng.