Blame · responsive.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 {atom, useSetAtom} from 'jotai';
b69ab31	9	import {useEffect, useRef} from 'react';
b69ab31	10	import {useCommand} from './ISLShortcuts';
b69ab31	11	import {
b69ab31	12	atomWithOnChange,
b69ab31	13	configBackedAtom,
b69ab31	14	localStorageBackedAtom,
b69ab31	15	readAtom,
b69ab31	16	writeAtom,
b69ab31	17	} from './jotaiUtils';
b69ab31	18
b69ab31	19	export const mainContentWidthState = atom(500);
b69ab31	20
b69ab31	21	export const renderCompactAtom = configBackedAtom<boolean>('isl.render-compact', false);
b69ab31	22
b69ab31	23	export const zoomUISettingAtom = atomWithOnChange(
b69ab31	24	localStorageBackedAtom<number>('isl.ui-zoom', 1),
b69ab31	25	newValue => {
b69ab31	26	document.body?.style.setProperty('--zoom', `${newValue}`);
b69ab31	27	},
b69ab31	28	);
b69ab31	29
b69ab31	30	export function useZoomShortcut() {
b69ab31	31	useCommand('ZoomIn', () => {
b69ab31	32	const old = readAtom(zoomUISettingAtom);
b69ab31	33	writeAtom(zoomUISettingAtom, Math.round((old + 0.1) * 100) / 100);
b69ab31	34	});
b69ab31	35	useCommand('ZoomOut', () => {
b69ab31	36	const old = readAtom(zoomUISettingAtom);
b69ab31	37	writeAtom(zoomUISettingAtom, Math.round((old - 0.1) * 100) / 100);
b69ab31	38	});
b69ab31	39	}
b69ab31	40
b69ab31	41	export function useMainContentWidth() {
b69ab31	42	const setMainContentWidth = useSetAtom(mainContentWidthState);
b69ab31	43
b69ab31	44	const mainContentRef = useRef<null \| HTMLDivElement>(null);
b69ab31	45	useEffect(() => {
b69ab31	46	const element = mainContentRef.current;
b69ab31	47	if (element == null) {
b69ab31	48	return;
b69ab31	49	}
b69ab31	50
b69ab31	51	const obs = new ResizeObserver(entries => {
b69ab31	52	const [entry] = entries;
b69ab31	53	setMainContentWidth(entry.contentRect.width);
b69ab31	54	});
b69ab31	55	obs.observe(element);
b69ab31	56	return () => obs.unobserve(element);
b69ab31	57	}, [mainContentRef, setMainContentWidth]);
b69ab31	58
b69ab31	59	return mainContentRef;
b69ab31	60	}
b69ab31	61
b69ab31	62	export const NARROW_COMMIT_TREE_WIDTH = 800;
b69ab31	63	export const NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT = 300;
b69ab31	64
b69ab31	65	export const isNarrowCommitTree = atom(
b69ab31	66	get =>
b69ab31	67	get(mainContentWidthState) <
b69ab31	68	(get(renderCompactAtom) ? NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT : NARROW_COMMIT_TREE_WIDTH),
b69ab31	69	);