apps/server-web/src/renderer/pages/Server.tsx (1)

Line range hint 41-79: Improve effect hook implementation and cleanup.

1. The dependency on customStyle for event listener setup seems unnecessary
2. Missing cleanup for platform detection
3. Consider separating concerns into multiple effects

+ // Platform detection effect
+ useEffect(() => {
+   getCustomStyle();
+ }, []);
+
+ // Server event listener effect
  useEffect(() => {
-   getCustoSyle()
    window.electron.ipcRenderer.removeEventListener(IPC_TYPES.SERVER_PAGE);
    window.electron.ipcRenderer.on(IPC_TYPES.SERVER_PAGE, (arg: any) => {
      // ... event handling logic ...
    });
+   return () => {
+     window.electron.ipcRenderer.removeEventListener(IPC_TYPES.SERVER_PAGE);
+   };
-  }, [customStyle]);
+  }, []);

🧰 Tools

🪛 GitHub Actions: Check Spelling and Typos with cspell

[warning] 29-42: Unknown words: 'Custo' (multiple instances), 'customstyle'

apps/server-web/src/renderer/pages/About.tsx (1)

Line range hint 37-51: Improve event listener management and fix infinite re-render

The useEffect has multiple issues:

1. Missing dependency array causing infinite re-renders
2. Event listener cleanup could be improved
3. Type safety for IPC messages could be enhanced

+ type SettingPageMessage = {
+   type: keyof typeof SettingPageTypeMessage;
+   data: {
+     appName?: string;
+     version?: string;
+   };
+ };

  useEffect(() => {
    getPlatform();
-   window.electron.ipcRenderer.removeEventListener(IPC_TYPES.SETTING_PAGE);
    window.electron.ipcRenderer.on(IPC_TYPES.SETTING_PAGE, (arg: any) => {
      switch (arg.type) {
        case SettingPageTypeMessage.loadSetting:
          setAboutApp({
            name: arg.data.appName,
            version: arg.data.version,
          });
          break;
        default:
          break;
      }
    });
+   return () => {
+     window.electron.ipcRenderer.removeEventListener(IPC_TYPES.SETTING_PAGE);
+   };
-  });
+  }, []);

apps/server-web/src/renderer/libs/constant.ts (1)

44-53: Clean up Mac platform styles and improve consistency.

The Mac style configuration has several issues:

1. Empty maxHeight object serves no purpose
2. Inconsistent spacing in className strings
3. Architectural differences from Windows styles might affect maintainability

Apply these improvements:

  MAC: {
    bgColor: 'bg-[#F2F2F2] dark:bg-[#1e2025]',
    rounded: 'rounded-3xl',
    sideBar: 'fixed top-0 left-0',
    sideServer: 'flex flex-col w-1/4 relative top-0 min-h-full dark:bg-[#2b2b2f] bg-gray-200 rounded-3xl',
-   maxHeight: {
-
-   },
+   maxHeight: {},
-   boxContent: 'py-5 px-5 content-start  rounded-3xl dark:bg-[#25272D] dark:text-white bg-gray-50 shadow-sm'
+   boxContent: 'py-5 px-5 content-start rounded-3xl dark:bg-[#25272D] dark:text-white bg-gray-50 shadow-sm'
  }

Consider extracting common styles into shared variables to improve maintainability:

const commonStyles = {
  bgColor: 'bg-[#F2F2F2] dark:bg-[#1e2025]',
  boxContentBase: 'py-5 px-5 content-start dark:bg-[#25272D] dark:text-white bg-gray-50 shadow-sm'
};

apps/server-web/src/renderer/pages/Server.tsx (1)

121-122: Replace hard-coded dimensions with responsive values.

Hard-coded dimensions reduce responsiveness and may cause layout issues on different screen sizes.

- <div className="flex flex-col w-3/4 min-h-full max-h-96 px-5" style={{minHeight: '730px'}}>
-   <div className={customStyle.boxContent} style={{maxHeight: '690px'}}>
+ <div className="flex flex-col w-3/4 min-h-full max-h-screen px-5">
+   <div className={`${customStyle.boxContent} max-h-[calc(100vh-40px)]`}>

