Blame · FocusMode.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import * as stylex from '@stylexjs/stylex';
b69ab31	9	import {Button} from 'isl-components/Button';
b69ab31	10	import {Icon} from 'isl-components/Icon';
b69ab31	11	import {Kbd} from 'isl-components/Kbd';
b69ab31	12	import {KeyCode, Modifier} from 'isl-components/KeyboardShortcuts';
b69ab31	13	import {Tooltip} from 'isl-components/Tooltip';
b69ab31	14	import {useAtom} from 'jotai';
b69ab31	15	import {colors} from '../../components/theme/tokens.stylex';
b69ab31	16	import {Column} from './ComponentUtils';
b69ab31	17	import {useCommand} from './ISLShortcuts';
b69ab31	18	import {tracker} from './analytics';
b69ab31	19	import {focusMode} from './atoms/FocusModeState';
b69ab31	20	import {T} from './i18n';
b69ab31	21
b69ab31	22	const styles = stylex.create({
b69ab31	23	focused: {
b69ab31	24	backgroundColor: colors.blue,
b69ab31	25	color: 'white',
b69ab31	26	},
b69ab31	27	});
b69ab31	28
b69ab31	29	export function FocusModeToggle() {
b69ab31	30	const [focused, setFocused] = useAtom(focusMode);
b69ab31	31
b69ab31	32	const toggleFocus = () => {
b69ab31	33	const shouldFocus = !focused;
b69ab31	34	tracker.track('SetFocusMode', {extras: {focus: shouldFocus}});
b69ab31	35	setFocused(shouldFocus);
b69ab31	36	};
b69ab31	37
b69ab31	38	useCommand('ToggleFocusMode', toggleFocus);
b69ab31	39
b69ab31	40	const shortcut = <Kbd keycode={KeyCode.F} modifiers={[Modifier.ALT]} />;
b69ab31	41	return (
b69ab31	42	<Tooltip
b69ab31	43	placement="bottom"
b69ab31	44	title={
b69ab31	45	<Column alignStart>
b69ab31	46	<div>
b69ab31	47	{focused ? (
b69ab31	48	<T replace={{$shortcut: shortcut}}>
b69ab31	49	Focus Mode is enabled. Click to disable. ($shortcut)
b69ab31	50	</T>
b69ab31	51	) : (
b69ab31	52	<T replace={{$shortcut: shortcut}}>Click to enable Focus Mode. ($shortcut)</T>
b69ab31	53	)}
b69ab31	54	</div>
b69ab31	55	<T>In Focus Mode, commits outside your current stack are hidden.</T>
b69ab31	56	</Column>
b69ab31	57	}>
b69ab31	58	<Button
b69ab31	59	icon
b69ab31	60	xstyle={focused && styles.focused}
b69ab31	61	onClick={toggleFocus}
b69ab31	62	data-focus-mode={focused}
b69ab31	63	data-testid="focus-mode-toggle">
b69ab31	64	<Icon icon={focused ? 'screen-normal' : 'screen-full'} />
b69ab31	65	</Button>
b69ab31	66	</Tooltip>
b69ab31	67	);
b69ab31	68	}