working settings menu and fullscreenpopout behavior (#136)

Co-authored-by: Sean Oliver <[email protected]>

Author: swyxio

assets/icon.icns

@@ -31,6 +31,12 @@
 	"dependencies": {
 		"@headlessui/react": "^1.7.16",
 		"@heroicons/react": "^2.0.18",
+		"@radix-ui/react-dialog": "^1.0.4",
+		"@radix-ui/react-icons": "^1.3.0",
+		"@radix-ui/react-slot": "^1.0.2",
+		"@radix-ui/react-tooltip": "^1.0.6",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.0.0",
 		"electron-debug": "^3.2.0",
 		"electron-log": "^4.4.8",
 		"electron-store": "^8.1.0",
@@ -39,7 +45,8 @@
 		"react-beautiful-dnd": "^13.1.1",
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^6.11.2",
-		"react-split": "^2.0.14"
+		"react-split": "^2.0.14",
+		"tailwind-merge": "^1.14.0"
 	},
 	"repository": {
 		"type": "git",

assets/icon.ico

@@ -32,8 +32,8 @@ if (
 ) {
 	console.log(
 		chalk.black.bgYellow.bold(
-			'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"',
-		),
+			'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"'
+		)
 	);
 	execSync('npm run postinstall');
 }
@@ -205,7 +205,7 @@ const configuration: webpack.Configuration = {
 			let args = ['run', 'start:main'];
 			if (process.env.MAIN_ARGS) {
 				args = args.concat(
-					['--', ...process.env.MAIN_ARGS.matchAll(/"[^"]+"|[^\s"]+/g)].flat(),
+					['--', ...process.env.MAIN_ARGS.matchAll(/"[^"]+"|[^\s"]+/g)].flat()
 				);
 			}
 			spawn('npm', args, {

assets/icon.png

@@ -10,15 +10,15 @@ const rendererPath = path.join(webpackPaths.distRendererPath, 'renderer.js');
 if (!fs.existsSync(mainPath)) {
 	throw new Error(
 		chalk.whiteBright.bgRed.bold(
-			'The main process is not built yet. Build it by running "npm run build:main"',
-		),
+			'The main process is not built yet. Build it by running "npm run build:main"'
+		)
 	);
 }
 
 if (!fs.existsSync(rendererPath)) {
 	throw new Error(
 		chalk.whiteBright.bgRed.bold(
-			'The renderer process is not built yet. Build it by running "npm run build:renderer"',
-		),
+			'The renderer process is not built yet. Build it by running "npm run build:renderer"'
+		)
 	);
 }

images/[email protected] assets/[email protected]

