Skip to content

Commit 7571b26

Browse files
nitro56565nitro56565
committed
main container overall restructure
Signed-off-by: nitro56565 <[email protected]>
1 parent d4cfa15 commit 7571b26

File tree

11 files changed

+207
-58
lines changed

11 files changed

+207
-58
lines changed

‎package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"react-dropdown": "^1.11.0",
4545
"react-icons": "^5.5.0",
4646
"react-markdown": "^9.0.1",
47+
"react-resizable-panels": "^3.0.3",
4748
"react-router-dom": "^6.24.1",
4849
"react-shepherd": "^6.1.1",
4950
"react-spring": "^9.7.4",

‎src/App.tsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { App as AntdApp, Layout, Row, Col, Collapse, Spin } from "antd";
33
import { LoadingOutlined } from "@ant-design/icons";
44
import { Routes, Route, useSearchParams, useNavigate } from "react-router-dom";
55
import Navbar from "./components/Navbar";
6-
import Footer from "./components/Footer";
76
import tour from "./components/Tour";
87
import AgreementData from "./editors/editorsContainer/AgreementData";
98
import LearnNow from "./pages/LearnNow";
@@ -16,19 +15,14 @@ import SampleDropdown from "./components/SampleDropdown";
1615
import UseShare from "./components/UseShare";
1716
import LearnContent from "./components/Content";
1817
import ResizableContainer from "./components/ResizableContainer";
19-
import { AIChatPanel } from "./components/AIChatPanel";
18+
import MainContainer from "./pages/MainContainer";
2019

2120
const { Content } = Layout;
2221

