mirror of
https://github.com/binaricat/Netcatty.git
synced 2026-10-09 15:58:34 +00:00
feat: add tree view mode for host list with sorting and persistence
- Add tree view mode alongside existing grid and list views - Implement hierarchical display of hosts organized by groups - Add expand/collapse all controls with Chinese translations - Support all sorting modes (A-Z, Z-A, newest, oldest) in tree view - Persist expand/collapse state across view switches and app restarts - Hide Groups section in tree view to avoid duplication - Display ungrouped hosts at root level instead of "General" group - Add missing delete group dialog with proper translations - Maintain full functionality: search, filtering, drag-drop, context menus Technical changes: - Create HostTreeView component with TreeNode recursive structure - Add useTreeExpandedState hook for persistent state management - Extend ViewMode type to include "tree" option - Add sortMode prop to enable dynamic sorting in tree structure - Separate group tree logic for tree view vs other view modes - Add comprehensive English and Chinese translations
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
|
||||
|
||||
export const useTreeExpandedState = (storageKey: string) => {
|
||||
const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => {
|
||||
const stored = localStorageAdapter.readString(storageKey);
|
||||
if (stored) {
|
||||
try {
|
||||
const paths = JSON.parse(stored) as string[];
|
||||
return new Set(paths);
|
||||
} catch {
|
||||
return new Set();
|
||||
}
|
||||
}
|
||||
return new Set();
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const pathsArray = Array.from(expandedPaths);
|
||||
localStorageAdapter.writeString(storageKey, JSON.stringify(pathsArray));
|
||||
}, [storageKey, expandedPaths]);
|
||||
|
||||
const togglePath = (path: string) => {
|
||||
const newExpanded = new Set(expandedPaths);
|
||||
if (newExpanded.has(path)) {
|
||||
newExpanded.delete(path);
|
||||
} else {
|
||||
newExpanded.add(path);
|
||||
}
|
||||
setExpandedPaths(newExpanded);
|
||||
};
|
||||
|
||||
const expandAll = (allPaths: string[]) => {
|
||||
setExpandedPaths(new Set(allPaths));
|
||||
};
|
||||
|
||||
const collapseAll = () => {
|
||||
setExpandedPaths(new Set());
|
||||
};
|
||||
|
||||
return {
|
||||
expandedPaths,
|
||||
togglePath,
|
||||
expandAll,
|
||||
collapseAll,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user