refactor: use inline elements

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

@@ -4,7 +4,6 @@ import { useKeyDown } from '../../common/hooks/useKeyDown';
 
 import AboutPanel from './panel/about-panel/AboutPanel';
 import AutomationPanel from './panel/automations-panel/AutomationPanel';
-import ClientControlPanel from './panel/client-control-panel/ClientControlPanel';
 import FeatureSettingsPanel from './panel/feature-settings-panel/FeatureSettingsPanel';
 import GeneralPanel from './panel/general-panel/GeneralPanel';
 import NetworkLogPanel from './panel/network-panel/NetworkLogPanel';
@@ -31,9 +30,8 @@ export default function AppSettings() {
           {panel === 'feature_settings' && <FeatureSettingsPanel location={location} />}
           {panel === 'sources' && <SourcesPanel />}
           {panel === 'automation' && <AutomationPanel location={location} />}
-          {panel === 'client_control' && <ClientControlPanel />}
-          {panel === 'about' && <AboutPanel />}
           {panel === 'network' && <NetworkLogPanel location={location} />}
+          {panel === 'about' && <AboutPanel />}
           {panel === 'shutdown' && <ShutdownPanel />}
         </PanelContent>
       </ErrorBoundary>

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss

@@ -68,16 +68,6 @@
   grid-template-columns: 1fr auto;
 }
 
