feat: improve design layout selector

src/components/layout/header/Meta/Head.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/no-invalid-html-attribute */
+import React from 'react';
+import NextHead from 'next/head';
+import { SafariStatusBarStyle } from './SafariStatusBarStyle';
+import { useConfigContext } from '../../../../config/provider';
+
+export function Head() {
+  const { config } = useConfigContext();
+
+  return (
+    <NextHead>
+      <title>{config?.settings.customization.metaTitle || 'Homarr 🦞'}</title>
+      <link
+        rel="shortcut icon"
+        href={config?.settings.customization.faviconUrl || '/imgs/favicon/favicon.svg'}
+      />
+
+      <link rel="manifest" href="/site.webmanifest" />
+
+      {/* configure apple splash screen & touch icon */}
+      <link
+        rel="apple-touch-icon"
+        href={config?.settings.customization.faviconUrl || '/imgs/favicon/favicon-squared.png'}
+      />
+      <meta
+        name="apple-mobile-web-app-title"
+        content={config?.settings.customization.metaTitle || 'Homarr'}
+      />
+
+      <SafariStatusBarStyle />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+    </NextHead>
+  );
+}

src/components/layout/header/Meta/SafariStatusBarStyle.tsx

@@ -0,0 +1,12 @@
+import { useMantineTheme } from '@mantine/core';
+
+export const SafariStatusBarStyle = () => {
+  const { colorScheme } = useMantineTheme();
+  const isDark = colorScheme === 'dark';
+  return (
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content={isDark ? 'white-translucent' : 'black-translucent'}
+    />
+  );
+};