diff --git a/components/GroupedStatusView/components/TagSection.tsx b/components/GroupedStatusView/components/TagSection.tsx
index aa0d089..70a7453 100644
--- a/components/GroupedStatusView/components/TagSection.tsx
+++ b/components/GroupedStatusView/components/TagSection.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
import { GroupLabel } from "@/components/atoms/GroupLabel";
import { CollapsibleCounter } from "@/components/atoms/CollapsibleCounter";
import { FilesByStatus, FileItem, StatusItem } from "../GroupedStatusView";
@@ -51,6 +51,11 @@ export const TagSection = ({
[onToggleFiles],
);
+ const statusOrder = useMemo(
+ () => Array.from(statusMap.keys()),
+ [statusMap],
+ );
+
return (
@@ -64,32 +69,38 @@ export const TagSection = ({
{isExpanded && (
- {Object.entries(statusGroups).map(([statusName, files]) => {
- if (files.length === 0) return null;
+ {Object.entries(statusGroups)
+ .sort(
+ ([statusA], [statusB]) =>
+ statusOrder.indexOf(statusA) -
+ statusOrder.indexOf(statusB),
+ )
+ .map(([statusName, files]) => {
+ if (files.length === 0) return null;
- const status = statusMap.get(statusName);
- if (!status) return null;
+ const status = statusMap.get(statusName);
+ if (!status) return null;
- const groupKey = `${tag}-${statusName}`;
- const filesExpanded = expandedFiles.has(groupKey);
- const loadedCount = getLoadedCount(groupKey);
+ const groupKey = `${tag}-${statusName}`;
+ const filesExpanded = expandedFiles.has(groupKey);
+ const loadedCount = getLoadedCount(groupKey);
- return (
- handleToggleFiles(groupKey)}
- onFileClick={onFileClick}
- onScroll={onScroll}
- onLoadMore={onLoadMore}
- />
- );
- })}
+ return (
+ handleToggleFiles(groupKey)}
+ onFileClick={onFileClick}
+ onScroll={onScroll}
+ onLoadMore={onLoadMore}
+ />
+ );
+ })}
)}