apps/server-web/src/renderer/components/container.tsx (3)

5-7: Consider making the children prop more flexible.

The current type JSX.Element[] is restrictive. Consider using React.ReactNode to support various child types including strings, numbers, null, etc.

-type Props = {
-  children: JSX.Element[]
-}
+type Props = {
+  children: React.ReactNode
+}

---

13-15: Remove unnecessary fragment wrapper.

The fragment wrapper in Children.map is redundant as each child is already a valid element.

-      {Children.map(children, child =>
-        <>{child}</>
-      )}
+      {Children.map(children, child => child)}

---

10-12: Enhance accessibility and move inline styles to Tailwind.

Consider adding semantic HTML roles and ARIA attributes for better accessibility. Also, consider moving the shadow-md duplication to a custom Tailwind class.

-      className="min-h-full flex flex-row flex-auto flex-shrink-0 antialiased text-gray-800 rounded-lg bg-[#F2F2F2] dark:bg-[#1e2025] shadow-md shadow-md"
+      role="main"
+      aria-label="Main container"
+      className="min-h-full flex flex-row flex-auto flex-shrink-0 antialiased text-gray-800 rounded-lg bg-[#F2F2F2] dark:bg-[#1e2025] shadow-lg"

apps/server-web/src/renderer/components/window-control.tsx (1)

24-24: Remove duplicate z-index styling.

The z-index is specified both in className and inline style. Consider using Tailwind's z-index utilities.

-    <div className="absolute top-1.5 left-1.5 p-2 flex space-x-2 z-50 bg-transparent w-full drag-region" style={{zIndex: '99999'}}>
+    <div className="absolute top-1.5 left-1.5 p-2 flex space-x-2 z-[99999] bg-transparent w-full drag-region">

apps/server-web/src/renderer/pages/Setup.tsx (2)

37-40: Simplify conditional class and content logic

The current implementation has redundant conditions:

1. The className uses a ternary that returns the same value in both cases
2. The content uses an unnecessary ternary for step 1

- className={`w-10 h-10 flex justify-center items-center rounded-full ${currentStep === 1 ? 'bg-purple-600' : 'bg-purple-600'}`}
+ className="w-10 h-10 flex justify-center items-center rounded-full bg-purple-600"
>
- {currentStep === 1 ? 1 : <CheckIcon />}
+ {currentStep === 1 && 1}
+ {currentStep !== 1 && <CheckIcon />}

---

47-51: Fix JSX indentation

The indentation is inconsistent in the conditional rendering block.

  {currentStep === 1 ? (
    <Landing nextAction={letsGo} />
  ) : (
-    <AdvancedSetting back={goBack} />
+   <AdvancedSetting back={goBack} />
  )}

apps/server-web/src/renderer/components/SideBar.tsx (1)

Line range hint 38-46: Enhance accessibility and simplify link structure

The link lacks proper aria-label and the nested structure could be simplified.

  <Link
    to=""
+   aria-label={t(`MENU.${menu.displayName}`)}
    className={`relative flex flex-row items-center h-11 focus:outline-none text-gray-600 dark:text-white ${
      !menu.isActive 
        ? 'hover:dark:bg-[#1f2025] hover:bg-stone-100 hover:border-indigo-500' 
        : 'bg-stone-100 dark:bg-[#1f2025] border-indigo-500'
    } text-gray-800 border-l-4 border-transparent pr-6 rounded-l-lg`}
    onClick={() => menuChange(menu.key)}
  >
-   <span className="inline-flex justify-center items-center ml-4"></span>
    <span className="ml-2 text-sm tracking-wide truncate">
      {t(`MENU.${menu.displayName}`)}
    </span>
  </Link>

apps/server-web/src/main/helpers/constant.ts (2)

67-75: Enhance type safety for IPC types

Consider using a TypeScript enum or const assertion for better type safety and autocompletion.

