♻️ Improved code structure for layout, remove most settings components

src/components/layout/Common/Logo.tsx

@@ -0,0 +1,38 @@
+import { Group, Image, Text } from '@mantine/core';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
+
+import { useConfigContext } from '../../../config/provider';
+import { usePrimaryGradient } from './useGradient';
+
+interface LogoProps {
+  size?: 'md' | 'xs';
+  withoutText?: boolean;
+}
+
+export function Logo({ size = 'md', withoutText = false }: LogoProps) {
+  const { config } = useConfigContext();
+  const primaryGradient = usePrimaryGradient();
+  const largerThanMd = useScreenLargerThan('md');
+
+  return (
+    <Group spacing={size === 'md' ? 'xs' : 4} noWrap>
+      <Image
+        width={size === 'md' ? 50 : 12}
+        src={config?.settings.customization.logoImageUrl || '/imgs/logo/logo-color.svg'}
+        alt="Homarr Logo"
+        className="dashboard-header-logo-image"
+      />
+      {withoutText || !largerThanMd ? null : (
+        <Text
+          size={size === 'md' ? 22 : 10}
+          weight="bold"
+          variant="gradient"
+          className="dashboard-header-logo-text"
+          gradient={primaryGradient}
+        >
+          {config?.settings.customization.pageTitle || 'Homarr'}
+        </Text>
+      )}
+    </Group>
+  );
+}