Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/sidebar/components/sidebar-item.tsx

@@ -1,72 +1,30 @@
-import type { ReactNode } from 'react';
-import type { LinkProps } from 'react-router-dom';
+import clsx from 'clsx';
+import { memo } from 'react';
+import { Link, LinkProps } from 'react-router-dom';
 
-import { createPolymorphicComponent, Flex, FlexProps } from '@mantine/core';
-import { Link } from 'react-router-dom';
-import styled, { css } from 'styled-components';
+import styles from './sidebar-item.module.css';
 
-interface ListItemProps extends FlexProps {
-    children: ReactNode;
-    disabled?: boolean;
-    to?: string;
+import { Button, ButtonProps } from '/@/shared/components/button/button';
+
+interface SidebarItemProps extends ButtonProps {
+    to: LinkProps['to'];
 }
 
-const StyledItem = styled(Flex)`
-    width: 100%;
-    font-family: var(--content-font-family);
-    font-weight: 600;
-
-    &:focus-visible {
-        border: 1px solid var(--primary-color);
-    }
-`;
-
-const ItemStyle = css`
-    display: flex;
-    width: 100%;
-    padding: 0.5rem 1rem;
-    color: var(--sidebar-fg);
-    border: 1px transparent solid;
-    transition: color 0.2s ease-in-out;
-
-    &:hover {
-        color: var(--sidebar-fg-hover);
-    }
-`;
-
-const _ItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
-    pointer-events: ${(props) => props.disabled && 'none'};
-    opacity: ${(props) => props.disabled && 0.6};
-
-    &:focus-visible {
-        border: 1px solid var(--primary-color);
-    }
-
-    ${ItemStyle}
-`;
-
-const ItemLink = createPolymorphicComponent<'a', ListItemProps>(_ItemLink);
-
-export const SidebarItem = ({ children, to, ...props }: ListItemProps) => {
-    if (to) {
-        return (
-            <ItemLink
-                component={Link}
-                to={to}
-                {...props}
-            >
-                {children}
-            </ItemLink>
-        );
-    }
+export const SidebarItem = ({ children, to, ...props }: SidebarItemProps) => {
     return (
-        <StyledItem
-            tabIndex={0}
+        <Button
+            className={clsx({
+                [styles.disabled]: props.disabled,
+                [styles.link]: true,
+            })}
+            component={Link}
+            to={to}
+            variant="subtle"
             {...props}
         >
             {children}
-        </StyledItem>
+        </Button>
     );
 };
 
-SidebarItem.Link = ItemLink;
+export const MemoizedSidebarItem = memo(SidebarItem);