+ export const IPC_TYPES = {
- export const IPC_TYPES: {
-   SETTING_PAGE: Channels,
-   UPDATER_PAGE: Channels,
-   SERVER_PAGE: Channels,
-   CONTROL_BUTTON: Channels
- } = {
    SETTING_PAGE: 'setting-page',
    UPDATER_PAGE: 'updater-page',
    SERVER_PAGE: 'server-page',
    CONTROL_BUTTON: 'control-button'
- }
+ } as const;

+ export type IPCTypes = typeof IPC_TYPES[keyof typeof IPC_TYPES];

---

Line range hint 89-91: Fix inconsistent spacing in WindowOptions

There's a mix of spaces and tabs in the ABOUT_WINDOW configuration.

  ABOUT_WINDOW: {
    width: 300,
-		height: 250,
+   height: 250,
    hashPath: 'about'
  }

apps/server-web/src/renderer/pages/About.tsx (1)

73-74: Use dynamic year in copyright notice

The copyright year is hardcoded to 2024. Consider using a dynamic year.

- Copyright © 2024-Present{' '}
+ Copyright © {new Date().getFullYear()}-Present{' '}

apps/server-web/src/main/preload.ts (2)

53-86: Consider adding error handling for IPC calls.

The titlebar initialization is well-implemented, but the IPC calls could benefit from error handling.

Apply this diff to add error handling:

-  const platform = await ipcRenderer.invoke('get-platform');
-  if (platform === 'darwin') {
-    return;
-  }
-  const iconPath = await ipcRenderer.invoke('get-app-icon');
-  const currentTheme: 'dark' | 'light' = await ipcRenderer.invoke('current-theme');
+  try {
+    const platform = await ipcRenderer.invoke('get-platform');
+    if (platform === 'darwin') {
+      return;
+    }
+    const iconPath = await ipcRenderer.invoke('get-app-icon');
+    const currentTheme: 'dark' | 'light' = await ipcRenderer.invoke('current-theme');
+  } catch (error) {
+    console.error('Failed to initialize titlebar:', error);
+    return;
+  }

🧰 Tools

🪛 GitHub Check: Cspell

[warning] 64-64:
Unknown word (Titlebar)

---

[warning] 66-66:
Unknown word (Titlebar)

---

[warning] 80-80:
Unknown word (Titlebar)

🪛 GitHub Actions: Check Spelling and Typos with cspell

[warning] 64-80: Unknown word: 'Titlebar' (multiple instances)

---

89-140: Consider improving CSS maintainability and cross-browser support.

The styles could benefit from the following improvements:

1. Avoid !important by increasing specificity
2. Add vendor prefixes for better cross-browser support

Apply this diff to improve the styles:

-            top:0px !important;
-            overflow: unset !important;
+            top: 0px;
+            overflow: visible;

-            -webkit-overflow-scrolling: touch;
+            -webkit-overflow-scrolling: touch;
+            -ms-overflow-style: -ms-autohiding-scrollbar;
+            overflow-scrolling: touch;

-            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);

🧰 Tools

🪛 GitHub Actions: Check Spelling and Typos with cspell

[warning] 120-120: Unknown word: 'flexbox'

apps/server-web/src/renderer/App.css (1)

13-14: Consider documenting the reason for commenting out background styles.

The background styles have been commented out without explanation. If this is intentional, please add a comment explaining why these styles are preserved but disabled.

apps/server-web/package.json (1)

173-174: Update copyright year range.

Consider using a range for the copyright year (e.g., "2020-Present" instead of just "2024-Present") if the project started before 2024.

apps/server-web/src/renderer/components/Updater.tsx (2)

114-160: Enhance accessibility of the form controls.

While the implementation is solid, consider these accessibility improvements:

 <Switch.Root
   className="switch-root has-[:checked]:bg-violet-800"
   id="airplane-mode"
+  aria-label={t('FORM.LABELS.AUTO_UPDATE_TOGGLE')}
   onCheckedChange={(value) => {
     setOpen();
     props.changeAutoUpdate({
       autoUpdate: value,
       updateCheckPeriod: props.data.updateCheckPeriod,
     });
     props.saveSettingUpdate({
       autoUpdate: value,
       updateCheckPeriod: props.data.updateCheckPeriod,
     });
   }}
   checked={props.data.autoUpdate}
 >
   <Switch.Thumb className="switch-thumb" />
 </Switch.Root>

