Refactor useAuth hook, settings components, and docs for formatting and readability improvements

- Consolidated multi-line arguments into single lines where appropriate in `useAuth`.
- Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`).
- Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`).
- Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.

frontend/src/components/forms/FormField.tsx

@@ -60,7 +60,7 @@ export function FormField({
 }: FormFieldProps) {
   // Extract name from inputProps (from register()) or use explicit name
   // register() adds a name property that may not be in the type
-  const registerName = ('name' in inputProps) ? (inputProps as { name: string }).name : undefined;
+  const registerName = 'name' in inputProps ? (inputProps as { name: string }).name : undefined;
   const name = explicitName || registerName;
 
   if (!name) {
@@ -84,12 +84,7 @@ export function FormField({
           {description}
         </p>
       )}
-      <Input
-        id={name}
-        aria-invalid={!!error}
-        aria-describedby={ariaDescribedBy}
-        {...inputProps}
-      />
+      <Input id={name} aria-invalid={!!error} aria-describedby={ariaDescribedBy} {...inputProps} />
       {error && (
         <p id={errorId} className="text-sm text-destructive" role="alert">
           {error.message}