Merge pull request 'fix build env' (#1) from zelda.fix-env-build into main

Reviewed-on: #1

.env

@@ -1 +1 @@
-API_KEY = '@yQveRWre@b(!_9HmL'
+VITE_API_KEY = '@yQveRWre@b(!_9HmL'

.env.example

@@ -0,0 +1 @@
+VITE_API_KEY = ''

.gitignore

@@ -13,6 +13,7 @@ dist-electron
 release
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*

electron-builder.json5

@@ -1,43 +1,34 @@
 // @see - https://www.electron.build/configuration/configuration
 {
-  "$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json",
+    $schema: 'https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json',
-  "appId": "YourAppID",
+    appId: 'b1730d2e-6f3c-4f92-9f4a-9f8e918b40d2',
-  "asar": true,
+    asar: true,
-  "productName": "YourAppName",
+    productName: 'Zulip messages',
-  "directories": {
+    directories: {
-    "output": "release/${version}"
+        output: 'release/${version}',
-  },
+    },
-  "files": [
+    files: ['dist', 'dist-electron'],
-    "dist",
+    mac: {
-    "dist-electron"
+        target: ['dmg'],
-  ],
+        artifactName: '${productName}-Mac-${version}-Installer.${ext}',
-  "mac": {
+    },
-    "target": [
+    win: {
-      "dmg"
+        target: [
-    ],
+            {
-    "artifactName": "${productName}-Mac-${version}-Installer.${ext}"
+                target: 'nsis',
-  },
+                arch: ['x64'],
-  "win": {
+            },
-    "target": [
+        ],
-      {
+        artifactName: '${productName}-Windows-${version}-Setup.${ext}',
-        "target": "nsis",
+    },
-        "arch": [
+    nsis: {
-          "x64"
+        oneClick: false,
-        ]
+        perMachine: false,
-      }
+        allowToChangeInstallationDirectory: true,
-    ],
+        deleteAppDataOnUninstall: false,
-    "artifactName": "${productName}-Windows-${version}-Setup.${ext}"
+    },
-  },
+    linux: {
-  "nsis": {
+        target: ['AppImage'],
-    "oneClick": false,
+        artifactName: '${productName}-Linux-${version}.${ext}',
-    "perMachine": false,
+    },
-    "allowToChangeInstallationDirectory": true,
-    "deleteAppDataOnUninstall": false
-  },
-  "linux": {
-    "target": [
-      "AppImage"
-    ],
-    "artifactName": "${productName}-Linux-${version}.${ext}"
-  }
 }

electron/main.ts

@@ -1,17 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { config } from "dotenv";
+import { app, BrowserWindow, ipcMain, Menu, Notification, screen } from 'electron';
-import { app, BrowserWindow, ipcMain, Notification, screen } from "electron";
+import path from 'node:path';
-import path from "node:path";
+import { fileURLToPath } from 'node:url';
-import { fileURLToPath } from "node:url";
+import { io } from 'socket.io-client';
-import { io } from "socket.io-client";
+import { addEmail, deleteEmail, fetchEmails, fetchMessages } from '../src/apis';
-import { WebSocket } from "ws";
+import { createMailWindow } from './windows/mails.window';
-import { addEmail, deleteEmail, fetchEmails, fetchMessages } from "../src/apis";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-// dot env
-config();
-
 // The built directory structure
 //
 // ├─┬─┬ dist
@@ -21,174 +17,142 @@ config();
 // │ │ ├── main.js
 // │ │ └── preload.mjs
 // │
-process.env.APP_ROOT = path.join(__dirname, "..");
+process.env.APP_ROOT = path.join(__dirname, '..');
-
-let newWin: BrowserWindow | null = null;
 
 // 🚧 Use ['ENV_NAME'] avoid vite:define plugin - Vite@2.x
-export const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
+export const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL'];
-export const MAIN_DIST = path.join(process.env.APP_ROOT, "dist-electron");
+export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron');
-export const RENDERER_DIST = path.join(process.env.APP_ROOT, "dist");
+export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist');
 
-process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
+process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, 'public') : RENDERER_DIST;
-  ? path.join(process.env.APP_ROOT, "public")
-  : RENDERER_DIST;
 
 let win: BrowserWindow | null;
 
