antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-03-02 12:17:25 +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

2
src/renderer/hooks/index.ts
View file

@ -3,6 +3,4 @@ export * from './use-container-query';
export * from './use-fast-average-color';
export * from './use-hide-scrollbar';
export * from './use-is-mounted';
export * from './use-is-overflow';
export * from './use-should-pad-titlebar';
export * from './use-theme';

2
src/renderer/hooks/use-fast-average-color.tsx
View file

@ -36,7 +36,7 @@ export const useFastAverageColor = (args: {
});
} else if (srcLoaded) {
idRef.current = id;
return setBackground('var(--placeholder-bg)');
return setBackground('var(--theme-colors-foreground-muted)');
}
return () => {

20
src/renderer/hooks/use-is-overflow.ts
View file

@ -1,20 +0,0 @@
import { MutableRefObject, useLayoutEffect, useState } from 'react';
export const useIsOverflow = (ref: MutableRefObject<HTMLDivElement | null>) => {
const [isOverflow, setIsOverflow] = useState<boolean | undefined>(undefined);
useLayoutEffect(() => {
const { current } = ref;
const trigger = () => {
const hasOverflow = (current?.scrollHeight || 0) > (current?.clientHeight || 0);
setIsOverflow(hasOverflow);
};
if (current) {
trigger();
}
}, [ref]);
return isOverflow;
};

2
src/renderer/hooks/use-server-authenticated.ts
View file

@ -2,8 +2,8 @@ import { debounce } from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
import { api } from '/@/renderer/api';
import { toast } from '/@/renderer/components';
import { useCurrentServer } from '/@/renderer/store';
import { toast } from '/@/shared/components/toast/toast';
import { SongListSort, SortOrder } from '/@/shared/types/domain-types';
import { AuthState, ServerListItem, ServerType } from '/@/shared/types/types';

43
src/renderer/hooks/use-theme.ts
View file

@ -1,43 +0,0 @@
import { useEffect, useState } from 'react';
import { useSettingsStore } from '/@/renderer/store/settings.store';
import { AppTheme } from '/@/shared/types/domain-types';
export const THEME_DATA = [
{ label: 'Default Dark', type: 'dark', value: AppTheme.DEFAULT_DARK },
{ label: 'Default Light', type: 'light', value: AppTheme.DEFAULT_LIGHT },
];
export const useTheme = () => {
const getCurrentTheme = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
const [isDarkTheme, setIsDarkTheme] = useState(getCurrentTheme());
const { followSystemTheme, theme, themeDark, themeLight } = useSettingsStore(
(state) => state.general,
);
const mqListener = (e: any) => {
setIsDarkTheme(e.matches);
};
const getTheme = () => {
if (followSystemTheme) {
return isDarkTheme ? themeDark : themeLight;
}
return theme;
};
const appTheme = getTheme();
useEffect(() => {
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
darkThemeMq.addListener(mqListener);
return () => darkThemeMq.removeListener(mqListener);
}, []);
useEffect(() => {
document.body.setAttribute('data-theme', appTheme);
}, [appTheme]);
return THEME_DATA.find((t) => t.value === appTheme)?.type || 'dark';
};