1 files changed, 41 insertions, 6 deletions
diff --git a/modern/src/main/MainToolbar.js b/modern/src/main/MainToolbar.js
index 015e86ba..2aa604e8 100644
--- a/modern/src/main/MainToolbar.js
+++ b/modern/src/main/MainToolbar.js
@@ -2,15 +2,16 @@ import React, { useState, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import {
-  Toolbar, IconButton, OutlinedInput, InputAdornment, Popover, FormControl, InputLabel, Select, MenuItem, FormGroup, FormControlLabel, Checkbox, Badge,
+  Toolbar, IconButton, OutlinedInput, InputAdornment, Popover, FormControl, InputLabel, Select, MenuItem, FormGroup, FormControlLabel, Checkbox, Badge, ListItemButton, ListItemText,
 } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { makeStyles, useTheme } from '@mui/styles';
 import MapIcon from '@mui/icons-material/Map';
 import ViewListIcon from '@mui/icons-material/ViewList';
 import AddIcon from '@mui/icons-material/Add';
 import TuneIcon from '@mui/icons-material/Tune';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import { useDeviceReadonly } from '../common/util/permissions';
+import DeviceRow from './DeviceRow';
 
 const useStyles = makeStyles((theme) => ({
   toolbar: {
@@ -27,6 +28,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const MainToolbar = ({
+  filteredDevices,
   devicesOpen,
   setDevicesOpen,
   filter,
@@ -37,6 +39,7 @@ const MainToolbar = ({
   setFilterMap,
 }) => {
   const classes = useStyles();
+  const theme = useTheme();
   const navigate = useNavigate();
   const t = useTranslation();
 
@@ -45,24 +48,28 @@ const MainToolbar = ({
   const groups = useSelector((state) => state.groups.items);
   const devices = useSelector((state) => state.devices.items);
 
-  const filterRef = useRef();
+  const toolbarRef = useRef();
+  const inputRef = useRef();
   const [filterAnchorEl, setFilterAnchorEl] = useState(null);
+  const [devicesAnchorEl, setDevicesAnchorEl] = useState(null);
 
   const deviceStatusCount = (status) => Object.values(devices).filter((d) => d.status === status).length;
 
   return (
-    <Toolbar className={classes.toolbar}>
+    <Toolbar ref={toolbarRef} className={classes.toolbar}>
       <IconButton edge="start" onClick={() => setDevicesOpen(!devicesOpen)}>
         {devicesOpen ? <MapIcon /> : <ViewListIcon />}
       </IconButton>
       <OutlinedInput
-        ref={filterRef}
+        ref={inputRef}
         placeholder={t('sharedSearchDevices')}
         value={filter.keyword}
         onChange={(e) => setFilter({ ...filter, keyword: e.target.value })}
+        onFocus={() => setDevicesAnchorEl(toolbarRef.current)}
+        onBlur={() => setDevicesAnchorEl(null)}
         endAdornment={(
           <InputAdornment position="end">
-            <IconButton size="small" edge="end" onClick={() => setFilterAnchorEl(filterRef.current)}>
+            <IconButton size="small" edge="end" onClick={() => setFilterAnchorEl(inputRef.current)}>
               <Badge color="info" variant="dot" invisible={!filter.statuses.length && !filter.groups.length}>
                 <TuneIcon fontSize="small" />
               </Badge>
@@ -73,6 +80,34 @@ const MainToolbar = ({
         fullWidth
       />
       <Popover
+        open={!!devicesAnchorEl && !devicesOpen}
+        anchorEl={devicesAnchorEl}
+        onClose={() => setDevicesAnchorEl(null)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: Number(theme.spacing(2).slice(0, -2)),
+        }}
+        marginThreshold={0}
+        PaperProps={{
+          style: { width: `calc(${toolbarRef.current?.clientWidth}px - ${theme.spacing(4)})` },
+        }}
+        elevation={1}
+        disableAutoFocus
+        disableEnforceFocus
+      >
+        {filteredDevices.slice(0, 3).map((_, index) => (
+          <DeviceRow data={filteredDevices} index={index} />
+        ))}
+        {filteredDevices.length > 3 && (
+          <ListItemButton alignItems="center" onClick={() => setDevicesOpen(true)}>
+            <ListItemText
+              primary={t('notificationAlways')}
+              style={{ textAlign: 'center' }}
+            />
+          </ListItemButton>
+        )}
+      </Popover>
+      <Popover
         open={!!filterAnchorEl}
         anchorEl={filterAnchorEl}
         onClose={() => setFilterAnchorEl(null)}