feat(EXXETA#97): Add Sidebar Tree UI (EXXETA#181)

EXXETA#97 - add Sidebar UI

Author: giemic8

package-lock.json

@@ -62,12 +62,14 @@
   "dependencies": {
     "@electron-forge/shared-types": "^7.6.1",
     "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.5",
     "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.6",

package.json

@@ -1,25 +1,17 @@
 import '@/styles/tailwind.css';
 import '@/styles/global.css';
-import { Sidebar } from '@/view/Sidebar';
-import { MainWindow } from '@/view/MainWindow';
-import { Toaster } from '@/components/ui/toaster';
+import { Menubar } from '@/view/Menubar';
+import { RequestWindow } from '@/view/RequestWindow';
+import { SidebarProvider } from '@/components/ui/sidebar';
 import { TooltipProvider } from '@/components/ui/tooltip';
-// import { Header } from '@/components/Header';
 
 export const App = () => {
   return (
     <TooltipProvider delayDuration={750}>
-      <div>
-        <div className="size-full">
-          {/*<Header />*/}
-
-          <div className="h-screen flex items-stretch">
-            <Sidebar />
-            <MainWindow />
-          </div>
-        </div>
-        <Toaster />
-      </div>
+      <SidebarProvider>
+        <Menubar />
+        <RequestWindow />
+      </SidebarProvider>
     </TooltipProvider>
   );
 };

src/renderer/App.tsx

@@ -1,4 +1,4 @@
-import { InputTabs } from '@/components/mainWindow/bodyTabs/InputTabs';
+import { InputTabs } from '@/components/mainWindow/bodyTabs/InputTabs/InputTabs';
 import { OutputTabs } from '@/components/mainWindow/bodyTabs/OutputTabs';
 
 export function MainBody() {

src/renderer/components/mainWindow/MainBody.tsx

@@ -0,0 +1,45 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useMemo } from 'react';
+import { selectRequest, useCollectionStore } from '@/state/collectionStore';
+import { HeaderTab } from '@/components/mainWindow/bodyTabs/InputTabs/tabs/HeaderTab';
+import { BodyTab } from '@/components/mainWindow/bodyTabs/InputTabs/tabs/BodyTab';
+
+interface InputTabsProps {
+  className: string;
+}
+
+export function InputTabs(props: Readonly<InputTabsProps>) {
+  const { className } = props;
+
+  const headers = useCollectionStore((state) => selectRequest(state).headers);
+
+  const activeRowCount = useMemo(
+    () => headers.filter((header) => header.isActive).length,
+    [headers]
+  );
+
+  return (
+    <Tabs className={className} defaultValue="body">
+      <TabsList>
+        <TabsTrigger value="body">Body</TabsTrigger>
+        {/*<TabsTrigger value="queryParams">Query</TabsTrigger>*/}
+        <TabsTrigger value="headers">
+          {activeRowCount === 0 ? 'Headers' : `Headers (${activeRowCount})`}
+        </TabsTrigger>
+        {/*<TabsTrigger value="authorization">Auth</TabsTrigger>*/}
+      </TabsList>
+
+      <TabsContent value="body">
+        <BodyTab />
+      </TabsContent>
+
+      <TabsContent value="queryParams">Change your queryParams here.</TabsContent>
+
+      <TabsContent value="headers">
+        <HeaderTab />
+      </TabsContent>
+
+      <TabsContent value="authorization">Change your authorization here.</TabsContent>
+    </Tabs>
+  );
+}