Better Activity panel layout

ui/src/layout/ActivityPanel.js

@@ -2,15 +2,21 @@ import React, { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { fetchUtils } from 'react-admin'
 import {
-  Menu,
+  Popover,
-  MenuItem,
   Badge,
   CircularProgress,
   IconButton,
   makeStyles,
   Tooltip,
+  Card,
+  CardContent,
+  CardActions,
+  Divider,
+  Box,
 } from '@material-ui/core'
 import { FiActivity } from 'react-icons/fi'
+import { VscSync } from 'react-icons/vsc'
+import { GiMagnifyingGlass } from 'react-icons/gi'
 import subsonic from '../subsonic'
 import { scanStatusUpdate } from '../actions'
 
@@ -29,9 +35,12 @@ const useStyles = makeStyles((theme) => ({
     color: 'inherit',
     zIndex: 2,
   },
+  counterStatus: {
+    minWidth: '16em',
+  },
 }))
 
-const ActivityMenu = () => {
+const ActivityPanel = () => {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState(null)
   const open = Boolean(anchorEl)
@@ -39,8 +48,9 @@ const ActivityMenu = () => {
   const dispatch = useDispatch()
 
   const handleMenuOpen = (event) => setAnchorEl(event.currentTarget)
-  const handleCloseClose = () => setAnchorEl(null)
+  const handleMenuClose = () => setAnchorEl(null)
-  const triggerScan = () => fetch(subsonic.url('startScan'))
+  const triggerScan = (full) => () =>
+    fetch(subsonic.url('startScan', null, { fullScan: full }))
 
   // Get updated status on component mount
   useEffect(() => {
@@ -66,8 +76,8 @@ const ActivityMenu = () => {
       {scanStatus.scanning && (
         <CircularProgress size={24} className={classes.progress} />
       )}
-      <Menu
+      <Popover
-        id="menu-activity"
+        id="panel-activity"
         anchorEl={anchorEl}
         anchorOrigin={{
           vertical: 'bottom',
@@ -78,19 +88,36 @@ const ActivityMenu = () => {
           horizontal: 'right',
         }}
         open={open}
-        onClose={handleCloseClose}
+        onClose={handleMenuClose}
       >
-        <MenuItem
+        <Card>
-          className={classes.root}
+          <CardContent>
-          activeClassName={classes.active}
+            <Box display="flex" className={classes.counterStatus}>
-          onClick={triggerScan}
+              <Box component="span" flex={2}>
-          sidebarIsOpen={true}
+                Total Folders Scanned:
-        >
+              </Box>
-          {`Scanned: ${scanStatus.count}`}
+              <Box component="span" flex={1}>
-        </MenuItem>
+                {scanStatus.count}
-      </Menu>
+              </Box>
+            </Box>
+          </CardContent>
+          <Divider />
+          <CardActions>
+            <Tooltip title={'Quick Scan'}>
+              <IconButton onClick={triggerScan(false)}>
+                <VscSync />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={'Full Scan'}>
+              <IconButton onClick={triggerScan(true)}>
+                <GiMagnifyingGlass />
+              </IconButton>
+            </Tooltip>
+          </CardActions>
+        </Card>
+      </Popover>
     </div>
   )
 }
 
-export default ActivityMenu
+export default ActivityPanel

ui/src/layout/AppBar.js

@@ -13,7 +13,7 @@ import ViewListIcon from '@material-ui/icons/ViewList'
 import InfoIcon from '@material-ui/icons/Info'
 import AboutDialog from './AboutDialog'
 import PersonalMenu from './PersonalMenu'
-import ActivityMenu from './ActivityMenu'
+import ActivityPanel from './ActivityPanel'
 import config from '../config'
 
 const useStyles = makeStyles((theme) => ({
@@ -90,7 +90,7 @@ const CustomUserMenu = ({ onClick, ...rest }) => {
 
   return (
     <>
-      {config.devActivityMenu && permissions === 'admin' && <ActivityMenu />}
+      {config.devActivityMenu && permissions === 'admin' && <ActivityPanel />}
       <UserMenu {...rest}>
         <PersonalMenu sidebarIsOpen={true} onClick={onClick} />
         <Divider />