✨ Custom column counts for gridstack #613 #660

src/components/Settings/Customization/Meta/BackgroundChanger.tsx

@@ -4,15 +4,13 @@ import { ChangeEventHandler, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 
-interface BackgroundChangerProps {
-  defaultValue: string | undefined;
-}
-
-export const BackgroundChanger = ({ defaultValue }: BackgroundChangerProps) => {
+export const BackgroundChanger = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
   const updateConfig = useConfigStore((x) => x.updateConfig);
-  const { name: configName } = useConfigContext();
-  const [backgroundImageUrl, setBackgroundImageUrl] = useState(defaultValue);
+  const { config, name: configName } = useConfigContext();
+  const [backgroundImageUrl, setBackgroundImageUrl] = useState(
+    config?.settings.customization.backgroundImageUrl
+  );
 
   if (!configName) return null;
 

src/components/Settings/Customization/Meta/FaviconChanger.tsx

@@ -4,21 +4,19 @@ import { ChangeEventHandler, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 
-interface FaviconChangerProps {
-  defaultValue: string | undefined;
-}
-
-export const FaviconChanger = ({ defaultValue }: FaviconChangerProps) => {
+export const FaviconChanger = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
   const updateConfig = useConfigStore((x) => x.updateConfig);
-  const { name: configName } = useConfigContext();
-  const [faviconUrl, setFaviconUrl] = useState(defaultValue);
+  const { config, name: configName } = useConfigContext();
+  const [faviconUrl, setFaviconUrl] = useState(
+    config?.settings.customization.faviconUrl ?? '/imgs/favicon/favicon-squared.png'
+  );
 
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
     const { value } = ev.currentTarget;
-    const faviconUrl = value.trim().length === 0 ? undefined : value;
+    const faviconUrl = value.trim();
     setFaviconUrl(faviconUrl);
     updateConfig(configName, (prev) => ({
       ...prev,
@@ -35,6 +33,7 @@ export const FaviconChanger = ({ defaultValue }: FaviconChangerProps) => {
   return (
     <TextInput
       label={t('favicon.label')}
+      description={t('favicon.description')}
       placeholder="/imgs/favicon/favicon.svg"
       value={faviconUrl}
       onChange={handleChange}

src/components/Settings/Customization/Meta/LogoImageChanger.tsx

@@ -4,21 +4,17 @@ import { ChangeEventHandler, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 
-interface LogoImageChangerProps {
-  defaultValue: string | undefined;
-}
-
-export const LogoImageChanger = ({ defaultValue }: LogoImageChangerProps) => {
+export const LogoImageChanger = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
   const updateConfig = useConfigStore((x) => x.updateConfig);
-  const { name: configName } = useConfigContext();
-  const [logoImageSrc, setLogoImageSrc] = useState(defaultValue);
+  const { config, name: configName } = useConfigContext();
+  const [logoImageSrc, setLogoImageSrc] = useState(config?.settings.customization.logoImageUrl ?? '/imgs/logo/logo.png');
 
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
     const { value } = ev.currentTarget;
-    const logoImageSrc = value.trim().length === 0 ? undefined : value;
+    const logoImageSrc = value.trim();
     setLogoImageSrc(logoImageSrc);
     updateConfig(configName, (prev) => ({
       ...prev,
@@ -35,9 +31,11 @@ export const LogoImageChanger = ({ defaultValue }: LogoImageChangerProps) => {
   return (
     <TextInput
       label={t('logo.label')}
+      description={t('logo.description')}
       placeholder="/imgs/logo/logo.png"
       value={logoImageSrc}
       onChange={handleChange}
+      mb="sm"
     />
   );
 };

src/components/Settings/Customization/Meta/MetaTitleChanger.tsx

@@ -4,22 +4,17 @@ import { ChangeEventHandler, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 
-interface MetaTitleChangerProps {
-  defaultValue: string | undefined;
-}
-
-// TODO: change to pageTitle
-export const MetaTitleChanger = ({ defaultValue }: MetaTitleChangerProps) => {
+export const BrowserTabTitle = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
   const updateConfig = useConfigStore((x) => x.updateConfig);
-  const { name: configName } = useConfigContext();
-  const [metaTitle, setMetaTitle] = useState(defaultValue);
+  const { config, name: configName } = useConfigContext();
+  const [metaTitle, setMetaTitle] = useState(config?.settings.customization.metaTitle ?? '');
 
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
     const { value } = ev.currentTarget;
-    const metaTitle = value.trim().length === 0 ? undefined : value;
+    const metaTitle = value.trim();
     setMetaTitle(metaTitle);
     updateConfig(configName, (prev) => ({
       ...prev,
@@ -36,9 +31,11 @@ export const MetaTitleChanger = ({ defaultValue }: MetaTitleChangerProps) => {
   return (
     <TextInput
       label={t('metaTitle.label')}
+      description={t('metaTitle.description')}
       placeholder="homarr - the best dashboard"
       value={metaTitle}
       onChange={handleChange}
+      mb="sm"
     />
   );
 };

src/components/Settings/Customization/Meta/PageTitleChanger.tsx

@@ -4,22 +4,17 @@ import { ChangeEventHandler, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 
-interface PageTitleChangerProps {
-  defaultValue: string | undefined;
-}
-
-// TODO: change to dashboard title
-export const PageTitleChanger = ({ defaultValue }: PageTitleChangerProps) => {
+export const DashboardTitleChanger = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
   const updateConfig = useConfigStore((x) => x.updateConfig);
-  const { name: configName } = useConfigContext();
-  const [pageTitle, setPageTitle] = useState(defaultValue);
+  const { config, name: configName } = useConfigContext();
+  const [pageTitle, setPageTitle] = useState(config?.settings.customization.pageTitle ?? '');
 
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
     const { value } = ev.currentTarget;
-    const pageTitle = value.trim().length === 0 ? undefined : value;
+    const pageTitle = value.trim();
     setPageTitle(pageTitle);
     updateConfig(configName, (prev) => ({
       ...prev,
@@ -36,9 +31,11 @@ export const PageTitleChanger = ({ defaultValue }: PageTitleChangerProps) => {
   return (
     <TextInput
       label={t('pageTitle.label')}
+      description={t('pageTitle.description')}
       placeholder="homarr"
       value={pageTitle}
       onChange={handleChange}
+      mb="sm"
     />
   );
 };