Use traffic lights on mac instead of windows-like titlebar

apps/desktop/src/common/constants/ipcChannels.json

@@ -75,5 +75,6 @@
   },
   "INTEGRATION": {
     "DISCORD_SET_ACTIVITY": "integration-discordSetActivity"
-  }
+  },
+  "GET_PLATFORM": "getPlatform"
 }

apps/desktop/src/main/index.ts

@@ -63,6 +63,7 @@ const createWindows = async () => {
     minWidth: 250,
     minHeight: 150,
     frame: false,
+    titleBarStyle: "hiddenInset",
     icon: getAssetPath('icon.png'),
     webPreferences: {
       nodeIntegration: true,
@@ -228,6 +229,8 @@ ipcMain.handle(ipcChannels.APP.READ_ENTIRE_FILE, (_event, filepath: string) => {
   return fs.readFileSync(filepath).toString();
 });
 
+ipcMain.handle(ipcChannels.GET_PLATFORM, () => process.platform);
+
 if (process.platform === 'win32') {
   app.commandLine.appendSwitch('high-dpi-support', '1');
   app.commandLine.appendSwitch('force-device-scale-factor', '1');

apps/desktop/src/renderer/App.tsx

@@ -18,6 +18,7 @@ import {
   runningState,
 } from './state/downloaderStates';
 import { autoCheckForUpdatesState } from './state/settingStates';
+import { platformState } from './state/applicationStates';
 import library from './services/library';
 import {
   createRendererIpcHandlers,
@@ -51,6 +52,7 @@ export default function App() {
   const setCurrentTask = useSetRecoilState(currentTaskState);
   const setDownloadErrors = useSetRecoilState(downloadErrorsState);
   const autoCheckForUpdates = useRecoilValue(autoCheckForUpdatesState);
+  const setPlatform = useSetRecoilState(platformState);
 
   useEffect(() => {
     if (loading) {
@@ -60,6 +62,10 @@ export default function App() {
        * Add any additional preload steps here (e.g. data migration, verifications, etc)
        */
 
+      ipcRenderer.invoke(ipcChannels.GET_PLATFORM).then((p) => {
+          setPlatform(p);
+      });
+
       createRendererIpcHandlers(
         (updateInfo) => {
           setUpdateInfo(updateInfo);

apps/desktop/src/renderer/components/general/DashboardSidebar.tsx

@@ -91,7 +91,7 @@ export function DashboardSidebar({ ...props }: React.ComponentProps<typeof Sideb
 
   return (
     <Sidebar {...props}>
-      <SidebarHeader className="pt-4" />
+      <SidebarHeader className="pt-4 h-[28px]" />
       <SidebarContent>
         <NewCategoryDialog
           open={showingNewCategoryDialog}

apps/desktop/src/renderer/components/general/Titlebar.tsx

@@ -1,40 +1,51 @@
 import { titlebarTextState } from '@/renderer/state/libraryStates';
+import { platformState } from '@/renderer/state/applicationStates';
 import { useRecoilValue } from 'recoil';
 import packageJson from '../../../../package.json';
 const { ipcRenderer } = require('electron');
 import ipcChannels from '@/common/constants/ipcChannels.json';
 import { MinusIcon, SquareIcon, XIcon } from 'lucide-react';
+import React, { useEffect, useState } from "react";
 
 export const Titlebar: React.FC = () => {
   const text = useRecoilValue(titlebarTextState);
+  const platform = useRecoilValue(platformState);
+
+  if (platform === null) {
+      return null;
+  }
 
   const formattedText = text ? `${packageJson.productName} - ${text}` : packageJson.productName;
 
   return (
-    <div className="bg-background text-foreground select-none flex justify-between items-center fixed top-0 h-[24px] w-full p-0.5 z-50 overflow-hidden">
-      <div className="ml-2 overflow-hidden text-xs font-sans font-bold tracking-tighter text-muted-foreground line-clamp-1">
-        <span>{formattedText}</span>
-      </div>
-      <div className="flex justify-end">
-        <button
-          className="hover:!bg-foreground hover:!text-background h-[24px] w-[46px] flex items-center justify-center"
-          onClick={() => ipcRenderer.invoke(ipcChannels.WINDOW.MINIMIZE)}
-        >
-          <MinusIcon width={14} height={14} />
-        </button>
-        <button
-          className="hover:!bg-foreground hover:!text-background h-[24px] w-[46px] flex items-center justify-center"
-          onClick={() => ipcRenderer.invoke(ipcChannels.WINDOW.MAX_RESTORE)}
-        >
-          <SquareIcon width={14} height={14} />
-        </button>
-        <button
-          className="hover:!bg-red-500 hover:!text-white h-[24px] w-[46px] flex items-center justify-center"
-          onClick={() => ipcRenderer.invoke(ipcChannels.WINDOW.CLOSE)}
-        >
-          <XIcon width={18} height={18} />
-        </button>
-      </div>
+    <div className={`${platform !== 'darwin' && 'bg-background' || 'bg-[0]'}  text-foreground select-none flex justify-between items-center fixed top-0 h-[24px] w-full p-0.5 z-50 overflow-hidden`}>
+      { platform !== "darwin" && (
+        <>
+          <div className="ml-2 overflow-hidden text-xs font-sans font-bold tracking-tighter text-muted-foreground line-clamp-1">
+            <span>{formattedText}</span>
+          </div>
+          <div className="flex justify-end">
+          <button
+            className="hover:!bg-foreground hover:!text-background h-[24px] w-[46px] flex items-center justify-center"
+            onClick={() => ipcRenderer.invoke(ipcChannels.WINDOW.MINIMIZE)}
+          >
+            <MinusIcon width={14} height={14} />
+          </button>
+          <button
+            className="hover:!bg-foreground hover:!text-background h-[24px] w-[46px] flex items-center justify-center"
+            onClick={() => ipcRenderer.invoke(ipcChannels.WINDOW.MAX_RESTORE)}
+          >
+            <SquareIcon width={14} height={14} />
+            </button>
+            <button
+              className="hover:!bg-red-500 hover:!text-white h-[24px] w-[46px] flex items-center justify-center"
+              onClick={() => ipcRenderer.invoke(ipcChannels.WINDOW.CLOSE)}
+            >
+              <XIcon width={18} height={18} />
+              </button>
+            </div>
+          </>
+      )}
     </div>
   );
 };

apps/desktop/src/renderer/components/reader/ReaderSidebar.tsx

@@ -112,15 +112,18 @@ export const ReaderSidebar: React.FC<Props> = (props: Props) => {
   return (
     <Sidebar collapsible="offcanvas">
       <SidebarHeader className="border-b border-sidebar-border">
-        <SidebarMenuItem>
-          <SidebarMenuButton
-            className="max-w-full flex space-x-1 px-1 py-6"
-            onClick={() => props.exitPage()}
-          >
-            <XIcon className="opacity-50" />
-            <h3 className="truncate font-semibold text-wrap line-clamp-2">{readerSeries.title}</h3>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
+          <div className="h-[20px]" />
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                className="max-w-full flex space-x-1 px-1 py-6"
+                onClick={() => props.exitPage()}
+              >
+                <XIcon className="opacity-50" />
+                <h3 className="truncate font-semibold text-wrap line-clamp-2">{readerSeries.title}</h3>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+        </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
         <SidebarGroup className="pt-4">

apps/desktop/src/renderer/state/applicationStates.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const platformState = atom<string | undefined>({
+    key: 'platformState',
+    default: undefined
+});