added collections, environment variables, test runner UI, and some UI polish

Author: mohnjiles

.cursorrules

@@ -0,0 +1,38 @@
+You are an expert developer working on LitePost, a modern API client application built with Tauri and React. The tech stack includes:
+
+Frontend:
+- React 18 with TypeScript
+- Vite as the build tool
+- Tailwind CSS for styling
+- shadcn/ui components (based on Radix UI)
+- Zustand for state management
+- React Router for navigation
+- React Syntax Highlighter for code display
+- React Resizable Panels for UI layout
+
+Backend (Tauri):
+- Rust-based desktop framework
+- Tauri plugins: fs, http, opener
+- Cross-platform desktop capabilities
+
+Project Structure:
+- /src: React frontend code
+  - /components: React components including UI elements
+  - /hooks: Custom React hooks
+  - /store: Zustand state management
+  - /utils: Utility functions
+- /src-tauri: Rust backend code
+
+Key Features:
+- API request management
+- Response visualization
+- Authentication configuration
+- Settings management
+- Modern, responsive UI
+
+Development Guidelines:
+1. Follow TypeScript best practices with strict type checking
+2. Use Tailwind CSS for styling, following the project's design system
+3. Implement proper error handling for both frontend and Rust operations
+4. Maintain consistent component structure using shadcn/ui patterns
+5. Ensure cross-platform compatibility (Windows, macOS, Linux)

package.json

@@ -10,6 +10,8 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.5",
+    "@radix-ui/react-context-menu": "^2.2.5",
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
@@ -20,6 +22,7 @@
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.7",
     "@tauri-apps/api": "^2.2.0",
     "@tauri-apps/plugin-fs": "~2",
     "@tauri-apps/plugin-http": "^2.2.0",

pnpm-lock.yaml

@@ -12,19 +12,7 @@ import { useHistory } from "./hooks/useHistory"
 import { HistoryItem, Tab, AuthConfig } from "./types"
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"
 import { Toaster } from "sonner"
-
-// Utility function to get clean tab name from URL
-const getCleanTabName = (url: string): string => {
-  try {
-    // Remove query parameters
-    const urlWithoutQuery = url.split('?')[0]
-    // Get last part of path
-    const lastPart = urlWithoutQuery.split('/').pop()
-    return lastPart || "New Request"
-  } catch (error) {
-    return "New Request"
-  }
-}
+import { getRequestNameFromUrl } from "./utils/url"
 
 const defaultAuth: AuthConfig = {
   type: 'none',
@@ -101,7 +89,7 @@ function App() {
 
   const handleHistorySelect = (item: HistoryItem) => {
     const newTab = createNewTab({
-      name: getCleanTabName(item.url),
+      name: getRequestNameFromUrl(item.url),
       method: item.method,
       url: item.url,
       rawUrl: item.rawUrl,
@@ -119,7 +107,13 @@ function App() {
     <div className="dark h-screen overflow-hidden">
       <Toaster theme="dark" position="bottom-right" />
       <div className="h-full flex flex-col bg-background text-foreground min-w-0">
-        <TitleBar />
+        <TitleBar 
+          currentRequest={currentTab} 
+          onRequestSelect={(request) => {
+            setTabs((prev: Tab[]) => [...prev, request])
+            setActiveTab(request.id)
+          }}
+        />
         <div className="flex-1 min-h-0 min-w-0">
           <PanelGroup direction="horizontal">
             <Panel defaultSize={20} minSize={15}>
@@ -160,17 +154,27 @@ function App() {
                         contentType={currentTab.contentType}
                         auth={currentTab.auth}
                         cookies={currentTab.cookies}
+                        response={currentTab.response}
+                        testScripts={currentTab.testScripts}
+                        testAssertions={currentTab.testAssertions}
+                        testResults={currentTab.testResults}
                         onMethodChange={(method) => updateTab(currentTab.id, { method })}
                         onUrlChange={(rawUrl) => {
-                          const name = getCleanTabName(rawUrl)
-                          updateTab(currentTab.id, { rawUrl, url: rawUrl, name })
+                          updateTab(currentTab.id, { 
+                            rawUrl, 
+                            url: rawUrl, 
+                            name: getRequestNameFromUrl(rawUrl)
+                          })
                         }}
                         onParamsChange={(params) => updateTab(currentTab.id, { params })}
                         onHeadersChange={(headers) => updateTab(currentTab.id, { headers })}
                         onBodyChange={(body) => updateTab(currentTab.id, { body })}
                         onContentTypeChange={(contentType) => updateTab(currentTab.id, { contentType })}
                         onAuthChange={(auth) => updateTab(currentTab.id, { auth })}
                         onCookiesChange={(cookies) => updateTab(currentTab.id, { cookies })}
+                        onTestScriptsChange={(testScripts) => updateTab(currentTab.id, { testScripts })}
+                        onTestAssertionsChange={(testAssertions) => updateTab(currentTab.id, { testAssertions })}
+                        onTestResultsChange={(testResults) => updateTab(currentTab.id, { testResults })}
                         onSend={() => handleSend(currentTab.id)}
                       />
                     </Panel>