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/dev/BeforeAfter.tsx

@@ -61,19 +61,12 @@ export function BeforeAfter({
       {(title || description) && (
         <div className="space-y-2">
           {title && <h3 className="text-xl font-semibold">{title}</h3>}
-          {description && (
-            <p className="text-sm text-muted-foreground">{description}</p>
-          )}
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
         </div>
       )}
 
       {/* Comparison Grid */}
-      <div
-        className={cn(
-          'grid gap-4',
-          vertical ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2'
-        )}
-      >
+      <div className={cn('grid gap-4', vertical ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2')}>
         {/* Before (Anti-pattern) */}
         <Card className="border-destructive/50">
           <CardHeader className="space-y-2 pb-4">
@@ -94,9 +87,7 @@ export function BeforeAfter({
             </div>
             {/* Caption */}
             {before.caption && (
-              <p className="text-xs text-muted-foreground italic">
-                {before.caption}
-              </p>
+              <p className="text-xs text-muted-foreground italic">{before.caption}</p>
             )}
           </CardContent>
         </Card>
@@ -124,9 +115,7 @@ export function BeforeAfter({
             </div>
             {/* Caption */}
             {after.caption && (
-              <p className="text-xs text-muted-foreground italic">
-                {after.caption}
-              </p>
+              <p className="text-xs text-muted-foreground italic">{after.caption}</p>
             )}
           </CardContent>
         </Card>

frontend/src/components/dev/CodeSnippet.tsx

@@ -61,12 +61,8 @@ export function CodeSnippet({
       {(title || language) && (
         <div className="flex items-center justify-between rounded-t-lg border border-b-0 bg-muted/50 px-4 py-2">
           <div className="flex items-center gap-2">
-            {title && (
-              <span className="text-sm font-medium text-foreground">{title}</span>
-            )}
-            {language && (
-              <span className="text-xs text-muted-foreground">({language})</span>
-            )}
+            {title && <span className="text-sm font-medium text-foreground">{title}</span>}
+            {language && <span className="text-xs text-muted-foreground">({language})</span>}
           </div>
           <Button
             variant="ghost"
@@ -139,8 +135,7 @@ export function CodeSnippet({
                       key={idx}
                       className={cn(
                         'leading-6',
-                        highlightLines.includes(idx + 1) &&
-                          'bg-accent/20 -mx-4 px-4'
+                        highlightLines.includes(idx + 1) && 'bg-accent/20 -mx-4 px-4'
                       )}
                     >
                       {line || ' '}

frontend/src/components/dev/ComponentShowcase.tsx

@@ -9,11 +9,7 @@
 'use client';
 
 import { useState } from 'react';
-import {
-  Mail, User,
-  Settings, LogOut, Shield, AlertCircle, Info,
-  Trash2
-} from 'lucide-react';
+import { Mail, User, Settings, LogOut, Shield, AlertCircle, Info, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -281,7 +277,11 @@ export function ComponentShowcase() {
                 </div>
 
                 <div className="flex items-center space-x-2">
-                  <Checkbox id="terms" checked={checked} onCheckedChange={(value) => setChecked(value as boolean)} />
+                  <Checkbox
+                    id="terms"
+                    checked={checked}
+                    onCheckedChange={(value) => setChecked(value as boolean)}
+                  />
                   <Label htmlFor="terms" className="text-sm font-normal cursor-pointer">
                     Accept terms and conditions
                   </Label>
@@ -357,11 +357,7 @@ export function ComponentShowcase() {
           </ExampleSection>
 
           {/* Badges */}
-          <ExampleSection
-            id="badges"
-            title="Badges"
-            description="Status indicators and labels"
-          >
+          <ExampleSection id="badges" title="Badges" description="Status indicators and labels">
             <Example
               title="Badge Variants"
               code={`<Badge>Default</Badge>
@@ -411,11 +407,7 @@ export function ComponentShowcase() {
           </ExampleSection>
 
           {/* Alerts */}
-          <ExampleSection
-            id="alerts"
-            title="Alerts"
-            description="Contextual feedback messages"
-          >
+          <ExampleSection id="alerts" title="Alerts" description="Contextual feedback messages">
             <div className="space-y-4">
               <Example
                 title="Alert Variants"
@@ -439,17 +431,13 @@ export function ComponentShowcase() {
                   <Alert>
                     <Info className="h-4 w-4" />
                     <AlertTitle>Information</AlertTitle>
-                    <AlertDescription>
-                      This is an informational alert message.
-                    </AlertDescription>
+                    <AlertDescription>This is an informational alert message.</AlertDescription>
                   </Alert>
 
                   <Alert variant="destructive">
                     <AlertCircle className="h-4 w-4" />
                     <AlertTitle>Error</AlertTitle>
-                    <AlertDescription>
-                      Something went wrong. Please try again.
-                    </AlertDescription>
+                    <AlertDescription>Something went wrong. Please try again.</AlertDescription>
                   </Alert>
                 </div>
               </Example>
@@ -545,8 +533,8 @@ export function ComponentShowcase() {
                   <DialogHeader>
                     <DialogTitle>Are you sure?</DialogTitle>
                     <DialogDescription>
-                      This action cannot be undone. This will permanently delete your account
-                      and remove your data from our servers.
+                      This action cannot be undone. This will permanently delete your account and
+                      remove your data from our servers.
                     </DialogDescription>
                   </DialogHeader>
                   <DialogFooter>
@@ -594,9 +582,7 @@ export function ComponentShowcase() {
                   </div>
                 </TabsContent>
                 <TabsContent value="password" className="space-y-4 mt-4">
-                  <p className="text-sm text-muted-foreground">
-                    Change your password here.
-                  </p>
+                  <p className="text-sm text-muted-foreground">Change your password here.</p>
                   <div className="space-y-2">
                     <Label htmlFor="current">Current Password</Label>
                     <Input id="current" type="password" />
@@ -607,11 +593,7 @@ export function ComponentShowcase() {
           </ExampleSection>
 
           {/* Table */}
-          <ExampleSection
-            id="table"
-            title="Table"
-            description="Data tables with headers and cells"
-          >
+          <ExampleSection id="table" title="Table" description="Data tables with headers and cells">
             <Example
               title="Table Example"
               code={`<Table>

frontend/src/components/dev/DevBreadcrumbs.tsx

@@ -24,10 +24,7 @@ interface DevBreadcrumbsProps {
 
 export function DevBreadcrumbs({ items, className }: DevBreadcrumbsProps) {
   return (
-    <nav
-      className={cn('bg-muted/30 border-b', className)}
-      aria-label="Breadcrumb"
-    >
+    <nav className={cn('bg-muted/30 border-b', className)} aria-label="Breadcrumb">
       <div className="container mx-auto px-4 py-3">
         <ol className="flex items-center gap-2 text-sm">
           {/* Home link */}

frontend/src/components/dev/Example.tsx

@@ -48,7 +48,6 @@ export function Example({
   centered = false,
   tags,
 }: ExampleProps) {
-
   // Compact variant - no card wrapper
   if (variant === 'compact') {
     return (
@@ -68,9 +67,7 @@ export function Example({
                 </div>
               )}
             </div>
-            {description && (
-              <p className="text-sm text-muted-foreground">{description}</p>
-            )}
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
           </div>
         )}
 
@@ -178,9 +175,7 @@ export function ExampleGrid({
     3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
   }[cols];
 
-  return (
-    <div className={cn('grid gap-6', colsClass, className)}>{children}</div>
-  );
+  return <div className={cn('grid gap-6', colsClass, className)}>{children}</div>;
 }
 
 /**
@@ -208,9 +203,7 @@ export function ExampleSection({
     <section id={id} className={cn('space-y-6', className)}>
       <div className="space-y-2">
         <h2 className="text-2xl font-semibold tracking-tight">{title}</h2>
-        {description && (
-          <p className="text-sm text-muted-foreground">{description}</p>
-        )}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
       </div>
       {children}
     </section>