Merge pull request #4 from PascalLuginbuehl/icons

select and display @mdi icons

Author: PascalLuginbuehl

package-lock.json

@@ -50,10 +50,11 @@
     "@electron-forge/publisher-github": "^6.2.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fluentui/font-icons-mdl2": "^8.5.22",
-    "@fluentui/react-icons-mdl2": "^1.3.46",
     "@fontsource/roboto": "^5.0.3",
     "@hookform/resolvers": "^3.1.1",
+    "@mdi/js": "^7.2.96",
+    "@mdi/react": "^1.6.1",
+    "@mdi/svg": "^7.2.96",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.6",
     "@mui/x-date-pickers": "^6.9.0",

package.json

@@ -1,18 +1,21 @@
 import {
-  Box, IconButton, ListItem, ListItemText,
+  Box, FilterOptionsState, IconButton, ListItem, ListItemIcon, ListItemText, createFilterOptions,
 } from '@mui/material';
 import React, { useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import DriveFileRenameOutlineIcon from '@mui/icons-material/DriveFileRenameOutline';
 import {
+  AutocompleteElement,
   TextFieldElement, useWatch,
 } from 'react-hook-form-mui';
 import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
 import DoneOutlineIcon from '@mui/icons-material/DoneOutline';
+import Icon from '@mdi/react';
 import { IEntityConfig } from '../../store';
 import IState from '../../types/state';
 import type { TFormValues } from '../entities-form';
 import EntityUtils from '../../utils/entity-utils';
+import icons, { getIconsPath } from './icons';
 
 interface DraggableListItemProps {
   entity: IEntityConfig,
@@ -21,6 +24,11 @@ interface DraggableListItemProps {
   onRemove: () => void,
 }
 
+const OPTIONS_LIMIT = 100;
+const defaultFilterOptions = createFilterOptions();
+
+const filterOptions = (options: unknown[], state: FilterOptionsState<unknown>) => defaultFilterOptions(options, state).slice(0, OPTIONS_LIMIT);
+
 export default function DraggableListItem(props: DraggableListItemProps) {
   const {
     index, state, onRemove,
@@ -29,6 +37,9 @@ export default function DraggableListItem(props: DraggableListItemProps) {
   const [editing, setEditing] = useState<boolean>(false);
 
   const entity = useWatch<TFormValues, `entities.${number}`>({ name: `entities.${index}` });
+  const autocompleteOptions = icons.map((option) => ({
+    label: option.name, id: option.name, path: option.path, aliases: option.aliases,
+  }));
 
   return (
     <Draggable
@@ -68,11 +79,47 @@ export default function DraggableListItem(props: DraggableListItemProps) {
         >
           {
               !editing ? (
-                <ListItemText
-                  primary={EntityUtils.getEntityName(entity, state)}
-                />
+                <>
+                  <ListItemIcon sx={{ minWidth: 36 }}>
+                    {entity.icon && <Icon path={getIconsPath(entity.icon)} size={1} />}
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={EntityUtils.getEntityName(entity, state)}
+                  />
+                </>
               ) : (
-                <TextFieldElement<TFormValues> name={`entities.${index}.label`} label={state?.attributes.friendly_name ?? entity.entity_id} />
+                <>
+                  <AutocompleteElement<TFormValues>
+                    name={`entities.${index}.icon`}
+                    options={autocompleteOptions}
+                    textFieldProps={{ fullWidth: true }}
+                    label="Icon"
+                    matchId
+                    autocompleteProps={{
+                      fullWidth: true,
+                      filterOptions,
+
+                      renderOption: (optionProps, option, { selected }) => (
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        <ListItem {...optionProps} key={option.id}>
+                          <ListItemIcon>
+                            <Icon path={option.path} size={1} />
+                          </ListItemIcon>
+                          <ListItemText
+                            primaryTypographyProps={selected ? { fontWeight: 'bold' } : undefined}
+                            primary={option.label}
+                            secondary={option.aliases.join(', ')}
+                          />
+                        </ListItem>
+                      ),
+                    }}
+
+                  />
+                  <TextFieldElement<TFormValues>
+                    name={`entities.${index}.label`}
+                    label={state?.attributes.friendly_name ?? entity.entity_id}
+                  />
+                </>
               )
             }
         </ListItem>

src/settings/manage-switches/draggable-list-item.tsx

@@ -0,0 +1,21 @@
+import * as icons from '@mdi/js';
+import meta from '@mdi/svg/meta.json';
+
+const camelize = (s: string) => s.replace(/-./g, (x) => x[1].toUpperCase());
+
+const metaValues = [...Object.values(meta)];
+
+export const getIconsPath = (iconName: string) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const icon = icons[camelize(`mdi-${iconName}`)];
+
+  if (!icon) {
+    return null;
+  }
+
+  return icon;
+};
+
+// Icons can be found here: https://pictogrammers.com/library/mdi/
+export default metaValues.map((value) => ({ ...value, path: getIconsPath(value.name) }));

src/settings/manage-switches/icons.ts

@@ -82,7 +82,7 @@ export default function ManageSwitches(props: ManageSwitchesProps) {
             return;
           }
 
-          append({ entity_id: value as string, label: null });
+          append({ entity_id: value as string, label: null, icon: null });
 
           setSelectFieldValue(null);
         }}

src/settings/manage-switches/manage-switches.tsx

@@ -6,6 +6,7 @@ export interface IEntityConfig {
   entity_id: string,
   // domain: 'switch',
   // service: 'toggle',
+  icon: string | null,
   label: string | null,
 }
 export interface ISettings {
@@ -50,6 +51,11 @@ const schema: JSONSchemaType<SchemaType> = {
                 type: ['string', 'null'] as unknown as 'string',
                 default: null,
               },
+              icon: {
+                // https://github.com/ajv-validator/ajv/issues/2163#issuecomment-1440299363
+                type: ['string', 'null'] as unknown as 'string',
+                default: null,
+              },
             },
             required: ['entity_id', 'label'],
           },

src/store.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { LampIcon } from '@fluentui/react-icons-mdl2';
 import clsx from 'clsx';
+import Icon from '@mdi/react';
+import { getIconsPath } from '../settings/manage-switches/icons';
 import EntityUtils from '../utils/entity-utils';
 
 export default function Configuration() {
@@ -47,8 +48,12 @@ export default function Configuration() {
                 await refetch();
               }}
             >
-              <LampIcon />
-              {EntityUtils.getEntityName(entity, state)}
+              <div className="spacing">
+                {entity.icon && <Icon path={getIconsPath(entity.icon)} size={1} />}
+              </div>
+              <span>
+                {EntityUtils.getEntityName(entity, state)}
+              </span>
             </button>
           );
         })

src/tray/configuration.tsx

@@ -306,6 +306,12 @@ body[data-is-win11="true"] {
   text-align: left;
   background-color: transparent;
   color: var(--tray-text);
+  display: flex;
+  align-items: center;
+  & .spacing {
+    width: 36px;
+    height: 24px;
+  }
   &.selected {
     background-color: #333;
   }

src/tray/css/panel.scss

@@ -1,15 +1,12 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import App from './app';
 import '../i18next';
 
 import './css/vars.scss';
 import './css/panel.scss';
 
-initializeIcons();
-
 // this element does 100% exist
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const container = window.document.getElementById('app')!;