wip: add UI to manage custom fields (#767)

apps/client/src/features/app-settings/AppSettings.tsx

@@ -5,6 +5,7 @@ import { useKeyDown } from '../../common/hooks/useKeyDown';
 import AboutPanel from './panel/about-panel/AboutPanel';
 import LogPanel from './panel/log-panel/LogPanel';
 import ProjectPanel from './panel/project-panel/ProjectPanel';
+import ProjectSettingsPanel from './panel/project-settings-panel/ProjectSettingsPanel';
 import PanelContent from './panel-content/PanelContent';
 import PanelList from './panel-list/PanelList';
 import { useSettingsStore } from './settingsStore';
@@ -26,6 +27,7 @@ export default function AppSettings() {
         <PanelList />
         <PanelContent onClose={closeSettings}>
           {selectedPanel === 'project' && <ProjectPanel />}
+          {selectedPanel === 'project_settings' && <ProjectSettingsPanel />}
           {selectedPanel === 'about' && <AboutPanel />}
           {selectedPanel === 'log' && <LogPanel />}
         </PanelContent>

apps/client/src/features/app-settings/panel/project-settings-panel/ProjectSettingsPanel.module.scss

@@ -0,0 +1,8 @@
+.fullWidth {
+    width: 100%;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+}

apps/client/src/features/app-settings/panel/project-settings-panel/ProjectSettingsPanel.tsx

@@ -0,0 +1,79 @@
+import { IconButton } from '@chakra-ui/react';
+import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react';
+import { IoPencil } from '@react-icons/all-files/io5/IoPencil';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
+
+import ExternalLink from '../../../../common/components/external-link/ExternalLink';
+import * as Panel from '../PanelUtils';
+
+import style from './ProjectSettingsPanel.module.scss';
+
+const demoCustomFields = {
+  Apple: { value: 'Fruit' },
+  Dog: { value: 'Animal' },
+  Sun: { value: 'Star' },
+  Car: { value: 'Vehicle' },
+  Tree: { value: 'Plant' },
+  Bird: { value: 'Creature' },
+  Book: { value: 'Reading' },
+  Chair: { value: 'Furniture' },
+  Music: { value: 'Melody' },
+  Ocean: { value: 'Sea' },
+};
+
+const userFieldsDocsUrl = 'https://ontime.gitbook.io/v2/features/user-fields';
+
+export default function ProjectSettingsPanel() {
+  return (
+    <>
+      <Panel.Header>Project Settings</Panel.Header>
+      <Panel.Section>
+        <Panel.Card>
+          <Panel.SubHeader>Custom fields</Panel.SubHeader>
+          <div>
+            <Alert status='info' variant='ontime-on-dark-info'>
+              <AlertIcon />
+              <AlertDescription>
+                Custom fields allow for additional information to be added to an event (eg. light, sound, camera).{' '}
+                <br />
+                This data is not used by Ontime. <br />
+                <ExternalLink href={userFieldsDocsUrl}>See the docs</ExternalLink>
+              </AlertDescription>
+            </Alert>
+          </div>
+          <Panel.Table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(demoCustomFields).map(([key, { value }]) => (
+                <tr key={key}>
+                  <td className={style.fullWidth}>{value}</td>
+                  <td className={style.actions}>
+                    <IconButton
+                      size='sm'
+                      variant='ontime-ghosted'
+                      color='#e2e2e2' // $gray-200
+                      icon={<IoPencil />}
+                      aria-label='Edit entry'
+                    />
+                    <IconButton
+                      size='sm'
+                      variant='ontime-ghosted'
+                      color='#FA5656' // $red-500
+                      icon={<IoTrash />}
+                      aria-label='Delete entry'
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Panel.Table>
+        </Panel.Card>
+      </Panel.Section>
+    </>
+  );
+}

apps/client/src/features/app-settings/settingsStore.ts

@@ -13,7 +13,11 @@ export const settingPanels: Readonly<SettingsOption[]> = [
     label: 'Project',
     secondary: [{ id: 'project__manage', label: 'Manage project files' }],
   },
-  { id: 'general', label: 'General' },
+  {
+    id: 'project_settings',
+    label: 'Project Settings',
+    secondary: [{ id: 'project_settings__custom', label: 'Custom Fields' }],
+  },
   { id: 'interface', label: 'Interface' },
   { id: 'views', label: 'Views' },
   {

apps/client/src/theme/OntimeAlert.ts

@@ -9,3 +9,15 @@ export const ontimeAlertOnLight = {
     color: '#578AF4', // $blue-500
   },
 };
+
+export const ontimeAlertOnDark = {
+  container: {
+    fontSize: 'calc(1rem - 1px)',
+    backgroundColor: '#1a1a1a', // $gray-1300
+    color: '#e2e2e2', // $gray-200
+    borderRadius: '3px',
+  },
+  icon: {
+    color: '#578AF4', // $blue-500
+  },
+};

apps/client/src/theme/theme.ts

@@ -1,6 +1,6 @@
 import { extendTheme } from '@chakra-ui/react';
 
-import { ontimeAlertOnLight } from './OntimeAlert';
+import { ontimeAlertOnDark, ontimeAlertOnLight } from './OntimeAlert';
 import {
   ontimeButtonFilled,
   ontimeButtonGhosted,
@@ -34,6 +34,7 @@ const theme = extendTheme({
     Alert: {
       variants: {
         'ontime-on-light-info': { ...ontimeAlertOnLight },
+        'ontime-on-dark-info': { ...ontimeAlertOnDark },
       },
     },
     Button: {