Address PR #310 review feedback on the public profile page

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

@@ -8,7 +8,6 @@ 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',
@@ -55,3 +54,14 @@ export const Liked: Story = {
         await expect(canvas.getByRole('button', { name: /13 likes/i })).toBeInTheDocument();
     },
 };
+
+export const WithLinkedAccount: Story = {
+    args: { comment: { ...comment, userAccountId: '11111111-1111-1111-1111-111111111111' } },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByRole('link', { name: 'malt_kettle' })).toHaveAttribute(
+            'href',
+            '/users/11111111-1111-1111-1111-111111111111',
+        );
+    },
+};

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

@@ -20,9 +20,16 @@ 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">
-                    <Link to={`/users/${comment.userAccountId}`} className="font-bold text-sm link link-hover">
-                        {comment.user}
-                    </Link>
+                    {comment.userAccountId ? (
+                        <Link
+                            to={`/users/${comment.userAccountId}`}
+                            className="font-bold text-sm link link-hover"
+                        >
+                            {comment.user}
+                        </Link>
+                    ) : (
+                        <span className="font-bold text-sm">{comment.user}</span>
+                    )}
                     <StarRating value={comment.rating} size="xs" />
                     <span className="text-xs text-base-content/60">{comment.time}</span>
                 </div>

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

@@ -88,7 +88,7 @@ export const FILLER_BEERS: FillerBeer[] = [
 export interface FillerComment {
     id: string;
     user: string;
-    userAccountId: string;
+    userAccountId?: string;
     initials: string;
     rating: number;
     time: string;
@@ -97,11 +97,12 @@ export interface FillerComment {
     liked: boolean;
 }
 
+// `userAccountId` is left unset below since these commenters aren't backed by real accounts
+// yet; CommentItem only links a commenter's name once a real account GUID is available.
 export const FILLER_COMMENTS: FillerComment[] = [
     {
         id: '1',
         user: 'malt_kettle',
-        userAccountId: 'malt_kettle',
         initials: 'MK',
         rating: 5,
         time: '2 days ago',
@@ -112,7 +113,6 @@ export const FILLER_COMMENTS: FillerComment[] = [
     {
         id: '2',
         user: 'stoutfan_88',
-        userAccountId: 'stoutfan_88',
         initials: 'SB',
         rating: 4,
         time: '1 week ago',
@@ -123,7 +123,6 @@ export const FILLER_COMMENTS: FillerComment[] = [
     {
         id: '3',
         user: 'ale_annie',
-        userAccountId: 'ale_annie',
         initials: 'AL',
         rating: 4,
         time: '3 weeks ago',