feat(task-view): implement dynamic metadata positioning

src/common/setting-definition.ts

@@ -643,6 +643,7 @@ export interface TaskProgressBarSettings {
 	// View Settings (Updated Structure)
 	enableView: boolean;
 	enableInlineEditor: boolean; // Enable inline editing in task views
+	enableDynamicMetadataPositioning: boolean; // Enable intelligent metadata positioning based on content length
 	defaultViewMode: "list" | "tree"; // Global default view mode for all views
 	viewConfiguration: ViewConfig[]; // Manages order, visibility, basic info, AND filter rules
 
@@ -964,6 +965,7 @@ export const DEFAULT_SETTINGS: TaskProgressBarSettings = {
 	// View Defaults (Updated Structure)
 	enableView: true,
 	enableInlineEditor: true, // Enable inline editing by default
+	enableDynamicMetadataPositioning: true, // Enable intelligent metadata positioning by default
 	defaultViewMode: "list", // Global default view mode for all views
 
 	// Global Filter Defaults

src/components/settings/ViewSettingsTab.ts

@@ -543,6 +543,21 @@ export function renderViewSettingsTab(
 			});
 		});
 
+	new Setting(containerEl)
+		.setName(t("Enable dynamic metadata positioning"))
+		.setDesc(
+			t(
+				"Intelligently position task metadata. When enabled, metadata appears on the same line as short tasks and below long tasks. When disabled, metadata always appears below the task content."
+			)
+		)
+		.addToggle((toggle) => {
+			toggle.setValue(settingTab.plugin.settings.enableDynamicMetadataPositioning);
+			toggle.onChange((value) => {
+				settingTab.plugin.settings.enableDynamicMetadataPositioning = value;
+				settingTab.applySettingsUpdate();
+			});
+		});
+
 	new Setting(containerEl)
 		.setName(t("Ignore all tasks behind heading"))
 		.setDesc(

src/components/task-view/listItem.ts

@@ -23,6 +23,7 @@ export class TaskListItemComponent extends Component {
 	private markdownRenderer: MarkdownRendererComponent;
 	private containerEl: HTMLElement;
 	private contentEl: HTMLElement;
+	private contentMetadataContainer: HTMLElement;
 
 	private metadataEl: HTMLElement;
 
@@ -183,19 +184,22 @@ export class TaskListItemComponent extends Component {
 			cls: "task-item-container",
 		});
 
+		// Create content-metadata container for dynamic layout
+		this.contentMetadataContainer = this.containerEl.createDiv({
+			cls: "task-content-metadata-container",
+		});
+
 		// Task content
-		this.contentEl = createDiv({
+		this.contentEl = this.contentMetadataContainer.createDiv({
 			cls: "task-item-content",
 		});
 
-		this.containerEl.appendChild(this.contentEl);
-
 		// Make content clickable for editing
 		this.registerContentClickHandler();
 
 		this.renderMarkdown();
 
-		this.metadataEl = this.containerEl.createDiv({
+		this.metadataEl = this.contentMetadataContainer.createDiv({
 			cls: "task-item-metadata",
 		});
 
@@ -746,6 +750,43 @@ export class TaskListItemComponent extends Component {
 
 		// Re-register the click event for editing after rendering
 		this.registerContentClickHandler();
+
+		// Update layout mode after content is rendered
+		// Use requestAnimationFrame to ensure the content is fully rendered
+		requestAnimationFrame(() => {
+			this.updateLayoutMode();
+		});
+	}
+
+	/**
+	 * Detect content height and update layout mode
+	 */
+	private updateLayoutMode() {
+		if (!this.contentEl || !this.contentMetadataContainer) {
+			return;
+		}
+
+		// Check if dynamic metadata positioning is enabled
+		if (!this.plugin.settings.enableDynamicMetadataPositioning) {
+			// If disabled, always use multi-line (traditional) layout
+			this.contentMetadataContainer.toggleClass("multi-line-content", true);
+			this.contentMetadataContainer.toggleClass("single-line-content", false);
+			return;
+		}
+
+		// Get the line height of the content element
+		const computedStyle = window.getComputedStyle(this.contentEl);
+		const lineHeight = parseFloat(computedStyle.lineHeight) || parseFloat(computedStyle.fontSize) * 1.4;
+
+		// Get actual content height
+		const contentHeight = this.contentEl.scrollHeight;
+
+		// Check if content is multi-line (with some tolerance)
+		const isMultiLine = contentHeight > lineHeight * 1.2;
+
+		// Apply appropriate layout class using Obsidian's toggleClass method
+		this.contentMetadataContainer.toggleClass("multi-line-content", isMultiLine);
+		this.contentMetadataContainer.toggleClass("single-line-content", !isMultiLine);
 	}
 
 	/**

src/components/task-view/treeItem.ts

@@ -38,6 +38,7 @@ export class TaskTreeItemComponent extends Component {
 
 	private markdownRenderer: MarkdownRendererComponent;
 	private contentEl: HTMLElement;
+	private contentMetadataContainer: HTMLElement;
 	private taskMap: Map<string, Task>;
 
 	// Use shared editor manager instead of individual editors
@@ -267,8 +268,13 @@ export class TaskTreeItemComponent extends Component {
 			cls: "task-item-container",
 		});
 
+		// Create content-metadata container for dynamic layout
+		this.contentMetadataContainer = taskItemContainer.createDiv({
+			cls: "task-content-metadata-container",
+		});
+
 		// Task content with markdown rendering
-		this.contentEl = taskItemContainer.createDiv({
+		this.contentEl = this.contentMetadataContainer.createDiv({
 			cls: "task-item-content",
 		});
 
@@ -278,7 +284,7 @@ export class TaskTreeItemComponent extends Component {
 		this.renderMarkdown();
 
 		// Metadata container
-		const metadataEl = taskItemContainer.createDiv({
+		const metadataEl = this.contentMetadataContainer.createDiv({
 			cls: "task-metadata",
 		});
 
@@ -823,6 +829,43 @@ export class TaskTreeItemComponent extends Component {
 
 		// Re-register the click event for editing after rendering
 		this.registerContentClickHandler();
+
+		// Update layout mode after content is rendered
+		// Use requestAnimationFrame to ensure the content is fully rendered
+		requestAnimationFrame(() => {
+			this.updateLayoutMode();
+		});
+	}
+
+	/**
+	 * Detect content height and update layout mode
+	 */
+	private updateLayoutMode() {
+		if (!this.contentEl || !this.contentMetadataContainer) {
+			return;
+		}
+
+		// Check if dynamic metadata positioning is enabled
+		if (!this.plugin.settings.enableDynamicMetadataPositioning) {
+			// If disabled, always use multi-line (traditional) layout
+			this.contentMetadataContainer.toggleClass("multi-line-content", true);
+			this.contentMetadataContainer.toggleClass("single-line-content", false);
+			return;
+		}
+
+		// Get the line height of the content element
+		const computedStyle = window.getComputedStyle(this.contentEl);
+		const lineHeight = parseFloat(computedStyle.lineHeight) || parseFloat(computedStyle.fontSize) * 1.4;
+
+		// Get actual content height
+		const contentHeight = this.contentEl.scrollHeight;
+
+		// Check if content is multi-line (with some tolerance)
+		const isMultiLine = contentHeight > lineHeight * 1.2;
+
+		// Apply appropriate layout class using Obsidian's toggleClass method
+		this.contentMetadataContainer.toggleClass("multi-line-content", isMultiLine);
+		this.contentMetadataContainer.toggleClass("single-line-content", !isMultiLine);
 	}
 
 	/**

src/styles/task-list.css

@@ -68,6 +68,45 @@
 	text-overflow: ellipsis;
 }
 
+/* Dynamic content-metadata container */
+.task-content-metadata-container {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: var(--size-2-2);
+	transition: all 0.2s ease;
+}
+
+/* Single line content layout - horizontal */
+.task-content-metadata-container.single-line-content {
+	flex-direction: row;
+	align-items: center;
+}
+
+.task-content-metadata-container.single-line-content .task-item-content {
+	flex: 1;
+	min-width: 0; /* Allow content to shrink */
+}
+
+.task-content-metadata-container.single-line-content .task-item-metadata {
+	flex-shrink: 0;
+	margin-top: 0;
+}
+
+/* Multi-line content layout - vertical */
+.task-content-metadata-container.multi-line-content {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.task-content-metadata-container.multi-line-content .task-item-content {
+	width: 100%;
+}
+
+.task-content-metadata-container.multi-line-content .task-item-metadata {
+	margin-top: var(--size-2-2);
+}
+
 .task-item-metadata {
 	display: flex;
 	align-items: center;

src/styles/tree-view.css

@@ -100,6 +100,45 @@
 	color: var(--text-muted);
 }
 
+/* Dynamic content-metadata container for tree view */
+.tree-task-item .task-content-metadata-container {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: var(--size-2-2);
+	transition: all 0.2s ease;
+}
+
+/* Single line content layout - horizontal */
+.tree-task-item .task-content-metadata-container.single-line-content {
+	flex-direction: row;
+	align-items: center;
+}
+
+.tree-task-item .task-content-metadata-container.single-line-content .task-item-content {
+	flex: 1;
+	min-width: 0; /* Allow content to shrink */
+}
+
+.tree-task-item .task-content-metadata-container.single-line-content .task-metadata {
+	flex-shrink: 0;
+	margin-top: 0;
+}
+
+/* Multi-line content layout - vertical */
+.tree-task-item .task-content-metadata-container.multi-line-content {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.tree-task-item .task-content-metadata-container.multi-line-content .task-item-content {
+	width: 100%;
+}
+
+.tree-task-item .task-content-metadata-container.multi-line-content .task-metadata {
+	margin-top: 4px;
+}
+
 /* Task metadata */
 .task-metadata {
 	display: flex;