feat: Implement /settings Page - Profile, Organization & Preferences

[imSubhro]

✨ Implement /settings Page — Profile, Organization & Preferences

Closes #37

---

📋 Summary

This PR implements the full /settings page for OPSCORD, resolving the gap where users had no way to manage their profile, organization, or preferences after account creation. The page is accessible from both the sidebar's Settings link and the user avatar at the bottom of the sidebar.

---

🔧 What's Changed

apps/web/app/(dashboard)/settings/page.tsx

Complete rewrite of the settings page with fully functional, controlled-state UI across three tabs:

Profile Tab

• Controlled form fields (Display Name, Email) — values are editable and retained in state
• Avatar upload via <input type="file" /> with live image preview; falls back to initials
• Remove avatar option
• Change Password section with:
  • Show/hide toggle on all three password fields
  • Client-side validation: required fields, 8-character minimum, new vs. confirm match
  • Inline error messages with icons

Organization Tab

• Editable Organization Name and Slug fields
• Team member list with:
  • Live role change (Admin / Member / Viewer) via controlled <select>
  • Remove member via Trash button (state-driven, Admin row protected)
• Invite member input with:
  • Email format validation
  • Duplicate detection with error feedback
  • Success confirmation message after invite
  • Enter key support

Preferences Tab

• Four fully controlled notification toggles (aria-checked, smooth animation)
• Theme selector (controlled <select>)
• Danger Zone — two-step delete account confirmation (click Delete → confirm prompt with Cancel/confirm buttons)

apps/web/components/core/Sidebar.tsx

• Converted the bottom user section from a static <div> into a <Link href="/settings"> — hover ring effect + "Settings →" hint text so users can navigate to settings from their avatar

---

✅ Acceptance Criteria Check

Criterion	Status
/settings route accessible from sidebar and user avatar	✅
Profile: update name, avatar, email, password (with validation)	✅
Organization: manage members, roles, remove, invite with validation	✅
Preferences: notifications, theme, danger zone with confirmation	✅
Fully responsive (stacked tabs on mobile, side nav on desktop)	✅
Design consistent with existing OPSCORD UI	✅

---

📸 Screenshots

---

🗂️ Files Changed

• apps/web/app/(dashboard)/settings/page.tsx
• apps/web/components/core/Sidebar.tsx

[vercel]

@imSubhro is attempting to deploy a commit to the xoxogroovy-7398's projects Team on Vercel.

A member of the Team first needs to authorize it.

[imSubhro]

@probably-ABHINAV Brother do u checked it ???