feat: add required asterisk indicator to TextField component

apps/frontend/app/components/Form/TextField.tsx

@@ -2,6 +2,7 @@ import type { AnyFieldMeta } from '@tanstack/react-form';
 import { LucideEye, LucideEyeClosed } from 'lucide-react';
 import { useCallback, useId, useState } from 'react';
 import { InfoIcon, type InfoIconProps } from '../info';
+import { Text } from '@radix-ui/themes';
 
 export type TextFieldProps = {
   label?: string;
@@ -32,6 +33,11 @@ export function TextField({ label, value, onChange, labelProps, labelDivProps, s
       {label && (
         <div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6, display: 'flex', alignItems: 'center' }} {...labelDivProps}>
           {label}
+          {rest?.required && (
+            <Text size="3" style={{ color: 'var(--red-9)', marginLeft: 2 }}>
+              *
+            </Text>
+          )}
           {infoIconProps && <InfoIcon {...infoIconProps} style={{ marginLeft: 4, verticalAlign: 'middle' }} />}
         </div>
       )}

apps/frontend/app/hooks/useQueryMessage.tsx

@@ -44,7 +44,7 @@ export function useQueryMessage(
 
     messageStr.current = queryMessageString;
     if (displayMessages) {
-      toast[queryMessage.type](queryMessage.code, {
+      toast[queryMessage.type](queryMessage.message, {
         position: 'top-center',
         autoClose: 5000,
         hideProgressBar: false,