add progress bar to edit study page with the ability to switch between different lists

[nicoalee]

Currently, it's hard for users to understand where they are when editing a given study during the extraction phase because there's no visual indication of what place they are in. It's also not possible for them to switch between different categorization types unless they go back to the main extraction page and then change.

            <Box sx={{ marginBottom: '0.5rem' }}>
                <Box
                    sx={{
                        display: 'flex',
                        marginBottom: '1.5rem',
                        border: '2px solid transparent',
                    }}
                >
                    <Tooltip
                        placement="top"
                        title="You are viewing the 6th study of 8 uncategorized studies"
                    >
                        <LinearProgress
                            value={(6 / 8) * 100}
                            variant="determinate"
                            color="warning"
                            sx={{
                                width: `${(7 / 8) * 100}%`,
                                height: '10px',
                                border: '2px solid transparent',
                                '&:hover': { border: '2px solid', borderColor: 'warning.light' },
                            }}
                        />
                    </Tooltip>
                    <Tooltip title="1 study saved for later" placement="top">
                        <LinearProgress
                            variant="determinate"
                            value={0}
                            color="primary"
                            sx={{
                                width: `${(1 / 8) * 100}%`,
                                height: '10px',
                                border: '2px solid transparent',
                                '&:hover': { border: '2px solid', borderColor: 'primary.light' },
                            }}
                        />
                    </Tooltip>
                    <LinearProgress
                        variant="determinate"
                        value={0}
                        color="success"
                        sx={{ width: `${(0 / 8) * 100}%`, height: '10px' }}
                    />
                </Box>

[nicoalee]

It doesnt necessarily have to look like the above, but there should be some indication to the user of where they are in the list

[nicoalee]

...this is kinda ugly. Could we do some sort of mini carousel UI?