feature: added compact mode (#178)

* feature: added compact mode

* chore: add cross-env to better support different operating systems in dev

Co-authored-by: Sekwah <contact@sekwah.com>

app/main/src/main.ts

@@ -21,6 +21,7 @@ import {
 	SET_SHOW,
 	RELEASED_NOTES_LINK,
 	TRAY_ICON_UPDATE,
+	SET_COMPACT_MODE,
 } from "@pomatez/shareables";
 import {
 	activateGlobalShortcuts,
@@ -36,7 +37,10 @@ import store from "./store";
 import isDev from "electron-is-dev";
 
 import "v8-compile-cache";
-import { FullscreenState, setFullscreenBreakHandler } from "./lifecycleEventHandlers/fullScreenBreak";
+import {
+	FullscreenState,
+	setFullscreenBreakHandler,
+} from "./lifecycleEventHandlers/fullScreenBreak";
 
 const onProduction = app.isPackaged;
 
@@ -69,7 +73,7 @@ function createMainWindow() {
 	win = new BrowserWindow({
 		width: 340,
 		height: getFrameHeight(),
-		resizable: false,
+		resizable: true,
 		maximizable: false,
 		show: false,
 		frame: store.get("useNativeTitlebar"),
@@ -298,7 +302,23 @@ ipcMain.on(SET_ALWAYS_ON_TOP, (e, { alwaysOnTop }) => {
 });
 
 ipcMain.on(SET_FULLSCREEN_BREAK, (e, args) => {
-	setFullscreenBreakHandler(args, { tray, trayTooltip, fullscreenState, win, contextMenu});
+	setFullscreenBreakHandler(args, {
+		tray,
+		trayTooltip,
+		fullscreenState,
+		win,
+		contextMenu,
+	});
+});
+
+ipcMain.on(SET_COMPACT_MODE, (e, args) => {
+	if (args.compactMode) {
+		win?.setMinimumSize(340, 100);
+		win?.setSize(340, 100);
+	} else {
+		win?.setMinimumSize(340, getFrameHeight());
+		win?.setSize(340, getFrameHeight());
+	}
 });
 
 ipcMain.on(SET_UI_THEME, (e, { isDarkMode }) => {

app/main/src/store/index.ts

@@ -6,6 +6,7 @@ type StoreProps = {
 	userId: string;
 	isDarkMode: boolean;
 	useNativeTitlebar: boolean;
+	compactMode: boolean;
 };
 
 const store = new Store<StoreProps>();

app/renderer/src/App.tsx

@@ -2,9 +2,12 @@ import React, { Suspense } from "react";
 import { HashRouter as Router, Switch, Route } from "react-router-dom";
 import { ThemeProvider, CounterProvider, ElectronProvider } from "contexts";
 import { Layout, Preloader } from "components";
-import { routes } from "config";
+import { compactRoutes, routes } from "config";
+import { useSelector } from "react-redux";
+import { AppStateTypes } from "store";
 
 export default () => {
+	const settings = useSelector((state: AppStateTypes) => state.settings);
 	return (
 		<ThemeProvider>
 			<CounterProvider>
@@ -13,14 +16,23 @@ export default () => {
 						<Layout>
 							<Suspense fallback={<Preloader />}>
 								<Switch>
-									{routes.map(({ exact, path, component }, index) => (
-										<Route
-											exact={exact}
-											path={path}
-											component={component}
-											key={index}
-										/>
-									))}
+									{settings["compactMode"]
+										? compactRoutes.map(({ exact, path, component }, index) => (
+												<Route
+													exact={exact}
+													path={path}
+													component={component}
+													key={index}
+												/>
+										  ))
+										: routes.map(({ exact, path, component }, index) => (
+												<Route
+													exact={exact}
+													path={path}
+													component={component}
+													key={index}
+												/>
+										  ))}
 								</Switch>
 							</Suspense>
 						</Layout>

app/renderer/src/assets/icons/index.ts

@@ -33,3 +33,5 @@ export { ReactComponent as RefreshSVG } from "./refresh.svg";
 export { ReactComponent as AlertSVG } from "./alert.svg";
 
 export { ReactComponent as ChevronDownSVG } from "./chevron-down.svg";
+
+export { ReactComponent as ExpandSVG } from "./expand.svg";

app/renderer/src/components/Layout.tsx

@@ -77,7 +77,9 @@ const Layout: React.FC<Props> = ({ history, location, children }) => {
 					timerType={timer.timerType}
 				/>
 			)}
-			<Navigation timerType={timer.timerType} />
+			{settings["compactMode"] ? null : (
+				<Navigation timerType={timer.timerType} />
+			)}
 			{children}
 		</StyledLayout>
 	);

app/renderer/src/components/SVG.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { SVGProps } from "react";
 import {
 	BonfireSVG,
 	ConfigSVG,
@@ -26,9 +26,12 @@ import {
 	ChevronDownSVG,
 	OptionYSVG,
 	AlertSVG,
+	ExpandSVG,
 } from "assets/icons";
 
 export type SVGTypes = {
+	size?: number;
+	style?: SVGProps<SVGElement>["style"];
 	name:
 		| "bonfire"
 		| "headset"
@@ -55,10 +58,11 @@ export type SVGTypes = {
 		| "fast-food"
 		| "refresh"
 		| "alert"
-		| "chevron-down";
+		| "chevron-down"
+		| "expand";
 };
 
-const SVG: React.FC<SVGTypes> = ({ name }) => {
+const SVG: React.FC<SVGTypes> = ({ name, size, style }) => {
 	switch (name) {
 		case "bonfire":
 			return <BonfireSVG />;
@@ -73,9 +77,9 @@ const SVG: React.FC<SVGTypes> = ({ name }) => {
 		case "option-y":
 			return <OptionYSVG />;
 		case "pause":
-			return <PauseSVG />;
+			return <PauseSVG height={size} width={size} />;
 		case "play":
-			return <PlaySVG />;
+			return <PlaySVG height={size} width={size} />;
 		case "progress":
 			return <ProgressSVG />;
 		case "reset":
@@ -112,6 +116,8 @@ const SVG: React.FC<SVGTypes> = ({ name }) => {
 			return <AlertSVG />;
 		case "chevron-down":
 			return <ChevronDownSVG />;
+		case "expand":
+			return <ExpandSVG style={style} />;
 		default:
 			return <TimerSVG />;
 	}

app/renderer/src/config.ts

@@ -43,6 +43,16 @@ export const routes: NavItemTypes[] = [
 	},
 ];
 
+export const compactRoutes: NavItemTypes[] = [
+	{
+		icon: "timer",
+		name: "Timer",
+		exact: false,
+		path: "/",
+		component: Timer,
+	},
+];
+
 export const rangeConfig: ConfigSliderProps[] = [
 	{
 		label: "Stay focus",

app/renderer/src/contexts/ElectronContext.tsx

@@ -10,6 +10,7 @@ import {
 	SET_UI_THEME,
 	SET_NATIVE_TITLEBAR,
 	TRAY_ICON_UPDATE,
+	SET_COMPACT_MODE,
 } from "@pomatez/shareables";
 
 import { AppStateTypes, SettingTypes } from "store";
@@ -94,6 +95,14 @@ const ElectronProvider: React.FC = ({ children }) => {
 		}
 	}, [electron, settings.alwaysOnTop, shouldFullscreen]);
 
+	useEffect(() => {
+		if (isElectron()) {
+			electron.send(SET_COMPACT_MODE, {
+				compactMode: settings.compactMode,
+			});
+		}
+	}, [electron, settings.compactMode]);
+
 	useEffect(() => {
 		if (isElectron()) {
 			electron.send(SET_UI_THEME, {

app/renderer/src/routes/Settings/FeatureSection.tsx

@@ -13,6 +13,7 @@ import {
 	setMinimizeToTray,
 	setCloseToTray,
 	setEnableVoiceAssistance,
+	setEnableCompactMode,
 } from "store";
 import { Toggler, TogglerProps, Collapse, Radio } from "components";
 import { ThemeContext } from "contexts";
@@ -37,6 +38,14 @@ const FeatureSection: React.FC = () => {
 				dispatch(setAlwaysOnTop(!settings.alwaysOnTop));
 			}, [dispatch, settings.alwaysOnTop]),
 		},
+		{
+			id: "compact-mode",
+			label: "Compact Mode",
+			checked: settings.compactMode,
+			onChange: useCallback(() => {
+				dispatch(setEnableCompactMode(!settings.compactMode));
+			}, [dispatch, settings.compactMode]),
+		},
 		{
 			id: "fullscreen-break",
 			label: "Fullscreen Break",

app/renderer/src/routes/Timer/Control/CompactModeButton.tsx

@@ -0,0 +1,33 @@
+import { SVG } from "components";
+import { useRippleEffect } from "hooks";
+import React, { useCallback, useRef } from "react";
+import { StyledMainButton } from "styles";
+
+type Props = { flipped?: boolean } & React.HTMLProps<HTMLButtonElement>;
+
+const CompactModeButton: React.FC<Props> = ({ onClick, flipped }) => {
+	const buttonRef = useRef<HTMLButtonElement>(null);
+
+	const buttonClickAction = useRippleEffect();
+
+	const onClickAction = useCallback(
+		(e) =>
+			buttonClickAction(e, buttonRef, () => {
+				if (onClick) {
+					onClick(e);
+				}
+			}),
+		[buttonClickAction, onClick]
+	);
+
+	return (
+		<StyledMainButton ref={buttonRef} onClick={onClickAction}>
+			<SVG
+				name="expand"
+				style={flipped ? { transform: "rotate(180deg)" } : {}}
+			/>
+		</StyledMainButton>
+	);
+};
+
+export default React.memo(CompactModeButton);

app/renderer/src/routes/Timer/Control/Control.tsx

@@ -1,31 +1,31 @@
-import React, { useCallback, useState, useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import WarningBell from "assets/audios/warning-bell.wav";
+import { SVG } from "components";
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import {
 	AppStateTypes,
+	LONG_BREAK,
+	setEnableCompactMode,
 	setPlay,
-	skipTimer,
 	setRound,
 	setTimerType,
-	STAY_FOCUS,
+	SettingTypes,
 	SHORT_BREAK,
-	LONG_BREAK,
+	skipTimer,
 	SPECIAL_BREAK,
+	STAY_FOCUS,
 	togglenotificationSoundOn,
-	SettingTypes,
 } from "store";
 import {
 	StyledControl,
 	StyledControlMain,
 	StyledStrictIndicator,
 	StyledStrictSnackbar,
 } from "styles";
-import { SVG } from "components";
-
-import WarningBell from "assets/audios/warning-bell.wav";
-
-import Sessions from "./Sessions";
-import ResetButton from "./ResetButton";
+import CompactModeButton from "./CompactModeButton";
 import PlayButton from "./PlayButton";
+import ResetButton from "./ResetButton";
+import Sessions from "./Sessions";
 import SkipButton from "./SkipButton";
 import VolumeButton from "./VolumeButton";
 
@@ -79,6 +79,10 @@ const Control: React.FC<Props> = ({ resetTimerAction }) => {
 		dispatch(togglenotificationSoundOn());
 	}, [dispatch]);
 
+	const onToggleCompactCallback = useCallback(() => {
+		dispatch(setEnableCompactMode(!settings.compactMode));
+	}, [dispatch, settings.compactMode]);
+
 	const onSkipAction = useCallback(() => {
 		if (timer.playing && settings.enableStrictMode) {
 			activateWarning();
@@ -139,6 +143,29 @@ const Control: React.FC<Props> = ({ resetTimerAction }) => {
 		return () => clearTimeout(timeout);
 	}, [warn]);
 
+	if (settings.compactMode) {
+		return (
+			<StyledControl className="compact" type={timer.timerType}>
+				<Sessions
+					timerType={timer.timerType}
+					round={timer.round}
+					sessionRounds={config.sessionRounds}
+					onClick={onResetSessionCallback}
+				/>
+				<StyledControlMain>
+					<ResetButton className="compact" onClick={onResetCallback} />
+					<PlayButton
+						compact
+						playing={timer.playing}
+						onClick={onPlayCallback}
+					/>
+					<SkipButton className="compact" onClick={onSkipAction} />
+					<CompactModeButton onClick={onToggleCompactCallback} />
+				</StyledControlMain>
+			</StyledControl>
+		);
+	}
+
 	return (
 		<StyledControl type={timer.timerType}>
 			<Sessions
@@ -158,14 +185,16 @@ const Control: React.FC<Props> = ({ resetTimerAction }) => {
 				/>
 			</StyledControlMain>
 
-			{settings.enableStrictMode && (
+			{settings.enableStrictMode ? (
 				<StyledStrictIndicator warn={warn}>
 					<SVG name="alert" />
 
 					<StyledStrictSnackbar warn={warn}>
 						You are currently on <span>Strict Mode!</span>
 					</StyledStrictSnackbar>
 				</StyledStrictIndicator>
+			) : (
+				<CompactModeButton flipped onClick={onToggleCompactCallback} />
 			)}
 		</StyledControl>
 	);