+Menu.setApplicationMenu(null);
+
 function createWindow() {
-  // Lấy thông tin tất cả các màn hình
+    // Lấy thông tin tất cả các màn hình
-  const displays = screen.getAllDisplays();
+    const displays = screen.getAllDisplays();
 
-  // Lấy vị trí con trỏ chuột
+    // Lấy vị trí con trỏ chuột
-  const cursorPoint = screen.getCursorScreenPoint();
+    const cursorPoint = screen.getCursorScreenPoint();
 
-  // Tìm màn hình có chứa con trỏ chuột
+    // Tìm màn hình có chứa con trỏ chuột
-  let display = displays.find((display) => {
+    let display = displays.find((display) => {
-    const { x, y, width, height } = display.bounds;
+        const { x, y, width, height } = display.bounds;
-    return (
+        return cursorPoint.x >= x && cursorPoint.x <= x + width && cursorPoint.y >= y && cursorPoint.y <= y + height;
-      cursorPoint.x >= x &&
+    });
-      cursorPoint.x <= x + width &&
-      cursorPoint.y >= y &&
-      cursorPoint.y <= y + height
-    );
-  });
 
-  // Nếu không tìm thấy màn hình chứa con trỏ, sử dụng màn hình chính
+    // Nếu không tìm thấy màn hình chứa con trỏ, sử dụng màn hình chính
-  if (!display) {
+    if (!display) {
-    display = screen.getPrimaryDisplay();
+        display = screen.getPrimaryDisplay();
-  }
+    }
 
-  const { width, height } = display.workAreaSize;
+    const { width, height } = display.workAreaSize;
 
-  // Vị trí cửa sổ ở góc phải dưới của màn hình đã chọn
+    // Vị trí cửa sổ ở góc phải dưới của màn hình đã chọn
 
-  win = new BrowserWindow({
+    win = new BrowserWindow({
-    width: 600,
+        width: 600,
-    height: 200,
+        height: 200,
-    x: 0, // Đặt cửa sổ ở góc phải
+        x: 0, // Đặt cửa sổ ở góc phải
-    y: 0, // Đặt cửa sổ ở góc dưới
+        y: 0, // Đặt cửa sổ ở góc dưới
-    alwaysOnTop: true, // Cửa sổ luôn nằm trên các cửa sổ khác
+        alwaysOnTop: true, // Cửa sổ luôn nằm trên các cửa sổ khác
-    resizable: true, // Không cho phép thay đổi kích thước
+        resizable: true, // Không cho phép thay đổi kích thước
-    icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"),
+        icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'),
-    webPreferences: {
+        webPreferences: {
-      preload: path.join(__dirname, "preload.mjs"),
+            preload: path.join(__dirname, 'preload.mjs'),
-    },
+        },
-  });
+    });
 
-  // Test active push message to Renderer-process.
+    // Test active push message to Renderer-process.
-  win.webContents.on("did-finish-load", () => {
+    win.webContents.on('did-finish-load', () => {
-    win?.webContents.send("main-process-message", new Date().toLocaleString());
+        win?.webContents.send('main-process-message', new Date().toLocaleString());
-  });
+    });
 
-  win.setPosition(width - 600, height - 200);
+    win.setPosition(width - 600, height - 200);
 
-  if (VITE_DEV_SERVER_URL) {
+    if (VITE_DEV_SERVER_URL) {
-    win.loadURL(VITE_DEV_SERVER_URL);
+        win.loadURL(VITE_DEV_SERVER_URL);
-  } else {
+    } else {
-    // win.loadFile('dist/index.html')
+        // win.loadFile('dist/index.html')
-    win.loadFile(path.join(RENDERER_DIST, "index.html"));
+        win.loadFile(path.join(RENDERER_DIST, 'index.html'));
-  }
+    }
 }
 
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
-app.on("window-all-closed", () => {
+app.on('window-all-closed', () => {
-  if (process.platform !== "darwin") {
+    if (process.platform !== 'darwin') {
-    app.quit();
+        app.quit();
-    win = null;
+        win = null;
-  }
+    }
 });
 
-app.on("activate", () => {
+app.on('activate', () => {
-  // On OS X it's common to re-create a window in the app when the
+    // On OS X it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
+    // dock icon is clicked and there are no other windows open.
-  if (BrowserWindow.getAllWindows().length === 0) {
+    if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
+        createWindow();
-  }
+    }
 });
 
 app.whenReady().then(createWindow);
 
 // IPC Main Events
-ipcMain.on("open-devtools", (event) => {
+ipcMain.on('open-devtools', (event) => {
-  const webContents = event.sender;
+    const webContents = event.sender;
-  webContents.openDevTools({ mode: "detach" });
+    webContents.openDevTools({ mode: 'detach' });
 });
 
 // Xử lý connect socket
-ipcMain.handle("connect-socket", async (_) => {
+ipcMain.handle('connect-socket', async (_) => {
-  const socket = io("https://zulip.ipsupply.com.au", {
+    const socket = io('https://zulip.ipsupply.com.au', {
-    path: "/apac-custom/socket.io",
+        path: '/apac-custom/socket.io',
-    secure: true,
+        secure: true,
-    query: { token: process.env.API_KEY },
+        query: { token: import.meta.env.VITE_API_KEY },
-    rejectUnauthorized: false,
+        rejectUnauthorized: false,
-  });
+    });
 
-  if (!socket.connected) {
+    if (!socket.connected) {
-    socket.connect();
+        socket.connect();
-  }
+    }
 
-  socket.on("connect", () => {
+    socket.on('connect', () => {
-    console.log(socket.connected); // true
+        console.log(socket.connected); // true
-  });
+    });
 
-  socket.on("newNote", (data) => {
+    socket.on('newNote', (data) => {
-    win?.webContents.send("newNote", data);
+        win?.webContents.send('newNote', data);
-  });
+    });
 });
 
-ipcMain.handle("fetchMessages", async () => {
+ipcMain.handle('fetchMessages', async () => {
-  return await fetchMessages();
+    return await fetchMessages();
 });
 
-ipcMain.handle("fetchEmails", async () => {
+ipcMain.handle('fetchEmails', async () => {
-  return await fetchEmails();
+    return await fetchEmails();
 });
 
-ipcMain.handle("open-new-window", async () => {
+ipcMain.handle('open-new-window', async () => {
-  createMailWindow();
+    createMailWindow({ RENDERER_DIST });
 });
 
-ipcMain.handle("add-email", async (_, email: string) => {
+ipcMain.handle('add-email', async (_, email: string) => {
-  return addEmail(email);
+    return addEmail(email);
 });
 
-ipcMain.handle("del-email", async (_, id: number) => {
+ipcMain.handle('del-email', async (_, id: number) => {
-  return deleteEmail(id);
+    return deleteEmail(id);
 });
 
-ipcMain.handle("show-notification", async (_, { title, body }) => {
+ipcMain.handle('show-notification', async (_, { title, body }) => {
-  const notification = new Notification({
+    const notification = new Notification({
-    title,
+        title,
-    body,
+        body,
-    silent: false,
+        silent: false,
-  });
+    });
-  notification.show();
+    notification.show();
 });
-
-// Funtions
-export function createMailWindow() {
-  newWin = new BrowserWindow({
-    width: 600,
-    height: 400,
-    webPreferences: {
-      preload: path.join(__dirname, "preload.mjs"),
-    },
-  });
-
-  // Nếu đang phát triển, sử dụng HashRouter trong URL
-  const url = process.env.VITE_DEV_SERVER_URL
-    ? `${process.env.VITE_DEV_SERVER_URL}/#/mails` // URL với HashRouter
-    : path.join(RENDERER_DIST, "index.html"); // Nếu build, dùng đúng path
-
-  newWin.loadURL(url);
-
-  // 👉 Mở DevTools sau khi load
-  newWin.webContents.openDevTools();
-
-  newWin.on("closed", () => {
-    newWin = null;
-  });
-}

electron/windows/mails.window.ts

@@ -0,0 +1,25 @@
+import { BrowserWindow } from 'electron';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+process.env.APP_ROOT = path.join(__dirname, '..');
+
+export function createMailWindow({ RENDERER_DIST }: { RENDERER_DIST: string }) {
+    let newWin: BrowserWindow | null = new BrowserWindow({
+        width: 600,
+        height: 400,
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.mjs'),
+        },
+    });
+
+    const url = process.env.VITE_DEV_SERVER_URL ? `${process.env.VITE_DEV_SERVER_URL}/#/mails` : `file://${path.join(RENDERER_DIST, 'index.html')}#/mails`;
+
+    newWin.loadURL(url);
+
+    newWin.on('closed', () => {
+        newWin = null;
+    });
+
+    return newWin;
+}

package-lock.json

@@ -16,14 +16,12 @@
         "@types/ws": "^8.18.1",
         "axios": "^1.9.0",
         "bufferutil": "^4.0.9",
-        "dotenv": "^16.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^7.5.3",
         "socket.io-client": "^4.8.1",
         "tailwindcss": "^4.1.4",
         "utf-8-validate": "^6.0.5",
-        "ws": "^8.18.2",
         "zod": "^3.24.4"
       },
       "devDependencies": {
@@ -3916,18 +3914,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/dotenv": {
-      "version": "16.5.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
-      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
     "node_modules/dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
@@ -8228,27 +8214,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/ws": {
-      "version": "8.18.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
-      "integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/xmlbuilder": {
       "version": "15.1.1",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",

package.json

@@ -19,14 +19,12 @@
     "@types/ws": "^8.18.1",
     "axios": "^1.9.0",
     "bufferutil": "^4.0.9",
-    "dotenv": "^16.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^7.5.3",
     "socket.io-client": "^4.8.1",
     "tailwindcss": "^4.1.4",
     "utf-8-validate": "^6.0.5",
-    "ws": "^8.18.2",
     "zod": "^3.24.4"
   },
   "devDependencies": {

src/apis/index.ts

@@ -1,61 +1,55 @@
-import { config } from "dotenv";
+import axios from '../instants/axios';
-import axios from "../instants/axios";
 
-config();
+const API_KEY = import.meta.env.VITE_API_KEY;
-
-const API_KEY = process.env.API_KEY;
 
 export const getAllNote = async () => {
-  try {
+    try {
-    const response = await axios({
+        const response = await axios({
-      method: "GET",
+            method: 'GET',
-      url: "getAllNotes",
+            url: 'getAllNotes',
-    });
+        });
 
-    return response.data;
+        return response.data;
-  } catch (error) {
+    } catch (error) {
-    return [];
+        return [];
-  }
+    }
 };
 
 export async function fetchMessages(onError?: (error: unknown) => void) {
-  try {
+    try {
-    const response = await axios.get(`getAllNotes?key=${API_KEY}`);
+        const response = await axios.get(`getAllNotes?key=${API_KEY}`);
 
-    return response.data;
+        return response.data;
-  } catch (error) {
+    } catch (error) {
-    console.error("Error fetching notes:", error);
+        console.error('Error fetching notes:', error);
-    onError?.(error);
+        onError?.(error);
-  }
+    }
 }
 
 export async function fetchEmails(onError?: (error: unknown) => void) {
-  try {
+    try {
-    const response = await axios.get(`emails?key=${API_KEY}`);
+        const response = await axios.get(`emails?key=${API_KEY}`);
-    return response.data;
+        return response.data;
-  } catch (error) {
+    } catch (error) {
-    console.error("Error fetching emails:", error);
+        console.error('Error fetching emails:', error);
-    onError?.(error);
+        onError?.(error);
-  }
+    }
 }
 
-export async function addEmail(
+export async function addEmail(email: string, onError?: (error: unknown) => void) {
-  email: string,
+    try {
-  onError?: (error: unknown) => void
+        const response = await axios.post(`add-email`, {
-) {
+            email: email,
-  try {
+            key: API_KEY,
-    const response = await axios.post(`add-email`, {
+        });
-      email: email,
-      key: API_KEY,
-    });
 
-    return response.data;
+        return response.data;
-  } catch (error) {
+    } catch (error) {
-    console.error("Error add email:", error);
+        console.error('Error add email:', error);
-    onError?.(error);
+        onError?.(error);
-  }
+    }
 }
 
 export async function deleteEmail(id: number) {
-  await axios.delete(`delete-email/${id}?key=${API_KEY}`);
+    await axios.delete(`delete-email/${id}?key=${API_KEY}`);
 }

src/components/confirm-modal.tsx

@@ -1,34 +1,28 @@
-import { Button, Modal, Text } from "@mantine/core";
+import { Button, Modal, Text } from '@mantine/core';
 
 interface ConfirmModalProps {
-  opened: boolean;
+    opened: boolean;
-  title?: string;
+    title?: string;
-  message: string;
+    message: string;
-  onConfirm: () => void;
+    onConfirm: () => void;
-  onCancel: () => void;
+    onCancel: () => void;
 }
 
-export default function ConfirmModal({
+export default function ConfirmModal({ opened, title = 'Xác nhận', message, onConfirm, onCancel }: ConfirmModalProps) {
-  opened,
+    return (
-  title = "Xác nhận",
+        <Modal opened={opened} onClose={onCancel} title={title} centered>
-  message,
+            <Text size="md" mb="xs">
-  onConfirm,
+                {message}
-  onCancel,
+            </Text>
-}: ConfirmModalProps) {
-  return (
-    <Modal opened={opened} onClose={onCancel} title={title} centered>
-      <Text size="xs" mb="md">
-        {message}
-      </Text>
 
-      <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-        <Button variant="default" onClick={onCancel}>
+                <Button size="xs" variant="default" onClick={onCancel}>
-          No
+                    No
-        </Button>
+                </Button>
-        <Button color="red" onClick={onConfirm}>
+                <Button size="xs" color="red" onClick={onConfirm}>
-          Yes
+                    Yes
-        </Button>
+                </Button>
-      </div>
+            </div>
-    </Modal>
+        </Modal>
-  );
+    );
 }

src/components/message.tsx

@@ -1,48 +1,62 @@
-import { ActionIcon, Box, Paper, Textarea, Tooltip } from "@mantine/core";
+import { ActionIcon, Box, Paper, Textarea, Tooltip } from '@mantine/core';
-import { useDisclosure } from "@mantine/hooks";
+import { useDisclosure } from '@mantine/hooks';
-import { IconEye, IconEyeOff, IconTrash } from "@tabler/icons-react";
+import { IconEye, IconEyeOff, IconTrash } from '@tabler/icons-react';
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from 'react';
 
 export interface IMessageProps {
-  data: IMessage;
+    data: IMessage;
 }
 
 export default function Message({ data }: IMessageProps) {
-  const [show, { toggle }] = useDisclosure(false);
+    const [show, { toggle }] = useDisclosure(false);
 
-  const messageContent = useMemo(() => {
+    const [animation, setAnimation] = useState(false);
-    return show ? data.message : data.message.replace(/./g, "•");
-  }, [data.message, show]);
 
-  return (
+    const messageContent = useMemo(() => {
-    <Paper
+        return show ? data.message : data.message.replace(/./g, '•');
-      key={data.message}
+    }, [data.message, show]);
-      shadow="xs"
+
-      radius="md"
+    // Tắt hiệu ứng nhấp nháy sau 1 giây
-      p="xs"
+    useEffect(() => {
-      withBorder
+        if (!animation) return;
-      className="flex items-center gap-3 w-full"
+
-    >
+        const timer = setTimeout(() => {
-      <div className="flex items-center gap-2">
+            setAnimation(false);
-        <Textarea
+        }, 5000);
-          defaultValue={messageContent}
+        return () => clearTimeout(timer);
-          value={messageContent}
+    }, [animation]);
-          className="flex-1"
+
-          variant="unstyled"
+    useEffect(() => {
-        />
+        const showAnimation = new Date().getTime() - new Date(data.time).getTime() <= 3000;
-        <Box className="flex gap-1">
+
-          <Tooltip label="View">
+        setAnimation(showAnimation);
-            <ActionIcon onClick={toggle} variant="light" size="sm">
+        // eslint-disable-next-line react-hooks/exhaustive-deps
-              {show ? <IconEyeOff size={16} /> : <IconEye size={16} />}
+    }, []);
-            </ActionIcon>
+
-          </Tooltip>
+    return (
-          <Tooltip label="Delete">
+        <Paper
-            <ActionIcon variant="light" size="sm" color="red">
+            key={data.message}
-              <IconTrash size={16} />
+            shadow="xs"
-            </ActionIcon>
+            radius="md"
-          </Tooltip>
+            p="xs"
-        </Box>
+            withBorder
-      </div>
+            className={`flex items-center gap-3 w-full transition-all duration-300 ${animation ? 'animate-pulse !bg-blue-100' : ''}`}
-    </Paper>
+        >
-  );
+            <div className="flex items-center gap-2 w-full">
+                <Textarea defaultValue={messageContent} value={messageContent} className="flex-1" variant="unstyled" readOnly />
+                <Box className="flex gap-1">
+                    <Tooltip label="View">
+                        <ActionIcon onClick={toggle} variant="light" size="sm">
+                            {show ? <IconEyeOff size={16} /> : <IconEye size={16} />}
+                        </ActionIcon>
+                    </Tooltip>
+                    <Tooltip label="Delete">
+                        <ActionIcon variant="light" size="sm" color="red">
+                            <IconTrash size={16} />
+                        </ActionIcon>
+                    </Tooltip>
+                </Box>
+            </div>
+        </Paper>
+    );
 }

src/pages/mails.tsx

@@ -1,178 +1,160 @@
-import {
+import { ActionIcon, Box, Button, Container, LoadingOverlay, Paper, ScrollArea, Text, TextInput } from '@mantine/core';
-  ActionIcon,
+import { useForm, zodResolver } from '@mantine/form';
-  Box,
+import { useDisclosure } from '@mantine/hooks';
-  Button,
+import { IconMail, IconTrash } from '@tabler/icons-react'; // Icon xóa
-  Container,
+import { nanoid } from 'nanoid'; // Để tạo ID cho mỗi email mới
-  LoadingOverlay,
+import { useEffect, useRef, useState } from 'react';
-  Paper,
+import { z } from 'zod';
-  ScrollArea,
+import { ConfirmModal } from '../components';
-  Text,
+import { showNotification } from '../ultils/fn';
-  TextInput,
-} from "@mantine/core";
-import { useForm, zodResolver } from "@mantine/form";
-import { useDisclosure } from "@mantine/hooks";
-import { IconMail, IconTrash } from "@tabler/icons-react"; // Icon xóa
-import { nanoid } from "nanoid"; // Để tạo ID cho mỗi email mới
-import { useEffect, useRef, useState } from "react";
-import { z } from "zod";
-import { ConfirmModal } from "../components";
-import { showNotification } from "../ultils/fn";
 
 const schema = z.object({
-  email: z.string().email("Invalid email"),
+    email: z.string().email('Invalid email'),
 });
 
 function MailsPage() {
-  const viewport = useRef<HTMLDivElement>(null);
+    const viewport = useRef<HTMLDivElement>(null);
-  const [opened, { open, close }] = useDisclosure(false);
+    const [opened, { open, close }] = useDisclosure(false);
-  const [clickEmail, setClickEmail] = useState<IEmail | null>(null);
+    const [clickEmail, setClickEmail] = useState<IEmail | null>(null);
-  const [emails, setEmails] = useState<IEmail[]>([]); // Dùng để lưu danh sách email
+    const [emails, setEmails] = useState<IEmail[]>([]); // Dùng để lưu danh sách email
 
-  const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(false);
-  const form = useForm({
+    const form = useForm({
-    initialValues: {
+        initialValues: {
-      email: "",
+            email: '',
-    },
+        },
-    validate: zodResolver(schema),
+        validate: zodResolver(schema),
-  });
-
-  const scrollToBottom = () =>
-    viewport.current!.scrollTo({
-      top: viewport.current!.scrollHeight,
-      behavior: "smooth",
     });
 
-  // Hàm thêm email vào danh sách
+    const scrollToBottom = () =>
-  const handleAddEmail = async ({ email }: { email: string }) => {
+        viewport.current!.scrollTo({
-    if (email.trim() !== "") {
+            top: viewport.current!.scrollHeight,
-      try {
+            behavior: 'smooth',
-        setLoading(true);
-        const response = await window.ipcRenderer.invoke("add-email", email);
-
-        if (!response) return;
-
-        console.log("%csrc/pages/mails.tsx:40 {response}", "color: #007acc;", {
-          response,
         });
 
-        await fetchEmails();
+    // Hàm thêm email vào danh sách
+    const handleAddEmail = async ({ email }: { email: string }) => {
+        if (email.trim() !== '') {
+            try {
+                setLoading(true);
+                const response = await window.ipcRenderer.invoke('add-email', email);
 
-        showNotification("Thành công", "Đã thêm email mới");
+                if (!response) return;
 
-        scrollToBottom();
+                console.log('%csrc/pages/mails.tsx:40 {response}', 'color: #007acc;', {
-        setClickEmail(null);
+                    response,
-        form.reset();
+                });
-      } catch (error) {
-        console.log("%csrc/pages/mails.tsx:65 error", "color: #007acc;", error);
-      } finally {
-        setLoading(false);
-      }
-    }
-  };
 
-  const handleDeleteEmail = async (id: number | undefined) => {
+                await fetchEmails();
-    try {
-      if (!id) return;
-      setLoading(true);
-      await window.ipcRenderer.invoke("del-email", id);
 
-      await fetchEmails();
+                showNotification('Thành công', 'Đã thêm email mới');
-      close();
 
-      showNotification("Thông báo", "Đã xóa email");
+                scrollToBottom();
-    } catch (error) {
+                setClickEmail(null);
-      console.log("%csrc/pages/mails.tsx:88 error", "color: #007acc;", error);
+                form.reset();
-    } finally {
+            } catch (error) {
-      setLoading(false);
+                console.log('%csrc/pages/mails.tsx:65 error', 'color: #007acc;', error);
-    }
+            } finally {
-  };
+                setLoading(false);
-
+            }
-  const fetchEmails = async () => {
+        }
-    try {
-      await window.ipcRenderer.invoke("connect-socket");
-
-      setLoading(true);
-
-      const mails = await window.ipcRenderer.invoke("fetchEmails");
-
-      console.log("%csrc/App.tsx:29 {mails}", "color: #007acc;", {
-        mails,
-      });
-
-      setEmails(mails);
-    } catch (error) {
-      console.error("Failed to connect socket", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchEmails();
-
-    return () => {
-      // window.ipcRenderer.removeListener("new-note", handleNewNote);
     };
-  }, []);
 
-  return (
+    const handleDeleteEmail = async (id: number | undefined) => {
-    <Container style={{ paddingTop: 20 }} className="overflow-hidden">
+        try {
-      <Paper shadow="xs" p="md" style={{ marginBottom: 20 }}>
+            if (!id) return;
-        <form onSubmit={form.onSubmit(handleAddEmail)}>
+            setLoading(true);
-          <TextInput
+            await window.ipcRenderer.invoke('del-email', id);
-            {...form.getInputProps("email")}
-            label="Enter Email"
-            placeholder="example@example.com"
-          />
-          <Button type="submit" fullWidth style={{ marginTop: 10 }}>
-            Add Email
-          </Button>
-        </form>
-      </Paper>
 
-      <ScrollArea viewportRef={viewport} h={200} type="auto" pb={"lg"}>
+            await fetchEmails();
-        <Box
+            close();
-          className="flex flex-col gap-4"
-          size="sm"
-          style={{ marginTop: 20 }}
-        >
-          {emails.length > 0 ? (
-            emails.map((item) => (
-              <Box key={nanoid()} className="flex items-center">
-                <ActionIcon size={"md"} variant="outline" className="mr-3">
-                  <IconMail size={18} />
-                </ActionIcon>
-                <Text style={{ flexGrow: 1 }}>{item.email}</Text>
-                <ActionIcon
-                  onClick={() => {
-                    setClickEmail(item);
-                    open();
-                  }}
-                  color="red"
-                  size="md"
-                  variant="light"
-                >
-                  <IconTrash size={16} />
-                </ActionIcon>
-              </Box>
-            ))
-          ) : (
-            <Text className="!text-gray-500">No emails added yet.</Text>
-          )}
-        </Box>
-      </ScrollArea>
 
-      <LoadingOverlay visible={loading} />
+            showNotification('Thông báo', 'Đã xóa email');
+        } catch (error) {
+            console.log('%csrc/pages/mails.tsx:88 error', 'color: #007acc;', error);
+        } finally {
+            setLoading(false);
+        }
+    };
 
-      <ConfirmModal
+    const fetchEmails = async () => {
-        title="Warning"
+        try {
-        message="Caaj"
+            await window.ipcRenderer.invoke('connect-socket');
-        opened={opened}
+
-        onCancel={close}
+            setLoading(true);
-        onConfirm={() => handleDeleteEmail(clickEmail?.id)}
+
-      />
+            const mails = await window.ipcRenderer.invoke('fetchEmails');
-    </Container>
+
-  );
+            console.log('%csrc/App.tsx:29 {mails}', 'color: #007acc;', {
+                mails,
+            });
+
+            setEmails(mails);
+        } catch (error) {
+            console.error('Failed to connect socket', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchEmails();
+
+        return () => {
+            // window.ipcRenderer.removeListener("new-note", handleNewNote);
+        };
+    }, []);
+
+    return (
+        <Container style={{ paddingTop: 20 }} className="overflow-hidden">
+            <Paper shadow="xs" p="md" style={{ marginBottom: 20 }}>
+                <form onSubmit={form.onSubmit(handleAddEmail)}>
+                    <TextInput {...form.getInputProps('email')} label="Enter Email" placeholder="example@example.com" />
+                    <Button type="submit" fullWidth style={{ marginTop: 10 }}>
+                        Add Email
+                    </Button>
+                </form>
+            </Paper>
+
+            <ScrollArea viewportRef={viewport} h={200} type="auto" pb={'lg'}>
+                <Box className="flex flex-col gap-4" size="sm" style={{ marginTop: 20 }}>
+                    {emails.length > 0 ? (
+                        emails.map((item) => (
+                            <Box key={nanoid()} className="flex items-center">
+                                <ActionIcon size={'md'} variant="outline" className="mr-3">
+                                    <IconMail size={18} />
+                                </ActionIcon>
+                                <Text style={{ flexGrow: 1 }}>{item.email}</Text>
+                                <ActionIcon
+                                    onClick={() => {
+                                        setClickEmail(item);
+                                        open();
+                                    }}
+                                    color="red"
+                                    size="md"
+                                    variant="light"
+                                >
+                                    <IconTrash size={16} />
+                                </ActionIcon>
+                            </Box>
+                        ))
+                    ) : (
+                        <Text className="!text-gray-500">No emails added yet.</Text>
+                    )}
+                </Box>
+            </ScrollArea>
+
+            <LoadingOverlay visible={loading} />
+
+            <ConfirmModal
+                title="Warning"
+                message={`Bạn có chắc chắn muốn xóa email "${clickEmail?.email}" không?`}
+                opened={opened}
+                onCancel={close}
+                onConfirm={() => handleDeleteEmail(clickEmail?.id)}
+            />
+        </Container>
+    );
 }
 
 export default MailsPage;

src/pages/main.tsx

@@ -1,99 +1,106 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ActionIcon, Box, ScrollAreaAutosize, Tooltip } from "@mantine/core";
+import { ActionIcon, Box, LoadingOverlay, ScrollAreaAutosize, Tooltip } from '@mantine/core';
-import { useViewportSize } from "@mantine/hooks"; // 🔥 thêm cái này
+import { useViewportSize } from '@mantine/hooks'; // 🔥 thêm cái này
-import { IconDotsVertical, IconMail } from "@tabler/icons-react";
+import { IconDotsVertical, IconMail } from '@tabler/icons-react';
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from 'react';
-import { Message, Settings } from "../components";
+import { Message, Settings } from '../components';
-import { showNotification } from "../ultils/fn";
+import { showNotification } from '../ultils/fn';
 
 function MainPage() {
-  const [messages, setMessages] = useState<IMessage[]>([]);
+    const [messages, setMessages] = useState<IMessage[]>([]);
-  const viewportRef = useRef<HTMLDivElement>(null);
+    const viewportRef = useRef<HTMLDivElement>(null);
+    const [loading, setLoading] = useState(false);
 
-  const { height } = useViewportSize(); // lấy kích thước cửa sổ
+    const { height } = useViewportSize(); // lấy kích thước cửa sổ
 
-  const scrollToBottom = () => {
+    const scrollToBottom = () => {
-    const viewport = viewportRef.current;
+        const viewport = viewportRef.current;
-    if (viewport) {
+        if (viewport) {
-      viewport.scrollTo({
+            viewport.scrollTo({
-        top: viewport.scrollHeight,
+                top: viewport.scrollHeight,
-        behavior: "smooth",
+                behavior: 'smooth',
-      });
+            });
-    }
+        }
-  };
-
-  const fetchMessages = async () => {
-    const messages = await window.ipcRenderer.invoke("fetchMessages");
-    setMessages(messages);
-  };
-
-  useEffect(() => {
-    const connectSocket = async () => {
-      try {
-        await window.ipcRenderer.invoke("connect-socket");
-        await fetchMessages();
-        setTimeout(scrollToBottom, 100);
-      } catch (error) {
-        console.error("Failed to connect socket", error);
-      }
     };
 
-    connectSocket();
+    const fetchMessages = async () => {
-    window.ipcRenderer?.onNewNote(async (data: any) => {
+        const messages = await window.ipcRenderer.invoke('fetchMessages');
-      console.log("Received newNote data:", data);
-      showNotification('Có tin nhắn mới', data.message)
-      await fetchMessages();
-      scrollToBottom()
-    });
-  }, []);
 
-  const openMailsWindow = () => {
+        if (!messages || !Array.isArray(messages)) {
-    window.ipcRenderer.invoke("open-new-window");
+            showNotification('Lỗi fetch notes', `Error: ${JSON.stringify(messages)}`);
-  };
+            return;
+        }
 
-  // 🧠 Tính chiều cao dynamic (ví dụ trừ header 80px + padding 30px)
+        setMessages(messages);
-  const scrollAreaHeight = height - 70; // Bạn chỉnh số này nếu muốn
+    };
 
-  return (
+    useEffect(() => {
-    <Box className="flex flex-col !overflow-hidden h-full">
+        const connectSocket = async () => {
-      {/* Header */}
+            try {
-      <header className="p-4 flex items-center justify-between sticky top-0 border-b border-gray-100 pb-2 bg-white z-10">
+                await window.ipcRenderer.invoke('connect-socket');
-        <Tooltip label="Mail">
+                setLoading(true);
-          <ActionIcon
+                await fetchMessages();
-            onClick={openMailsWindow}
+                setTimeout(scrollToBottom, 100);
-            variant="light"
+            } catch (error) {
-            radius="md"
+                console.error('Failed to connect socket', error);
-            size="lg"
+            } finally {
-          >
+                setLoading(false);
-            <IconMail size={18} />
+            }
-          </ActionIcon>
+        };
-        </Tooltip>
 
-        <div className="text-xl font-semibold">Notes</div>
+        connectSocket();
+        window.ipcRenderer?.onNewNote(async (data: any) => {
+            console.log('Received newNote data:', data);
+            showNotification('Có tin nhắn mới', data.message);
+            await fetchMessages();
+            scrollToBottom();
+        });
+    }, []);
 
-        <Settings>
+    const openMailsWindow = () => {
-          <Tooltip label="Settings">
+        window.ipcRenderer.invoke('open-new-window');
-            <ActionIcon variant="subtle" radius="md" size="lg">
+    };
-              <IconDotsVertical size={18} />
-            </ActionIcon>
-          </Tooltip>
-        </Settings>
-      </header>
 
-      {/* Message List */}
+    // 🧠 Tính chiều cao dynamic (ví dụ trừ header 80px + padding 30px)
-      <ScrollAreaAutosize
+    const scrollAreaHeight = height - 70; // Bạn chỉnh số này nếu muốn
-        viewportRef={viewportRef}
+
-        h={scrollAreaHeight} // 👈 set height động theo window size
+    return (
-        type="auto"
+        <Box className="flex flex-col !overflow-hidden h-full">
-      >
+            {/* Header */}
-        <Box className="flex flex-col gap-3 w-full overflow-hidden p-2">
+            <header className="p-4 flex items-center justify-between sticky top-0 border-b border-gray-100 pb-2 bg-white z-10">
-          {messages.map((item) => (
+                <Tooltip label="Mail">
-            <Message key={item.message + item.id} data={item} />
+                    <ActionIcon onClick={openMailsWindow} variant="light" radius="md" size="lg">
-          ))}
+                        <IconMail size={18} />
+                    </ActionIcon>
+                </Tooltip>
+
+                <div className="text-xl font-semibold">Notes</div>
+
+                <Settings>
+                    <Tooltip label="Settings">
+                        <ActionIcon variant="subtle" radius="md" size="lg">
+                            <IconDotsVertical size={18} />
+                        </ActionIcon>
+                    </Tooltip>
+                </Settings>
+            </header>
+
+            {/* Message List */}
+            <ScrollAreaAutosize
+                viewportRef={viewportRef}
+                h={scrollAreaHeight} // 👈 set height động theo window size
+                type="auto"
+            >
+                <Box className="flex flex-col gap-3 w-full overflow-hidden p-2">
+                    {messages.map((item) => (
+                        <Message key={item.message + item.id} data={item} />
+                    ))}
+                </Box>
+            </ScrollAreaAutosize>
+
+            <LoadingOverlay visible={loading} />
         </Box>
-      </ScrollAreaAutosize>
+    );
-    </Box>
-  );
 }
 
 export default MainPage;

src/vite-env.d.ts

@@ -2,23 +2,22 @@
 /// <reference types="vite/client" />
 
 declare global {
-  interface Window {
+    interface Window {
-    electronAPI: {
+        electronAPI: {
-      // openDevTools: () => void;
+            // openDevTools: () => void;
-      onNewNote: (data: any) => void;
+            onNewNote: (data: any) => void;
-    };
+        };
-  }
+    }
 }
 
 interface IMessage {
-  id: number;
+    id: number;
-  sender: string;
+    sender: string;
-  time: number;
+    time: number;
-  message: string;
+    message: string;
-  animation?: boolean;
 }
 
 interface IEmail {
-  id: number;
+    id: number;
-  email: string;
+    email: string;
 }

tailwind.config.js

@@ -0,0 +1,28 @@
+// tailwind.config.js
+export default {
+    theme: {
+        extend: {
+            keyframes: {
+                blink: {
+                    '0%, 100%': { opacity: '1' },
+                    '50%': { opacity: '0' },
+                },
+                flash: {
+                    '0%, 100%': { opacity: '1' },
+                    '25%, 75%': { opacity: '0' },
+                    '50%': { opacity: '1' },
+                },
+                pop: {
+                    '0%': { transform: 'scale(1)' },
+                    '50%': { transform: 'scale(1.05)' },
+                    '100%': { transform: 'scale(1)' },
+                },
+            },
+            animation: {
+                blink: 'blink 1s ease-in-out',
+                flash: 'flash 1s ease-in-out',
+                pop: 'pop 0.3s ease-in-out',
+            },
+        },
+    },
+};