refactor: restructure settings

refactor: migrate react components

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

@@ -0,0 +1,42 @@
+import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
+import { isOntimeCloud } from '../../../../externals';
+import type { PanelBaseProps } from '../../panel-list/PanelList';
+import * as Panel from '../../panel-utils/PanelUtils';
+import InfoNif from '../network-panel/NetworkInterfaces';
+
+import GenerateLinkFormExport from './GenerateLinkFormExport';
+import ReportSettings from './ReportSettings';
+import UrlPresetsForm from './UrlPresetsForm';
+
+export default function FeaturePanel({ location }: PanelBaseProps) {
+  const presetsRef = useScrollIntoView<HTMLDivElement>('presets', location);
+  const linkRef = useScrollIntoView<HTMLDivElement>('link', location);
+  const reportRef = useScrollIntoView<HTMLDivElement>('report', location);
+
+  return (
+    <>
+      <Panel.Header>Sharing and reporting</Panel.Header>
+      <div ref={presetsRef}>
+        <UrlPresetsForm />
+      </div>
+      <div ref={linkRef}>
+        <Panel.Section>
+          <Panel.Card>
+            <Panel.SubHeader>Share Ontime Link</Panel.SubHeader>
+            <Panel.Divider />
+            {!isOntimeCloud && (
+              <>
+                <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
+                <InfoNif />
+              </>
+            )}
+            <GenerateLinkFormExport />
+          </Panel.Card>
+        </Panel.Section>
+      </div>
+      <div ref={reportRef}>
+        <ReportSettings />
+      </div>
+    </>
+  );
+}