From f081d0a85227d16fd7f5f249d3283dbd5873b79c Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Thu, 19 Mar 2026 19:12:06 +0100
Subject: [PATCH] feat(GroupedStatusView): adopt Obsidian native tree-item UI
 in StatusGroup and FileList

---
 .../GroupedStatusView/components/FileList.tsx | 24 +++++++++----------
 .../components/StatusGroup.tsx                | 24 ++++++++++---------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/components/GroupedStatusView/components/FileList.tsx b/components/GroupedStatusView/components/FileList.tsx
index 3acf883..8ca8b47 100644
--- a/components/GroupedStatusView/components/FileList.tsx
+++ b/components/GroupedStatusView/components/FileList.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback } from "react";
 import { FileItem } from "../GroupedStatusView";
-import { SelectableListItem } from "../../atoms/SelectableListItem";
-
 interface FileListProps {
 	files: FileItem[];
 	groupKey: string;
@@ -48,21 +46,23 @@ export const FileList = ({
 		<div className="grouped-status-files">
 			<div className="grouped-status-files-list" onScroll={handleScroll}>
 				{visibleFiles.map((file) => (
-					<SelectableListItem
+					<div
 						key={file.id}
+						className="tree-item nav-file grouped-status-file-item"
 						onClick={() => handleFileClick(file)}
-						className="grouped-status-file-item"
 						title={file.path}
 					>
-						<div>
-							<span className="grouped-status-file-name">
-								{file.name}
-							</span>
-							<span className="grouped-status-file-path">
-								{file.path}
-							</span>
+						<div className="tree-item-self is-clickable nav-file-title">
+							<div className="tree-item-inner nav-file-title-content grouped-status-file-content">
+								<div className="grouped-status-file-name">
+									{file.name}
+								</div>
+								<div className="grouped-status-file-path">
+									{file.path}
+								</div>
+							</div>
 						</div>
-					</SelectableListItem>
+					</div>
 				))}
 
 				{hasMoreItems && (
diff --git a/components/GroupedStatusView/components/StatusGroup.tsx b/components/GroupedStatusView/components/StatusGroup.tsx
index e7cc35c..01e18f1 100644
--- a/components/GroupedStatusView/components/StatusGroup.tsx
+++ b/components/GroupedStatusView/components/StatusGroup.tsx
@@ -46,12 +46,12 @@ export const StatusGroup = ({
 	}, [onToggle]);
 
 	return (
-		<div className="grouped-status-group">
+		<div className="grouped-status-group tree-item">
 			<div
-				className="grouped-status-group__header"
+				className="grouped-status-group__header tree-item-self is-clickable"
 				onClick={handleToggle}
 			>
-				<div className="grouped-status-group__status">
+				<div className="tree-item-inner grouped-status-group__status">
 					<StatusDisplay
 						status={
 							{
@@ -78,14 +78,16 @@ export const StatusGroup = ({
 			</div>
 
 			{isExpanded && (
-				<FileList
-					files={files}
-					groupKey={groupKey}
-					loadedCount={loadedCount}
-					onFileClick={onFileClick}
-					onScroll={onScroll}
-					onLoadMore={onLoadMore}
-				/>
+				<div className="tree-item-children">
+					<FileList
+						files={files}
+						groupKey={groupKey}
+						loadedCount={loadedCount}
+						onFileClick={onFileClick}
+						onScroll={onScroll}
+						onLoadMore={onLoadMore}
+					/>
+				</div>
 			)}
 		</div>
 	);