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/admin/AdminSidebar.tsx

@@ -64,9 +64,7 @@ export function AdminSidebar() {
       <div className="flex h-full flex-col">
         {/* Sidebar Header */}
         <div className="flex h-16 items-center justify-between border-b px-4">
-          {!collapsed && (
-            <h2 className="text-lg font-semibold">Admin Panel</h2>
-          )}
+          {!collapsed && <h2 className="text-lg font-semibold">Admin Panel</h2>}
           <button
             onClick={() => setCollapsed(!collapsed)}
             className="rounded-md p-2 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
@@ -85,8 +83,7 @@ export function AdminSidebar() {
         <nav className="flex-1 space-y-1 p-2">
           {navItems.map((item) => {
             const isActive =
-              pathname === item.href ||
-              (item.href !== '/admin' && pathname.startsWith(item.href));
+              pathname === item.href || (item.href !== '/admin' && pathname.startsWith(item.href));
             const Icon = item.icon;
 
             return (
@@ -97,9 +94,7 @@ export function AdminSidebar() {
                   'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                   'hover:bg-accent hover:text-accent-foreground',
                   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-                  isActive
-                    ? 'bg-accent text-accent-foreground'
-                    : 'text-muted-foreground',
+                  isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground',
                   collapsed && 'justify-center'
                 )}
                 title={collapsed ? item.name : undefined}
@@ -123,9 +118,7 @@ export function AdminSidebar() {
                 <p className="text-sm font-medium truncate">
                   {user.first_name} {user.last_name}
                 </p>
-                <p className="text-xs text-muted-foreground truncate">
-                  {user.email}
-                </p>
+                <p className="text-xs text-muted-foreground truncate">{user.email}</p>
               </div>
             </div>
           </div>