💄 apple standalone page improvements

public/site.webmanifest

@@ -0,0 +1,29 @@
+{
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/imgs/pwa/manifest/manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/imgs/pwa/manifest/manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/imgs/pwa/manifest/manifest-icon-512.maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/imgs/pwa/manifest/manifest-icon-512.maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

src/components/layout/Layout.tsx

@@ -1,14 +1,22 @@
 import { AppShell, createStyles } from '@mantine/core';
-import { Header } from './Header';
+import { Header } from './header/Header';
 import { Footer } from './Footer';
 import Aside from './Aside';
 import Navbar from './Navbar';
-import { HeaderConfig } from './HeaderConfig';
+import { HeaderConfig } from './header/HeaderConfig';
 import { Background } from './Background';
 import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   main: {},
+  appShell: {
+    // eslint-disable-next-line no-useless-computed-key
+    ['@media screen and (display-mode: standalone)']: {
+      '&': {
+        paddingTop: '88px !important',
+      },
+    },
+  },
 }));
 
 export default function Layout({ children, style }: any) {

src/components/layout/Logo.tsx

@@ -12,7 +12,7 @@ export function Logo({ style, withoutText }: any) {
     <Group spacing="xs">
       <Image
         width={50}
-        src={config.settings.logo || '/imgs/logo.png'}
+        src={config.settings.logo || '/imgs/logo/logo.png'}
         style={{
           position: 'relative',
         }}

src/components/layout/header/Header.tsx

@@ -1,13 +1,11 @@
 import { Box, createStyles, Group, Header as Head, useMantineColorScheme } from '@mantine/core';
-import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
+import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 
-import DockerMenuButton from '../../modules/docker/DockerModule';
-import SearchBar from '../../modules/search/SearchModule';
-import { SettingsMenuButton } from '../Settings/SettingsMenu';
-import { Logo } from './Logo';
-import { useConfig } from '../../tools/state';
-
-const HEADER_HEIGHT = 60;
+import DockerMenuButton from '../../../modules/docker/DockerModule';
+import SearchBar from '../../../modules/search/SearchModule';
+import { SettingsMenuButton } from '../../Settings/SettingsMenu';
+import { Logo } from '../Logo';
+import { useConfig } from '../../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   hide: {
@@ -23,7 +21,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export function Header(props: any) {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
   const { config } = useConfig();
   const { colorScheme } = useMantineColorScheme();
 

src/components/layout/header/HeaderConfig.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-invalid-html-attribute */
 import React from 'react';
 import Head from 'next/head';
-import { useConfig } from '../../tools/state';
+import { useConfig } from '../../../tools/state';
+import { SafariStatusBarStyle } from './safariStatusBarStyle';
 
 export function HeaderConfig(props: any) {
   const { config } = useConfig();
@@ -9,15 +10,19 @@ export function HeaderConfig(props: any) {
   return (
     <Head>
       <title>{config.settings.title || 'Homarr 🦞'}</title>
-      <link rel="shortcut icon" href={config.settings.favicon || '/favicon.svg'} />
+      <link rel="shortcut icon" href={config.settings.favicon || '/imgs/favicon/favicon.svg'} />
+
+      <link rel="manifest" href="/site.webmanifest" />
 
       {/* configure apple splash screen & touch icon */}
-      <link rel="apple-touch-icon" href={config.settings.favicon || '/favicon-squared.png'} />
       <link
-        rel="apple-touch-startup-image"
-        href={config.settings.favicon || '/favicon-squared.png'}
+        rel="apple-touch-icon"
+        href={config.settings.favicon || '/imgs/favicon/favicon-squared.png'}
       />
       <meta name="apple-mobile-web-app-title" content={config.settings.title || 'Homarr'} />
+
+      <SafariStatusBarStyle />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
     </Head>
   );
 }

src/components/layout/header/safariStatusBarStyle.tsx

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