1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import { styled, useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { throttle } from 'lodash-es';
import { observer } from 'mobx-react-lite';
import { useEffect, useMemo, useState } from 'react';
import { useRootStore } from './RootStoreProvider';
import ToggleDarkModeButton from './ToggleDarkModeButton';
import GenerateButton from './editor/GenerateButton';
function useWindowControlsOverlayVisible(): boolean {
const [windowControlsOverlayVisible, setWindowControlsOverlayVisible] =
useState(false);
const updateWindowControlsOverlayVisible = useMemo(
() =>
throttle(
({ visible }: WindowControlsOverlayGeometryChangeEvent) =>
setWindowControlsOverlayVisible(visible),
250,
),
[],
);
useEffect(() => {
if ('windowControlsOverlay' in navigator) {
const { windowControlsOverlay } = navigator;
setWindowControlsOverlayVisible(windowControlsOverlay.visible);
windowControlsOverlay.addEventListener(
'geometrychange',
updateWindowControlsOverlayVisible,
);
return () => {
windowControlsOverlay.removeEventListener(
'geometrychange',
updateWindowControlsOverlayVisible,
);
updateWindowControlsOverlayVisible.cancel();
};
}
// Nothing to clean up if `windowControlsOverlay` is unsupported.
return () => {};
}, [updateWindowControlsOverlayVisible]);
return windowControlsOverlayVisible;
}
const DevModeBadge = styled('div')(({ theme }) => ({
...theme.typography.button,
display: 'inline-block',
padding: `0 ${theme.shape.borderRadius}px`,
background: theme.palette.text.primary,
color: theme.palette.outer.background,
borderRadius: theme.shape.borderRadius,
}));
export default observer(function TopBar(): JSX.Element {
const { editorStore } = useRootStore();
const overlayVisible = useWindowControlsOverlayVisible();
const { breakpoints } = useTheme();
const showGenerateButton = useMediaQuery(breakpoints.down('sm'));
return (
<AppBar
position="static"
elevation={0}
color="transparent"
sx={(theme) => ({
background: theme.palette.outer.background,
borderBottom: `1px solid ${theme.palette.outer.border}`,
appRegion: 'drag',
'.MuiButtonBase-root': {
appRegion: 'no-drag',
},
})}
>
<Toolbar
sx={{
...(overlayVisible
? {
marginLeft: 'env(titlebar-area-x, 0)',
marginTop: 'env(titlebar-area-y, 0)',
width: 'env(titlebar-area-width, 100%)',
minHeight: 'env(titlebar-area-height, auto)',
}
: {
minHeight: 'auto',
}),
py: 0.5,
}}
>
<Typography variant="h6" component="h1" flexGrow={1}>
Refinery
{import.meta.env.DEV && (
<>
{' '}
<DevModeBadge>Dev</DevModeBadge>
</>
)}
</Typography>
{showGenerateButton && (
<GenerateButton editorStore={editorStore} hideWarnings />
)}
<ToggleDarkModeButton />
</Toolbar>
</AppBar>
);
});
|
