# 🛠️ KẾ HOẠCH FIX BUG: TÁI CẤU TRÚC PHÂN TẦNG TIMELINE & CONTROL PANEL

Mục tiêu: Loại bỏ dải nền xám chứa các nút zoom. Di chuyển các nút zoom tích hợp chung vào khu vực điều khiển camera phía dưới (cùng hàng với nút Shutter và nút Xem lại). Thay đổi biểu tượng nút Play thành biểu tượng Image (Thư viện).

---

## 📐 1. Phác Thảo Cấu Trúc Giao Diện Mới (Sau khi chỉnh sửa)

Giao diện từ cạnh dưới kính ngắm camera trở xuống sẽ được tối giản thành đúng 2 khối:

```
[ Kính ngắm Camera chính (Tỉ lệ 3:4) ]
--------------------------------------------------
[ Khối 1: TIMELINE CONTAINER ]
  - Nút Neo cố định ở cạnh trái (Frame / Palette)
  - Thanh RecyclerView trượt ngang lướt dưới nút Neo
--------------------------------------------------
[ Khối 2: BOTTOM CONTROL PANEL ] (Không nền phụ, tối giản)
  - Hàng trên: Các cụm văn bản Zoom thuần (0.5x, 1x, 3x) - Text trắng/cam
  - Hàng dưới: [Icon Image/Gallery]  ➔  [Nút Shutter Trắng/Cam]  ➔  [Khoảng trống]

```

---

## 🛠️ 2. Chi Tiết Thay Đổi Trong Tệp Cấu Hình XML (`activity_main.xml`)

Bạn hãy thay thế toàn bộ khu vực phía dưới `cameraContainer` bằng đoạn mã tối ưu bằng `ConstraintLayout` dưới đây để giải quyết triệt để lỗi đè nền hiển thị trong ảnh `image_2afaba.png`.

```xml
<!-- ================= KHỐI 1: TIMELINE FRAMES & PRESETS ================= -->
<!-- Đặt ngay phía dưới Camera và không bị ai đè lên nữa -->
<FrameLayout
    android:id="@+id/panelSelectionContainer"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="#000000"
    app:layout_constraintTop_toBottomOf="@id/cameraContainer"
    app:layout_constraintBottom_toTopOf="@id/bottomControlPanel">

    <!-- Danh sách cuộn ngang -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvHorizontalTimeline"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:clipToPadding="false"
        android:paddingStart="75dp"
        android:paddingEnd="16dp" />

    <!-- Nút chức năng chính (Góc trái làm điểm Neo đè lên RecyclerView) -->
    <ImageView
        android:id="@+id/btnMainAnchor"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="left|center_vertical"
        android:layout_marginStart="16dp"
        android:src="@drawable/ic_palette_default"
        android:background="@null" />
</FrameLayout>

<!-- ================= KHỐI 2: BOTTOM CONTROL PANEL (ĐIỀU KHIỂN CAMERA) ================= -->
<!-- Khối này gom gọn cả nút Zoom, Shutter và nút Xem ảnh, xóa bỏ các dải nền thừa -->
<ConstraintLayout
    android:id="@+id/bottomControlPanel"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="#000000"
    app:layout_constraintTop_toBottomOf="@id/panelSelectionContainer"
    app:layout_constraintBottom_toBottomOf="parent">

    <!-- CỤM ZOOM THUẦN (Xóa bỏ dải nền cũ trong image_2afaba.png) -->
    <LinearLayout
        android:id="@+id/layoutZoomGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="12dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <TextView
            android:id="@+id/tvZoom05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0.5x"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            android:padding="8dp" />

        <TextView
            android:id="@+id/tvZoom1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1x"
            android:textColor="#FF9800" <!-- Mặc định màu cam cho 1x -->
            android:textStyle="bold"
            android:padding="8dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp" />

        <TextView
            android:id="@+id/tvZoom3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3x"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            android:padding="8dp" />
    </LinearLayout>

    <!-- NÚT XEM ẢNH (Thay thế nút mũi tên Play cũ thành biểu tượng Image/Gallery) -->
    <ImageButton
        android:id="@+id/btnGalleryReview"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="@null"
        android:src="@drawable/ic_image_gallery" <!-- Đổi sang icon bức ảnh hình vuông/thư viện -->
        app:layout_constraintTop_toTopOf="@id/btnShutterCapture"
        app:layout_constraintBottom_toBottomOf="@id/btnShutterCapture"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="32dp" />

    <!-- NÚT SHUTTER CHỤP ẢNH (Giữ cố định vị trí vàng ở giữa dưới cùng) -->
    <ImageButton
        android:id="@+id/btnShutterCapture"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:background="@drawable/bg_shutter_orange_circle" <!-- Viền cam ruột trắng -->
        android:layout_marginBottom="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/layoutZoomGroup"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</ConstraintLayout>

```

---

## 📅 3. Các Đầu Việc Cần Cập Nhật Trong Mã Nguồn Kotlin

Sau khi cập nhật lại cây thư mục giao diện XML, bạn cần thực hiện ánh xạ lại ID trong `MainActivity.kt`:

1. **Thay đổi sự kiện Nút Xem Ảnh:** Đổi tên ánh xạ từ nút mũi tên Play cũ sang nút mới:
```kotlin
binding.btnGalleryReview.setOnClickListener {
    // Thực hiện logic mở thư viện xem lại ảnh đã chụp
}

```
2. **Kiểm tra độ cao vùng chạm:** Vì chúng ta loại bỏ phần nền chứa các nút zoom cũ, `RecyclerView` của Timeline giờ đây có toàn bộ diện tích `80dp` rõ ràng. Các item hiển thị hiển thị trọn vẹn, không sợ bị các nút zoom bấm đè đứt đoạn nữa.