Merge pull request #4 from clearfeld/main

v.0.4.0

.github/workflows/publish-to-auto-release.yml

@@ -63,7 +63,7 @@ jobs:
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
         with:
           tagName: app-v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version.
-          releaseName: "Control v__VERSION__"
+          releaseName: "Construct v__VERSION__"
           releaseBody: "See the assets to download this version and install."
           releaseDraft: true
           prerelease: false

README.md

@@ -1,3 +1,9 @@
+<div>
+  <H1 align="center">Construct</H1>
+</div>
+
+![image](https://github.com/user-attachments/assets/a0984944-4d89-442e-8b39-f869001ddf86)
+
 # Tauri + React + Typescript
 
 This template should help get you started developing with Tauri, React and Typescript in Vite.

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "construct"
-version = "0.3.0"
+version = "0.4.0"
 description = "A GUI API Client"
 authors = ["clearfeld"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schema.tauri.app/config/2",
 	"productName": "construct",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"identifier": "com.construct.app",
 	"build": {
 		"beforeDevCommand": "pnpm dev",

src/App.tsx

@@ -16,6 +16,7 @@ import { Routes, Route, Outlet } from "react-router";
 import "./updater.tsx";
 import { H5 } from "@controlkit/ui";
 import TabBar from "./commons/tabbar/index.tsx";
+import EnvironmentsPage from "./pages/environments/index.tsx";
 
 const styles = stylex.create({
 	container: {
@@ -153,6 +154,27 @@ function App() {
 						</div>
 					}
 				/>
+
+				<Route
+					path="/environment/:id"
+					element={
+						<div {...stylex.props(styles.container)}>
+							<Sidebar />
+
+							<div {...stylex.props(styles.content_width)}>
+								<TabBar />
+
+								<div {...stylex.props(styles.details_container)}>
+									<div {...stylex.props(styles.request_container)}>
+										<EnvironmentsPage />
+									</div>
+
+									{/* <Toolbar /> */}
+								</div>
+							</div>
+						</div>
+					}
+				/>
 			</Route>
 		</Routes>
 	);

src/commons/sidebar/collections/recursive_tree.tsx

@@ -639,7 +639,6 @@ export default function RecursiveTree(props: any) {
 
 											navigate(`/http_request/${item.id}`);
 
-
 											const tabs = [...getTabs()];
 
 											const tab = tabs.find((t) => t.id === item.id);
@@ -652,7 +651,9 @@ export default function RecursiveTree(props: any) {
 												// 	// setTabState(item.id, E_TabStatus.SAVED);
 												// }, 100);
 
-												const method = methods.find((method) => method.value === tab.data.method);
+												const method = methods.find(
+													(method) => method.value === tab.data.method,
+												);
 
 												setRequestParameters(
 													tab.data.id,
@@ -669,17 +670,16 @@ export default function RecursiveTree(props: any) {
 
 												// return;
 											} else {
-
-											setRequestParameters(
-												item.id,
-												item.name,
-												item.url,
-												method,
-												autoHeaders, // [], // item.autoHeaders,
-												item.headers,
-												item.body,
-												// item.cookies,
-											);
+												setRequestParameters(
+													item.id,
+													item.name,
+													item.url,
+													method,
+													autoHeaders, // [], // item.autoHeaders,
+													item.headers,
+													item.body,
+													// item.cookies,
+												);
 
 												const t: T_Tab = {
 													id: item.id,

src/commons/sidebar/content.tsx

@@ -1,10 +1,10 @@
 import * as stylex from "@stylexjs/stylex";
-import type { SidebarTab } from "./rail.tsx";
+
 import Collections from "./collections/index.tsx";
+
+import Environments from "./environment";
+import { E_SidebarSection } from "@src/stores/request_store/sidebar_slice.ts";
 // import { SidebarSearchRow } from "./components/sidebar-search-row.tsx";
-// import { CollectionTreeView } from "./components/collection-tree-view.tsx";
-// import data from "./components/collection-data.json";
-// import { EnvironmentList } from "./components/environment-list";
 
 const styles = stylex.create({
 	container: {
@@ -14,18 +14,17 @@ const styles = stylex.create({
 });
 
 interface SidebarContentProps {
-	selectedTab: SidebarTab | null;
+	selectedTab: E_SidebarSection | null;
 }
 
 export function SidebarContent({ selectedTab }: SidebarContentProps) {
-	// <CollectionTreeView data={data as any} />
 	return (
 		<div {...stylex.props(styles.container)}>
 			{/* <SidebarSearchRow /> */}
 
-			{selectedTab === "collections" && <Collections />}
+			{selectedTab === E_SidebarSection.COLLECTIONS && <Collections />}
 
-			{/* {selectedTab === "environment" && <EnvironmentList />} */}
+			{selectedTab === E_SidebarSection.ENVIRONMENT && <Environments />}
 		</div>
 	);
 }

src/commons/sidebar/environment/global-environment-button.tsx

@@ -0,0 +1,82 @@
+import { memo } from "react";
+// import { useRecoilValue } from "recoil";
+import * as stylex from "@stylexjs/stylex";
+// import { EnvironmentButtonProps } from "./type.ts";
+// import { GlobalEnvironmentState } from "../../../../store/environment/global-environment.ts";
+
+const styles = stylex.create({
+	button: {
+		position: "relative",
+		border: "none",
+		outline: "none",
+		backgroundColor: "transparent",
+		boxShadow: "none",
+		color: "var(--color-sidebar-text)",
+		height: "1.75rem",
+		width: "100%",
+		padding: "0 1.25rem",
+		textAlign: "left",
+		fontSize: "0.875rem",
+		borderRadius: 0,
+		display: "flex",
+		alignItems: "center",
+		columnGap: "0.25rem",
+		":hover": {
+			backgroundColor: "var(--button-hover-color)",
+		},
+	},
+	activeButton: {
+		backgroundColor: "var(--sidebar-selected-bg)",
+		color: "var(--color-white)",
+		":hover": {
+			backgroundColor: "var(--sidebar-selected-bg)",
+		},
+	},
+	activeBorder: {
+		border: "0.0625rem solid var(--sidebar-selected-border)",
+		height: "calc(100% - 0.25rem)",
+		left: "rem",
+		position: "absolute",
+		zIndex: 1,
+	},
+	globalButtonContainer: {
+		marginVertical: "0.25rem",
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+	},
+});
+
+// interface GlobalEnvironmentButtonProps extends EnvironmentButtonProps {}
+
+export const GlobalEnvironmentButton = memo(function GlobalEnvironmentButton(
+	// props: GlobalEnvironmentButtonProps,
+) {
+	// const globalEnv = useRecoilValue(GlobalEnvironmentState);
+	// const selectedGlobalEnv = () => {
+	// 	props.onClick({
+	// 		...globalEnv,
+	// 		name: "global",
+	// 		id: "",
+	// 		inUse: true,
+	// 		forkedChildren: [],
+	// 	});
+	// };
+
+	return (
+		<div {...stylex.props(styles.globalButtonContainer)}>
+			<div
+			// {...stylex.props(props.active && styles.activeBorder)}
+			/>
+			<button
+				{...stylex.props(
+					styles.button,
+					//	props.active && styles.activeButton
+				)}
+				// onClick={selectedGlobalEnv}
+			>
+				Global Environment
+			</button>
+		</div>
+	);
+});

src/commons/sidebar/environment/index.tsx

@@ -0,0 +1,121 @@
+import * as stylex from "@stylexjs/stylex";
+
+// import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+// import {
+// 	EnvironmentIdListState,
+// 	EnvironmentsState,
+// } from "../../../../store/environment/environments.ts";
+// import { SelectedEnvironmentState } from "../../../../store/environment/selected-environment.ts";
+
+// import { GlobalEnvironmentButton } from "./global-environment-button.tsx";
+import { WorkspaceEnvironmentButton } from "./workspace-environment-button.tsx";
+import useRequestStore from "@src/stores/request_store/index.ts";
+import type { T_Environment } from "@src/stores/request_store/environments_slice.ts";
+import { Button, Divider } from "@controlkit/ui";
+
+const styles = stylex.create({
+	container: {
+		flex: 1,
+	},
+	divider: {
+		height: "0.0625rem",
+		backgroundColor: "var(--sidebar-border)",
+		width: "100%",
+		marginBottom: "0.25rem",
+	},
+});
+
+export default function Environments() {
+	// const setEnvironment = useSetRecoilState(EnvironmentsState);
+	// const environmentIds = useRecoilValue(EnvironmentIdListState);
+	// const [selectedEnvironment, setSelectedEnvironment] = useRecoilState(
+	// 	SelectedEnvironmentState,
+	// );
+
+	const environments = useRequestStore((state) => state.environments);
+
+    const addEmptyDefaultEnvironment = useRequestStore((state) => state.addEmptyDefaultEnvironment);
+
+	// const toggleInUse = (id: string) => {
+	// 	setEnvironment((prev) => {
+	// 		return prev.map((env) => {
+	// 			if (env.id === id) {
+	// 				return {
+	// 					...env,
+	// 					inUse: !env.inUse,
+	// 				};
+	// 			}
+	// 			return {
+	// 				...env,
+	// 				inUse: false,
+	// 			};
+	// 		});
+	// 	});
+	// };
+
+	return (
+		<div {...stylex.props(styles.container)}>
+            			<div
+				style={{
+					padding: "0.5rem 0.5rem",
+					// display: "grid",
+					// gridTemplateColumns: "1fr, 1rem",
+					display: "flex",
+					gap: "0.5rem",
+				}}
+			>
+				{/* <Input
+					style={{
+						height: "1.5rem",
+					}}
+					placeholder="Search..."
+				/> */}
+
+				{/* <div>+</div> */}
+
+				<Button
+					fullWidth
+					style={{
+						height: "1.5rem",
+					}}
+					onClick={() => {
+                        addEmptyDefaultEnvironment();
+                    }}
+				>
+					Add Environment
+				</Button>
+			</div>
+
+			<Divider />
+
+			{/* <GlobalEnvironmentButton
+			// onClick={setSelectedEnvironment}
+			// active={selectedEnvironment?.name === "global"}
+			/>
+
+			<p>vault</p>
+
+			<GlobalEnvironmentButton
+			// onClick={setSelectedEnvironment}
+			// active={selectedEnvironment?.name === "global"}
+			/> */}
+
+			<div {...stylex.props(styles.divider)} />
+			{environments.map((env: T_Environment) => {
+				return (
+					<WorkspaceEnvironmentButton
+						//onClick={setSelectedEnvironment}
+
+						// active={selectedEnvironment?.id === id}
+						// active={false}
+						key={env.id}
+						envId={env.id}
+                        env={env}
+						// toggleInUse={toggleInUse}
+						toggleInUse={() => {}}
+					/>
+				);
+			})}
+		</div>
+	);
+}