Merge remote-tracking branch 'origin/main'

desktop-app/src/main/screenshot/index.ts

@@ -3,7 +3,7 @@ import { Device } from 'common/deviceList';
 import { ipcMain, shell, webContents } from 'electron';
 import { writeFile, ensureDir } from 'fs-extra';
 import path from 'path';
-import { homedir } from 'os';
+import store from '../../store';
 
 export interface ScreenshotArgs {
   webContentsId: number;
@@ -59,7 +59,7 @@ const quickScreenshot = async (
     return { done: false };
   }
   const fileName = name.replaceAll('/', '-').replaceAll(':', '-');
-  const dir = path.join(homedir(), `Desktop/Responsively-Screenshots`);
+  const dir = store.get('userPreferences.screenshot.saveLocation');
   const filePath = path.join(dir, `/${fileName}-${Date.now()}.jpeg`);
   await ensureDir(dir);
   await writeFile(filePath, image.toJPEG(100));

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/index.tsx

@@ -22,12 +22,14 @@ const Bookmark = () => {
   }, [menuFlyout]);
 
   return (
-    <div>
+    <div
+      onMouseEnter={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+    >
       <div className="">
         <div className="relative right-2 w-80 dark:border-slate-400">
           <Button
-            className="flex w-full items-center justify-between pl-6 pb-2 pt-1.5"
-            onClick={() => setIsOpen(!isOpen)}
+            className="flex w-full items-center justify-between pl-6"
             isActive={isOpen}
           >
             <span>Bookmarks</span>

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Settings/SettingsContent.tsx

@@ -0,0 +1,55 @@
+import { useId, useState } from 'react';
+
+import Button from 'renderer/components/Button';
+
+interface Props {
+  onClose: () => void;
+}
+
+export const SettingsContent = ({ onClose }: Props) => {
+  const id = useId();
+  const [screenshotSaveLocation, setScreenshotSaveLocation] = useState<string>(
+    window.electron.store.get('userPreferences.screenshot.saveLocation')
+  );
+
+  const onSave = () => {
+    if (screenshotSaveLocation === '' || screenshotSaveLocation == null) {
+      // eslint-disable-next-line no-alert
+      alert('Please enter a valid location.');
+      return;
+    }
+
+    window.electron.store.set(
+      'userPreferences.screenshot.saveLocation',
+      screenshotSaveLocation
+    );
+    onClose();
+  };
+
+  return (
+    <div className="w-[75vw]">
+      <h2>Screenshots</h2>
+      <div className="my-4 flex flex-col space-y-4 text-sm">
+        <div className="flex flex-col space-y-2">
+          <label htmlFor={id} className="flex flex-col">
+            Location
+            <input
+              type="text"
+              id={id}
+              className="rounded-md border border-gray-300 p-2"
+              value={screenshotSaveLocation}
+              onChange={(e) => setScreenshotSaveLocation(e.target.value)}
+            />
+          </label>
+          <p className="text-sm text-gray-500">
+            The location where screenshots will be saved.
+          </p>
+        </div>
+      </div>
+
+      <Button onClick={onSave} isPrimary isTextButton>
+        Save
+      </Button>
+    </div>
+  );
+};

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Settings/index.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import Button from 'renderer/components/Button';
+import Modal from 'renderer/components/Modal';
+import { SettingsContent } from './SettingsContent';
+
+interface Props {
+  closeFlyout: () => void;
+}
+
+export const Settings = ({ closeFlyout }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onClose = () => setIsOpen(false);
+
+  return (
+    <div className="relative right-2 w-80">
+      <Button
+        className="right-2 m-0 flex w-80 !justify-start pl-6"
+        onClick={() => {
+          setIsOpen(true);
+          closeFlyout();
+        }}
+      >
+        Settings
+      </Button>
+      <Modal isOpen={isOpen} onClose={onClose} title="Settings">
+        <SettingsContent onClose={onClose} />
+      </Modal>
+    </div>
+  );
+};

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx

@@ -9,8 +9,17 @@ import AllowInSecureSSL from './AllowInSecureSSL';
 import ClearHistory from './ClearHistory';
 import PreviewLayout from './PreviewLayout';
 import Bookmark from './Bookmark';
+import { Settings } from './Settings';
 
-const MenuFlyout = () => {
+const Divider = () => (
+  <div className="h-[1px] bg-slate-200 dark:bg-slate-700" />
+);
+
+interface Props {
+  closeFlyout: () => void;
+}
+
+const MenuFlyout = ({ closeFlyout }: Props) => {
   const dispatch = useDispatch();
 
   return (
@@ -21,7 +30,11 @@ const MenuFlyout = () => {
       <Devtools />
       <AllowInSecureSSL />
       <ClearHistory />
-      <Bookmark />
+      <Divider />
+      <div>
+        <Bookmark />
+        <Settings closeFlyout={closeFlyout} />
+      </div>
     </div>
   );
 };

desktop-app/src/renderer/components/ToolBar/Menu/index.tsx

@@ -22,13 +22,17 @@ const Menu = () => {
     dispatch(closeMenuFlyout(!isMenuFlyoutOpen));
   };
 
+  const onClose = () => {
+    dispatch(closeMenuFlyout(false));
+  };
+
   return (
     <div className="relative flex items-center" ref={ref}>
       <Button onClick={handleFlyout} isActive={isMenuFlyoutOpen}>
         <Icon icon="carbon:overflow-menu-vertical" />
       </Button>
       <div style={{ visibility: isMenuFlyoutOpen ? 'visible' : 'hidden' }}>
-        <MenuFlyout />
+        <MenuFlyout closeFlyout={onClose} />
       </div>
     </div>
   );

desktop-app/src/store/index.ts

@@ -1,3 +1,5 @@
+import path from 'path';
+import { homedir } from 'os';
 import { DOCK_POSITION, PREVIEW_LAYOUTS } from '../common/constants';
 import { migrations } from './migrations';
 
@@ -136,6 +138,16 @@ const schema = {
         type: 'boolean',
         default: false,
       },
+      screenshot: {
+        type: 'object',
+        properties: {
+          saveLocation: {
+            type: 'string',
+            default: path.join(homedir(), `Desktop/Responsively-Screenshots`),
+          },
+        },
+        default: {},
+      },
     },
   },
   webPermissions: {