refactor: improve code clarity and maintainability

- Replace !! operator with Boolean() for type coercion in build-instruqt-url
- Move sandbox error boundary styles to CSS module
- Create sandbox-error-boundary.module.css
- Update components to use CSS module classes
- Maintain existing functionality and visual styles

These changes improve code quality by:
- Using explicit Boolean() constructor instead of double negation
- Following project conventions for CSS modules
- Removing inline styles for better maintainability

Author: Younique98

src/components/sandbox-error-boundary/index.tsx

@@ -6,6 +6,7 @@
 import React, { ReactNode } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { trackSandboxEvent, SANDBOX_EVENT } from 'lib/posthog-events'
+import s from './sandbox-error-boundary.module.css'
 
 interface SandboxErrorBoundaryProps {
 	children: ReactNode
@@ -30,44 +31,22 @@ const SandboxErrorFallback = ({
 					We encountered an unexpected error while loading your sandbox environment.
 					This issue has been reported and we’re working to fix it.
 				</p>
-				<details style={{ marginTop: '1rem', fontSize: '0.875rem' }}>
+				<details className={s.details}>
 					<summary>Technical Details</summary>
-					<pre style={{ 
-						marginTop: '0.5rem', 
-						padding: '0.5rem', 
-						backgroundColor: '#f5f5f5',
-						borderRadius: '4px',
-						overflow: 'auto',
-						fontSize: '0.75rem'
-					}}>
+					<pre className={s.detailsContent}>
 						{error.message}
 					</pre>
 				</details>
-				<div style={{ marginTop: '1rem' }}>
+				<div className={s.buttonContainer}>
 					<button 
 						onClick={resetErrorBoundary}
-						style={{
-							backgroundColor: '#1f2937',
-							color: 'white',
-							border: 'none',
-							borderRadius: '4px',
-							padding: '0.75rem 1.5rem',
-							marginRight: '0.5rem',
-							cursor: 'pointer'
-						}}
+						className={s.primaryButton}
 					>
 						Try Again
 					</button>
 					<button 
 						onClick={() => window.location.reload()}
-						style={{
-							backgroundColor: 'transparent',
-							color: '#1f2937',
-							border: '1px solid #d1d5db',
-							borderRadius: '4px',
-							padding: '0.75rem 1.5rem',
-							cursor: 'pointer'
-						}}
+						className={s.secondaryButton}
 					>
 						Refresh Page
 					</button>

src/components/sandbox-error-boundary/sandbox-error-boundary.module.css

@@ -0,0 +1,36 @@
+.details {
+  margin-top: 1rem;
+  font-size: 0.875rem;
+}
+
+.detailsContent {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  overflow: auto;
+  font-size: 0.75rem;
+}
+
+.buttonContainer {
+  margin-top: 1rem;
+}
+
+.primaryButton {
+  background-color: #1f2937;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.75rem 1.5rem;
+  margin-right: 0.5rem;
+  cursor: pointer;
+}
+
+.secondaryButton {
+  background-color: transparent;
+  color: #1f2937;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+}

src/lib/build-instruqt-url.ts

@@ -54,7 +54,7 @@ export function buildLabId(
 			trackInstruqtUrlError(
 				'null_lab_config',
 				'Lab configuration is null or undefined',
-				{ custom_tokens_provided: !!customTokens }
+				{ custom_tokens_provided: Boolean(customTokens) }
 			)
 			return ''
 		}
@@ -65,7 +65,7 @@ export function buildLabId(
 				'Lab instruqtTrack is missing',
 				{
 					lab_id: lab.labId,
-					lab_has_scenario: !!lab.scenario,
+					lab_has_scenario: Boolean(lab.scenario),
 				}
 			)
 			return lab.labId || ''
@@ -89,7 +89,7 @@ export function buildLabId(
 				error_stack: error instanceof Error ? error.stack : undefined,
 				lab_id: lab?.labId,
 				instruqt_track: lab?.instruqtTrack,
-				has_scenario: !!lab?.scenario,
+				has_scenario: Boolean(lab?.scenario),
 			}
 		)
 		return lab?.labId || ''