5 files changed, 26 insertions, 13 deletions

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index b7222a2..be24641 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -25,7 +25,7 @@ import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
 import { formatPosition, formatSpeed, formatDate, formatHours } from './common/formatter';
 import { useAttributePreference } from './common/preferences';
-import { getDevices, getFilteredDevices, getPosition } from './common/selectors';
+import { getDevices, getFilteredDevices, getFilterTerm, getPosition } from './common/selectors';
 import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
@@ -141,7 +141,11 @@ const DeviceRow = ({ data, index, style }) => {
           </>} secondary={(
             <>
               {/* Contact */}
-              <PersonIcon fontSize="inherit" /> {item.contact}<br />
+              {item.contact && (
+                <>
+                  <PersonIcon fontSize="inherit" /> {item.contact}<br />
+                </>
+              )}
               {position && (
                 <>
                   {/* Speed */}
@@ -187,10 +191,11 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
   const dispatch = useDispatch();
   const listInnerEl = useRef(null);
 
+  const filterTerm = useSelector(getFilterTerm);
   const filteredItems = useSelector(getFilteredDevices);
   const unfilteredItems = useSelector(getDevices);
 
-  const items = filteredItems.length > 0 ? filteredItems : unfilteredItems;
+  const items = (filterTerm.length > 0 ? filteredItems : unfilteredItems).sort((a, b) => a.name.localeCompare(b.name));
 
   if (listInnerEl.current) {
     listInnerEl.current.className = classes.listInner;
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 0559f15..0d3ad54 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -103,18 +103,22 @@ const MainPage = () => {
   const isPhone = useMediaQuery(theme.breakpoints.down('sm'));
   const isWide = useMediaQuery(theme.breakpoints.up('md')/* || theme.breakpoints.up('sm') || theme.breakpoints.up('xs')*/);
 
-  const [deviceName, setDeviceName] = useState('');
   const collapsed = useSelector((state) => state.ui.collapsed);
 
   const handleClose = () => {
     dispatch(uiActions.setCollapsed(!collapsed));
   };
+
+  const filterTerm = useSelector((state) => state.devices.filterTerm);
   
-  const setFilter = (text) => {
-    setDeviceName(text);
+  const setFilterTerm = (text) => {
     dispatch(devicesActions.setFilter(text));
   }
 
+  const clearFilter = () => {
+    dispatch(devicesActions.clearFilter());
+  }
+
   useEffect(() => uiActions.setCollapsed(isPhone), [isPhone]);
 
   return (
@@ -150,15 +154,14 @@ const MainPage = () => {
             <TextField
               fullWidth
               name="deviceName"
-              value={deviceName}
-              autoComplete="deviceName"
+              value={filterTerm}
               autoFocus
-              onChange={(event) => setFilter(event.target.value) }
+              onChange={(event) => setFilterTerm(event.target.value) }
               placeholder={t("sharedSearch")}
               variant="filled"
             />
-            {deviceName.length > 0 && (
-              <IconButton onClick={() => setFilter("") }>
+            {filterTerm.length > 0 && (
+              <IconButton onClick={() => clearFilter() }>
                 <CloseIcon />
               </IconButton>
             )}
diff --git a/modern/src/common/selectors.js b/modern/src/common/selectors.js
index e52943c..ad42c30 100644
--- a/modern/src/common/selectors.js
+++ b/modern/src/common/selectors.js
@@ -6,4 +6,6 @@ export const getDevices = (state) => Object.values(state.devices.items);
 
 export const getFilteredDevices = (state) => Object.values(state.devices.filteredItems);
 
-export const getPosition = (id) => (state) => state.positions.items[id];
\ No newline at end of file
+export const getFilterTerm = (state) => state.devices.filterTerm;
+
+export const getPosition = (id) => (state) => state.positions.items[id];
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index f9a2a23..c5c3eee 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -119,7 +119,7 @@ const PositionsMap = ({ positions }) => {
         'text-size': 12,
       },
       paint: {
-        'text-color': {type: 'identity', property: 'color'},
+        'text-color': 'black',
         'text-halo-color': 'white',
         'text-halo-width': 2,
       },
diff --git a/modern/src/store/devices.js b/modern/src/store/devices.js
index bb9068f..f63602a 100644
--- a/modern/src/store/devices.js
+++ b/modern/src/store/devices.js
@@ -4,6 +4,7 @@ const { reducer, actions } = createSlice({
   name: 'devices',
   initialState: {
     items: {},
+    filterTerm: '',
     filteredItems: {},
     selectedId: null,
   },
@@ -22,12 +23,14 @@ const { reducer, actions } = createSlice({
       state.selectedId = null;
     },
     setFilter(state, action) {
+      state.filterTerm = action.payload;
       const items = Object.entries(current(state).items);
       state.filteredItems = Object.fromEntries(items.filter(([k, v]) => {
         return v.name.toLowerCase().includes(action.payload.toLowerCase());
       }));
     },
     clearFilter(state, action) {
+      state.filterTerm = '';
       state.filteredItems = {};
     },
     remove(state, action) {