refactor: refactor terminal components

packages/ui/src/app/terminal-app.tsx → packages/ui/src/app/centurion-app.tsx

@@ -1,12 +1,13 @@
 import { ClientAPI } from "@rbxts/centurion";
-import { UserInputService } from "@rbxts/services";
+import { GuiService, UserInputService } from "@rbxts/services";
 import Vide, { derive } from "@rbxts/vide";
-import Terminal from "../components/terminal";
+import { Suggestions, Terminal } from "../components";
+import { Group } from "../components/ui/group";
 import { Layer } from "../components/ui/layer";
 import { useAPI } from "../hooks/use-api";
 import { useAtom } from "../hooks/use-atom";
 import { useEvent } from "../hooks/use-event";
-import { usePx } from "../hooks/use-px";
+import { px, usePx } from "../hooks/use-px";
 import {
 	interfaceOptions,
 	interfaceVisible,
@@ -19,7 +20,7 @@ const MOUSE_INPUT_TYPES = new Set<Enum.UserInputType>([
 	Enum.UserInputType.Touch,
 ]);
 
-export function TerminalApp(api: ClientAPI) {
+export function CenturionApp(api: ClientAPI) {
 	useAPI(api);
 	usePx();
 
@@ -42,7 +43,19 @@ export function TerminalApp(api: ClientAPI) {
 
 	return (
 		<Layer displayOrder={() => options().displayOrder ?? 0} visible={visible}>
-			<Terminal />
+			<Group
+				anchorPoint={() => options().anchorPoint ?? new Vector2(0, 0)}
+				size={() => options().size ?? new UDim2(0, px(1024), 1, 0)}
+				position={() =>
+					options().position ??
+					UDim2.fromOffset(px(16), px(8) + GuiService.GetGuiInset()[0].Y)
+				}
+			>
+				<Terminal />
+				<Suggestions />
+
+				<uilistlayout Padding={new UDim(0, px(8))} SortOrder={"LayoutOrder"} />
+			</Group>
 		</Layer>
 	);
 }

packages/ui/src/app/index.ts

@@ -4,7 +4,7 @@ import { ContentProvider, Players } from "@rbxts/services";
 import { mount } from "@rbxts/vide";
 import { DEFAULT_INTERFACE_OPTIONS } from "../constants/options";
 import { InterfaceOptions } from "../types";
-import { TerminalApp } from "./terminal-app";
+import { CenturionApp } from "./centurion-app";
 
 export namespace CenturionUI {
 	const MAX_PRELOAD_ATTEMPTS = 3;
@@ -40,7 +40,7 @@ export namespace CenturionUI {
 			});
 
 			const target = Players.LocalPlayer.WaitForChild("PlayerGui");
-			mount(() => TerminalApp(api), target);
+			mount(() => CenturionApp(api), target);
 		};
 	}
 }

packages/ui/src/components/index.ts

@@ -1 +1,2 @@
+export * from "./suggestions";
 export * from "./terminal";

packages/ui/src/components/terminal/index.ts

@@ -0,0 +1 @@
+export * from "./terminal";

packages/ui/src/components/terminal-text-field.tsx → packages/ui/src/components/terminal/terminal-text-field.tsx

@@ -5,10 +5,10 @@ import {
 import { subscribe } from "@rbxts/charm";
 import { UserInputService } from "@rbxts/services";
 import Vide, { Derivable, effect, source } from "@rbxts/vide";
-import { getAPI } from "../hooks/use-api";
-import { useAtom } from "../hooks/use-atom";
-import { useEvent } from "../hooks/use-event";
-import { px } from "../hooks/use-px";
+import { getAPI } from "../../hooks/use-api";
+import { useAtom } from "../../hooks/use-atom";
+import { useEvent } from "../../hooks/use-event";
+import { px } from "../../hooks/use-px";
 import {
 	commandHistory,
 	commandHistoryIndex,
@@ -20,12 +20,12 @@ import {
 	terminalText,
 	terminalTextParts,
 	terminalTextValid,
-} from "../store";
-import { getArgumentNames } from "../util/argument";
-import { Frame } from "./ui/frame";
-import { Padding } from "./ui/padding";
-import { Text } from "./ui/text";
-import { TextField } from "./ui/text-field";
+} from "../../store";
+import { getArgumentNames } from "../../util/argument";
+import { Frame } from "../ui/frame";
+import { Padding } from "../ui/padding";
+import { Text } from "../ui/text";
+import { TextField } from "../ui/text-field";
 
 interface TerminalTextFieldProps {
 	anchorPoint?: Derivable<Vector2>;

packages/ui/src/components/terminal-window.tsx → packages/ui/src/components/terminal/terminal.tsx

@@ -5,12 +5,12 @@ import {
 	formatPartsAsPath,
 } from "@rbxts/centurion/out/shared/util/string";
 import Vide, { effect, source } from "@rbxts/vide";
-import { HISTORY_TEXT_SIZE } from "../constants/text";
-import { getAPI } from "../hooks/use-api";
-import { useAtom } from "../hooks/use-atom";
-import { useHistory } from "../hooks/use-history";
-import { useMotion } from "../hooks/use-motion";
-import { px } from "../hooks/use-px";
+import { HISTORY_TEXT_SIZE } from "../../constants/text";
+import { getAPI } from "../../hooks/use-api";
+import { useAtom } from "../../hooks/use-atom";
+import { useHistory } from "../../hooks/use-history";
+import { useMotion } from "../../hooks/use-motion";
+import { px } from "../../hooks/use-px";
 import {
 	currentArgIndex,
 	currentCommandPath,
@@ -20,22 +20,22 @@ import {
 	terminalText,
 	terminalTextParts,
 	terminalTextValid,
-} from "../store";
-import { Suggestion } from "../types";
-import { getMissingArgs } from "../util/argument";
+} from "../../store";
+import { Suggestion } from "../../types";
+import { getMissingArgs } from "../../util/argument";
 import {
 	getArgumentSuggestion,
 	getCommandSuggestion,
-} from "../util/suggestion";
-import { HistoryList } from "./history";
+} from "../../util/suggestion";
+import { HistoryList } from "../history";
+import { Frame } from "../ui/frame";
+import { Padding } from "../ui/padding";
 import { TerminalTextField } from "./terminal-text-field";
-import { Frame } from "./ui/frame";
-import { Padding } from "./ui/padding";
 
 const MAX_HEIGHT = HISTORY_TEXT_SIZE * 10;
 const TEXT_FIELD_HEIGHT = 40;
 
-export function TerminalWindow() {
+export function Terminal() {
 	const api = getAPI();
 	const options = useAtom(interfaceOptions);
 	const missingArgs = source<string[]>([]);