Draggable and inline titlebar for MacOS electron app

electron/index.cjs

@@ -23,10 +23,13 @@ function createWindow() {
 	autoHideMenuBar: true,
     show: false,
     icon: iconPath,
+    titleBarStyle: process.platform == 'darwin' ? 'hidden' : 'default',
+    trafficLightPosition: { x: 23, y: 20},
   });
 
   createTray(win);
 
+  win.setMinimumSize(1020, 768); // to avoid overlapping ChatTitle items with traffic lights
   win.maximize();
   win.show();
 

src/components/Chat/ChatContent/ChatTitle.tsx

@@ -5,6 +5,7 @@ import useStore from '@store/store';
 import ConfigMenu from '@components/ConfigMenu';
 import { ChatInterface, ConfigInterface } from '@type/chat';
 import { _defaultChatConfig } from '@constants/chat';
+import EditIcon from '@icon/EditIcon';
 
 const ChatTitle = React.memo(() => {
   const { t } = useTranslation('model');
@@ -21,6 +22,8 @@ const ChatTitle = React.memo(() => {
   const setChats = useStore((state) => state.setChats);
   const currentChatIndex = useStore((state) => state.currentChatIndex);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const isElectron = navigator.userAgent.indexOf('Electron') !== -1;
+  const isMacOS = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 
   const setConfig = (config: ConfigInterface) => {
     const updatedChats: ChatInterface[] = JSON.parse(
@@ -43,29 +46,38 @@ const ChatTitle = React.memo(() => {
   return config ? (
     <>
       <div
-        className='flex gap-x-4 gap-y-1 flex-wrap w-full items-center justify-center border-b border-black/10 bg-gray-50 p-3 dark:border-gray-900/50 dark:bg-gray-700 text-gray-600 dark:text-gray-300 cursor-pointer'
+        className={`flex gap-x-4 gap-y-1 flex-wrap w-full items-center justify-center border-b border-black/10 bg-gray-50 p-3 dark:border-gray-900/50 dark:bg-gray-700 text-gray-600 dark:text-gray-300
+          ${isElectron && isMacOS ? 'drag sticky top-0 z-10' : 'cursor-pointer'}`}
         onClick={() => {
           setIsModalOpen(true);
         }}
       >
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+        <div className='no-drag text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50 cursor-pointer'>
           {t('model')}: {config.model}
         </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+        <div className='no-drag text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50 cursor-pointer'>
           {t('token.label')}: {config.max_tokens}
         </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+        <div className='no-drag text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50 cursor-pointer'>
           {t('temperature.label')}: {config.temperature}
         </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+        <div className='no-drag text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50 cursor-pointer'>
           {t('topP.label')}: {config.top_p}
         </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+        <div className='no-drag text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50 cursor-pointer'>
           {t('presencePenalty.label')}: {config.presence_penalty}
         </div>
-        <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
+        <div className='no-drag text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50 cursor-pointer'>
           {t('frequencyPenalty.label')}: {config.frequency_penalty}
         </div>
+        <div
+          className={`no-drag flex px-2 py-3.5 bg-gray-300/20 dark:bg-gray-900/10 items-center gap-3 h-6 rounded-md hover:bg-gray-300/50 dark:hover:bg-gray-900/50 cursor-pointer`}
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+        >
+          <EditIcon />
+        </div>
       </div>
       {isModalOpen && (
         <ConfigMenu

src/components/Menu/Menu.tsx

@@ -39,7 +39,7 @@ const Menu = () => {
         <div className='flex h-full min-h-0 flex-col'>
           <div className='flex h-full w-full flex-1 items-start border-white/20'>
             <nav className='flex h-full flex-1 flex-col space-y-1 px-2 pt-2'>
-              <div className='flex gap-2'>
+              <div className='drag justify-end flex gap-2'>
                 <NewChat />
                 <NewFolder />
               </div>

src/components/Menu/NewChat.tsx

@@ -10,15 +10,19 @@ const NewChat = ({ folder }: { folder?: string }) => {
   const { t } = useTranslation();
   const addChat = useAddChat();
   const generating = useStore((state) => state.generating);
+  const isElectron = navigator.userAgent.indexOf('Electron') !== -1;
+  const isMacOS = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 
   return (
     <a
-      className={`flex flex-1 items-center rounded-md hover:bg-gray-500/10 transition-all duration-200 text-white text-sm flex-shrink-0 ${
+      className={`no-drag flex items-center rounded-md hover:bg-gray-500/10 transition-all duration-200 text-white text-sm flex-shrink-0 ${
         generating
           ? 'cursor-not-allowed opacity-40'
           : 'cursor-pointer opacity-100'
       } ${
         folder ? 'justify-start' : 'py-2 px-2 gap-3 mb-2 border border-white/20'
+      } ${
+        isElectron && isMacOS ? '' : 'flex-1'
       }`}
       onClick={() => {
         if (!generating) addChat(folder);

src/components/Menu/NewFolder.tsx

@@ -43,7 +43,7 @@ const NewFolder = () => {
 
   return (
     <a
-      className={`flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white text-sm mb-2 flex-shrink-0 border border-white/20 transition-opacity ${
+      className={`no-drag flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white text-sm mb-2 flex-shrink-0 border border-white/20 transition-opacity ${
         generating
           ? 'cursor-not-allowed opacity-40'
           : 'cursor-pointer opacity-100'

src/main.css

@@ -281,3 +281,13 @@
 .hljs-title {
   color: #f22c3d;
 }
+
+.drag {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-app-region: drag;
+}
+
+.no-drag {
+  -webkit-app-region: no-drag;
+}