Link commenter and following names to their user profile pages

web/frontend/app/features/breweries/components/detail/comments/CommentItem.stories.tsx

@@ -8,6 +8,7 @@ const commentItemDescription = `A single comment row on the brewery detail page:
 const comment: FillerComment = {
     id: '1',
     user: 'malt_kettle',
+    userAccountId: 'malt_kettle',
     initials: 'MK',
     rating: 5,
     time: '2 days ago',

web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx

@@ -1,4 +1,5 @@
 import { Heart, HeartSolid } from 'iconoir-react';
+import { Link } from 'react-router';
 import StarRating from '../../shared/StarRating';
 import type { FillerComment } from '../../../utils/filler-brewery-detail';
 
@@ -19,7 +20,9 @@ const CommentItem = ({ comment, onToggleLike }: CommentItemProps) => {
             </div>
             <div className="flex-1 flex flex-col gap-1 min-w-0">
                 <div className="flex items-baseline gap-2 flex-wrap">
-                    <span className="font-bold text-sm">{comment.user}</span>
+                    <Link to={`/users/${comment.userAccountId}`} className="font-bold text-sm link link-hover">
+                        {comment.user}
+                    </Link>
                     <StarRating value={comment.rating} size="xs" />
                     <span className="text-xs text-base-content/60">{comment.time}</span>
                 </div>

web/frontend/app/features/breweries/routes/brewery-detail.tsx

@@ -28,13 +28,14 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
         brewery,
         loggedIn: auth !== null,
         username: auth?.username ?? null,
+        userAccountId: auth?.userAccountId ?? null,
     };
 };
 
 const initials = (username: string) => username.slice(0, 2).toUpperCase();
 
 const BreweryDetail = ({ loaderData }: Route.ComponentProps) => {
-    const { brewery, loggedIn, username } = loaderData;
+    const { brewery, loggedIn, username, userAccountId } = loaderData;
 
     const [liked, setLiked] = useState(false);
     const [likeCount, setLikeCount] = useState(FILLER_BREWERY_META.likeCount);
@@ -57,6 +58,7 @@ const BreweryDetail = ({ loaderData }: Route.ComponentProps) => {
             {
                 id: crypto.randomUUID(),
                 user: username ?? 'you',
+                userAccountId: userAccountId ?? '',
                 initials: username ? initials(username) : 'YO',
                 rating: yourRating,
                 time: 'just now',

web/frontend/app/features/breweries/utils/filler-brewery-detail.ts

@@ -88,6 +88,7 @@ export const FILLER_BEERS: FillerBeer[] = [
 export interface FillerComment {
     id: string;
     user: string;
+    userAccountId: string;
     initials: string;
     rating: number;
     time: string;
@@ -100,6 +101,7 @@ export const FILLER_COMMENTS: FillerComment[] = [
     {
         id: '1',
         user: 'malt_kettle',
+        userAccountId: 'malt_kettle',
         initials: 'MK',
         rating: 5,
         time: '2 days ago',
@@ -110,6 +112,7 @@ export const FILLER_COMMENTS: FillerComment[] = [
     {
         id: '2',
         user: 'stoutfan_88',
+        userAccountId: 'stoutfan_88',
         initials: 'SB',
         rating: 4,
         time: '1 week ago',
@@ -120,6 +123,7 @@ export const FILLER_COMMENTS: FillerComment[] = [
     {
         id: '3',
         user: 'ale_annie',
+        userAccountId: 'ale_annie',
         initials: 'AL',
         rating: 4,
         time: '3 weeks ago',