---

Line range hint 183-233: Add auto-scroll for update logs.

Consider adding auto-scroll to keep the latest logs visible:

 <div
   className="inline-block w-full bg-black text-white text-xs leading-3 rounded-lg mt-3"
+  ref={(el) => {
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }}
   style={{
     minHeight: '100px',
     maxHeight: '150px',
     overflowY: 'auto',
   }}
 >

apps/server-web/src/main/main.ts (3)

77-113: Add error handling for window operations.

Consider adding error handling to gracefully handle cases where window references are undefined:

 const handleButtonClose = (windowTypes: IWindowTypes) => {
+  try {
     switch (windowTypes) {
       case WindowTypes.LOG_WINDOW:
         logWindow?.close();
         break;
       // ... other cases
     }
+  } catch (error) {
+    console.error(`Failed to close window: ${windowTypes}`, error);
+  }
 }

---

651-662: Enhance type safety for control button actions.

Consider using an enum or union type for button actions:

+type ControlButtonAction = 'close' | 'minimize';

 ipcMain.on(IPC_TYPES.CONTROL_BUTTON, (_, arg: { 
+  type: ControlButtonAction;
+  windowTypes: IWindowTypes;
 }) => {
   switch (arg.type) {
     case 'close':
       handleButtonClose(arg.windowTypes);
       break;
     case 'minimize':
       handleMinimizeButton(arg.windowTypes);
       break;
     default:
       break;
   }
 })

---

674-681: Add error handling for icon loading.

Consider adding error handling for icon loading failures:

 ipcMain.handle('get-app-icon', () => {
+  try {
     const nativeIcon = nativeImage.createFromPath(getAssetPath('icons/icon.png'));
+    if (nativeIcon.isEmpty()) {
+      throw new Error('Failed to load application icon');
+    }
     return nativeIcon;
+  } catch (error) {
+    console.error('Error loading application icon:', error);
+    return nativeImage.createEmpty();
+  }
 });

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

apps/server-web/src/renderer/pages/About.tsx (1)

Line range hint 38-52: Add dependency array to useEffect to prevent infinite re-renders.

The useEffect hook is missing its dependency array, which could cause unnecessary re-renders and potential performance issues.

Apply this fix:

- useEffect(() => {
+ useEffect(() => {
    getPlatform();
    window.electron.ipcRenderer.removeEventListener(IPC_TYPES.SETTING_PAGE);
    window.electron.ipcRenderer.on(IPC_TYPES.SETTING_PAGE, (arg: any) => {
      switch (arg.type) {
        case SettingPageTypeMessage.loadSetting:
          setAboutApp({
            name: arg.data.appName,
            version: arg.data.version,
          });
          break;
        default:
          break;
      }
    });
- });
+ }, []); // Add empty dependency array

apps/server-web/src/renderer/pages/Server.tsx (1)

122-170: 🛠️ Refactor suggestion

Improve accessibility of the log section.

This is a duplicate of a previous review comment that hasn't been addressed. The details/summary implementation needs accessibility improvements:

   <details
     className="group"
     open={logOpen}
+    role="region"
+    aria-label="Server Logs Section"
     onClick={(e) => {
       e.preventDefault();
       setLogOpen((prev) => !prev);
     }}
+    onKeyDown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        setLogOpen((prev) => !prev);
+      }
+    }}
   >
-    <summary className="flex justify-between items-center font-medium cursor-pointer list-none">
+    <summary 
+      className="flex justify-between items-center font-medium cursor-pointer list-none"
+      tabIndex={0}
+      role="button"
+    >

apps/server-web/src/renderer/pages/Setup.tsx (1)

38-38: Simplify the redundant className condition.

The className has a redundant condition that always results in 'bg-purple-600'.

-              className={`w-10 h-10 flex justify-center items-center rounded-full ${currentStep === 1 ? 'bg-purple-600' : 'bg-purple-600'}`}
+              className="w-10 h-10 flex justify-center items-center rounded-full bg-purple-600"

