refactor: improve code formatting and readability across multiple components

aymenfurter · aymenfurter · commit 54bae42a0c90 · 2025-12-19T10:41:25.000Z
diff --git a/frontend/src/components/CustomScenarioEditor.tsx b/frontend/src/components/CustomScenarioEditor.tsx
@@ -4,27 +4,27 @@
  *--------------------------------------------------------------------------------------------*/
 
 import {
-    Button,
-    Dialog,
-    DialogActions,
-    DialogBody,
-    DialogContent,
-    DialogSurface,
-    DialogTitle,
-    DialogTrigger,
-    Field,
-    Input,
-    Text,
-    Textarea,
-    makeStyles,
-    tokens,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Field,
+  Input,
+  Text,
+  Textarea,
+  makeStyles,
+  tokens,
 } from '@fluentui/react-components'
 import {
-    Add24Regular,
-    ArrowDownload24Regular,
-    ArrowUpload24Regular,
-    Delete24Regular,
-    Edit24Regular,
+  Add24Regular,
+  ArrowDownload24Regular,
+  ArrowUpload24Regular,
+  Delete24Regular,
+  Edit24Regular,
 } from '@fluentui/react-icons'
 import { useRef, useState } from 'react'
 import { customScenarioService } from '../services/customScenarios'
@@ -60,7 +60,11 @@ const useStyles = makeStyles({
 
 interface CustomScenarioEditorProps {
   scenario?: CustomScenario | null
-  onSave: (name: string, description: string, scenarioData: CustomScenarioData) => void
+  onSave: (
+    name: string,
+    description: string,
+    scenarioData: CustomScenarioData
+  ) => void
   onDelete?: (id: string) => void
   trigger?: React.ReactNode
 }
@@ -141,7 +145,7 @@ export function CustomScenarioEditor({
     if (!file) return
 
     const reader = new FileReader()
-    reader.onload = (e) => {
+    reader.onload = e => {
       try {
         const content = e.target?.result as string
         const data = JSON.parse(content) as CustomScenarioData
@@ -217,12 +221,14 @@ export function CustomScenarioEditor({
             </Field>
 
             <Text className={styles.helpText}>
-              The system prompt defines how the AI will behave during the role-play.
-              Include character background, behavioral guidelines, and key topics to address.
+              The system prompt defines how the AI will behave during the
+              role-play. Include character background, behavioral guidelines,
+              and key topics to address.
             </Text>
 
             <Text className={styles.helpText}>
-              💾 Custom scenarios are stored locally in your browser and won't sync across devices.
+              💾 Custom scenarios are stored locally in your browser and won't
+              sync across devices.
             </Text>
 
             {error && <Text className={styles.errorText}>{error}</Text>}
diff --git a/frontend/src/components/ScenarioList.tsx b/frontend/src/components/ScenarioList.tsx
@@ -19,7 +19,13 @@ import {
 import { Edit24Regular } from '@fluentui/react-icons'
 import { useState } from 'react'
 import { api } from '../services/api'
-import { AVATAR_OPTIONS, CustomScenario, CustomScenarioData, DEFAULT_AVATAR, Scenario } from '../types'
+import {
+  AVATAR_OPTIONS,
+  CustomScenario,
+  CustomScenarioData,
+  DEFAULT_AVATAR,
+  Scenario,
+} from '../types'
 import { CustomScenarioEditor } from './CustomScenarioEditor'
 
 const useStyles = makeStyles({
@@ -119,8 +125,17 @@ interface Props {
   onSelect: (id: string) => void
   onStart: (avatarValue: string) => void
   onScenarioGenerated?: (scenario: Scenario) => void
-  onAddCustomScenario: (name: string, description: string, data: CustomScenarioData) => void
-  onUpdateCustomScenario: (id: string, updates: Partial<Pick<CustomScenario, 'name' | 'description' | 'scenarioData'>>) => void
+  onAddCustomScenario: (
+    name: string,
+    description: string,
+    data: CustomScenarioData
+  ) => void
+  onUpdateCustomScenario: (
+    id: string,
+    updates: Partial<
+      Pick<CustomScenario, 'name' | 'description' | 'scenarioData'>
+    >
+  ) => void
   onDeleteCustomScenario: (id: string) => void
 }
 
@@ -170,8 +185,17 @@ export function ScenarioList({
     ? [...scenarios.filter(s => !s.is_graph_scenario), generatedScenario]
     : scenarios
 
-  const handleEditCustomScenario = (scenario: CustomScenario, name: string, description: string, data: CustomScenarioData) => {
-    onUpdateCustomScenario(scenario.id, { name, description, scenarioData: data })
+  const handleEditCustomScenario = (
+    scenario: CustomScenario,
+    name: string,
+    description: string,
+    data: CustomScenarioData
+  ) => {
+    onUpdateCustomScenario(scenario.id, {
+      name,
+      description,
+      scenarioData: data,
+    })
   }
 
   return (
@@ -230,14 +254,13 @@ export function ScenarioList({
       <Divider style={{ marginTop: tokens.spacingVerticalL }} />
 
       <div className={styles.sectionHeader}>
-        <CustomScenarioEditor
-          onSave={onAddCustomScenario}
-        />
+        <CustomScenarioEditor onSave={onAddCustomScenario} />
       </div>
 
       {customScenarios.length === 0 ? (
         <Text className={styles.emptyCustom} size={200}>
-          No custom scenarios yet. Create one to practice with your own role-play situations.
+          No custom scenarios yet. Create one to practice with your own
+          role-play situations.
         </Text>
       ) : (
         <div className={styles.cardsGrid}>
@@ -251,17 +274,23 @@ export function ScenarioList({
                 onClick={() => onSelect(scenario.id)}
               >
                 <CardHeader
-                  header={
-                    <Text weight="semibold">
-                      {scenario.name}
-                    </Text>
-                  }
+                  header={<Text weight="semibold">{scenario.name}</Text>}
                   description={<Text size={200}>{scenario.description}</Text>}
                   action={
-                    <div className={styles.cardActions} onClick={e => e.stopPropagation()}>
+                    <div
+                      className={styles.cardActions}
+                      onClick={e => e.stopPropagation()}
+                    >
                       <CustomScenarioEditor
                         scenario={scenario}
-                        onSave={(name, description, data) => handleEditCustomScenario(scenario, name, description, data)}
+                        onSave={(name, description, data) =>
+                          handleEditCustomScenario(
+                            scenario,
+                            name,
+                            description,
+                            data
+                          )
+                        }
                         onDelete={onDeleteCustomScenario}
                         trigger={
                           <Button
@@ -287,7 +316,10 @@ export function ScenarioList({
           <Dropdown
             id="avatar-select"
             className={styles.avatarDropdown}
-            value={AVATAR_OPTIONS.find(opt => opt.value === selectedAvatar)?.label || ''}
+            value={
+              AVATAR_OPTIONS.find(opt => opt.value === selectedAvatar)?.label ||
+              ''
+            }
             selectedOptions={[selectedAvatar]}
             onOptionSelect={(_, data) => {
               if (data.optionValue) {
diff --git a/frontend/src/hooks/useScenarios.ts b/frontend/src/hooks/useScenarios.ts
@@ -30,44 +30,62 @@ export function useScenarios() {
   const scenarios: Scenario[] = [...serverScenarios, ...customScenarios]
 
   // Get a specific custom scenario by ID
-  const getCustomScenario = useCallback((id: string): CustomScenario | null => {
-    return customScenarios.find(s => s.id === id) || null
-  }, [customScenarios])
+  const getCustomScenario = useCallback(
+    (id: string): CustomScenario | null => {
+      return customScenarios.find(s => s.id === id) || null
+    },
+    [customScenarios]
+  )
 
   // Add a new custom scenario
-  const addCustomScenario = useCallback((
-    name: string,
-    description: string,
-    scenarioData: CustomScenarioData
-  ): CustomScenario => {
-    const newScenario = customScenarioService.save(name, description, scenarioData)
-    setCustomScenarios(prev => [...prev, newScenario])
-    return newScenario
-  }, [])
+  const addCustomScenario = useCallback(
+    (
+      name: string,
+      description: string,
+      scenarioData: CustomScenarioData
+    ): CustomScenario => {
+      const newScenario = customScenarioService.save(
+        name,
+        description,
+        scenarioData
+      )
+      setCustomScenarios(prev => [...prev, newScenario])
+      return newScenario
+    },
+    []
+  )
 
   // Update a custom scenario
-  const updateCustomScenario = useCallback((
-    id: string,
-    updates: Partial<Pick<CustomScenario, 'name' | 'description' | 'scenarioData'>>
-  ): CustomScenario | null => {
-    const updated = customScenarioService.update(id, updates)
-    if (updated) {
-      setCustomScenarios(prev => prev.map(s => s.id === id ? updated : s))
-    }
-    return updated
-  }, [])
+  const updateCustomScenario = useCallback(
+    (
+      id: string,
+      updates: Partial<
+        Pick<CustomScenario, 'name' | 'description' | 'scenarioData'>
+      >
+    ): CustomScenario | null => {
+      const updated = customScenarioService.update(id, updates)
+      if (updated) {
+        setCustomScenarios(prev => prev.map(s => (s.id === id ? updated : s)))
+      }
+      return updated
+    },
+    []
+  )
 
   // Delete a custom scenario
-  const deleteCustomScenario = useCallback((id: string): boolean => {
-    const deleted = customScenarioService.delete(id)
-    if (deleted) {
-      setCustomScenarios(prev => prev.filter(s => s.id !== id))
-      if (selectedScenario === id) {
-        setSelectedScenario(null)
+  const deleteCustomScenario = useCallback(
+    (id: string): boolean => {
+      const deleted = customScenarioService.delete(id)
+      if (deleted) {
+        setCustomScenarios(prev => prev.filter(s => s.id !== id))
+        if (selectedScenario === id) {
+          setSelectedScenario(null)
+        }
       }
-    }
-    return deleted
-  }, [selectedScenario])
+      return deleted
+    },
+    [selectedScenario]
+  )
 
   return {
     scenarios,
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
@@ -3,7 +3,12 @@
  *  Licensed under the MIT License. See LICENSE in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Assessment, AVATAR_OPTIONS, CustomScenarioData, Scenario } from '../types'
+import {
+  Assessment,
+  AVATAR_OPTIONS,
+  CustomScenarioData,
+  Scenario,
+} from '../types'
 
 export interface AvatarConfig {
   character: string
diff --git a/frontend/src/services/customScenarios.ts b/frontend/src/services/customScenarios.ts
@@ -36,7 +36,11 @@ export const customScenarioService = {
   /**
    * Save a new custom scenario
    */
-  save(name: string, description: string, scenarioData: CustomScenarioData): CustomScenario {
+  save(
+    name: string,
+    description: string,
+    scenarioData: CustomScenarioData
+  ): CustomScenario {
     const scenarios = this.getAll()
     const now = new Date().toISOString()
     const id = `custom-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
@@ -59,7 +63,12 @@ export const customScenarioService = {
   /**
    * Update an existing custom scenario
    */
-  update(id: string, updates: Partial<Pick<CustomScenario, 'name' | 'description' | 'scenarioData'>>): CustomScenario | null {
+  update(
+    id: string,
+    updates: Partial<
+      Pick<CustomScenario, 'name' | 'description' | 'scenarioData'>
+    >
+  ): CustomScenario | null {
     const scenarios = this.getAll()
     const index = scenarios.findIndex(s => s.id === id)
 
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
@@ -70,7 +70,11 @@ export interface AvatarOption {
 }
 
 export const AVATAR_OPTIONS: AvatarOption[] = [
-  { value: 'lisa-casual-sitting', label: 'Lisa (Casual Sitting)', isPhotoAvatar: false },
+  {
+    value: 'lisa-casual-sitting',
+    label: 'Lisa (Casual Sitting)',
+    isPhotoAvatar: false,
+  },
   { value: 'riya', label: 'Riya (Photo)', isPhotoAvatar: true },
   { value: 'simone', label: 'Simone (Photo)', isPhotoAvatar: true },
 ]

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,11 @@ export interface AvatarOption {`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`export const AVATAR_OPTIONS: AvatarOption[] = [`
`73`		`- { value: 'lisa-casual-sitting', label: 'Lisa (Casual Sitting)', isPhotoAvatar: false },`
	`73`	`+ {`
	`74`	`+ value: 'lisa-casual-sitting',`
	`75`	`+ label: 'Lisa (Casual Sitting)',`
	`76`	`+ isPhotoAvatar: false,`
	`77`	`+ },`
`74`	`78`	`{ value: 'riya', label: 'Riya (Photo)', isPhotoAvatar: true },`
`75`	`79`	`{ value: 'simone', label: 'Simone (Photo)', isPhotoAvatar: true },`
`76`	`80`	`]`