From 32bb832fed6f4687340fae1f7ea289028fd66791 Mon Sep 17 00:00:00 2001
From: Quorafind <bonopengate@gmail.com>
Date: Tue, 11 Nov 2025 20:35:04 +0800
Subject: [PATCH] refactor(details): restructure task details DOM hierarchy

- Add task-details-container wrapper element
- Separate contentContainerEl from containerEl for better styling control
- Update all CSS selectors to use new .task-details-container class
- Maintain existing functionality while improving structure
---
 src/components/features/task/view/details.ts | 22 ++++++++++----
 src/styles/task-details.css                  | 30 ++++++++++----------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/components/features/task/view/details.ts b/src/components/features/task/view/details.ts
index df119d51..cb937d56 100644
--- a/src/components/features/task/view/details.ts
+++ b/src/components/features/task/view/details.ts
@@ -103,6 +103,7 @@ export function createTaskCheckbox(
 
 export class TaskDetailsComponent extends Component {
 	public containerEl: HTMLElement;
+	private contentContainerEl: HTMLElement;
 	private contentEl: HTMLElement;
 	public currentTask: Task | null = null;
 	private isVisible = true;
@@ -127,6 +128,9 @@ export class TaskDetailsComponent extends Component {
 	onload() {
 		// Create details container
 		this.containerEl = this.parentEl.createDiv({
+			cls: "task-details-container",
+		});
+		this.contentContainerEl = this.containerEl.createDiv({
 			cls: "task-details",
 		});
 
@@ -135,9 +139,11 @@ export class TaskDetailsComponent extends Component {
 	}
 
 	private showEmptyState() {
-		this.containerEl.empty();
+		this.contentContainerEl.empty();
 
-		const emptyEl = this.containerEl.createDiv({ cls: "details-empty" });
+		const emptyEl = this.contentContainerEl.createDiv({
+			cls: "details-empty",
+		});
 		emptyEl.setText(t("Select a task to view details"));
 	}
 
@@ -157,16 +163,18 @@ export class TaskDetailsComponent extends Component {
 		this.isEditing = false;
 
 		// Clear existing content
-		this.containerEl.empty();
+		this.contentContainerEl.empty();
 
 		// Create details header
-		const headerEl = this.containerEl.createDiv({ cls: "details-header" });
+		const headerEl = this.contentContainerEl.createDiv({
+			cls: "details-header",
+		});
 		headerEl.setText(t("Task Details"));
 
 		// Only show close button on mobile or if explicitly requested
 		if (
 			Platform.isPhone ||
-			this.containerEl.closest(".tg-fluent-container")
+			this.contentContainerEl.closest(".tg-fluent-container")
 		) {
 			headerEl.createEl(
 				"div",
@@ -183,7 +191,9 @@ export class TaskDetailsComponent extends Component {
 		}
 
 		// Create content container
-		this.contentEl = this.containerEl.createDiv({ cls: "details-content" });
+		this.contentEl = this.contentContainerEl.createDiv({
+			cls: "details-content",
+		});
 
 		// Task name
 		const nameEl = this.contentEl.createEl("h2", { cls: "details-name" });
diff --git a/src/styles/task-details.css b/src/styles/task-details.css
index 72bd35d9..fd9355fc 100644
--- a/src/styles/task-details.css
+++ b/src/styles/task-details.css
@@ -1,9 +1,9 @@
-.task-details .panel-toggle-container {
+.task-details-container .panel-toggle-container {
 	left: 10px;
 }
 
 /* Detail Panel Styles */
-.task-details {
+.task-details-container {
 	width: 300px;
 	flex-shrink: 0;
 	border-left: 1px solid var(--background-modifier-border);
@@ -20,22 +20,22 @@
 }
 
 /* Details panel visibility */
-.task-genius-container.details-hidden .task-details {
+.task-genius-container.details-hidden .task-details-container {
 	width: 0;
 	opacity: 0;
 	margin-right: -300px;
 	overflow: hidden;
 }
 
-.task-genius-container.details-visible .task-details {
+.task-genius-container.details-visible .task-details-container {
 	width: 350px;
 	opacity: 1;
 	margin-right: 0;
 }
 
 /* Mobile view - slide from right */
-.is-phone .task-details,
-.is-mobile .task-details {
+.is-phone .task-details-container,
+.is-mobile .task-details-container {
 	position: absolute;
 	right: 0;
 	top: 0;
@@ -46,17 +46,17 @@
 	transform: translateX(100%);
 }
 
-.is-phone .task-genius-container.details-hidden .task-details,
-.is-mobile .task-genius-container.details-hidden .task-details,
-.is-mobile .tg-fluent-container.details-hidden .task-details {
+.is-phone .task-genius-container.details-hidden .task-details-container,
+.is-mobile .task-genius-container.details-hidden .task-details-container,
+.is-mobile .tg-fluent-container.details-hidden .task-details-container {
 	width: 100%;
 	margin-right: 0;
 	transform: translateX(100%);
 }
 
-.is-phone .task-genius-container.details-visible .task-details,
-.is-mobile .task-genius-container.details-visible .task-details,
-.is-mobile .tg-fluent-container.details-visible .task-details {
+.is-phone .task-genius-container.details-visible .task-details-container,
+.is-mobile .task-genius-container.details-visible .task-details-container,
+.is-mobile .tg-fluent-container.details-visible .task-details-container {
 	width: calc(100% - var(--size-4-12));
 	transform: translateX(0);
 }
@@ -436,7 +436,7 @@
 }
 
 /* fluent Container specific styles for mobile */
-.is-mobile .tg-fluent-container .task-details {
+.is-mobile .tg-fluent-container .task-details-container {
 	position: fixed;
 	right: 0;
 	top: 0;
@@ -449,7 +449,7 @@
 	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
 }
 
-.is-mobile .task-details .details-close-btn:hover {
+.is-mobile .task-details-container .details-close-btn:hover {
 	background-color: var(--background-modifier-active-hover);
 }
 
@@ -476,7 +476,7 @@
 		flex: 1;
 	}
 
-	.task-details {
+	.task-details-container {
 		width: 100%;
 		max-width: 100%;
 		border-left: none;