feat: update icon & add manifest

src/app/layout.tsx

@@ -23,6 +23,14 @@ const geistMono = localFont({
 export const metadata: Metadata = {
   title: "Radar",
   description: "Dashboard for AlertManager Prometheus",
+  icons: [
+    { rel: "shortcut icon", type: "image/x-icon", url: "/favicon.ico", },
+    { rel: "icon", type: "image/png", sizes: "96x96", url: "/favicon-96x96.png", },
+    { rel: "icon", type: "image/png", sizes: "192x192", url: "/web-app-manifest-192x192.png", },
+    { rel: "icon", type: "image/png", sizes: "512x512", url: "/web-app-manifest-512x512.png", },
+    { rel: "icon", type: "image/svg+xml", sizes: "96x96", url: "/favicon.svg", },
+    { rel: "apple-touch-icon", sizes: "180x180", url: "/apple-touch-icon.png", },
+  ],
 };
 
 export default async function RootLayout({

src/app/manifest.ts

@@ -0,0 +1,18 @@
+import { MetadataRoute } from 'next'
+
+export default async function manifest(): Promise<MetadataRoute.Manifest> {
+  return {
+    name: 'Radar',
+    short_name: 'Radar',
+    description: 'Dashboard for AlertManager Prometheus',
+    start_url: '/',
+    display: 'standalone',
+    icons: [
+      {
+        src: '/app-icon-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      }
+    ]
+  }
+}

src/components/layout/app-layout.tsx

@@ -1,9 +1,11 @@
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "./app-sidebar";
+import { AppThemeColor } from "./app-theme-color";
 
 export function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider>
+      <AppThemeColor />
       <AppSidebar />
       <main className="grow relative">
         <div className="absolute inset-0">

src/components/layout/app-theme-color.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { useTheme } from "next-themes"
+import { useEffect } from "react"
+
+export function AppThemeColor() {
+  const { resolvedTheme } = useTheme()
+
+  useEffect(() => {
+    let themeColorMeta = document.querySelector(
+      'meta[name="theme-color"]',
+    ) as HTMLMetaElement
+
+    if (!themeColorMeta) {
+      themeColorMeta = document.createElement('meta')
+      themeColorMeta.name = 'theme-color'
+      document.head.appendChild(themeColorMeta)
+    }
+
+    themeColorMeta.content = resolvedTheme === 'dark' ? '#171717' : '#EEF2F8'
+  }, [resolvedTheme])
+
+  return null
+}