chore: directory restructure

merge with directory

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

@@ -1,174 +0,0 @@
-$inner-padding: 1rem;
-
-.header {
-  font-size: 2rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid $white-10;
-  font-weight: 600;
-}
-
-.subheader {
-  font-size: 1.5rem;
-  padding-bottom: 0.5rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.title {
-  font-size: 1.375rem;
-  padding: 0 2rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: $gray-300;
-}
-
-.section {
-  position: relative;
-  margin-top: 2rem;
-  font-size: calc(1rem - 1px);
-  max-width: 800px;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  color: $ui-white;
-}
-
-.paragraph {
-  padding: 0.5rem 0;
-}
-
-.card {
-  position: relative;
-  padding: 2rem;
-  background-color: $white-3;
-  border: 1px solid $gray-1100;
-  border-radius: 3px;
-}
-
-.error {
-  font-size: $inner-section-text-size;
-  display: block;
-  color: $error-red;
-}
-
-.pad {
-  padding: 0 2rem;
-  max-height: 550px;
-  overflow-y: scroll;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: calc(1rem - 2px);
-  text-align: left;
-  margin-bottom: 2rem;
-
-  thead {
-    position: sticky;
-    top: 0;
-    z-index: 3;
-    box-shadow: 0 1px $white-10;
-    background-color: $gray-1350;
-  }
-
-  th {
-    font-weight: 400;
-    color: $gray-400;
-    white-space: nowrap;
-    text-transform: capitalize;
-  }
-
-  th,
-  td {
-    padding: 0.5rem;
-  }
-
-  tr:nth-child(even) {
-    background-color: $white-1;
-  }
-}
-
-.listGroup {
-  padding: 0 2rem;
-
-  > li:not(:last-child) {
-    border-bottom: 1px solid $white-10;
-  }
-}
-
-.listItem {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  padding: 0.5rem 0;
-}
-
-.fieldTitle {
-  color: $ui-white;
-  font-size: 1rem;
-}
-
-.fieldDescription {
-  font-size: calc(1rem - 2px);
-  color: $gray-400;
-}
-
-.fieldError {
-  font-size: calc(1rem - 2px);
-  color: $red-500;
-}
-
-.divider {
-  border-top: 1px solid $white-10;
-  margin: 1rem -2rem;
-  z-index: 999;
-}
-
-.overlay {
-  position: absolute;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  backdrop-filter: blur(2px);
-  display: grid;
-  place-content: center;
-  background-color: $black-10;
-}
-
-.loader {
-  $loader-size: 4rem;
-  width: $loader-size;
-  height: $loader-size;
-  background: $blue-500;
-  display: inline-block;
-  border-radius: 50%;
-  box-sizing: border-box;
-  animation: animloader 1s ease-in infinite;
-}
-
-@keyframes animloader {
-  0% {
-    transform: scale(0);
-    opacity: 0.6;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
-@keyframes animloader {
-  0% {
-    transform: scale(0);
-    opacity: 0.6;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}

apps/client/src/features/app-settings/panel/PanelUtils.tsx

@@ -1,94 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-
-import { cx } from '../../../common/utils/styleUtils';
-
-import style from './Panel.module.scss';
-
-export function Header({ children }: { children: ReactNode }) {
-  return <h2 className={style.header}>{children}</h2>;
-}
-
-export function SubHeader({ children }: { children: ReactNode }) {
-  return <h3 className={style.subheader}>{children}</h3>;
-}
-
-export function Title({ children }: { children: ReactNode }) {
-  return <h4 className={style.title}>{children}</h4>;
-}
-
-type AllowedTags = 'div' | 'form';
-type SectionProps<C extends AllowedTags> = {
-  as?: C;
-  children: ReactNode;
-} & JSX.IntrinsicElements[C];
-
-export function Section<C extends AllowedTags = 'div'>({ as, children, ...props }: SectionProps<C>) {
-  const Element = as ?? 'div';
-  return (
-    <Element className={style.section} {...(props as HTMLAttributes<HTMLElement>)}>
-      {children}
-    </Element>
-  );
-}
-
-export function Paragraph({ children }: { children: ReactNode }) {
-  return <p className={style.paragraph}>{children}</p>;
-}
-
-export function Card({ children, ...props }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
-  return (
-    <div className={style.card} {...props}>
-      {children}
-    </div>
-  );
-}
-
-export function Table({ className, children }: { className?: string; children: ReactNode }) {
-  const classes = cx([style.table, className]);
-  return (
-    <div className={style.pad}>
-      <table className={classes}>{children}</table>
-    </div>
-  );
-}
-
-export function ListGroup({ children }: { children: ReactNode }) {
-  return <ul className={style.listGroup}>{children}</ul>;
-}
-
-export function ListItem({ children }: { children: ReactNode }) {
-  return <li className={style.listItem}>{children}</li>;
-}
-
-export function Field({ title, description, error }: { title: string; description: string; error?: string }) {
-  return (
-    <div className={style.fieldTitle}>
-      {title}
-      {error && <Error>{error}</Error>}
-      {!error && description && <Description>{description}</Description>}
-    </div>
-  );
-}
-
-export function Description({ children }: { children: ReactNode }) {
-  return <div className={style.fieldDescription}>{children}</div>;
-}
-
-export function Error({ children }: { children: ReactNode }) {
-  return <div className={style.fieldError}>{children}</div>;
-}
-
-export function Divider() {
-  return <hr className={style.divider} />;
-}
-
-export function Loader({ isLoading }: { isLoading: boolean }) {
-  if (!isLoading) {
-    return null;
-  }
-  return (
-    <div className={style.overlay}>
-      <div className={style.loader} />
-    </div>
-  );
-}

apps/client/src/features/app-settings/panel/about-panel/AboutPanel.tsx

@@ -1,6 +1,6 @@
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
 import { documentationUrl, githubUrl, websiteUrl } from '../../../../externals';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import AppVersion from './AppVersion';
 

apps/client/src/features/app-settings/panel/about-panel/AppVersion.tsx

@@ -1,7 +1,7 @@
 import { version } from '../../../../../package.json';
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
 import useAppVersion from '../../../../common/hooks-query/useAppVersion';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 export default function AppVersion() {
   const { data, isError } = useAppVersion();

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

@@ -1,4 +1,4 @@
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import ClientList from './ClientList';
 

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

@@ -5,7 +5,7 @@ import { RedirectClientModal } from '../../../../common/components/client-modal/
 import { RenameClientModal } from '../../../../common/components/client-modal/RenameClientModal';
 import { setClientRemote } from '../../../../common/hooks/useSocket';
 import { useClientStore } from '../../../../common/stores/clientStore';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './ClientControlPanel.module.scss';
 

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

@@ -1,6 +1,6 @@
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import CustomFields from './custom-fields/CustomFields';
 import UrlPresetsForm from './UrlPresetsForm';

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

@@ -13,7 +13,7 @@ import ExternalLink from '../../../../common/components/external-link/ExternalLi
 import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
 import { handleLinks } from '../../../../common/utils/linkUtils';
 import { validateUrlPresetPath } from '../../../../common/utils/urlPresets';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './FeatureSettings.module.scss';
 

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

@@ -7,7 +7,7 @@ import { customFieldLabelToKey, isAlphanumericWithSpace } from 'ontime-utils';
 import { maybeAxiosError } from '../../../../../common/api/utils';
 import SwatchSelect from '../../../../../common/components/input/colour-input/SwatchSelect';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
-import * as Panel from '../../PanelUtils';
+import * as Panel from '../../../panel-utils/PanelUtils';
 
 import style from '../FeatureSettings.module.scss';
 

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

@@ -7,7 +7,7 @@ import { deleteCustomField, editCustomField, postCustomField } from '../../../..
 import ExternalLink from '../../../../../common/components/external-link/ExternalLink';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
 import { customFieldsDocsUrl } from '../../../../../externals';
-import * as Panel from '../../PanelUtils';
+import * as Panel from '../../../panel-utils/PanelUtils';
 
 import CustomFieldEntry from './CustomFieldEntry';
 import CustomFieldForm from './CustomFieldForm';

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

@@ -1,7 +1,7 @@
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
+import * as Panel from '../../panel-utils/PanelUtils';
 import EditorSettingsForm from '../interface-panel/EditorSettingsForm';
-import * as Panel from '../PanelUtils';
 
 import GeneralPanelForm from './GeneralPanelForm';
 import ViewSettingsForm from './ViewSettingsForm';

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

@@ -7,7 +7,7 @@ import { postSettings } from '../../../../common/api/settings';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import useSettings from '../../../../common/hooks-query/useSettings';
 import { isOnlyNumbers } from '../../../../common/utils/regex';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import GeneralPinInput from './GeneralPinInput';
 
@@ -154,7 +154,7 @@ export default function GeneralPanelForm() {
                 <option value='pt'>Portuguese</option>
                 <option value='es'>Spanish</option>
                 <option value='sv'>Swedish</option>
-		<option value='pl'>Polish</option>
+                <option value='pl'>Polish</option>
               </Select>
             </Panel.ListItem>
           </Panel.ListGroup>

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

@@ -9,7 +9,7 @@ import ExternalLink from '../../../../common/components/external-link/ExternalLi
 import { PopoverPickerRHF } from '../../../../common/components/input/popover-picker/PopoverPicker';
 import useInfo from '../../../../common/hooks-query/useInfo';
 import useViewSettings from '../../../../common/hooks-query/useViewSettings';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './GeneralPanel.module.scss';
 
@@ -139,7 +139,7 @@ export default function ViewSettingsForm() {
             <Panel.ListItem>
               <Panel.Field
                 title='End message'
-                description='Message to show on negative timers if not frozen. If not provided, timer will continue'
+                description='Message to show in negative timers if not frozen. If not provided, timer will continue'
               />
               <Input
                 size='sm'

apps/client/src/features/app-settings/panel/integrations-panel/HttpIntegrations.tsx

@@ -9,7 +9,7 @@ import { maybeAxiosError } from '../../../../common/api/utils';
 import { useHttpSettings, usePostHttpSettings } from '../../../../common/hooks-query/useHttpSettings';
 import { isKeyEscape } from '../../../../common/utils/keyEvent';
 import { startsWithHttp } from '../../../../common/utils/regex';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import { cycles } from './integrationUtils';
 

apps/client/src/features/app-settings/panel/integrations-panel/IntegrationsPanel.tsx

@@ -3,7 +3,7 @@ import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react';
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import HttpIntegrations from './HttpIntegrations';
 import OscIntegrations from './OscIntegrations';

apps/client/src/features/app-settings/panel/integrations-panel/OscIntegrations.tsx

@@ -10,7 +10,7 @@ import { maybeAxiosError } from '../../../../common/api/utils';
 import useOscSettings, { useOscSettingsMutation } from '../../../../common/hooks-query/useOscSettings';
 import { isKeyEscape } from '../../../../common/utils/keyEvent';
 import { isASCII, isASCIIorEmpty, isIPAddress, isOnlyNumbers, startsWithSlash } from '../../../../common/utils/regex';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import { cycles } from './integrationUtils';
 

apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx

@@ -4,7 +4,7 @@ import { parseUserTime } from 'ontime-utils';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
 import { editorSettingsDefaults, useEditorSettings } from '../../../../common/stores/editorSettings';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 export default function EditorSettingsForm() {
   const {

apps/client/src/features/app-settings/panel/interface-panel/InterfacePanel.tsx

@@ -1,6 +1,6 @@
 import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react';
 
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import EditorSettingsForm from './EditorSettingsForm';
 

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

@@ -4,7 +4,7 @@ import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import { handleLinks } from '../../../../common/utils/linkUtils';
 import Log from '../../../log/Log';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './NetworkLogExport.module.scss';
 

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

@@ -1,7 +1,7 @@
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
+import * as Panel from '../../panel-utils/PanelUtils';
 import ClientControlPanel from '../client-control-panel/ClientControlPanel';
-import * as Panel from '../PanelUtils';
 
 import InfoNif from './NetworkInterfaces';
 import LogExport from './NetworkLogExport';

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

@@ -6,7 +6,7 @@ import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { uploadProjectFile } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
 import { validateProjectFile } from '../../../../common/utils/uploadUtils';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import ProjectCreateForm from './ProjectCreateForm';
 import ProjectList from './ProjectList';

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

@@ -6,7 +6,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { PROJECT_LIST } from '../../../../common/api/constants';
 import { createProject } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './ProjectPanel.module.scss';
 

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

@@ -6,7 +6,7 @@ import { type ProjectData } from 'ontime-types';
 import { postProjectData } from '../../../../common/api/project';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import useProjectData from '../../../../common/hooks-query/useProjectData';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './ProjectPanel.module.scss';
 
@@ -81,7 +81,7 @@ export default function ProjectData() {
               variant='ontime-filled'
               size='sm'
               maxLength={50}
-              placeholder='Your project name'
+              placeholder='Project title is shown in production views'
               autoComplete='off'
               {...register('title')}
             />

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

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 
 import { useProjectList } from '../../../../common/hooks-query/useProjectList';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import ProjectListItem, { EditMode } from './ProjectListItem';
 

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

@@ -12,7 +12,7 @@ import {
 } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
 import { cx } from '../../../../common/utils/styleUtils';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import ProjectForm, { ProjectFormValues } from './ProjectForm';
 import ProjectMergeForm from './ProjectMergeForm';

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

@@ -7,7 +7,7 @@ import { PROJECT_DATA } from '../../../../common/api/constants';
 import { getDb, patchData } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import { cx } from '../../../../common/utils/styleUtils';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import { makeProjectPatch } from './project.utils';
 

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

@@ -1,6 +1,6 @@
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import ManageProjects from './ManageProjects';
 import ProjectData from './ProjectData';

apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx

@@ -12,7 +12,7 @@ import {
 
 import { isLocalhost } from '../../../../common/api/constants';
 import useElectronEvent from '../../../../common/hooks/useElectronEvent';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 export default function ShutdownPanel() {
   const { isElectron, sendToElectron } = useElectronEvent();

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

@@ -7,7 +7,7 @@ import { getWorksheetNames } from '../../../../common/api/sheets';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import { openLink } from '../../../../common/utils/linkUtils';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import useGoogleSheet from './useGoogleSheet';
 import { useSheetStore } from './useSheetStore';

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

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Button } from '@chakra-ui/react';
 import { CustomFields, OntimeRundown } from 'ontime-types';
 
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import PreviewSpreadsheet from './preview/PreviewRundown';
 import useGoogleSheet from './useGoogleSheet';

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

@@ -12,7 +12,7 @@ import {
 import { getWorksheetNames } from '../../../../common/api/sheets';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import { validateExcelImport } from '../../../../common/utils/uploadUtils';
-import * as Panel from '../PanelUtils';
+import * as Panel from '../../panel-utils/PanelUtils';
 
 import ImportMapForm from './import-map/ImportMapForm';
 import GSheetInfo from './GSheetInfo';

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

@@ -5,7 +5,7 @@ import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { ImportMap, isAlphanumericWithSpace } from 'ontime-utils';
 
-import * as Panel from '../../PanelUtils';
+import * as Panel from '../../../panel-utils/PanelUtils';
 import useGoogleSheet from '../useGoogleSheet';
 import { useSheetStore } from '../useSheetStore';
 

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

@@ -5,7 +5,7 @@ import { millisToString } from 'ontime-utils';
 
 import Tag from '../../../../../common/components/tag/Tag';
 import { getAccessibleColour } from '../../../../../common/utils/styleUtils';
-import * as Panel from '../../PanelUtils';
+import * as Panel from '../../../panel-utils/PanelUtils';
 
 import style from './PreviewRundown.module.scss';