refactor: show new app version

apps/client/src/features/app-settings/panel-list/PanelList.module.scss

@@ -40,12 +40,16 @@ ul {
     background-color: $gray-1100;
   }
 
-  &.unsaved::before {
-    content: '';
-    width: 6px;
-    height: 6px;
-    border-radius: 3px;
-    background-color: $blue-400;
+  &.highlight {
+    color: $red-400;
+
+    &::before {
+      content: '';
+      width: 0.5em;
+      height: 0.5em;
+      border-radius: 99px;
+      background-color: $red-400;
+    }
   }
 
   &.split {

apps/client/src/features/app-settings/panel-list/PanelList.tsx

@@ -1,66 +1,90 @@
 import { Fragment } from 'react';
+import { Tooltip } from '@chakra-ui/react';
 
 import { isKeyEnter } from '../../../common/utils/keyEvent';
 import { cx } from '../../../common/utils/styleUtils';
-import { PanelBaseProps, settingPanels, useSettingsStore } from '../settingsStore';
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { SettingsOption, SettingsOptionId, useAppSettingsMenu } from '../useAppSettingsMenu';
 import useAppSettingsNavigation from '../useAppSettingsNavigation';
 
 import style from './PanelList.module.scss';
 
+export interface PanelBaseProps {
+  location?: string;
+}
+
 interface PanelListProps extends PanelBaseProps {
   selectedPanel: string;
 }
 
 export default function PanelList({ selectedPanel, location }: PanelListProps) {
-  const { setLocation } = useAppSettingsNavigation();
-  const { hasUnsavedChanges } = useSettingsStore();
+  const { options } = useAppSettingsMenu();
 
   return (
     <ul className={style.tabs}>
-      {settingPanels.map((panel) => {
-        const unsaved = hasUnsavedChanges(panel.id);
-
-        const classes = cx([
-          style.primary,
-          selectedPanel === panel.id ? style.active : null,
-          panel.split ? style.split : null,
-          unsaved ? style.unsaved : null,
-        ]);
-
-        return (
-          <Fragment key={panel.id}>
-            <li
-              key={panel.id}
-              onClick={() => setLocation(panel.id)}
-              onKeyDown={(event) => {
-                isKeyEnter(event) && setLocation(panel.id);
-              }}
-              className={classes}
-              tabIndex={0}
-              role='button'
-            >
-              {panel.label}
-            </li>
-            {panel.secondary?.map((secondary) => {
-              const id = secondary.id.split('__')[1];
-              const secondaryClasses = cx([style.secondary, location === id ? style.active : null]);
-              return (
-                <li
-                  key={secondary.id}
-                  onClick={() => setLocation(secondary.id)}
-                  onKeyDown={(event) => {
-                    isKeyEnter(event) && setLocation(secondary.id);
-                  }}
-                  className={secondaryClasses}
-                  role='button'
-                >
-                  {secondary.label}
-                </li>
-              );
-            })}
-          </Fragment>
-        );
+      {options.map((panel) => {
+        const isSelected = selectedPanel === panel.id;
+        if (panel.highlight) {
+          return (
+            <Tooltip key={panel.id} label={panel.highlight} openDelay={tooltipDelayFast} shouldWrapChildren>
+              <PanelListItem panel={panel} location={location} isSelected={isSelected} />
+            </Tooltip>
+          );
+        }
+        return <PanelListItem key={panel.id} panel={panel} location={location} isSelected={isSelected} />;
       })}
     </ul>
   );
 }
+
+interface PanelListItemProps {
+  panel: SettingsOption;
+  isSelected: boolean;
+  location?: string;
+}
+
+function PanelListItem(props: PanelListItemProps) {
+  const { panel, isSelected, location } = props;
+  const { setLocation } = useAppSettingsNavigation();
+
+  const classes = cx([
+    style.primary,
+    isSelected && style.active,
+    panel.split && style.split,
+    panel.highlight && style.highlight,
+  ]);
+
+  return (
+    <Fragment key={panel.id}>
+      <li
+        key={panel.id}
+        onClick={() => setLocation(panel.id as SettingsOptionId)}
+        onKeyDown={(event) => {
+          isKeyEnter(event) && setLocation(panel.id as SettingsOptionId);
+        }}
+        className={classes}
+        tabIndex={0}
+        role='button'
+      >
+        {panel.label}
+      </li>
+      {panel.secondary?.map((secondary) => {
+        const id = secondary.id.split('__')[1];
+        const secondaryClasses = cx([style.secondary, location === id ? style.active : null]);
+        return (
+          <li
+            key={secondary.id}
+            onClick={() => setLocation(secondary.id as SettingsOptionId)}
+            onKeyDown={(event) => {
+              isKeyEnter(event) && setLocation(secondary.id as SettingsOptionId);
+            }}
+            className={secondaryClasses}
+            role='button'
+          >
+            {secondary.label}
+          </li>
+        );
+      })}
+    </Fragment>
+  );
+}