obsidian-plugin/devonthesofa_obsidian-note-status
1
0
Fork 0
mirror of https://github.com/devonthesofa/obsidian-note-status.git synced 2026-07-22 12:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(GroupedStatusView): adopt Obsidian native tree-item UI in StatusGroup and FileList

Browse source
This commit is contained in:
Aleix Soler 2026-03-19 19:12:06 +01:00
parent 005a9ae5ad
commit f081d0a852
2 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
components/GroupedStatusView/components/FileList.tsx
View file

@ -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 && (

24
components/GroupedStatusView/components/StatusGroup.tsx
View file

@ -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>
);