searches both custom name and shortname, show writable

interface/src/project/SettingsCustomization.tsx

@@ -86,7 +86,7 @@ const SettingsCustomization: FC = () => {
 
   const entities_theme = useTheme({
     Table: `
-      --data-table-library_grid-template-columns: 150px repeat(1, minmax(80px, 1fr)) 45px minmax(45px, auto) minmax(120px, auto);
+      --data-table-library_grid-template-columns: 156px repeat(1, minmax(80px, 1fr)) 45px minmax(45px, auto) minmax(120px, auto);
     `,
     BaseRow: `
       font-size: 14px;
@@ -192,17 +192,9 @@ const SettingsCustomization: FC = () => {
     return value;
   }
 
-  function formatName(de: DeviceEntity) {
+  const formatName = (de: DeviceEntity, withShortname: boolean) =>
-    return (
+    (de.n && de.n[0] === '!' ? LL.COMMAND(1) + ': ' + de.n.slice(1) : de.cn && de.cn !== '' ? de.cn : de.n) +
-      <>
+    (withShortname ? ' ' + de.id : '');
-        {de.n && (de.n[0] === '!' ? LL.COMMAND(1) + ': ' + de.n.slice(1) : de.cn && de.cn !== '' ? de.cn : de.n) + ' '}(
-        <Link target="_blank" href={APIURL + devices?.devices[selectedDevice].tn + '/' + de.id}>
-          {de.id}
-        </Link>
-        )
-      </>
-    );
-  }
 
   const getMaskNumber = (newMask: string[]) => {
     let new_mask = 0;
@@ -232,10 +224,13 @@ const SettingsCustomization: FC = () => {
     return new_masks;
   };
 
+  const filter_entity = (de: DeviceEntity) =>
+    (de.m & selectedFilters || !selectedFilters) && formatName(de, true).includes(search.toLocaleLowerCase());
+
   const maskDisabled = (set: boolean) => {
     setDeviceEntities(
       deviceEntities.map(function (de) {
-        if ((de.m & selectedFilters || !selectedFilters) && de.id.toLowerCase().includes(search.toLowerCase())) {
+        if (filter_entity(de)) {
           return {
             ...de,
             m: set
@@ -353,7 +348,7 @@ const SettingsCustomization: FC = () => {
         margin="normal"
         select
       >
-        <MenuItem disabled key={0} value={-1}>
+        <MenuItem disabled key={-1} value={-1}>
           {LL.SELECT_DEVICE()}...
         </MenuItem>
         {devices.devices.map((device: DeviceShort, index) => (
@@ -370,9 +365,7 @@ const SettingsCustomization: FC = () => {
       return;
     }
 
-    const shown_data = deviceEntities.filter(
+    const shown_data = deviceEntities.filter((de) => filter_entity(de));
-      (de) => (de.m & selectedFilters || !selectedFilters) && de.id.toLowerCase().includes(search.toLowerCase())
-    );
 
     return (
       <>
@@ -470,7 +463,13 @@ const SettingsCustomization: FC = () => {
                     <Cell stiff>
                       <EntityMaskToggle onUpdate={updateDeviceEntity} de={de} />
                     </Cell>
-                    <Cell>{formatName(de)}</Cell>
+                    <Cell>
+                      {formatName(de, false)}&nbsp;(
+                      <Link target="_blank" href={APIURL + devices?.devices[selectedDevice].tn + '/' + de.id}>
+                        {de.id}
+                      </Link>
+                      )
+                    </Cell>
                     <Cell>{!(de.m & DeviceEntityMask.DV_READONLY) && formatValue(de.mi)}</Cell>
                     <Cell>{!(de.m & DeviceEntityMask.DV_READONLY) && formatValue(de.ma)}</Cell>
                     <Cell>{formatValue(de.v)}</Cell>

interface/src/project/SettingsCustomizationDialog.tsx

@@ -1,4 +1,5 @@
 import CancelIcon from '@mui/icons-material/Cancel';
+import CloseIcon from '@mui/icons-material/Close';
 import DoneIcon from '@mui/icons-material/Done';
 
 import {
@@ -67,15 +68,34 @@ const SettingsCustomizationDialog = ({ open, onClose, onSave, selectedItem }: Se
     <Dialog sx={dialogStyle} open={open} onClose={close}>
       <DialogTitle>{LL.EDIT() + ' ' + LL.ENTITY()}</DialogTitle>
       <DialogContent dividers>
-        <Box color="warning.main">
+        <Grid container direction="row">
-          <Typography variant="body2">{editItem.id}</Typography>
+          <Typography variant="body2" color="warning.main">
-        </Box>
+            {LL.ENTITY() + ' ID'}:&nbsp;
-        <Box color="warning.main" mt={1} mb={2}>
-          <Typography variant="body2">
-            {LL.DEFAULT(1) + ' ' + LL.ENTITY_NAME(1)}:&nbsp;{editItem.n}
           </Typography>
-        </Box>
+          <Typography variant="body2">{editItem.id}</Typography>
-        <Box mb={3}>
+        </Grid>
+
+        <Grid container direction="row">
+          <Typography variant="body2" color="warning.main">
+            {LL.DEFAULT(1) + ' ' + LL.ENTITY_NAME(1)}:&nbsp;
+          </Typography>
+          <Typography variant="body2">{editItem.n}</Typography>
+        </Grid>
+
+        <Grid container direction="row">
+          <Typography variant="body2" color="warning.main">
+            {LL.WRITEABLE()}:&nbsp;
+          </Typography>
+          <Typography variant="body2">
+            {editItem.w ? (
+              <DoneIcon color="success" sx={{ fontSize: 16 }} />
+            ) : (
+              <CloseIcon color="error" sx={{ fontSize: 16 }} />
+            )}
+          </Typography>
+        </Grid>
+
+        <Box mt={1} mb={2}>
           <EntityMaskToggle onUpdate={updateDeviceEntity} de={editItem} />
         </Box>
         <Grid container spacing={1}>