webui: Full-width title click for tree node toggle in the file lister UI

[junhaoliao]

Request

Note

This feature builds on top of the file listing UI added in #1292

Currently, users can only expand/collapse tree nodes by clicking the small +/- icon. The node title text itself is not clickable for toggling; instead, clicking toggles the node's selection state. This creates a smaller click target and requires more precision from users.

Why it's important:

• Increases clickable area for a more comfortable UX
• Reduces user frustration with small click targets
• Follows common file browser patterns (e.g., VS Code, macOS Finder)
• Improves accessibility for users with motor control difficulties

Possible implementation

Add a custom treeTitleRender prop that wraps the title in a clickable span with full width:

const handleTitleClick = useCallback((ev: React.MouseEvent, node: TreeNode) => {
    ev.stopPropagation();

    const isExpanded = expandedKeys.includes(node.value as string);
    if (isExpanded) {
        setExpandedKeys((prev) => prev.filter((k) => k !== node.value));
    } else {
        setExpandedKeys((prev) => [...prev, node.value as string]);
        // Trigger load if needed
        if (!loadedPaths.current.has(node.value as string) && !node.isLeaf) {
            handleLoadData(node).catch(console.error);
        }
    }
}, [expandedKeys, handleLoadData]);

const treeTitleRender = useCallback((node: TreeNode) => (
    <span
        style={{display: "flex"}}
        onClick={(e) => handleTitleClick(e, node)}
    >
        {node.title as string}
    </span>
), [handleTitleClick]);

// Add to TreeSelect props:
treeTitleRender={treeTitleRender}

Considerations

• Need to prevent event bubbling to avoid conflicts with TreeSelect's native behavior
• CSS styling required for proper full-width clickable area
• Should maintain consistency with existing expand/collapse behavior