[feat]: Remote Improvements

package.json

@@ -332,6 +332,7 @@
         "nanoid": "^3.3.3",
         "net": "^1.0.2",
         "node-mpv": "github:jeffvli/Node-MPV",
+        "nosleep.js": "^0.12.0",
         "overlayscrollbars": "^2.2.1",
         "overlayscrollbars-react": "^0.5.1",
         "react": "^18.2.0",

src/remote/app.tsx

@@ -3,6 +3,7 @@ import { MantineProvider } from '@mantine/core';
 import './styles/global.scss';
 import { useIsDark, useReconnect } from '/@/remote/store';
 import { Shell } from '/@/remote/components/shell';
+import { AppTheme } from '/@/renderer/themes/types';
 
 export const App = () => {
     const isDark = useIsDark();
@@ -12,6 +13,11 @@ export const App = () => {
         reconnect();
     }, [reconnect]);
 
+    useEffect(() => {
+        const targetTheme: AppTheme = isDark ? AppTheme.DEFAULT_DARK : AppTheme.DEFAULT_LIGHT;
+        document.body.setAttribute('data-theme', targetTheme);
+    }, [isDark]);
+
     return (
         <MantineProvider
             withGlobalStyles

src/remote/components/buttons/image-button.tsx

@@ -8,10 +8,7 @@ export const ImageButton = () => {
 
     return (
         <RemoteButton
-            mr={5}
-            size="xl"
             tooltip={showImage ? 'Hide Image' : 'Show Image'}
-            variant="default"
             onClick={() => toggleImage()}
         >
             {showImage ? <CiImageOff size={30} /> : <CiImageOn size={30} />}

src/remote/components/buttons/reconnect-button.tsx

@@ -9,10 +9,7 @@ export const ReconnectButton = () => {
     return (
         <RemoteButton
             $active={!connected}
-            mr={5}
-            size="xl"
             tooltip={connected ? 'Reconnect' : 'Not connected. Reconnect.'}
-            variant="default"
             onClick={() => reconnect()}
         >
             <RiRestartLine size={30} />

src/remote/components/buttons/remote-button.tsx

@@ -12,7 +12,7 @@ interface StyledButtonProps extends MantineButtonProps {
 }
 
 export interface ButtonProps extends StyledButtonProps {
-    tooltip: string;
+    tooltip?: string;
 }
 
 const StyledButton = styled(Button)<StyledButtonProps>`
@@ -37,19 +37,29 @@ const StyledButton = styled(Button)<StyledButtonProps>`
 
 export const RemoteButton = forwardRef<HTMLButtonElement, ButtonProps>(
     ({ children, tooltip, ...props }: ButtonProps, ref) => {
-        return (
-            <Tooltip
-                withinPortal
-                label={tooltip}
+        const button = (
+            <StyledButton
+                fullWidth
+                size="xl"
+                variant="default"
+                {...props}
+                ref={ref}
             >
-                <StyledButton
-                    {...props}
-                    ref={ref}
-                >
-                    {children}
-                </StyledButton>
-            </Tooltip>
+                {children}
+            </StyledButton>
         );
+        if (tooltip) {
+            return (
+                <Tooltip
+                    withinPortal
+                    events={{ focus: true, hover: true, touch: true }}
+                    label={tooltip}
+                >
+                    {button}
+                </Tooltip>
+            );
+        }
+        return button;
     },
 );
 

src/remote/components/buttons/sleep-button.tsx

@@ -0,0 +1,18 @@
+import { RemoteButton } from '/@/remote/components/buttons/remote-button';
+import { LuMonitor, LuMonitorOff } from 'react-icons/lu';
+import { useNoSleepContext } from '/@/remote/context/nosleep-context';
+import { useToggleNoSleep } from '/@/remote/hooks/use-toggle-no-sleep';
+
+export const SleepButton = () => {
+    const { enabled } = useNoSleepContext();
+    const toggleNoSleep = useToggleNoSleep();
+
+    return (
+        <RemoteButton
+            tooltip={enabled ? 'Enable screen lock' : 'Disable screen lock'}
+            onClick={toggleNoSleep}
+        >
+            {enabled ? <LuMonitorOff size={30} /> : <LuMonitor size={30} />}
+        </RemoteButton>
+    );
+};

src/remote/components/buttons/theme-button.tsx

@@ -1,24 +1,14 @@
 import { useIsDark, useToggleDark } from '/@/remote/store';
 import { RiMoonLine, RiSunLine } from 'react-icons/ri';
 import { RemoteButton } from '/@/remote/components/buttons/remote-button';
-import { AppTheme } from '/@/renderer/themes/types';
-import { useEffect } from 'react';
 
 export const ThemeButton = () => {
     const isDark = useIsDark();
     const toggleDark = useToggleDark();
 
-    useEffect(() => {
-        const targetTheme: AppTheme = isDark ? AppTheme.DEFAULT_DARK : AppTheme.DEFAULT_LIGHT;
-        document.body.setAttribute('data-theme', targetTheme);
-    }, [isDark]);
-
     return (
         <RemoteButton
-            mr={5}
-            size="xl"
             tooltip="Toggle Theme"
-            variant="default"
             onClick={() => toggleDark()}
         >
             {isDark ? <RiSunLine size={30} /> : <RiMoonLine size={30} />}

src/remote/components/menu.tsx

@@ -0,0 +1,49 @@
+import { CiImageOff, CiImageOn } from 'react-icons/ci';
+import { LuMonitor, LuMonitorOff } from 'react-icons/lu';
+import { RiMenuFill, RiMoonLine, RiSunLine } from 'react-icons/ri';
+import { RemoteButton } from '/@/remote/components/buttons/remote-button';
+import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
+import { useIsDark, useShowImage, useToggleDark, useToggleShowImage } from '/@/remote/store';
+import { useNoSleepContext } from '/@/remote/context/nosleep-context';
+import { useToggleNoSleep } from '/@/remote/hooks/use-toggle-no-sleep';
+
+export const ResponsiveMenu = () => {
+    const showImage = useShowImage();
+    const toggleImage = useToggleShowImage();
+    const isDark = useIsDark();
+    const toggleDark = useToggleDark();
+
+    const { enabled } = useNoSleepContext();
+    const toggleNoSleep = useToggleNoSleep();
+
+    return (
+        <DropdownMenu closeOnItemClick={false}>
+            <DropdownMenu.Target>
+                <RemoteButton>
+                    <RiMenuFill size={30} />
+                </RemoteButton>
+            </DropdownMenu.Target>
+
+            <DropdownMenu.Dropdown>
+                <DropdownMenu.Item
+                    icon={showImage ? <CiImageOff size={30} /> : <CiImageOn size={30} />}
+                    onClick={toggleImage}
+                >
+                    {showImage ? 'Hide Image' : 'Show Image'}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                    icon={isDark ? <RiSunLine size={30} /> : <RiMoonLine size={30} />}
+                    onClick={toggleDark}
+                >
+                    Toggle Theme
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                    icon={enabled ? <LuMonitorOff size={30} /> : <LuMonitor size={30} />}
+                    onClick={toggleNoSleep}
+                >
+                    {enabled ? 'Enable screen lock' : 'Disable screen lock'}
+                </DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+        </DropdownMenu>
+    );
+};