apps/server-web/src/renderer/pages/About.tsx (2)

74-74: Consider making the copyright year dynamic.

The hardcoded year "2024" will need manual updates. Consider using a dynamic year:

- Copyright © 2024-Present{' '}
+ Copyright © {new Date().getFullYear()}-Present{' '}

---

81-88: Improve link accessibility.

The links use empty "#" hrefs which isn't ideal for accessibility. Consider using buttons instead since these trigger actions rather than navigation.

- <Link
-   to="#"
-   onClick={() => {
-     handleLinkClick(APP_LINK.TERM_OF_SERVICE);
-   }}
- >
-   Terms Of Service
- </Link>
+ <button
+   type="button"
+   className="text-indigo-500 hover:underline"
+   onClick={() => handleLinkClick(APP_LINK.TERM_OF_SERVICE)}
+ >
+   Terms Of Service
+ </button>

Also applies to: 90-97

apps/server-web/src/renderer/components/SideBar.tsx (2)

20-23: Add error handling for IPC call.

The IPC call to get platform information could fail. Consider adding try-catch block:

  const getPlatform = async () => {
+   try {
      const devicePlatform = await window.electron.ipcRenderer.invoke('get-platform');
      setPlatform(devicePlatform);
+   } catch (error) {
+     console.error('Failed to detect platform:', error);
+     // Fallback to default platform
+   }
  }

---

65-65: Consider using Grid or Flex layout instead of relative positioning.

Using relative positioning with a fixed left-64 value might cause layout issues on different screen sizes or when the sidebar width changes.

- <div className="flex flex-col relative left-64 w-3/4 content-start">{children}</div>
+ <div className="flex flex-col flex-1 min-w-0">{children}</div>

apps/server-web/src/renderer/pages/Server.tsx (4)

2-9: Consider organizing imports by category.

Group imports into categories for better maintainability:

