Added separate sidebar for filebrowser

src/web/MainScreen.tsx

@@ -47,15 +47,14 @@ export function MainScreen(){
 
 	if(client){
 		return (
-			<Box sx={{display: 'flex', width: '100vw', height: '100vh'}}>
-				<Sidebar logout={() => setClient(null)} vault={vault} lock={() => setVault(null)} downloads={downloads} openDownloads={() => setOpen(true)}/>
+			<>
 				{
 					vault === null
-					? <FileBrowser client={client} setVault={setVault} download={startDownload}/>
-					: <VaultBrowser client={client} vault={vault} download={startDownload}/>
+					? <FileBrowser client={client} logout={() => setClient(null)} setVault={setVault} download={startDownload} downloads={downloads} openDownloads={() => setOpen(true)}/>
+					: <VaultBrowser client={client} vault={vault} download={startDownload} downloads={downloads} openDownloads={() => setOpen(true)}/>
 				}
 				<DownloadProgress open={open} client={client} onClose={() => setOpen(false)} downloads={downloads} clear={clearDownloads}/>
-			</Box>
+			</>
 		)
 	} else {
 		return <Login setClient={setClient}/>

src/web/fileBrowser/FileBrowser.tsx

@@ -1,17 +1,26 @@
 import { ArrowBack, Folder, Article, Refresh, Lock, LockOpen, Key, Download, Delete, MoreVert } from "@mui/icons-material";
 import { Box, AppBar, Toolbar, Typography, IconButton, Tooltip, Fab, Zoom, Menu, ListItemIcon, ListItemText, MenuItem } from "@mui/material";
 import { GridSelectionModel, DataGrid, GridRowParams, GridRenderCellParams, GridActionsCellItem } from "@mui/x-data-grid";
-import { Item, Vault } from "cryptomator-ts";
+import { Item, ItemPath, Vault } from "cryptomator-ts";
 import { useEffect, useState, useMemo, useRef } from "react";
 import { WebDAV } from "../../lib/cryptomator/WebDAV";
+import { ItemDownloader } from "../ItemDownloader";
+import { FileSidebar } from "./FileSidebar";
 import { VaultDialog } from "./VaultDialog";
 
 type DirCache = {
 	child: {[dir: string]: DirCache};
 	explored: boolean;
 }
 
-export function FileBrowser(props: {client: WebDAV, setVault: (vault: Vault) => void, download: (item: Item[]) => void}){
+export function FileBrowser(props: {
+	client: WebDAV,
+	setVault: (vault: Vault) => void,
+	download: (item: Item[]) => void,
+	logout: () => void,
+	downloads: {[path: ItemPath]: ItemDownloader},
+	openDownloads: () => void
+}){
 
 	const [dir, setDir] = useState<string[]>([]);
 	const [items, setItems] = useState<Item[]>([]);
@@ -173,32 +182,35 @@ export function FileBrowser(props: {client: WebDAV, setVault: (vault: Vault) =>
 	}
 
 	return (
-		<Box sx={{display: 'flex', flexDirection: 'column', height: '100%', flex: 1}}>
-			<AppBar position='static'>
-				{toolbar()}
-			</AppBar>
-			<Box m={1} sx={{flex: 1}}>
-				<DataGrid
-					onRowClick={onRowClick}
-					disableSelectionOnClick
-					isRowSelectable={(params: GridRowParams) => params.row.type !== 'parent'}
-					columns={columns}
-					rows={getRows()}
-					loading={loading}
-					checkboxSelection
-					selectionModel={sel}
-					onSelectionModelChange={items => {
-						if(!loading) setSel(items);
-					}}
-				/>
+		<Box sx={{display: 'flex', width: '100vw', height: '100vh'}}>
+			<FileSidebar logout={props.logout} downloads={props.downloads} openDownloads={props.openDownloads}/>
+			<Box sx={{display: 'flex', flexDirection: 'column', height: '100%', flex: 1}}>
+				<AppBar position='static'>
+					{toolbar()}
+				</AppBar>
+				<Box m={1} sx={{flex: 1}}>
+					<DataGrid
+						onRowClick={onRowClick}
+						disableSelectionOnClick
+						isRowSelectable={(params: GridRowParams) => params.row.type !== 'parent'}
+						columns={columns}
+						rows={getRows()}
+						loading={loading}
+						checkboxSelection
+						selectionModel={sel}
+						onSelectionModelChange={items => {
+							if(!loading) setSel(items);
+						}}
+					/>
+				</Box>
+				<Zoom in={showButton()}>
+					<Fab onClick={() => setOpen(true)} variant='extended' sx={{position: 'fixed', top: 'auto', left: 'auto', right: 20, bottom: 80}}>
+						<LockOpen/>
+						Unlock
+					</Fab>
+				</Zoom>
+				<VaultDialog open={open} close={() => setOpen(false)} decrypt={decrypt} setVault={props.setVault}/>
 			</Box>
-			<Zoom in={showButton()}>
-				<Fab onClick={() => setOpen(true)} variant='extended' sx={{position: 'fixed', top: 'auto', left: 'auto', right: 20, bottom: 80}}>
-					<LockOpen/>
-					Unlock
-				</Fab>
-			</Zoom>
-			<VaultDialog open={open} close={() => setOpen(false)} decrypt={decrypt} setVault={props.setVault}/>
 		</Box>
 	);
 }

src/web/fileBrowser/FileSidebar.tsx

@@ -0,0 +1,62 @@
+import { Download, Logout } from "@mui/icons-material";
+import { Drawer, Toolbar, ListItem, ListItemText, Divider, Box, List, ListItemButton, ListItemIcon, Badge } from "@mui/material";
+import { ItemPath } from "cryptomator-ts";
+import { ItemDownloader, Progress } from "../ItemDownloader";
+
+export function FileSidebar(props: {logout: () => void, downloads: {[path: ItemPath]: ItemDownloader}, openDownloads: () => void}){
+
+	const drawer = 240;
+
+	const getMessage = () => {
+		let done = 0;
+		let inProgress = 0;
+		for(const k in props.downloads){
+			const item = props.downloads[k as ItemPath];
+			if(item.progress.current === Progress.Done) done++;
+			else if(item.progress.current === Progress.Running) inProgress++;
+		}
+		const res = [];
+		if(inProgress !== 0) res.push(`${inProgress} in progress`);
+		if(done !== 0) res.push(`${done} completed`);
+		return res.join(', ');
+	}
+
+	const getCount = () => {
+		let inProgress = 0;
+		for(const k in props.downloads){
+			const item = props.downloads[k as ItemPath];
+			if(item.progress.current === Progress.Running) inProgress++;
+		}
+		return inProgress;
+	}
+
+	return (
+	<Drawer variant='permanent' sx={{ width: drawer }} open={true} anchor='left'>
+		<Toolbar sx={{ maxWidth: drawer }}>
+			<ListItem>
+				<ListItemText primary={'No vault selected'}/>
+			</ListItem>
+		</Toolbar>
+		<Divider/>
+		<Box sx={{display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden'}}>
+			<Box sx={{flex: 1}}/>
+			<List sx={{ width: drawer, overflow: 'auto'}}>
+				<ListItemButton onClick={props.openDownloads}>
+					<ListItemIcon>
+						<Badge badgeContent={getCount()} color='primary'>
+							<Download/>
+						</Badge>
+					</ListItemIcon>
+					<ListItemText primary={'Downloads'} secondary={getMessage()}/>
+				</ListItemButton>
+				<ListItemButton onClick={props.logout}>
+					<ListItemIcon>
+						<Logout/>
+					</ListItemIcon>
+					<ListItemText primary={'Logout'}/>
+				</ListItemButton>
+			</List>
+		</Box>
+	</Drawer>
+	)
+}

src/web/vaultBrowser/VaultBrowser.tsx

@@ -1,11 +1,18 @@
 import { ArrowBack, Article, Delete, Download, Folder, Refresh } from "@mui/icons-material";
 import { Box, AppBar, Toolbar, Typography, Tooltip, IconButton } from "@mui/material";
 import { DataGrid, GridActionsCellItem, GridRenderCellParams, GridRowParams, GridSelectionModel } from "@mui/x-data-grid";
-import { DirID, EncryptedDir, EncryptedItem, Vault } from "cryptomator-ts";
+import { DirID, EncryptedDir, EncryptedItem, ItemPath, Vault } from "cryptomator-ts";
 import { useEffect, useMemo, useState } from "react";
 import { WebDAV } from "../../lib/cryptomator/WebDAV";
+import { ItemDownloader } from "../ItemDownloader";
 
-export function VaultBrowser(props: {vault: Vault, client: WebDAV, download: (item: EncryptedItem[], vault: Vault) => void}){
+export function VaultBrowser(props: {
+	vault: Vault,
+	client: WebDAV,
+	download: (item: EncryptedItem[], vault: Vault) => void,
+	downloads: {[path: ItemPath]: ItemDownloader},
+	openDownloads: () => void
+}){
 
 	const [dir, setDir] = useState<EncryptedDir[]>([]);
 	const [items, setItems] = useState<EncryptedItem[]>([]);