cd2c18b77c
- 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
24 lines
746 B
TypeScript
24 lines
746 B
TypeScript
import { useEffect, useState } from "react";
|
|
import { localStorageAdapter } from "../../infrastructure/persistence/localStorageAdapter";
|
|
|
|
export type ViewMode = "grid" | "list" | "tree";
|
|
|
|
const isViewMode = (value: string | null): value is ViewMode =>
|
|
value === "grid" || value === "list" || value === "tree";
|
|
|
|
export const useStoredViewMode = (
|
|
storageKey: string,
|
|
fallback: ViewMode = "grid",
|
|
) => {
|
|
const [viewMode, setViewMode] = useState<ViewMode>(() => {
|
|
const stored = localStorageAdapter.readString(storageKey);
|
|
return isViewMode(stored) ? stored : fallback;
|
|
});
|
|
|
|
useEffect(() => {
|
|
localStorageAdapter.writeString(storageKey, viewMode);
|
|
}, [storageKey, viewMode]);
|
|
|
|
return [viewMode, setViewMode] as const;
|
|
};
|