1. React and third-party dependencies
2. Types and constants
3. Components
4. Utilities and styles

 import { useState, useEffect, useRef, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import { ServerPageTypeMessage, WindowTypes } from '../../main/helpers/constant';
 import { IPC_TYPES, LOG_TYPES } from '../../main/helpers/constant';
-import { EverTeamsLogo } from '../components/svgs';
-import { useTranslation } from 'react-i18next';
+import { IDevices } from '../../main/helpers/interfaces';
+
+import { EverTeamsLogo } from '../components/svgs';
 import WindowControl from '../components/window-control';
 import Container from '../components/container';
+
 import { CUSTOM_STYLE } from '../libs/constant';
-import { IDevices } from '../../main/helpers/interfaces';

---

16-17: Consider using a more specific type for platform state.

The current type IDevices allows 'win32', but we're comparing against 'darwin' in the code. Consider using a union type that matches the actual values used.

-  const [ platform, setPlatform ] = useState<IDevices>('win32');
+  const [ platform, setPlatform ] = useState<'darwin' | 'win32' | 'linux'>('win32');

---

30-38: Simplify platform detection logic.

The platform detection logic can be simplified further:

   const getCustomStyle = async () => {
     const platform = await window.electron.ipcRenderer.invoke('get-platform');
     setPlatform(platform);
-    if (platform === 'darwin') {
-      setCustomStyle(CUSTOM_STYLE.MAC);
-    } else {
-      setCustomStyle(CUSTOM_STYLE.WINDOWS); // windows or linux
-    }
+    setCustomStyle(platform === 'darwin' ? CUSTOM_STYLE.MAC : CUSTOM_STYLE.WINDOWS);
   }

---

120-121: Consider moving inline styles to custom style object.

Inline styles for dimensions should be moved to the customStyle object for consistency and maintainability.

-  <div className="flex flex-col w-3/4 min-h-full max-h-96 px-5" style={{minHeight: '730px'}}>
-    <div className={customStyle.boxContent} style={{maxHeight: '690px'}}>
+  <div className="flex flex-col w-3/4 min-h-full max-h-96 px-5" style={customStyle.contentWrapper}>
+    <div className={customStyle.boxContent} style={customStyle.boxContentHeight}>

Update the CUSTOM_STYLE constant to include these new styles:

{
  contentWrapper: {
    minHeight: '730px'
  },
  boxContentHeight: {
    maxHeight: '690px'
  }
}

apps/server-web/src/main/preload.ts (3)

Line range hint 42-49: Improve type safety by avoiding 'any' type.

The type definitions for callbacks should be more specific instead of using 'any'.

 export type languageChange = {
-  language: (callback: any) => void
+  language: (callback: (value: string) => void) => void
 }
 export type themeChange = {
-  theme: (callback: any) => void
+  theme: (callback: (value: { data: 'light' | 'dark' }) => void) => void
 }

---

60-63: Consider moving theme colors to a constants file.

The theme colors are hardcoded within the event listener. These should be moved to a dedicated constants file for better maintainability and reuse.

// src/constants/theme.ts
export const THEME_COLORS = {
  light: '#F2F2F2',
  dark: '#1e2025'
} as const;

---

89-141: Move CSS to a separate stylesheet and improve maintainability.

The current implementation has several issues:

1. Inline CSS makes it harder to maintain
2. Usage of !important should be avoided
3. Hard-coded values could be CSS variables

Consider moving the styles to a separate CSS file and using CSS variables:

// styles/titlebar.css
:root {
  --titlebar-height: 2.231em;
  --menubar-padding: 5px;
  --menu-border-radius: 4px;
  --menu-backdrop-blur: 10px;
}

.cet-container {
  top: 0;
  overflow: unset;
}

/* ... rest of the CSS ... */

Then import it in the preload script:

- const overStyle = document.createElement('style');
- overStyle.innerHTML = `...`;
+ const link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = '../styles/titlebar.css';
- document.head.appendChild(overStyle);
+ document.head.appendChild(link);

apps/server-web/src/main/helpers/interfaces/i-constant.ts (2)

3-12: Consider flattening the maxHeight property.

The maxHeight property is unnecessarily nested within an object. Consider flattening it to improve type clarity:

 export type PlatformStyle = {
   bgColor: string;
   rounded: string;
   sideBar: string;
   sideServer: string;
-  maxHeight: {
-    maxHeight?: string;
-  };
+  maxHeight?: string;
   boxContent: string;
 }

---

19-19: Align platform naming conventions.

The platform identifiers in IDevices use Node.js platform names (win32, darwin, linux), while CustomStyle uses uppercase platform names (WINDOWS, MAC). Consider creating a mapping type to maintain consistency:

export type NodePlatform = 'win32' | 'darwin' | 'linux';

export type PlatformMap = {
  'win32': 'WINDOWS';
  'darwin': 'MAC';
  'linux': 'LINUX';
};

export type IDevices = NodePlatform;

apps/server-web/src/main/main.ts (2)

96-113: Reduce code duplication by extracting common window operation logic.

The handleMinimizeButton function is very similar to handleButtonClose. Consider refactoring to reduce duplication:

type WindowOperation = 'close' | 'minimize';

const handleWindowOperation = (operation: WindowOperation, windowTypes: IWindowTypes) => {
  const windows = {
    [WindowTypes.LOG_WINDOW]: logWindow,
    [WindowTypes.SETUP_WINDOW]: setupWindow,
    [WindowTypes.ABOUT_WINDOW]: aboutWindow,
    [WindowTypes.SETTING_WINDOW]: settingWindow,
  };
  
  const window = windows[windowTypes];
  window?.[operation]();
};

Then use it like this:

const handleButtonClose = (windowTypes: IWindowTypes) => handleWindowOperation('close', windowTypes);
const handleMinimizeButton = (windowTypes: IWindowTypes) => handleWindowOperation('minimize', windowTypes);

---

674-676: Add type safety to the platform handler.

Consider adding type safety to ensure the handler returns a valid platform:

-ipcMain.handle('get-platform', () => {
+ipcMain.handle('get-platform', (): IDevices => {
   return process.platform;
 })

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro