diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
index 63c242176..5097c5823 100644
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -1,49 +1,38 @@
import { TextInput, Group, Button } from '@mantine/core';
-import { useState } from 'react';
+import { useForm } from '@mantine/form';
import { useConfig } from '../../tools/state';
export default function TitleChanger() {
const { config, loadConfig, setConfig, getConfigs } = useConfig();
- const [customTitle, setCustomTitle] = useState(config.title);
- const [customLogo, setCustomLogo] = useState(config.logo);
- const [customFavicon, setCustomFavicon] = useState(config.favicon);
- const saveChanges = () => {
+ const form = useForm({
+ initialValues: {
+ title: config.settings.title,
+ logo: config.settings.logo,
+ favicon: config.settings.favicon,
+ },
+ });
+
+ const saveChanges = (values: { title: string; logo: string; favicon: string }) => {
setConfig({
...config,
- title: customTitle || "Homarr 🦞",
- logo: customLogo || "/imgs/logo.png",
- favicon: customFavicon || "/favicon.svg",
+ settings: {
+ ...config.settings,
+ title: values.title,
+ logo: values.logo,
+ favicon: values.favicon,
+ },
});
- }
+ };
return (
-
- setCustomTitle(event.currentTarget.value)}
- />
- setCustomLogo(event.currentTarget.value)}
- />
- setCustomFavicon(event.currentTarget.value)}
- />
-
-
+
);
}
diff --git a/src/components/layout/HeaderConfig.tsx b/src/components/layout/HeaderConfig.tsx
index 277dc73bb..ed5a7804f 100644
--- a/src/components/layout/HeaderConfig.tsx
+++ b/src/components/layout/HeaderConfig.tsx
@@ -7,8 +7,8 @@ export function HeaderConfig(props: any) {
return (
- {config.title ?? "Homarr 🦞"}
-
+ {config.settings.title || 'Homarr 🦞'}
+
);
}
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 8b82b4a74..d9ccbccb7 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -2,6 +2,7 @@ import { AppShell, createStyles } from '@mantine/core';
import { Header } from './Header';
import { Footer } from './Footer';
import Aside from './Aside';
+import { HeaderConfig } from './HeaderConfig';
const useStyles = createStyles((theme) => ({
main: {},
@@ -10,11 +11,8 @@ const useStyles = createStyles((theme) => ({
export default function Layout({ children, style }: any) {
const { classes, cx } = useStyles();
return (
- }
- header={}
- footer={}
- >
+ } header={} footer={}>
+
- {/* Added the .replace to remove emojis because they get screwed up by the gradient */}
- {config.title.replace(/([\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '') ?? "Homarr"}
+ {config.settings.title || 'Homarr'}
diff --git a/src/tools/state.tsx b/src/tools/state.tsx
index e0b108591..ace597ab3 100644
--- a/src/tools/state.tsx
+++ b/src/tools/state.tsx
@@ -15,17 +15,17 @@ type configContextType = {
const configContext = createContext({
config: {
name: 'default',
- title: 'Homarr 🦞',
- logo: '/imgs/logo.png',
- favicon: '/favicon.svg',
services: [],
settings: {
searchUrl: 'https://google.com/search?q=',
+ title: '',
+ logo: '',
+ favicon: '',
},
modules: {},
},
- setConfig: () => { },
- loadConfig: async (name: string) => { },
+ setConfig: () => {},
+ loadConfig: async (name: string) => {},
getConfigs: async () => [],
});
@@ -44,12 +44,12 @@ type Props = {
export function ConfigProvider({ children }: Props) {
const [config, setConfigInternal] = useState({
name: 'default',
- title: 'Homarr 🦞',
- logo: '/imgs/logo.png',
- favicon: '/favicon.svg',
services: [],
settings: {
searchUrl: 'https://www.google.com/search?q=',
+ title: '',
+ logo: '',
+ favicon: '',
},
modules: {},
});
diff --git a/src/tools/types.ts b/src/tools/types.ts
index 5820ed3b5..2d0a63d0a 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -2,13 +2,13 @@ import { OptionValues } from '../components/modules/modules';
export interface Settings {
searchUrl: string;
+ title: string;
+ logo: string;
+ favicon: string;
}
export interface Config {
name: string;
- title: string;
- logo: string;
- favicon: string;
services: serviceItem[];
settings: Settings;
modules: {