first commit

common/resources/client/admin/appearance/sections/general-section.tsx

@@ -0,0 +1,94 @@
+import {appearanceState, useAppearanceStore} from '../appearance-store';
+import {FormImageSelector} from '@common/ui/images/image-selector';
+import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
+import {Trans} from '@common/i18n/trans';
+import {Fragment, ReactNode} from 'react';
+import {Settings} from '../../../core/settings/settings';
+
+export function GeneralSection() {
+  return (
+    <Fragment>
+      <BrandingImageSelector
+        label={<Trans message="Favicon" />}
+        description={
+          <Trans message="This will generate different size favicons. Image should be at least 512x512 in size." />
+        }
+        type="favicon"
+      />
+      <BrandingImageSelector
+        label={<Trans message="Light logo" />}
+        description={<Trans message="Will be used on dark backgrounds." />}
+        type="logo_light"
+      />
+      <BrandingImageSelector
+        label={<Trans message="Dark logo" />}
+        description={
+          <Trans message="Will be used on light backgrounds. Will default to light logo if left empty." />
+        }
+        type="logo_dark"
+      />
+      <BrandingImageSelector
+        label={<Trans message="Mobile light logo" />}
+        description={
+          <Trans message="Will be used on light backgrounds on mobile. Will default to desktop logo if left empty." />
+        }
+        type="logo_light_mobile"
+      />
+      <BrandingImageSelector
+        label={<Trans message="Mobile dark logo" />}
+        description={
+          <Trans message="Will be used on dark backgrounds on mobile. Will default to desktop if left empty." />
+        }
+        type="logo_dark_mobile"
+      />
+      <SiteNameTextField />
+      <SiteDescriptionTextArea />
+    </Fragment>
+  );
+}
+
+interface ImageSelectorProps {
+  label: ReactNode;
+  description: ReactNode;
+  type: keyof Settings['branding'];
+}
+function BrandingImageSelector({label, description, type}: ImageSelectorProps) {
+  const defaultValue = useAppearanceStore(
+    s => s.defaults?.settings.branding[type]
+  );
+  return (
+    <FormImageSelector
+      name={`settings.branding.${type}`}
+      className="border-b pb-30 mb-30"
+      label={label}
+      description={description}
+      diskPrefix="branding_media"
+      defaultValue={defaultValue}
+      onChange={() => {
+        appearanceState().preview.setHighlight('[data-logo="navbar"]');
+      }}
+    />
+  );
+}
+function SiteNameTextField() {
+  return (
+    <FormTextField
+      name="appearance.env.app_name"
+      required
+      className="mt-20"
+      label={<Trans message="Site name" />}
+    />
+  );
+}
+
+function SiteDescriptionTextArea() {
+  return (
+    <FormTextField
+      name="settings.branding.site_description"
+      className="mt-20"
+      inputElementType="textarea"
+      rows={4}
+      label={<Trans message="Site description" />}
+    />
+  );
+}