feat: improve design layout selector

src/components/layout/header/Actions/RunToolAction/ToolsMenu.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Menu, Text } from '@mantine/core';
 import { IconAxe } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
-import DockerMenuButton from '../../../modules/docker/DockerModule';
+import DockerMenuButton from '../../../../../modules/docker/DockerModule';
 
 export const ToolsMenu = () => {
   const { t } = useTranslation('layout/tools');

src/components/layout/header/Header.tsx

@@ -1,14 +1,12 @@
-import { Box, createStyles, Group, Header as MantineHeader, useMantineTheme } from '@mantine/core';
-import { useViewportSize } from '@mantine/hooks';
+import { Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 
-import DockerMenuButton from '../../../modules/docker/DockerModule';
-import { Search } from './Search';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
-import { SettingsMenu } from './SettingsMenu';
-import { ToolsMenu } from './ToolsMenu';
 import { AddElementAction } from './Actions/AddElementAction/AddElementAction';
+import { ToolsMenu } from './Actions/RunToolAction/ToolsMenu';
+import { Search } from './Search';
+import { SettingsMenu } from './SettingsMenu';
 
 export const HeaderHeight = 64;
 

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'}
+    />
+  );
+};

src/components/layout/header/Search.tsx

@@ -18,7 +18,7 @@ import { useTranslation } from 'next-i18next';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import SmallServiceItem from '../../AppShelf/SmallServiceItem';
 import Tip from '../Tip';
-import { searchUrls } from '../../Settings/Common/SearchEngineSelector';
+import { searchUrls } from '../../Settings/Common/SearchEngine/SearchEngineSelector';
 import { useConfigContext } from '../../../config/provider';
 import { OverseerrMediaDisplay } from '../../../modules/common';
 import { IModule } from '../../../modules/ModuleTypes';