antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Migrate to Mantine v8 and Design Changes (#961)

Browse source 
* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff 2025-06-24 00:04:36 -07:00 • committed by GitHub
parent bea55d48a8
commit c1330d92b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/renderer/layouts/default-layout/main-content.tsx
View file

@ -1,9 +1,20 @@
import { throttle } from 'lodash';
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import clsx from 'clsx';
import throttle from 'lodash/throttle';
import { motion } from 'motion/react';
import {
CSSProperties,
lazy,
Suspense,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { Outlet, useLocation } from 'react-router';
import styled from 'styled-components';
import { Spinner } from '/@/renderer/components';
import styles from './main-content.module.css';
import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
@ -11,6 +22,7 @@ import { AppRoute } from '/@/renderer/router/routes';
import { useAppStoreActions, useSidebarStore } from '/@/renderer/store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
import { constrainRightSidebarWidth, constrainSidebarWidth } from '/@/renderer/utils';
import { Spinner } from '/@/shared/components/spinner/spinner';
const SideDrawerQueue = lazy(() =>
import('/@/renderer/layouts/default-layout/side-drawer-queue').then((module) => ({
@ -20,26 +32,6 @@ const SideDrawerQueue = lazy(() =>
const MINIMUM_SIDEBAR_WIDTH = 260;
const MainContentContainer = styled.div<{
$leftSidebarWidth: string;
$rightExpanded?: boolean;
$rightSidebarWidth?: string;
$shell?: boolean;
$sidebarCollapsed?: boolean;
}>`
position: relative;
display: ${(props) => (props.$shell ? 'flex' : 'grid')};
grid-area: main-content;
grid-template-areas: 'sidebar . right-sidebar';
grid-template-rows: 1fr;
grid-template-columns: ${(props) =>
props.$sidebarCollapsed ? '80px' : props.$leftSidebarWidth} 1fr ${(props) =>
props.$rightExpanded && props.$rightSidebarWidth};
gap: 0;
background: var(--main-bg);
`;
export const MainContent = ({ shell }: { shell?: boolean }) => {
const location = useLocation();
const { collapsed, leftWidth, rightExpanded, rightWidth } = useSidebarStore();
@ -96,13 +88,20 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
}, [throttledResize, stopResizing]);
return (
<MainContentContainer
$leftSidebarWidth={leftWidth}
$rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
$rightSidebarWidth={rightWidth}
$shell={shell}
$sidebarCollapsed={collapsed}
<motion.div
className={clsx(styles.mainContentContainer, {
[styles.rightExpanded]: showSideQueue && sideQueueType === 'sideQueue',
[styles.shell]: shell,
[styles.sidebarCollapsed]: collapsed,
[styles.sidebarExpanded]: !collapsed,
})}
id="main-content"
style={
{
'--right-sidebar-width': rightWidth,
'--sidebar-width': leftWidth,
} as CSSProperties
}
>
{!shell && (
<>
@ -124,6 +123,6 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
<Suspense fallback={<Spinner container />}>
<Outlet />
</Suspense>
</MainContentContainer>
</motion.div>
);
};