fix: address Sprint 2 code review findings (i18n key, dark mode, empty name, icon differentiation)

- Add session.setup.open i18n key to EN/DE locales
- Remove ineffective color:textColor inline style (Tailwind specificity wins)
- SessionSetup: add dark mode classes, maxLength=30, trim+fallback on empty name save
- PhaseIndicator: Speaker B uses two-person icon to visually distinguish from A

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: BenPerro

src/components/PhaseIndicator.tsx

@@ -68,7 +68,7 @@ function SpeakerIcon({ speaker, className = '' }: { speaker: Speaker; className?
         </svg>
       ) : (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-          <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" />
+          <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v1h8v-1zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-1a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v1h-3zM4.75 14.094A5.973 5.973 0 004 17v1H1v-1a3 3 0 013.75-2.906z" />
         </svg>
       )}
     </span>

src/components/SessionSetup.tsx

@@ -36,7 +36,12 @@ const SessionSetup: React.FC<SessionSetupProps> = ({ config, onSave, onCancel })
   };
 
   const handleSave = () => {
-    onSave(localConfig);
+    const defaults = createDefaultParticipantConfig()
+    onSave({
+      ...localConfig,
+      nameA: localConfig.nameA.trim() || defaults.nameA,
+      nameB: localConfig.nameB.trim() || defaults.nameB,
+    })
   };
 
   const handleReset = () => {
@@ -45,26 +50,27 @@ const SessionSetup: React.FC<SessionSetupProps> = ({ config, onSave, onCancel })
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-md">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md">
         <div className="p-6">
-          <h2 className="text-xl font-bold text-gray-900 mb-4">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
             {t('session.setup.title', 'Session Setup')}
           </h2>
 
           <div className="space-y-6">
             {/* Participant A Configuration */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                 {t('session.setup.nameA', 'Partner A Name')}
               </label>
               <input
                 type="text"
                 value={localConfig.nameA}
                 onChange={(e) => handleNameChange('A', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                maxLength={30}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
               />
 
-              <label className="block text-sm font-medium text-gray-700 mt-3 mb-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mt-3 mb-1">
                 {t('session.setup.colorA', 'Partner A Color')}
               </label>
               <div className="flex space-x-2">
@@ -93,17 +99,18 @@ const SessionSetup: React.FC<SessionSetupProps> = ({ config, onSave, onCancel })
 
             {/* Participant B Configuration */}
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                 {t('session.setup.nameB', 'Partner B Name')}
               </label>
               <input
                 type="text"
                 value={localConfig.nameB}
                 onChange={(e) => handleNameChange('B', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+                maxLength={30}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
               />
 
-              <label className="block text-sm font-medium text-gray-700 mt-3 mb-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mt-3 mb-1">
                 {t('session.setup.colorB', 'Partner B Color')}
               </label>
               <div className="flex space-x-2">

src/components/SessionView.tsx

@@ -186,7 +186,7 @@ function ActiveSessionView() {
 
   const showGuidance = !(viewModel.modeId === 'maintain' && !guidanceSettings.enableInMaintain)
 
-  const { backgroundColor, textColor } = useParticipantBackground(
+  const { backgroundColor } = useParticipantBackground(
     viewModel.speaker,
     viewModel.participantColorA,
     viewModel.participantColorB
@@ -195,7 +195,7 @@ function ActiveSessionView() {
   return (
     <div
       className="flex flex-col min-h-screen transition-colors duration-700"
-      style={backgroundColor !== 'transparent' ? { backgroundColor, color: textColor } : undefined}
+      style={backgroundColor !== 'transparent' ? { backgroundColor } : undefined}
     >
       {/* Header with mode name and progress */}
       <header className="px-4 py-4 border-b border-gray-200 dark:border-gray-700">

src/i18n/locales/de/translation.json

@@ -54,6 +54,7 @@
     },
     "setup": {
       "title": "Sitzungseinrichtung",
+      "open": "Teilnehmer einrichten",
       "nameA": "Name von Partner A",
       "nameB": "Name von Partner B",
       "colorA": "Farbe von Partner A",

src/i18n/locales/en/translation.json

@@ -54,6 +54,7 @@
     },
     "setup": {
       "title": "Session Setup",
+      "open": "Participant setup",
       "nameA": "Partner A Name",
       "nameB": "Partner B Name",
       "colorA": "Partner A Color",