feat: add @ prefix to profile URLs and make usernames clickable

- Updated all profile links to use /@username format
- Made usernames clickable in chat messages
- Added URL parameter sanitization to strip @ when fetching user data
- Ensures consistent profile URL format across the application

frontend/src/pages/MatchChatPage.jsx

@@ -219,7 +219,7 @@ const MatchChatPage = () => {
         <div className="bg-primary-600 text-white p-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-4">
-                <Link to={`/${partner.username}`} className="flex-shrink-0">
+                <Link to={`/@${partner.username}`} className="flex-shrink-0">
                   <Avatar
                     src={partner.avatar}
                     username={partner.username}
@@ -229,7 +229,7 @@ const MatchChatPage = () => {
                   />
                 </Link>
                 <div>
-                  <Link to={`/${partner.username}`}>
+                  <Link to={`/@${partner.username}`}>
                     <h2 className="text-xl font-bold hover:text-primary-100 transition-colors">
                       {partner.firstName && partner.lastName
                         ? `${partner.firstName} ${partner.lastName}`

frontend/src/pages/PublicProfilePage.jsx

@@ -6,7 +6,9 @@ import { User, MapPin, Globe, Hash, Youtube, Instagram, Facebook, Award, Users,
 import Avatar from '../components/common/Avatar';
 
 const PublicProfilePage = () => {
-  const { username } = useParams();
+  const { username: rawUsername } = useParams();
+  // Strip @ from username if present (for /@username URLs)
+  const username = rawUsername?.startsWith('@') ? rawUsername.slice(1) : rawUsername;
   const [profile, setProfile] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
@@ -265,7 +267,7 @@ const PublicProfilePage = () => {
                     <div key={rating.id} className="border-b pb-4 last:border-b-0">
                       <div className="flex items-start gap-4">
                         {/* Rater Info */}
-                        <Link to={`/${rating.rater.username}`} className="flex-shrink-0">
+                        <Link to={`/@${rating.rater.username}`} className="flex-shrink-0">
                           <Avatar
                             src={rating.rater.avatar}
                             username={rating.rater.username}
@@ -280,7 +282,7 @@ const PublicProfilePage = () => {
                           <div className="flex items-start justify-between mb-2">
                             <div>
                               <Link
-                                to={`/${rating.rater.username}`}
+                                to={`/@${rating.rater.username}`}
                                 className="font-semibold text-gray-900 hover:text-primary-600"
                               >
                                 {rating.rater.firstName && rating.rater.lastName