export function NamespaceSidebar()

in webui/src/app/ui/sidebar.tsx [68:119]
48 lines of code
3 McCabe index (conditional complexity)

export function NamespaceSidebar() {
    const [namespaces, setNamespaces] = useState<string[]>([]);
    const [error, setError] = useState<string | null>(null);
    const [isOpen, setIsOpen] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const fetchedNamespaces = await fetchNamespaces();
                setNamespaces(fetchedNamespaces);
            } catch (err) {
                setError("Failed to fetch namespaces");
            }
        };
        fetchData();
    }, []);

    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">
                <NamespaceCreation position="sidebar" />
            </Box>

            <SidebarHeader
                title="Namespaces"
                count={namespaces.length}
                isOpen={isOpen}
                toggleOpen={() => setIsOpen(!isOpen)}
                icon={<FolderIcon 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>
                    )}
                    {namespaces.map((namespace) => (
                        <Link href={`/namespaces/${namespace}`} passHref key={namespace}>
                            <Item type="namespace" item={namespace} />
                        </Link>
                    ))}
                </List>
            </Collapse>
        </Paper>
    );
}