Feature: integrate app icon in UI and email alerts

client/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="SkyWatch - Infrastructure monitoring and alerting system"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>SkyWatch</title><script defer="defer" src="/static/js/main.0a56784a.js"></script><link href="/static/css/main.b6a66622.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="/app-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="SkyWatch - Infrastructure monitoring and alerting system"/><link rel="apple-touch-icon" href="/app-icon.png"/><link rel="manifest" href="/manifest.json"/><title>SkyWatch</title><script defer="defer" src="/static/js/main.0a56784a.js"></script><link href="/static/css/main.b6a66622.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

client/build/manifest.json

@@ -3,17 +3,12 @@
   "name": "SkyWatch",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
+      "src": "app-icon.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "app-icon.png",
       "type": "image/png",
       "sizes": "512x512"
     }

client/public/index.html

@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/app-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="SkyWatch - Infrastructure monitoring and alerting system"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/app-icon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

client/public/manifest.json

@@ -3,17 +3,12 @@
   "name": "SkyWatch",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
+      "src": "app-icon.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "app-icon.png",
       "type": "image/png",
       "sizes": "512x512"
     }

server/notificationService.js

@@ -1,5 +1,7 @@
 const nodemailer = require('nodemailer');
 const axios = require('axios');
+const path = require('path');
+const fs = require('fs');
 require('dotenv').config();
 
 class NotificationService {
@@ -128,8 +130,16 @@ class NotificationService {
     }
 
     try {
+      const logoPath = path.join(__dirname, '..', 'client', 'public', 'app-icon.png');
+      const hasLogo = fs.existsSync(logoPath);
+      const logoCid = 'skywatch-app-icon';
+      const logoBlock = hasLogo
+        ? `<div style="margin-bottom: 12px;"><img src="cid:${logoCid}" alt="SkyWatch" style="height: 40px; width: 40px; border-radius: 8px;" /></div>`
+        : '';
+
       let htmlContent = `
         <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
+          ${logoBlock}
           <h2 style="color: ${type === 'started' ? '#d32f2f' : '#388e3c'};">${type === 'started' ? '🔴 Alert' : '🟢 Recovered'}</h2>
           <p><strong>Resource:</strong> ${resource.name}</p>
           <p><strong>Status:</strong> ${type === 'started' ? 'DOWN' : 'UP'}</p>
@@ -172,6 +182,9 @@ class NotificationService {
         subject: `Alert: ${resource.name} is ${type === 'started' ? 'DOWN' : 'UP'}`,
         text: message,
         html: htmlContent,
+        attachments: hasLogo
+          ? [{ filename: 'app-icon.png', path: logoPath, cid: logoCid }]
+          : [],
       });
     } catch (error) {
       console.error('Email error:', error.message);