Add: UNSTABLE Tabbar - tab state persistence is unstable ie headers and url row

Author: clearfeld

src-tauri/Cargo.lock

@@ -43,6 +43,8 @@ body {
 	--sidebar-delete-req: #CA3939;
 	--sidebar-patch-req: #7FC27E;
 
+	--tabbar-height: 1.875rem;
+
 	--toolbar-width: 2.25rem;
 	--toolbar-fixed-width: 2.25rem;
 	/* This won't change */

src/App.css

@@ -35,8 +35,7 @@ const styles = stylex.create({
 	details_container: {
 		display: "flex",
 		width: "100%",
-		// height: "calc(100% - var(--tabbar-height))",
-		height: "100%",
+		height: "calc(100% - var(--tabbar-height))",
 	},
 
 	request_container: {
@@ -113,8 +112,6 @@ function App() {
 
 								<div {...stylex.props(styles.details_container)}>
 									<div {...stylex.props(styles.request_container)}>
-										{/* <httprequestspage /> */}
-
 										<div
 											style={{
 												display: "flex",
@@ -143,7 +140,7 @@ function App() {
 							<Sidebar />
 
 							<div {...stylex.props(styles.content_width)}>
-								{/* <TabBar /> */}
+								<TabBar />
 
 								<div {...stylex.props(styles.details_container)}>
 									<div {...stylex.props(styles.request_container)}>

src/App.tsx

@@ -6,6 +6,7 @@ import useRequestStore from "@src/stores/request_store";
 
 import { UpdateHttpRequestTargetIfExists } from "@src/stores/request_store/sidebar_slice";
 import { useEffect } from "react";
+import { E_TabStatus } from "@src/stores/request_store/tabbar_slice";
 
 export default function Collections() {
 	const collection = useRequestStore((state) => state.collection);
@@ -14,12 +15,20 @@ export default function Collections() {
 	const addCollection = useRequestStore((state) => state.addCollection);
 	const setCollection = useRequestStore((state) => state.setCollection);
 
+	const getTabs = useRequestStore((state) => state.getTabs);
+	const setTabs = useRequestStore((state) => state.setTabs);
+
+	const getCurrentRequest= useRequestStore((state) => state.getCurrentRequest);
+
 	const getId = useRequestStore((state) => state.getId);
+	const getName = useRequestStore((state) => state.getName);
 	const getUrl = useRequestStore((state) => state.getUrl);
 	const getMethod = useRequestStore((state) => state.getMethod);
 	const getHeaders = useRequestStore((state) => state.getHeaders);
 	const getBody = useRequestStore((state) => state.getBody);
 
+	const setTabState = useRequestStore((state) => state.setTabState);
+
 	useEffect(() => {
 		SetupShortcuts();
 
@@ -48,19 +57,42 @@ export default function Collections() {
 	function SyncHTTPRequestStateToSidebar() {
 		// console.log("Shortcut triggered");
 
+		// TODO: add switch statement for different types of tabs / sidebar items
+		// defaulting to HTTP_REQUEST
+
 		const ns = structuredClone(getCollection());
 		// debugger;
 
 		UpdateHttpRequestTargetIfExists(
 			ns,
 			getId(),
+			getName(),
 			getUrl(),
 			getMethod(),
 			getHeaders(),
 			getBody(),
 		);
 
 		setCollection(ns);
+
+		const tabs = [ ...getTabs() ];
+
+		const id = getId();
+		for(let i = 0; i < tabs.length; ++i) {
+			if(tabs[i].id === id) {
+				tabs[i].title = getName();
+				tabs[i].requestType = getMethod().value;
+				tabs[i].status = E_TabStatus.SAVED;
+
+				tabs[i].data = getCurrentRequest();
+
+				break;
+			}
+		}
+
+		setTabs(tabs);
+
+		setTabState(id, E_TabStatus.SAVED);
 	}
 
 	return (

src/assets/arrow-left.svg

@@ -21,19 +21,30 @@ import {
 	Label,
 } from "@controlkit/ui";
 
+import {
+	E_TabStatus,
+	E_TabType,
+	type T_Tab,
+} from "@src/stores/request_store/tabbar_slice";
+
 const styles = stylex.create({
 	row: {
 		padding: "0.0625rem 0",
 
 		cursor: "pointer",
 
+		borderLeft: "0.125rem solid transparent",
+
+		// transition: "background-color var(--transition-speed) ease",
+
 		":hover": {
 			backgroundColor: "#0E0F10",
 		},
 	},
 
 	rowActive: {
 		backgroundColor: "#1F252D",
+		borderLeft: "0.125rem solid #2558BC",
 	},
 });
 
@@ -98,6 +109,14 @@ export default function RecursiveTree(props: any) {
 		(state) => state.setRequestParameters,
 	);
 
+	const getTabs = useRequestStore((state) => state.getTabs);
+	const setTabs = useRequestStore((state) => state.setTabs);
+
+	const activeTab = useRequestStore((state) => state.activeTab);
+	const setActiveTab = useRequestStore((state) => state.setActiveTab);
+
+	// const setTabState = useRequestStore((state) => state.setTabState);
+
 	// TODO: remove this when moving the sub comps into their own files
 	const [_isHoveredFolder, setIsHoveredFolder] = useState<boolean>(false);
 	const [_isHoveredOther, setIsHoveredOther] = useState<boolean>(false);
@@ -587,7 +606,12 @@ export default function RecursiveTree(props: any) {
 					return (
 						// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
 						<div key={item.id}>
-							<div {...stylex.props(styles.row)}>
+							<div
+								{...stylex.props(
+									styles.row,
+									activeTab === item.id && styles.rowActive,
+								)}
+							>
 								<div
 									style={{
 										display: "grid",
@@ -615,6 +639,37 @@ export default function RecursiveTree(props: any) {
 
 											navigate(`/http_request/${item.id}`);
 
+
+											const tabs = [...getTabs()];
+
+											const tab = tabs.find((t) => t.id === item.id);
+											// const status = tab?.status ?? E_TabStatus.NONE;
+
+											if (tab) {
+												// setTabState(item.id, status);
+												// setTimeout(() => {
+												// 	setTabState(item.id, status);
+												// 	// setTabState(item.id, E_TabStatus.SAVED);
+												// }, 100);
+
+												const method = methods.find((method) => method.value === tab.data.method);
+
+												setRequestParameters(
+													tab.data.id,
+													tab.data.name,
+													tab.data.url,
+													method ?? methods[0],
+													tab.data.autoHeaders ?? autoHeaders, // [], // item.autoHeaders,
+													tab.data.headers,
+													tab.data.body,
+													// item.cookies,
+												);
+
+												setActiveTab(item.id);
+
+												// return;
+											} else {
+
 											setRequestParameters(
 												item.id,
 												item.name,
@@ -626,6 +681,30 @@ export default function RecursiveTree(props: any) {
 												// item.cookies,
 											);
 
+												const t: T_Tab = {
+													id: item.id,
+													status: E_TabStatus.NONE,
+													title: item.name,
+													type: E_TabType.HTTP_REQUEST,
+													requestType: item.method,
+													data: {
+														id: item.id,
+														name: item.name,
+														url: item.url,
+														method: item.method,
+														autoHeaders: item.autoHeaders,
+														headers: item.headers,
+														body: item.body,
+
+														response: null,
+														response_headers: null,
+													},
+												};
+												tabs.push(t);
+												setTabs(tabs);
+
+												setActiveTab(item.id);
+											}
 											// 	toggleField(item.id, "open", !item.open);
 										}}
 										onMouseEnter={(e) => {