export function NodeSidebar()

in webui/src/app/ui/sidebar.tsx [251:326]
72 lines of code
3 McCabe index (conditional complexity)

export function NodeSidebar({
    namespace,
    cluster,
    shard,
}: {
    namespace: string;
    cluster: string;
    shard: string;
}) {
    const [nodes, setNodes] = useState<NodeItem[]>([]);
    const [error, setError] = useState<string | null>(null);
    const [isOpen, setIsOpen] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const fetchedNodes = (await listNodes(namespace, cluster, shard)) as NodeItem[];
                setNodes(fetchedNodes);
            } catch (err) {
                setError("Failed to fetch nodes");
            }
        };
        fetchData();
    }, [namespace, cluster, shard]);

    return (
        <Paper
            className="flex h-full w-64 flex-col overflow-hidden border-r border-light-border shadow-sidebar dark:border-dark-border"
            elevation={0}
            square
        >
            <Box className="p-4">
                <NodeCreation
                    namespace={namespace}
                    cluster={cluster}
                    shard={shard}
                    position="sidebar"
                />
            </Box>

            <SidebarHeader
                title="Nodes"
                count={nodes.length}
                isOpen={isOpen}
                toggleOpen={() => setIsOpen(!isOpen)}
                icon={<DeviceHubIcon className="text-primary dark:text-primary-light" />}
            />

            <Collapse in={isOpen}>
                <List className="max-h-[calc(100vh-180px)] overflow-y-auto px-2">
                    {error && (
                        <Typography color="error" align="center" className="py-2 text-sm">
                            {error}
                        </Typography>
                    )}
                    {nodes.map((node, index) => (
                        <Link
                            href={`/namespaces/${namespace}/clusters/${cluster}/shards/${shard}/nodes/${index}`}
                            passHref
                            key={index}
                        >
                            <Item
                                type="node"
                                item={`Node\t${index + 1}`}
                                id={node.id}
                                namespace={namespace}
                                cluster={cluster}
                                shard={shard}
                            />
                        </Link>
                    ))}
                </List>
            </Collapse>
        </Paper>
    );
}