2322
const App = () => {
2423
const navigate = useNavigate();
2524
const init = useAppStore((state) => state.init);
2625
const loadFromLink = useAppStore((state) => state.loadFromLink);
27-
const { isAIChatOpen, setAIChatOpen } = useAppStore((state) => ({
28-
isAIChatOpen: state.isAIChatOpen,
29-
setAIChatOpen: state.setAIChatOpen
30-
}
31-
));
3226
const backgroundColor = useAppStore((state) => state.backgroundColor);
3327
const textColor = useAppStore((state) => state.textColor);
3428
const [activePanel, setActivePanel] = useState<string | string[]>();
@@ -124,7 +118,7 @@ const App = () => {
124118

125119
return (
126120
<AntdApp>
127-
<Layout style={{ minHeight: "100vh" }}>
121+
<Layout style={{ height: "100vh" }}>
128122
<Navbar scrollToFooter={scrollToFooter} />
129123
<Content>
130124
{loading ? (
@@ -146,14 +140,13 @@ const App = () => {
146140
path="/"
147141
element={
148142
<div
143+
className="h-full"
149144
style={{
150-
padding: 24,
151-
paddingBottom: 24,
152-
minHeight: 360,
153145
background: backgroundColor,
154146
}}
155147
>
156-
<Row>
148+
<MainContainer />
149+
{/* <Row>
157150
<Col xs={24} sm={8}>
158151
<Row
159152
style={{
@@ -222,13 +215,15 @@ const App = () => {
222215
style={{ marginBottom: "24px" }}
223216
/>
224217
}
225-
rightPane={<AgreementHtml loading={loading} isModal={false} />}
226-
aiChatPane={isAIChatOpen ? <AIChatPanel /> : null}
218+
rightPane={
219+
<AgreementHtml loading={loading} isModal={false} />
220+
}
227221
initialLeftWidth={66}
228222
minLeftWidth={30}
229223
minRightWidth={30}
230224
/>
231225
</div>
226+
<FloatingFAB /> */}
232227
</div>
233228
}
234229
/>
@@ -241,7 +236,6 @@ const App = () => {
241236
</Routes>
242237
)}
243238
</Content>
244-
<Footer />
245239
</Layout>
246240
</AntdApp>
247241
);

‎src/components/AIChatPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export const AIChatPanel = () => {
183183
}, [chatState.messages, chatState.isLoading]);
184184

185185
return (
186-
<div className="twp pl-4 pr-4 pt-3 flex flex-col border rounded-md h-[calc(100vh-150px)]">
186+
<div className="twp pl-4 pr-4 pt-3 flex flex-col border rounded-md h-[calc(100vh-150px)] h-full">
187187
<div className="flex justify-between items-center h-4">
188188
<h2 className="text-lg font-bold">AI Assistant</h2>
189189
<div className="flex items-center gap-2">

‎src/editors/ConcertoEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,12 +185,12 @@ export default function ConcertoEditor({
185185
}, [ctoErr, monacoInstance]);
186186

187187
return (
188-
<div className="editorwrapper">
188+
<div className="editorwrapper h-full w-full">
189189
<Suspense fallback={<div>Loading Editor...</div>}>
190190
<MonacoEditor
191191
options={options}
192192
language="concerto"
193-
height="60vh"
193+
height="100%"
194194
value={value}
195195
onChange={handleChange}
196196
beforeMount={handleEditorWillMount}

‎src/editors/JSONEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ export default function JSONEditor({
3838
);
3939

4040
return (
41-
<div className="editorwrapper">
41+
<div className="editorwrapper h-full w-full">
4242
<Suspense fallback={<div>Loading Editor...</div>}>
4343
<MonacoEditor
4444
options={options}
4545
language="json"
46-
height="60vh"
46+
height="100%"
4747
value={value}
4848
onChange={handleChange}
4949
theme={themeName}

‎src/editors/MarkdownEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,12 @@ export default function MarkdownEditor({
5959
);
6060

6161
return (
62-
<div className="editorwrapper">
62+
<div className="editorwrapper h-full w-full">
6363
<Suspense fallback={<div>Loading Editor...</div>}>
6464
<MonacoEditor
6565
options={editorOptions}
6666
language="markdown"
67-
height="60vh"
67+
height="100%"
6868
value={value}
6969
onChange={handleChange}
7070
theme={themeName}

‎src/editors/editorsContainer/AgreementData.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,19 @@ function AgreementData() {
2323
};
2424

2525
return (
26-
<div className="column">
27-
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
28-
<h3 style={{ color: textColor }}>Data</h3>
29-
<div>
30-
<FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
31-
<FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
32-
</div>
33-
</div>
34-
<p style={{ color: textColor }}>
35-
JSON data (an instance of the Concerto model) used to preview output from the template.
36-
</p>
26+
// <div className="column">
27+
// <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
28+
// <h3 style={{ color: textColor }}>Data</h3>
29+
// <div>
30+
// <FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
31+
// <FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
32+
// </div>
33+
// </div>
34+
// <p style={{ color: textColor }}>
35+
// JSON data (an instance of the Concerto model) used to preview output from the template.
36+
// </p>
3737
<JSONEditor value={value} onChange={handleChange} />
38-
</div>
38+
// </div>
3939
);
4040
}
4141

‎src/editors/editorsContainer/TemplateMarkdown.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,19 @@ function TemplateMarkdown() {
2323
};
2424

2525
return (
26-
<div className="column" style={{ backgroundColor }}>
27-
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
28-
<h3 style={{ color: textColor }}>TemplateMark</h3>
29-
<div>
30-
<FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
31-
<FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
32-
</div>
33-
</div>
34-
<p style={{ color: textColor }}>
35-
A natural language template with embedded variables, conditional sections, and TypeScript code.
36-
</p>
26+
// <div className="column" style={{ backgroundColor }}>
27+
// <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
28+
// <h3 style={{ color: textColor }}>TemplateMark</h3>
29+
// <div>
30+
// <FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
31+
// <FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
32+
// </div>
33+
// </div>
34+
// <p style={{ color: textColor }}>
35+
// A natural language template with embedded variables, conditional sections, and TypeScript code.
36+
// </p>
3737
<MarkdownEditor value={value} onChange={handleChange} />
38-
</div>
38+
// </div>
3939
);
4040
}
4141

‎src/editors/editorsContainer/TemplateModel.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,19 @@ function TemplateModel() {
2323
};
2424

2525
return (
26-
<div className="column">
27-
<div className="tooltip" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
28-
<h3 style={{ color: textColor }}>Concerto Model</h3>
29-
<div>
30-
<FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
31-
<FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
32-
</div>
33-
</div>
34-
<span style={{ color: textColor }} className="tooltiptext">
35-
Defines the data model for the template and its logic.
36-
</span>
26+
// <div className="column">
27+
// <div className="tooltip" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
28+
// <h3 style={{ color: textColor }}>Concerto Model</h3>
29+
// <div>
30+
// <FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
31+
// <FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
32+
// </div>
33+
// </div>
34+
// <span style={{ color: textColor }} className="tooltiptext">
35+
// Defines the data model for the template and its logic.
36+
// </span>
3737
<ConcertoEditor value={value} onChange={handleChange} />
38-
</div>
38+
// </div>
3939
);
4040
}
4141

0 commit comments

Comments
 (0)