Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/titlebar/components/titlebar.tsx

@@ -1,61 +1,25 @@
 import type { ReactNode } from 'react';
 
-import { Group } from '@mantine/core';
-import styled from 'styled-components';
+import styles from './titlebar.module.css';
 
 import { WindowControls } from '/@/renderer/features/window-controls';
+import { Group } from '/@/shared/components/group/group';
 
 interface TitlebarProps {
     children?: ReactNode;
 }
 
-const TitlebarContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    color: var(--titlebar-fg);
-
-    button {
-        -webkit-app-region: no-drag;
-    }
-`;
-
-// const Left = styled.div`
-//   display: flex;
-//   flex: 1/3;
-//   justify-content: center;
-//   height: 100%;
-//   padding-left: 1rem;
-//   opacity: 0;
-// `;
-
-// const Center = styled.div`
-//   display: flex;
-//   flex: 1/3;
-//   justify-content: center;
-//   height: 100%;
-//   opacity: 0;
-// `;
-
-const Right = styled.div`
-    display: flex;
-    flex: 1/3;
-    justify-content: center;
-    height: 100%;
-`;
-
 export const Titlebar = ({ children }: TitlebarProps) => {
     return (
         <>
-            <TitlebarContainer>
-                <Right>
+            <div className={styles.titlebarContainer}>
+                <div className={styles.right}>
                     {children}
-                    <Group spacing="xs">
+                    <Group gap="xs">
                         <WindowControls />
                     </Group>
-                </Right>
-            </TitlebarContainer>
+                </div>
+            </div>
         </>
     );
 };