feat: add card to state session is active

Author: david-roper

apps/web/src/routes/_app/session/start-session.tsx

@@ -41,16 +41,28 @@ const RouteComponent = () => {
           {t('startSession')}
         </Heading>
       </PageHeader>
-      <StartSessionForm
-        currentGroup={currentGroup}
-        initialValues={initialValues}
-        readOnly={currentSession !== null || createSessionMutation.isPending}
-        username={currentUser?.username}
-        onSubmit={async (formData) => {
-          const session = await createSessionMutation.mutateAsync(formData);
-          startSession({ ...session, type: formData.type });
-        }}
-      />
+      <div className="space-y-4">
+        <StartSessionForm
+          currentGroup={currentGroup}
+          initialValues={initialValues}
+          readOnly={currentSession !== null || createSessionMutation.isPending}
+          username={currentUser?.username}
+          onSubmit={async (formData) => {
+            const session = await createSessionMutation.mutateAsync(formData);
+            startSession({ ...session, type: formData.type });
+          }}
+        />
+        {currentSession !== null && (
+          <div className="mx-auto block max-w-3xl rounded-lg border border-gray-200 bg-white p-6 opacity-75 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <p className="max-w-4xl text-center text-yellow-600 dark:text-yellow-300">
+              {t({
+                en: 'The current session must be ended before starting the form again',
+                fr: 'La session en cours doit être terminée avant de recommencer le formulaire.'
+              })}
+            </p>
+          </div>
+        )}
+      </div>
     </React.Fragment>
   );
 };