feat: update build assets and introduce VariableInfoPopup component

- Updated asset manifest to reflect new CSS and JS file names after build.
- Removed old CSS and JS files to clean up the build directory.
- Introduced VariableInfoPopup component for displaying and editing environment variable values in a user-friendly manner.
- Enhanced VariableUrlInput component to utilize VariableInfoPopup for better variable management and user interaction.

Author: mozaddedalfeshani

src/components/layout/HomeLayout.tsx

@@ -69,7 +69,14 @@ export function HomeLayout() {
     const refreshEnvironments = () => {
         const envs = loadEnvironments();
         setEnvironments(envs);
-        setActiveEnvironmentState(getActiveEnvironment());
+        // Get fresh environment to ensure React detects the change
+        const activeEnv = getActiveEnvironment();
+        // Force update by creating a new object reference
+        if (activeEnv) {
+            setActiveEnvironmentState({ ...activeEnv });
+        } else {
+            setActiveEnvironmentState(null);
+        }
     };
 
     const handleEnvironmentChange = (environmentId: string) => {

src/components/request/VariableInfoPopup.tsx

@@ -22,6 +22,7 @@ export function VariableInfoPopup({
     onEdit,
     onVariableUpdated,
 }: VariableInfoPopupProps) {
+    // Get fresh variable value - recalculate on every render to get latest value
     const variableValue = getVariableValue(variableKey, environment);
     const hasValue = variableValue !== null && variableValue.trim() !== '';
     const [isEditing, setIsEditing] = useState(false);
@@ -32,7 +33,7 @@ export function VariableInfoPopup({
         if (!isEditing) {
             setEditValue(variableValue || '');
         }
-    }, [variableValue, isEditing]);
+    }, [variableValue, isEditing, environment?.updatedAt]);
 
     const handleEdit = () => {
         if (onEdit) {
@@ -46,13 +47,19 @@ export function VariableInfoPopup({
     const handleSave = () => {
         if (!environment) return;
         // Import updateVariable here to avoid circular dependency
-        import('../../services/environmentService').then(({ updateVariable }) => {
-            const success = updateVariable(environment.id, variableKey, editValue);
-            if (success) {
-                onVariableUpdated?.();
-                setIsEditing(false);
+        import('../../services/environmentService').then(
+            ({ updateVariable }) => {
+                const success = updateVariable(
+                    environment.id,
+                    variableKey,
+                    editValue
+                );
+                if (success) {
+                    onVariableUpdated?.();
+                    setIsEditing(false);
+                }
             }
-        });
+        );
     };
 
     return (
@@ -127,7 +134,9 @@ export function VariableInfoPopup({
                                 <div className="flex items-center gap-2">
                                     <div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
                                         <span className="text-white text-xs font-bold">
-                                            {environment.name.charAt(0).toUpperCase()}
+                                            {environment.name
+                                                .charAt(0)
+                                                .toUpperCase()}
                                         </span>
                                     </div>
                                     <span className="text-xs text-muted-foreground">
@@ -159,4 +168,3 @@ export function VariableInfoPopup({
         </div>
     );
 }
-

src/components/request/VariableUrlInput.tsx

@@ -289,6 +289,8 @@ export function VariableUrlInput({
                         }}
                         onVariableUpdated={() => {
                             onEnvironmentUpdate?.();
+                            // Close popup after update to show fresh data on next open
+                            setSelectedVariable(null);
                         }}
                     />
                 </div>

src/services/environmentService.ts

@@ -93,9 +93,12 @@ export function getActiveEnvironment(): Environment | null {
         // Try to find any active environment
         const environments = loadEnvironments();
         const active = environments.find((e) => e.isActive);
-        return active || null;
+        // Return a new object reference to ensure React detects changes
+        return active ? { ...active, variables: [...active.variables] } : null;
     }
-    return getEnvironment(activeId);
+    const env = getEnvironment(activeId);
+    // Return a new object reference to ensure React detects changes
+    return env ? { ...env, variables: [...env.variables] } : null;
 }
 
 export function setActiveEnvironment(id: string): boolean {