@@ -16,34 +16,34 @@ if (dependencies) {
 		// because of a devDependency then that is okay. Warn when it is installed
 		// because of a dependency
 		const { dependencies: dependenciesObject } = JSON.parse(
-			execSync(`npm ls ${nativeDeps.join(' ')} --json`).toString(),
+			execSync(`npm ls ${nativeDeps.join(' ')} --json`).toString()
 		);
 		const rootDependencies = Object.keys(dependenciesObject);
 		const filteredRootDependencies = rootDependencies.filter((rootDependency) =>
-			dependenciesKeys.includes(rootDependency),
+			dependenciesKeys.includes(rootDependency)
 		);
 		if (filteredRootDependencies.length > 0) {
 			const plural = filteredRootDependencies.length > 1;
 			console.log(`
  ${chalk.whiteBright.bgYellow.bold(
-		'Webpack does not work with native dependencies.',
+		'Webpack does not work with native dependencies.'
  )}
 ${chalk.bold(filteredRootDependencies.join(', '))} ${
 				plural ? 'are native dependencies' : 'is a native dependency'
 			} and should be installed inside of the "./release/app" folder.
  First, uninstall the packages from "./package.json":
 ${chalk.whiteBright.bgGreen.bold('npm uninstall your-package')}
  ${chalk.bold(
-		'Then, instead of installing the package to the root "./package.json":',
+		'Then, instead of installing the package to the root "./package.json":'
  )}
 ${chalk.whiteBright.bgRed.bold('npm install your-package')}
  ${chalk.bold('Install the package to "./release/app/package.json"')}
 ${chalk.whiteBright.bgGreen.bold(
-	'cd ./release/app && npm install your-package',
+	'cd ./release/app && npm install your-package'
 )}
  Read more about native dependencies at:
 ${chalk.bold(
-	'https://electron-react-boilerplate.js.org/docs/adding-dependencies/#module-structure',
+	'https://electron-react-boilerplate.js.org/docs/adding-dependencies/#module-structure'
 )}
  `);
 			process.exit(1);

images/iconTemplate.png assets/iconTemplate.png

@@ -8,8 +8,8 @@ export default function checkNodeEnv(expectedEnv) {
 	if (process.env.NODE_ENV !== expectedEnv) {
 		console.log(
 			chalk.whiteBright.bgRed.bold(
-				`"process.env.NODE_ENV" must be "${expectedEnv}" to use this webpack config`,
-			),
+				`"process.env.NODE_ENV" must be "${expectedEnv}" to use this webpack config`
+			)
 		);
 		process.exit(2);
 	}

images/[email protected] assets/[email protected]

@@ -7,8 +7,8 @@ detectPort(port, (err, availablePort) => {
 	if (port !== String(availablePort)) {
 		throw new Error(
 			chalk.whiteBright.bgRed.bold(
-				`Port "${port}" on "localhost" is already in use. Please use another port. ex: PORT=4343 npm start`,
-			),
+				`Port "${port}" on "localhost" is already in use. Please use another port. ex: PORT=4343 npm start`
+			)
 		);
 	} else {
 		process.exit(0);

images/godmode.icns

@@ -14,7 +14,7 @@ exports.default = async function notarizeMacos(context) {
 
 	if (!('APPLE_ID' in process.env && 'APPLE_ID_PASS' in process.env)) {
 		console.warn(
-			'Skipping notarizing step. APPLE_ID and APPLE_ID_PASS env variables must be set',
+			'Skipping notarizing step. APPLE_ID and APPLE_ID_PASS env variables must be set'
 		);
 		return;
 	}

images/godmode.ico

@@ -1,13 +1,211 @@
+import { Button } from 'renderer/components/ui/button';
+import {
+	Dialog,
+	DialogXContent,
+	DialogHeader,
+	DialogTitle,
+} from 'renderer/components/ui/dialog';
 import { ProviderInterface } from 'lib/types';
+import React from 'react';
+import {
+	ArrowLeftIcon,
+	ArrowRightIcon,
+	ReloadIcon,
+	ResetIcon,
+	ZoomInIcon,
+	ZoomOutIcon,
+} from '@radix-ui/react-icons';
+import { Input } from 'renderer/components/ui/input';
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from 'renderer/components/ui/tooltip';
+
+export default function Pane({
+	provider,
+	number,
+	currentlyOpenPreviewPane,
+	setOpenPreviewPane,
+}: {
+	provider: ProviderInterface;
+	number: number;
+	currentlyOpenPreviewPane: number;
+	setOpenPreviewPane: (num: number) => void;
+}) {
+	const isPreviewOpen = currentlyOpenPreviewPane === number;
+	const contentRef = React.useRef<HTMLDivElement>(null);
+
+	const [shownUrl, setShownUrl] = React.useState(null);
+	// this did not work not sure why
+	// set a timer effect every second to check if the webview is can go back
+	React.useEffect(() => {
+		const interval = setInterval(() => {
+			// @ts-ignore
+			const newUrl = provider.getWebview()?.src;
+			if (newUrl !== shownUrl) setShownUrl(newUrl);
+		}, 1000);
+		return () => clearInterval(interval);
+	});
+
+	// this did not work not sure why
+	// // set a timer effect every second to check if the webview is can go back
+	// const [canGoBack, setCanGoBack] = React.useState(false);
+	// const [canGoFwd, setCanGoFwd] = React.useState(false);
+	// React.useEffect(() => {
+	// 	const interval = setInterval(() => {
+	// 		console.log(
+	// 			'provider.getWebview()?.canGoBack()',
+	// 			provider.getWebview(),
+	// 			provider.getWebview()?.canGoBack()
+	// 		);
+	// 		// @ts-ignore
+	// 		if (provider.getWebview()?.canGoBack()) {
+	// 			setCanGoBack(true);
+	// 		} else {
+	// 			setCanGoBack(false);
+	// 		}
+	// 		// @ts-ignore
+	// 		if (provider.getWebview()?.canGoForward()) {
+	// 			setCanGoFwd(true);
+	// 		} else {
+	// 			setCanGoFwd(true);
+	// 		}
+	// 	}, 1000);
+	// 	return () => clearInterval(interval);
+	// });
+
+	function XButton({ children, tooltip, onClick, className = '' }: any) {
+		return (
+			<TooltipProvider delayDuration={300}>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button
+							variant="outline"
+							className={`hover:bg-gray-200 ${className}`}
+							onClick={onClick}
+						>
+							{children}
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent side="right" className="text-white bg-black">
+						<p>{tooltip}</p>
+					</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		);
+	}
 
-export default function Pane({ provider }: { provider: ProviderInterface }) {
 	return (
-		<div key={provider.paneId()} className="page darwin">
+		<div key={provider.paneId()} className="page darwin group">
+			<div className="hidden powerbar group-hover:block">
+				<Button
+					className="text-xs shadow-2xl"
+					onClick={() => setOpenPreviewPane(number)}
+					variant="ghost"
+				>
+					<svg
+						width="15"
+						height="15"
+						viewBox="0 0 15 15"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5 3.04999C11.7485 3.04999 11.95 3.25146 11.95 3.49999V7.49999C11.95 7.74852 11.7485 7.94999 11.5 7.94999C11.2515 7.94999 11.05 7.74852 11.05 7.49999V4.58639L4.58638 11.05H7.49999C7.74852 11.05 7.94999 11.2515 7.94999 11.5C7.94999 11.7485 7.74852 11.95 7.49999 11.95L3.49999 11.95C3.38064 11.95 3.26618 11.9026 3.18179 11.8182C3.0974 11.7338 3.04999 11.6193 3.04999 11.5L3.04999 7.49999C3.04999 7.25146 3.25146 7.04999 3.49999 7.04999C3.74852 7.04999 3.94999 7.25146 3.94999 7.49999L3.94999 10.4136L10.4136 3.94999L7.49999 3.94999C7.25146 3.94999 7.04999 3.74852 7.04999 3.49999C7.04999 3.25146 7.25146 3.04999 7.49999 3.04999L11.5 3.04999Z"
+							fill="currentColor"
+							fillRule="evenodd"
+							clipRule="evenodd"
+						></path>
+					</svg>{' '}
+					Cmd + {number}
+				</Button>
+			</div>
+			<Dialog open={isPreviewOpen} onOpenChange={() => setOpenPreviewPane(0)}>
+				<DialogXContent
+					className="bg-white pointer-events-none"
+					ref={contentRef}
+				>
+					<DialogHeader>
+						<DialogTitle className="flex items-center justify-between pr-8">
+							{provider.fullName}
+							<div className="flex">
+								<XButton
+									tooltip="Cmd + ="
+									onClick={() => {
+										provider
+											.getWebview()
+											// @ts-ignore
+											.setZoomLevel(provider.getWebview().getZoomLevel() + 1);
+									}}
+								>
+									<ZoomInIcon />
+								</XButton>
+								<XButton
+									tooltip="Cmd + -"
+									onClick={() => {
+										provider
+											.getWebview()
+											// @ts-ignore
+											.setZoomLevel(provider.getWebview().getZoomLevel() - 1);
+									}}
+								>
+									<ZoomOutIcon />
+								</XButton>
+							</div>
+							<Input type="url" value={shownUrl || ''} readOnly={true} />
+							<div className="flex">
+								<XButton
+									tooltip="Cmd + R"
+									className="mr-4"
+									onClick={() => {
+										provider.getWebview()?.refresh();
+									}}
+								>
+									<ReloadIcon />
+								</XButton>
+								<XButton
+									tooltip="Cmd + h"
+									onClick={() => {
+										provider.getWebview()?.goBack();
+									}}
+								>
+									<ArrowLeftIcon />
+								</XButton>
+								<XButton
+									tooltip="Cmd + ;"
+									onClick={() => {
+										provider.getWebview()?.goForward();
+									}}
+								>
+									<ArrowRightIcon />
+								</XButton>
+								{provider.clearCookies && (
+									<Button
+										variant="outline"
+										onClick={() => {
+											provider.clearCookies();
+										}}
+									>
+										<ResetIcon className="mr-1" /> Clear Cookies
+									</Button>
+								)}
+							</div>
+						</DialogTitle>
+					</DialogHeader>
+				</DialogXContent>
+			</Dialog>
 			<webview
 				// @ts-ignore - we need this to be here or it will not show up in electron and then the allowpopups doesnt work
 				allowpopups="true"
 				id={provider.webviewId}
 				src={provider.url}
+				className={
+					isPreviewOpen
+						? 'fixed pointer-events-auto left-[5%] top-[10%] z-[100] grid w-10/12 gap-4 p-2 duration-200 sm:rounded-lg rounded-xl h-[85vh]'
+						: ''
+				}
 				useragent={
 					provider.getUserAgent() ? provider.getUserAgent() : undefined
 				}

images/godmode.png

@@ -16,4 +16,18 @@ export interface ProviderInterface {
 	getUserAgent(): string;
 	isEnabled(): boolean;
 	setEnabled(enabled: boolean): void;
+	clearCookies(): void;
+}
+
+export interface Settings {
+	getGlobalShortcut: () => Promise<string>;
+	setGlobalShortcut: (shortcut: string) => Promise<boolean>;
+	getPlatform: () => Promise<string>;
+}
+
+// Tell typescript that the window object has a property called settings
+declare global {
+	interface Window {
+		settings: Settings;
+	}
 }