Dev Tools improvements (#247)

* Refactor environment variables UI and update validation logic

Enhanced the environment variables page layout for better responsiveness and structure by introducing new components and styles. Added `EnvListDisplay` for grouped variable display and adjusted several UI elements for clarity and consistency. Updated `NEXT_PUBLIC_SENTRY_ENVIRONMENT` validation to make it optional, aligning with updated requirements.

* Add environment variable validation and enhance page headers

Introduces robust validation for environment variables, ensuring correctness and contextual dependency checks. Updates page headers with titles and detailed descriptions for better usability and clarity.

* Refactor variable page layout and improve code readability

Rearranged className attributes in JSX for consistency and readability. Refactored map and enum validation logic for better formatting and maintainability. Applied minor corrections to types and formatting in other components.

* Refactor styles and simplify component logic

Updated badge variants to streamline styles and removed redundant hover states. Simplified logic in email page by extracting breadcrumb values and optimizing title rendering. Adjusted environment variables manager layout for cleaner rendering and removed unnecessary elements.

* Add real-time translation updates with RxJS and UI improvements

Introduced a Subject with debounce mechanism for handling translation updates, enhancing real-time editing in the translations comparison module. Improved UI components, including conditional rendering, better input handling, and layout adjustments. Implemented a server action for updating translations and streamlined type definitions in the emails page.

* Enhance environment variable copying functionality and improve user feedback

Updated the environment variables manager to copy structured environment variable data to the clipboard, improving usability. Adjusted toast notifications to provide clearer success and error messages during the copy process. Additionally, fixed a minor issue in the translations comparison component by ensuring proper filtering of keys based on the search input.

* Add AI translation functionality and update dependencies

Implemented a new action for translating missing strings using AI, enhancing the translations comparison component. Introduced a loading state during translation and improved error handling for translation updates. Updated package dependencies, including the addition of '@ai-sdk/openai' and 'ai' to facilitate AI-driven translations. Enhanced UI components for better user experience and streamlined translation management.

apps/dev-tool/app/lib/connectivity-service.ts

@@ -31,25 +31,32 @@ class ConnectivityService {
       };
     }
 
-    const response = await fetch(`${url}/auth/v1/health`, {
-      headers: {
-        apikey: anonKey,
-        Authorization: `Bearer ${anonKey}`,
-      },
-    });
+    try {
+      const response = await fetch(`${url}/auth/v1/health`, {
+        headers: {
+          apikey: anonKey,
+          Authorization: `Bearer ${anonKey}`,
+        },
+      });
 
-    if (!response.ok) {
+      if (!response.ok) {
+        return {
+          status: 'error' as const,
+          message:
+            'Failed to connect to Supabase. The Supabase Anon Key or URL is not valid.',
+        };
+      }
+
+      return {
+        status: 'success' as const,
+        message: 'Connected to Supabase',
+      };
+    } catch (error) {
       return {
         status: 'error' as const,
-        message:
-          'Failed to connect to Supabase. The Supabase Anon Key or URL is not valid.',
+        message: `Failed to connect to Supabase. ${error}`,
       };
     }
-
-    return {
-      status: 'success' as const,
-      message: 'Connected to Supabase',
-    };
   }
 
   async checkSupabaseAdminConnectivity() {
@@ -85,35 +92,42 @@ class ConnectivityService {
       };
     }
 
-    const response = await fetch(endpoint, {
-      headers: {
-        apikey,
-        Authorization: `Bearer ${adminKey}`,
-      },
-    });
+    try {
+      const response = await fetch(endpoint, {
+        headers: {
+          apikey,
+          Authorization: `Bearer ${adminKey}`,
+        },
+      });
 
-    if (!response.ok) {
+      if (!response.ok) {
+        return {
+          status: 'error' as const,
+          message:
+            'Failed to connect to Supabase Admin. The Supabase Service Role Key is not valid.',
+        };
+      }
+
+      const data = await response.json();
+
+      if (data.length === 0) {
+        return {
+          status: 'error' as const,
+          message:
+            'No accounts found in Supabase Admin. The data may not be seeded. Please run `pnpm run supabase:web:reset` to reset the database.',
+        };
+      }
+
+      return {
+        status: 'success' as const,
+        message: 'Connected to Supabase Admin',
+      };
+    } catch (error) {
       return {
         status: 'error' as const,
-        message:
-          'Failed to connect to Supabase Admin. The Supabase Service Role Key is not valid.',
+        message: `Failed to connect to Supabase Admin. ${error}`,
       };
     }
-
-    const data = await response.json();
-
-    if (data.length === 0) {
-      return {
-        status: 'error' as const,
-        message:
-          'No accounts found in Supabase Admin. The data may not be seeded. Please run `pnpm run supabase:web:reset` to reset the database.',
-      };
-    }
-
-    return {
-      status: 'success' as const,
-      message: 'Connected to Supabase Admin',
-    };
   }
 
   async checkStripeWebhookEndpoints() {