setup(frontend): rename frontend-react

frontend-react/src/components/Outline/index.tsx

@@ -0,0 +1,97 @@
+import { observer } from 'mobx-react-lite';
+import { SxProps } from '@mui/material';
+import Box from '@mui/material/Box';
+import OutlineView from './OutlineView';
+
+import Title from '@/components/Title';
+import LoadingMask from '@/components/LoadingMask';
+import { globalStorage } from '@/storage';
+import BranchIcon from '@/icons/BranchIcon';
+
+export default observer(({ style = {} }: { style?: SxProps }) => {
+  const {
+    api: { planReady },
+  } = globalStorage;
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        background: '#FFF',
+        border: '3px solid #E1E1E1',
+        display: 'flex',
+        overflow: 'hidden',
+        flexDirection: 'column',
+        ...style,
+      }}
+    >
+      <Title title="Plan Outline" />
+      <Box
+        sx={{
+          position: 'relative',
+          height: 0,
+          flexGrow: 1,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          padding: '6px 12px',
+        }}
+      >
+        {planReady ? <OutlineView /> : <></>}
+        {globalStorage.api.planGenerating ? (
+          <LoadingMask
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+            }}
+          />
+        ) : (
+          <></>
+        )}
+      </Box>
+      {planReady ? (
+        <Box
+          sx={{
+            cursor: 'pointer',
+            userSelect: 'none',
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            width: '36px',
+            height: '32px',
+            bgcolor: 'primary.main',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '10px 0 0 0',
+            zIndex: 100,
+            '&:hover': {
+              filter: 'brightness(0.9)',
+            },
+          }}
+          onClick={() => (globalStorage.planModificationWindow = true)}
+        >
+          <BranchIcon />
+          <Box
+            component="span"
+            sx={{
+              fontSize: '12px',
+              position: 'absolute',
+              right: '4px',
+              bottom: '2px',
+              color: 'white',
+              fontWeight: 800,
+              textAlign: 'right',
+            }}
+          >
+            {globalStorage.planManager.leaves.length}
+          </Box>
+        </Box>
+      ) : (
+        <></>
+      )}
+    </Box>
+  );
+});