-.actions {
-  justify-content: flex-end;
-}
-
-.actionButtons {
-  display: flex;
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
 .outputCard {
   border-left: 0.25rem solid $gray-1200;
   padding-left: 0.5rem;

apps/client/src/features/app-settings/panel/client-control-panel/ClientControlPanel.module.scss

@@ -2,23 +2,11 @@
   width: 100%;
 }
 
-.actionButtons {
+.halfWidth {
-  display: flex;
+  width: 50%;
-  gap: $element-spacing;
 }
 
-.halfWidth {
+.halfWidthNoWrap {
   width: 50%;
   white-space: nowrap;
 }
-
-.pathList {
-  width: 100%;
-}
-
-.badgeList {
-  width: 100%;
-  * {
-    margin-right: $element-spacing;
-  }
-}

apps/client/src/features/app-settings/panel/client-control-panel/ClientList.tsx

@@ -52,7 +52,7 @@ export default function ClientList() {
         <Panel.Table>
           <thead>
             <tr>
-              <td className={style.fullWidth}>Client Name (Connection ID)</td>
+              <td className={style.halfWidth}>Client Name (Connection ID)</td>
               <td className={style.fullWidth}>Path</td>
               <td />
             </tr>
@@ -63,7 +63,7 @@ export default function ClientList() {
               const isCurrent = id === key;
               return (
                 <tr key={key}>
-                  <td className={style.badgeList}>
+                  <Panel.InlineElements relation='inner' as='td'>
                     <Badge variant='outline' size='xs'>
                       {key}
                     </Badge>
@@ -73,9 +73,9 @@ export default function ClientList() {
                       </Badge>
                     )}
                     {name}
-                  </td>
+                  </Panel.InlineElements>
-                  <td className={style.pathList}>{path}</td>
+                  <td>{path}</td>
-                  <td className={style.actionButtons}>
+                  <Panel.InlineElements relation='inner'>
                     <Button
                       size='xs'
                       className={`${identify ? style.blink : ''}`}
@@ -106,7 +106,7 @@ export default function ClientList() {
                     >
                       Redirect
                     </Button>
-                  </td>
+                  </Panel.InlineElements>
                 </tr>
               );
             })}
@@ -119,8 +119,8 @@ export default function ClientList() {
         <Panel.Table>
           <thead>
             <tr>
-              <td className={style.halfWidth}>Client Name (Connection ID)</td>
+              <td className={style.halfWidthNoWrap}>Client Name (Connection ID)</td>
-              <td className={style.halfWidth}>Client type</td>
+              <td className={style.halfWidthNoWrap}>Client type</td>
             </tr>
           </thead>
           <tbody>
@@ -129,12 +129,12 @@ export default function ClientList() {
 
               return (
                 <tr key={key}>
-                  <td className={style.badgeList}>
+                  <Panel.InlineElements relation='inner' as='td'>
                     <Badge variant='outline' size='sx'>
                       {key}
                     </Badge>
                     {name}
-                  </td>
+                  </Panel.InlineElements>
                   <td>{type}</td>
                 </tr>
               );

apps/client/src/features/app-settings/panel/feature-settings-panel/FeatureSettings.module.scss

@@ -6,16 +6,6 @@
   width: 100%;
 }
 
-.actions {
-  display: flex;
-  gap: 0.5px;
-}
-
-.actionButtons {
-  display: flex;
-  gap: 1em;
-}
-
 .fieldForm {
   padding: 1rem;
   background-color: $gray-1350;
@@ -24,12 +14,6 @@
   gap: 1rem;
 }
 
-.buttonRow {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-}
-
 .fit {
   width: fit-content;
 }
@@ -38,10 +22,6 @@
   min-width: 12em;
 }
 
-.flex {
-  display: flex;
-}
-
 .twoCols {
   display: grid;
   grid-template-columns: 1fr 1fr;

apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx

@@ -92,14 +92,14 @@ export default function UrlPresetsForm() {
       <Panel.Card>
         <Panel.SubHeader>
           URL presets
-          <div className={style.actionButtons}>
+          <Panel.InlineElements>
             <Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={!canSubmit}>
               Revert to saved
             </Button>
             <Button variant='ontime-filled' size='sm' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
               Save
             </Button>
-          </div>
+          </Panel.InlineElements>
         </Panel.SubHeader>
         <Panel.Divider />
         <Alert status='info' variant='ontime-on-dark-info'>
@@ -192,7 +192,7 @@ export default function UrlPresetsForm() {
                       />
                       <Panel.Error>{maybeUrlError}</Panel.Error>
                     </td>
-                    <td className={style.flex}>
+                    <Panel.InlineElements relation='inner' as='td'>
                       <TooltipActionBtn
                         size='sm'
                         isDisabled={!canTest}
@@ -213,7 +213,7 @@ export default function UrlPresetsForm() {
                         aria-label='Delete entry'
                         data-testid={`field__delete_${index}`}
                       />
-                    </td>
+                    </Panel.InlineElements>
                   </tr>
                 );
               })}

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldEntry.tsx

@@ -6,6 +6,7 @@ import { CustomField, CustomFieldLabel } from 'ontime-types';
 
 import CopyTag from '../../../../../common/components/copy-tag/CopyTag';
 import Swatch from '../../../../../common/components/input/colour-input/Swatch';
+import * as Panel from '../../../panel-utils/PanelUtils';
 
 import CustomFieldForm from './CustomFieldForm';
 
@@ -55,7 +56,7 @@ export default function CustomFieldEntry(props: CustomFieldEntryProps) {
           {field}
         </CopyTag>
       </td>
-      <td className={style.actions}>
+      <Panel.InlineElements relation='inner' as='td'>
         <IconButton
           size='sm'
           variant='ontime-ghosted'
@@ -72,7 +73,7 @@ export default function CustomFieldEntry(props: CustomFieldEntryProps) {
           aria-label='Delete entry'
           onClick={() => onDelete(field)}
         />
-      </td>
+      </Panel.InlineElements>
     </tr>
   );
 }

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx

@@ -107,14 +107,14 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
       </div>
 
       {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-      <div className={style.buttonRow}>
+      <Panel.InlineElements relation='inner' align='end'>
         <Button size='sm' variant='ontime-ghosted' onClick={onCancel}>
           Cancel
         </Button>
         <Button size='sm' type='submit' variant='ontime-filled' isDisabled={!canSubmit} isLoading={isSubmitting}>
           Save
         </Button>
-      </div>
+      </Panel.InlineElements>
     </form>
   );
 }

apps/client/src/features/app-settings/panel/general-panel/GeneralPanel.module.scss

@@ -1,4 +0,0 @@
-.actionButtons {
-  display: flex;
-  gap: 1em;
-}

apps/client/src/features/app-settings/panel/general-panel/GeneralPanelForm.tsx

@@ -11,8 +11,6 @@ import * as Panel from '../../panel-utils/PanelUtils';
 
 import GeneralPinInput from './GeneralPinInput';
 
-import style from './GeneralPanel.module.scss';
-
 export type GeneralPanelFormValues = {
   filename: string;
 };
@@ -66,7 +64,7 @@ export default function GeneralPanelForm() {
       <Panel.Card>
         <Panel.SubHeader>
           General settings
-          <div className={style.actionButtons}>
+          <Panel.InlineElements>
             <Button isDisabled={!isDirty || isSubmitting} variant='ontime-ghosted' size='sm' onClick={onReset}>
               Revert to saved
             </Button>
@@ -80,7 +78,7 @@ export default function GeneralPanelForm() {
             >
               Save
             </Button>
-          </div>
+          </Panel.InlineElements>
         </Panel.SubHeader>
         {submitError && <Panel.Error>{submitError}</Panel.Error>}
         <Panel.Divider />

apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx

@@ -11,8 +11,6 @@ import useInfo from '../../../../common/hooks-query/useInfo';
 import useViewSettings from '../../../../common/hooks-query/useViewSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
 
-import style from './GeneralPanel.module.scss';
-
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
 
 export default function ViewSettingsForm() {
@@ -71,14 +69,14 @@ export default function ViewSettingsForm() {
       <Panel.Card>
         <Panel.SubHeader>
           View settings
-          <div className={style.actionButtons}>
+          <Panel.InlineElements>
             <Button isDisabled={!isDirty} variant='ontime-ghosted' size='sm' onClick={onReset}>
               Revert to saved
             </Button>
             <Button type='submit' isLoading={isSubmitting} isDisabled={!isDirty} variant='ontime-filled' size='sm'>
               Save
             </Button>
-          </div>
+          </Panel.InlineElements>
         </Panel.SubHeader>
         <Panel.Divider />
         <Alert status='info' variant='ontime-on-dark-info'>

apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.module.scss

@@ -1,10 +1,3 @@
-.interfaces {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $section-spacing;
-  row-gap: $element-inner-spacing;
-}
-
 .goIcon {
   @include rotate-fourty-five;
   margin-left: 0.25rem;

apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx

@@ -4,6 +4,7 @@ import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import useInfo from '../../../../common/hooks-query/useInfo';
 import { linkToOtherHost, openLink } from '../../../../common/utils/linkUtils';
 import { isLocalhost } from '../../../../externals';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './NetworkInterfaces.module.scss';
 
@@ -13,7 +14,7 @@ export default function InfoNif() {
   const handleClick = (address: string) => openLink(address);
 
   return (
-    <div className={style.interfaces}>
+    <Panel.InlineElements>
       {data.networkInterfaces.map((nif) => {
         // interfaces outside localhost wont have access
         if (nif.name === 'localhost' && !isLocalhost) return null;
@@ -30,6 +31,6 @@ export default function InfoNif() {
           </CopyTag>
         );
       })}
-    </div>
+    </Panel.InlineElements>
   );
 }

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

@@ -11,8 +11,6 @@ import * as Panel from '../../panel-utils/PanelUtils';
 import ProjectCreateForm from './ProjectCreateForm';
 import ProjectList from './ProjectList';
 
-import style from './ProjectPanel.module.scss';
-
 export default function ManageProjects() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [error, setError] = useState('');
@@ -70,7 +68,7 @@ export default function ManageProjects() {
       <Panel.Card>
         <Panel.SubHeader>
           Manage projects
-          <div className={style.headerButtons}>
+          <Panel.InlineElements>
             <Button
               variant='ontime-subtle'
               onClick={handleSelectFile}
@@ -89,7 +87,7 @@ export default function ManageProjects() {
             >
               New
             </Button>
-          </div>
+          </Panel.InlineElements>
         </Panel.SubHeader>
         {error && <Panel.Error>{error}</Panel.Error>}
         <Panel.Divider />

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

@@ -69,14 +69,14 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
     <Panel.Section as='form' onSubmit={handleSubmit(handleSubmitCreate)}>
       <Panel.Title>
         Create new project
-        <div className={style.createActionButtons}>
+        <Panel.InlineElements>
           <Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
             Cancel
           </Button>
           <Button isDisabled={!isValid} type='submit' isLoading={isSubmitting} variant='ontime-filled' size='sm'>
-            Create
+            Create project
           </Button>
-        </div>
+        </Panel.InlineElements>
       </Panel.Title>
       {error && <Panel.Error>{error}</Panel.Error>}
       <Panel.Section className={style.innerColumn}>

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

@@ -100,7 +100,7 @@ export default function ProjectData() {
       <Panel.Card>
         <Panel.SubHeader>
           Project data
-          <div className={style.headerButtons}>
+          <Panel.InlineElements>
             <Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={isSubmitting || !isDirty}>
               Revert to saved
             </Button>
@@ -113,7 +113,7 @@ export default function ProjectData() {
             >
               Save
             </Button>
-          </div>
+          </Panel.InlineElements>
         </Panel.SubHeader>
         <Panel.Divider />
         <Panel.Section>

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

@@ -45,7 +45,7 @@ export default function ProjectForm({ action, filename, onSubmit, onCancel }: Pr
         autoComplete='off'
         {...register('filename', { required: true })}
       />
-      <div className={style.actionButtons}>
+      <Panel.InlineElements relation='inner'>
         <Button onClick={onCancel} size='sm' variant='ontime-ghosted' disabled={isSubmitting}>
           Cancel
         </Button>
@@ -58,7 +58,7 @@ export default function ProjectForm({ action, filename, onSubmit, onCancel }: Pr
         >
           {action}
         </Button>
-      </div>
+      </Panel.InlineElements>
     </form>
   );
 }

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

@@ -130,7 +130,7 @@ export default function ProjectListItem({
           <>
             <td className={style.containCell}>{filename}</td>
             <td>{current ? 'Currently loaded' : new Date(updatedAt).toLocaleString()}</td>
-            <td className={style.actionButton}>
+            <td>
               <ActionMenu
                 current={current}
                 filename={filename}

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

@@ -75,7 +75,7 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
     <Panel.Section as='form' onSubmit={handleSubmit(handleSubmitCreate)}>
       <Panel.Title>
         Merge {`"${fileName}"`}
-        <div className={style.createActionButtons}>
+        <Panel.InlineElements>
           <Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
             Cancel
           </Button>
@@ -88,7 +88,7 @@ export default function ProjectMergeForm(props: ProjectMergeFromProps) {
           >
             Merge
           </Button>
-        </div>
+        </Panel.InlineElements>
       </Panel.Title>
       {error && <Panel.Error>{error}</Panel.Error>}
       <Panel.Section className={cx([style.innerColumn, style.inlineLabels])}>

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

@@ -6,39 +6,18 @@
   color: $blue-500;
 }
 
-.actionButton {
-  flex: 1;
-  text-align: right;
-}
-
 .form {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  gap: 1rem;
 }
 
 .formInput {
   flex: 2;
 }
 
-.headerButtons,
-.actionButtons,
-.createActionButtons {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.actionButtons {
-  margin-left: 1rem;
-}
-
-.createActionButtons {
-  margin-left: 1rem;
-  justify-content: flex-end;
-}
-
 .saveButton {
   text-transform: capitalize;
 }
@@ -62,12 +41,6 @@
   }
 }
 
-.flex {
-  display: flex;
-  gap: 1rem;
-  height: 100px;
-}
-
 .uploadLogoCard {
   display: flex;
   gap: 1rem;

apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx

@@ -12,8 +12,6 @@ import * as Panel from '../../panel-utils/PanelUtils';
 import useGoogleSheet from './useGoogleSheet';
 import { useSheetStore } from './useSheetStore';
 
-import style from './SourcesPanel.module.scss';
-
 interface GSheetSetupProps {
   onCancel: () => void;
 }
@@ -176,7 +174,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
       </Panel.ListGroup>
       {!canAuthenticate ? (
         <Panel.ListGroup>
-          <div className={style.buttonRow}>
+          <Panel.InlineElements>
             <Button
               variant='ontime-subtle'
               size='sm'
@@ -187,11 +185,11 @@ export default function GSheetSetup(props: GSheetSetupProps) {
             >
               Connect
             </Button>
-          </div>
+          </Panel.InlineElements>
         </Panel.ListGroup>
       ) : (
         <Panel.ListGroup>
-          <div className={style.buttonRow}>
+          <Panel.InlineElements>
             {isAuthenticating && <Spinner />}
             <CopyTag copyValue={authKey ?? ''} label='Google Auth Key' disabled={!canAuthenticate} size='sm'>
               {authKey ? authKey : 'Upload files to generate Auth Key'}
@@ -205,7 +203,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
             >
               Authenticate
             </Button>
-          </div>
+          </Panel.InlineElements>
         </Panel.ListGroup>
       )}
     </Panel.Section>

apps/client/src/features/app-settings/panel/sources-panel/ImportReview.tsx

@@ -8,8 +8,6 @@ import PreviewSpreadsheet from './preview/PreviewRundown';
 import useGoogleSheet from './useGoogleSheet';
 import { useSheetStore } from './useSheetStore';
 
-import style from './SourcesPanel.module.scss';
-
 interface ImportReviewProps {
   rundown: OntimeRundown;
   customFields: CustomFields;
@@ -40,14 +38,14 @@ export default function ImportReview(props: ImportReviewProps) {
     <Panel.Section>
       <Panel.Title>
         Review Rundown
-        <div className={style.buttonRow}>
+        <Panel.InlineElements>
           <Button onClick={handleCancel} variant='ontime-ghosted' size='sm' isDisabled={loading}>
             Cancel
           </Button>
           <Button onClick={applyImport} variant='ontime-filled' size='sm' isLoading={loading}>
             Apply
           </Button>
-        </div>
+        </Panel.InlineElements>
       </Panel.Title>
       <PreviewSpreadsheet rundown={rundown} customFields={customFields} />
     </Panel.Section>

apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss

@@ -29,17 +29,6 @@
   }
 }
 
-.buttonRow {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  justify-content: end;
-}
-
-.inputContainer {
-  flex: 1;
-}
-
 .singleActionCell {
   width: 50px;
   text-align: center;

apps/client/src/features/app-settings/panel/sources-panel/import-map/ImportMapForm.tsx

@@ -84,7 +84,7 @@ export default function ImportMapForm(props: ImportMapFormProps) {
     <Panel.Section as='form' id='import-map'>
       <Panel.Title>
         Import options
-        <div className={style.buttonRow}>
+        <Panel.InlineElements>
           {!isSpreadsheet && (
             <Tooltip label='Revoke the google authentication'>
               <Button variant='ontime-subtle' size='sm' onClick={handleRevoke} isDisabled={isLoading}>
@@ -115,7 +115,7 @@ export default function ImportMapForm(props: ImportMapFormProps) {
           >
             Import preview
           </Button>
-        </div>
+        </Panel.InlineElements>
       </Panel.Title>
       <Panel.Table>
         <thead>
@@ -224,11 +224,11 @@ export default function ImportMapForm(props: ImportMapFormProps) {
           })}
           <tr>
             <td />
-            <td className={style.buttonRow} colSpan={99}>
+            <Panel.InlineElements as='td' align='end'>
               <Button size='sm' variant='ontime-subtle' rightIcon={<IoAdd />} onClick={addCustomImport}>
                 Add custom field
               </Button>
-            </td>
+            </Panel.InlineElements>
             <td />
           </tr>
         </tbody>

apps/client/src/features/log/Log.module.scss

@@ -42,8 +42,6 @@ $info-hover: $section-white;
 }
 
 .buttonBar {
-  display: flex;
   flex-wrap: wrap;
-  gap: 1em;
   padding-bottom: 0.5rem;
 }

apps/client/src/features/log/Log.tsx

@@ -3,6 +3,7 @@ import { Button } from '@chakra-ui/react';
 import { LogOrigin } from 'ontime-types';
 
 import { clearLogs, useLogData } from '../../common/stores/logger';
+import * as Panel from '../app-settings/panel-utils/PanelUtils';
 
 import style from './Log.module.scss';
 
@@ -49,7 +50,7 @@ export default function Log() {
 
   return (
     <>
-      <div className={style.buttonBar}>
+      <Panel.InlineElements className={style.buttonBar}>
         <Button
           variant={showUser ? 'ontime-filled' : 'ontime-outlined'}
           size='xs'
@@ -107,7 +108,7 @@ export default function Log() {
         <Button variant='ontime-subtle' size='xs' onClick={clearLogs}>
           Clear
         </Button>
-      </div>
+      </Panel.InlineElements>
       <ul className={style.log}>
         {filteredData.map((logEntry) => (
           <li key={logEntry.id} className={`${style.logEntry} ${style[logEntry.level]} `}>