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/tests/components/settings/PasswordChangeForm.test.tsx

@@ -121,7 +121,9 @@ describe('PasswordChangeForm', () => {
     it('allows typing in confirm password field', async () => {
       renderWithProvider(<PasswordChangeForm />);
 
-      const confirmPasswordInput = screen.getByLabelText(/confirm new password/i) as HTMLInputElement;
+      const confirmPasswordInput = screen.getByLabelText(
+        /confirm new password/i
+      ) as HTMLInputElement;
       await user.type(confirmPasswordInput, 'NewPassword123!');
 
       expect(confirmPasswordInput.value).toBe('NewPassword123!');

frontend/tests/components/settings/ProfileSettingsForm.test.tsx

@@ -65,11 +65,7 @@ describe('ProfileSettingsForm', () => {
   });
 
   const renderWithProvider = (component: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>);
   };
 
   describe('Rendering', () => {

frontend/tests/components/settings/SessionCard.test.tsx

@@ -134,9 +134,7 @@ describe('SessionCard', () => {
   });
 
   it('highlights current session with border', () => {
-    const { container } = render(
-      <SessionCard session={currentSession} onRevoke={mockOnRevoke} />
-    );
+    const { container } = render(<SessionCard session={currentSession} onRevoke={mockOnRevoke} />);
 
     const card = container.querySelector('.border-primary');
     expect(card).toBeInTheDocument();

frontend/tests/components/settings/SessionsManager.test.tsx

@@ -123,9 +123,7 @@ describe('SessionsManager', () => {
 
     renderWithProvider(<SessionsManager />);
 
-    expect(
-      screen.queryByRole('button', { name: /revoke all others/i })
-    ).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /revoke all others/i })).not.toBeInTheDocument();
   });
 
   it('opens bulk revoke dialog', async () => {
@@ -161,7 +159,7 @@ describe('SessionsManager', () => {
 
     // Find the destructive button in the dialog (not the "Cancel" button)
     const buttons = screen.getAllByRole('button');
-    const confirmButton = buttons.find(btn => btn.textContent === 'Revoke All Others');
+    const confirmButton = buttons.find((btn) => btn.textContent === 'Revoke All Others');
 
     if (confirmButton) {
       fireEvent.click(confirmButton);
@@ -214,9 +212,7 @@ describe('SessionsManager', () => {
 
     renderWithProvider(<SessionsManager />);
 
-    expect(
-      screen.getByText(/you're viewing your only active session/i)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/you're viewing your only active session/i)).toBeInTheDocument();
   });
 
   it('shows security tip', () => {
@@ -229,9 +225,7 @@ describe('SessionsManager', () => {
     renderWithProvider(<SessionsManager />);
 
     expect(screen.getByText(/security tip/i)).toBeInTheDocument();
-    expect(
-      screen.getByText(/if you see a session you don't recognize/i)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/if you see a session you don't recognize/i)).toBeInTheDocument();
   });
 
   it('closes bulk revoke dialog on cancel', async () => {