feat: event description (#481)

* feat: enable configuration of <Info> panel

* feat: add description field to event data

apps/client/src/features/info/Info.module.scss

@@ -19,6 +19,13 @@
   }
 }
 
+.description {
+  color: $label-gray;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .labels {
   font-size: $inner-section-text-size;
   display: flex;

apps/client/src/features/info/Info.tsx

@@ -1,4 +1,5 @@
 import { useInfoPanel } from '../../common/hooks/useSocket';
+import { useEditorSettings } from '../../common/stores/editorSettings';
 
 import InfoHeader from './info-header/InfoHeader';
 import CollapsableInfo from './CollapsableInfo';
@@ -8,6 +9,7 @@ import InfoTitles from './InfoTitles';
 
 export default function Info() {
   const data = useInfoPanel();
+  const showNif = useEditorSettings((state) => state.eventSettings.showNif);
 
   const titlesNow = {
     title: data.titles.titleNow || '',
@@ -32,9 +34,11 @@ export default function Info() {
   return (
     <>
       <InfoHeader selected={selected} />
-      <CollapsableInfo title='Network Info'>
-        <InfoNif />
-      </CollapsableInfo>
+      {showNif && (
+        <CollapsableInfo title='Network Info'>
+          <InfoNif />
+        </CollapsableInfo>
+      )}
       <CollapsableInfo title='Playing Now'>
         <InfoTitles data={titlesNow} />
       </CollapsableInfo>

apps/client/src/features/info/info-header/InfoHeader.tsx

@@ -6,9 +6,12 @@ export default function InfoHeader({ selected }: { selected: string }) {
   const { data } = useEventData();
 
   return (
-    <div className={style.panelHeader}>
-      <span className={style.title}>{data?.title || ''}</span>
-      <span className={style.selected}>{selected}</span>
-    </div>
+    <>
+      <div className={style.panelHeader}>
+        <span className={style.title}>{data?.title || ''}</span>
+        <span className={style.selected}>{selected}</span>
+      </div>
+      <div className={style.description}>{data?.description || ''}</div>
+    </>
   );
 }