Improve layout (#510)

* fix assessment layout

* improve player layout

* refactor sidebar

* default system theme

* may toggle theme

* fix calendar in dark theme

* fix style in dark mode

* improve player layout

enjoy/src/renderer/context/media-player-provider.tsx

@@ -14,7 +14,17 @@ import { Tooltip } from "react-tooltip";
 import { debounce } from "lodash";
 
 type MediaPlayerContextType = {
-  layout: { name: string, width: number, height: number, upperWrapper: string, lowerWrapper: string, playerWrapper: string, panelWrapper: string, playerHeight: number };
+  layout: {
+    name: string;
+    width: number;
+    height: number;
+    wrapper: string;
+    upperWrapper: string;
+    lowerWrapper: string;
+    playerWrapper: string;
+    panelWrapper: string;
+    playerHeight: number;
+  };
   media: AudioType | VideoType;
   setMedia: (media: AudioType | VideoType) => void;
   setMediaProvider: (mediaProvider: HTMLAudioElement | null) => void;
@@ -72,22 +82,24 @@ export const MediaPlayerProviderContext =
 
 const LAYOUT = {
   sm: {
-    name: 'sm',
-    upperWrapper: "h-[calc(100vh-27.5rem)]",
+    name: "sm",
+    wrapper: "h-[calc(100vh-3.5rem)]",
+    upperWrapper: "h-[calc(100vh-27.5rem)] min-h-64",
     lowerWrapper: "h-[23rem]",
     playerWrapper: "h-[9rem] mb-2",
-    panelWrapper: "h-16",
+    panelWrapper: "h-16 w-full z-10 sticky bottom-0",
     playerHeight: 128,
   },
   lg: {
-    name: 'lg',
+    name: "lg",
+    wrapper: "h-[calc(100vh-3.5rem)]",
     upperWrapper: "h-[calc(100vh-37.5rem)]",
     lowerWrapper: "h-[33rem]",
-    panelWrapper: "h-20",
+    panelWrapper: "h-20 w-full z-10 sticky bottom-0",
     playerWrapper: "h-[13rem] mb-4",
     playerHeight: 192,
   },
-}
+};
 
 export const MediaPlayerProvider = ({
   children,
@@ -97,7 +109,17 @@ export const MediaPlayerProvider = ({
   const minPxPerSec = 150;
   const { EnjoyApp } = useContext(AppSettingsProviderContext);
 
-  const [layout, setLayout] = useState<{ name: string, width: number, height: number, upperWrapper: string, lowerWrapper: string, playerWrapper: string, panelWrapper: string, playerHeight: number }>();
+  const [layout, setLayout] = useState<{
+    name: string;
+    width: number;
+    height: number;
+    wrapper: string;
+    upperWrapper: string;
+    lowerWrapper: string;
+    playerWrapper: string;
+    panelWrapper: string;
+    playerHeight: number;
+  }>();
 
   const [media, setMedia] = useState<AudioType | VideoType>(null);
   const [mediaProvider, setMediaProvider] = useState<HTMLAudioElement | null>(
@@ -342,11 +364,19 @@ export const MediaPlayerProvider = ({
 
   const calculateHeight = () => {
     if (window.innerHeight <= 1080) {
-      setLayout({ ...LAYOUT.sm, width: window.innerWidth, height: window.innerHeight });
+      setLayout({
+        ...LAYOUT.sm,
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
     } else {
-      setLayout({ ...LAYOUT.lg, width: window.innerWidth, height: window.innerHeight });
+      setLayout({
+        ...LAYOUT.lg,
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
     }
-  }
+  };
 
   const deboundeCalculateHeight = debounce(calculateHeight, 100);
 
@@ -471,7 +501,7 @@ export const MediaPlayerProvider = ({
       if (wavesurfer) wavesurfer.destroy();
       setDecoded(false);
       setDecodeError(null);
-    }
+    };
   }, [media, ref, mediaProvider, layout?.playerHeight]);
 
   useEffect(() => {
@@ -479,12 +509,12 @@ export const MediaPlayerProvider = ({
 
     EnjoyApp.window.onResize((event, bounds) => {
       deboundeCalculateHeight();
-    })
+    });
 
     return () => {
       EnjoyApp.window.removeListeners();
-    }
-  }, [])
+    };
+  }, []);
 
   return (
     <>

enjoy/src/renderer/context/theme-provider.tsx

@@ -10,6 +10,7 @@ type ThemeProviderProps = {
 
 type ThemeProviderState = {
   theme: Theme;
+  colorScheme?: Omit<Theme, 'system'>;
   setTheme: (theme: Theme) => void;
 };
 
@@ -29,6 +30,7 @@ export function ThemeProvider({
   const [theme, setTheme] = useState<Theme>(
     () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
   );
+  const [colorScheme, setColorScheme] = useState<Omit<Theme, 'system'>>();
 
   useEffect(() => {
     const root = window.document.documentElement;
@@ -42,14 +44,17 @@ export function ThemeProvider({
         : "light";
 
       root.classList.add(systemTheme);
+      setColorScheme(systemTheme);
       return;
     }
 
+    setColorScheme(theme);
     root.classList.add(theme);
   }, [theme]);
 
   const value = {
     theme,
+    colorScheme,
     setTheme: (theme: Theme) => {
       localStorage.setItem(storageKey, theme);
       setTheme(theme);