From d7c317ab02e8edf64d7e5e311bab97d104e19320 Mon Sep 17 00:00:00 2001
From: Stephen <stephen.t.j.leong@gmail.com>
Date: Mon, 20 Apr 2026 03:01:46 +0100
Subject: [PATCH 1/6] feat: implement reply targeting in forums with inline
 reply functionality

---
 .../src/pages/public/travel-advice/Forums.tsx |  53 ++++-
 .../travel-advice/forums/ThreadDetail.tsx     | 218 +++++++++++-------
 2 files changed, 189 insertions(+), 82 deletions(-)

diff --git a/frontend/src/pages/public/travel-advice/Forums.tsx b/frontend/src/pages/public/travel-advice/Forums.tsx
index e2bec56..61826fc 100644
--- a/frontend/src/pages/public/travel-advice/Forums.tsx
+++ b/frontend/src/pages/public/travel-advice/Forums.tsx
@@ -37,8 +37,13 @@ const Forums = () => {
   const [repliesTotalPages, setRepliesTotalPages] = useState(1);
   const [repliesLoading, setRepliesLoading] = useState(false);
   const [replyContent, setReplyContent] = useState("");
+  const [replyTarget, setReplyTarget] = useState<{ replyId: string; username: string } | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const stripLeadingMention = (value: string) => value.replace(/^@\S+\s+/, "");
+
+  const getMentionPrefix = (username: string) => `@${username} `;
+
   const { t } = useTranslation();
 
   const canPost = Boolean(token && profile);
@@ -70,6 +75,7 @@ const Forums = () => {
       setSelectedThread(null);
       setReplies([]);
       setRepliesPage(1);
+      setReplyTarget(null);
       return;
     }
 
@@ -159,6 +165,7 @@ const Forums = () => {
       setSelectedThread(null);
       setReplies([]);
       setRepliesPage(1);
+      setReplyTarget(null);
       navigate(localizePath("/travel-advice/forums", locale), { replace: true });
     }
   }
@@ -222,7 +229,10 @@ const Forums = () => {
             "Content-Type": "application/json",
             Authorization: `Bearer ${token}`,
           },
-          body: JSON.stringify({ content: trimmedContent }),
+          body: JSON.stringify({
+            content: trimmedContent,
+            parent_reply_id: replyTarget?.replyId ?? null,
+          }),
         }
       );
 
@@ -231,6 +241,7 @@ const Forums = () => {
       }
 
       setReplyContent("");
+      setReplyTarget(null);
       setRepliesPage(1);
       await fetchReplies(selectedThread.id, 1);
     } catch (err) {
@@ -344,6 +355,9 @@ const Forums = () => {
       }
 
       setReplies((previous) => previous.filter((reply) => reply.id !== replyId));
+      setReplyTarget((previous) =>
+        previous && previous.replyId === replyId ? null : previous,
+      );
       await fetchReplies(selectedThread.id, repliesPage);
     } catch (err) {
       console.error("Error deleting reply:", err);
@@ -351,6 +365,38 @@ const Forums = () => {
     }
   };
 
+  const handleReplyToReply = (reply: Reply) => {
+    const mentionName = (reply.username ?? "Anonymous").trim() || "Anonymous";
+    const mentionText = getMentionPrefix(mentionName);
+
+    setReplyTarget({ replyId: reply.id, username: mentionName });
+    setReplyContent((previous) => {
+      const withoutMention = stripLeadingMention(previous);
+      return `${mentionText}${withoutMention}`;
+    });
+  };
+
+  const handleReplyContentChange = (value: string) => {
+    if (!replyTarget) {
+      setReplyContent(value);
+      return;
+    }
+
+    const prefix = getMentionPrefix(replyTarget.username);
+    if (value.startsWith(prefix)) {
+      setReplyContent(value);
+      return;
+    }
+
+    const withoutMention = stripLeadingMention(value);
+    setReplyContent(`${prefix}${withoutMention}`);
+  };
+
+  const handleReplyTargetClear = () => {
+    setReplyTarget(null);
+    setReplyContent((previous) => stripLeadingMention(previous));
+  };
+
   return (
     <Layout>
       {selectedThread ? (
@@ -364,8 +410,11 @@ const Forums = () => {
           canPost={canPost}
           currentUserId={currentUserId}
           replyContent={replyContent}
-          onReplyContentChange={setReplyContent}
+          onReplyContentChange={handleReplyContentChange}
           onCreateReply={handleCreateReply}
+          replyTarget={replyTarget}
+          onReplyTargetClear={handleReplyTargetClear}
+          onReplyToReply={handleReplyToReply}
           onThreadUpdate={handleUpdateThread}
           onThreadDelete={handleDeleteThread}
           onReplyDelete={handleDeleteReply}
diff --git a/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx b/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
index c175c3c..9850ccb 100644
--- a/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
+++ b/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import type { FormEvent } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { FaCheck, FaEdit, FaTimes, FaTrash } from "react-icons/fa";
@@ -20,6 +20,9 @@ type ThreadDetailProps = {
   replyContent: string;
   onReplyContentChange: (content: string) => void;
   onCreateReply: (event: FormEvent<HTMLFormElement>) => void;
+  replyTarget: { replyId: string; username: string } | null;
+  onReplyTargetClear: () => void;
+  onReplyToReply: (reply: Reply) => void;
   onThreadUpdate: (
     threadId: string,
     nextTitle: string,
@@ -42,6 +45,9 @@ const ThreadDetail = ({
   replyContent,
   onReplyContentChange,
   onCreateReply,
+  replyTarget,
+  onReplyTargetClear,
+  onReplyToReply,
   onThreadUpdate,
   onThreadDelete,
   onReplyDelete,
@@ -235,20 +241,30 @@ const ThreadDetail = ({
           )}
 
           {canPost && (
-            <form className="space-y-3" onSubmit={onCreateReply}>
-              <textarea
-                className="textarea textarea-bordered w-full min-h-24"
-                placeholder="Share your thoughts..."
-                value={replyContent}
-                onChange={(event) => onReplyContentChange(event.target.value)}
-              />
-              <div className="flex justify-end">
-                <button type="submit" className={primaryActionButtonClass}>
-                  <FaCheck />
-                  Post reply
-                </button>
-              </div>
-            </form>
+            <>
+              {!replyTarget && (
+                <form className="space-y-3" onSubmit={onCreateReply}>
+                  <textarea
+                    className="textarea textarea-bordered w-full min-h-24"
+                    placeholder="Share your thoughts..."
+                    value={replyContent}
+                    onChange={(event) => onReplyContentChange(event.target.value)}
+                  />
+                  <div className="flex justify-end">
+                    <button type="submit" className={primaryActionButtonClass}>
+                      <FaCheck />
+                      Post reply
+                    </button>
+                  </div>
+                </form>
+              )}
+
+              {replyTarget && (
+                <div className="alert alert-info py-2">
+                  Replying inline to @{replyTarget.username}. The reply box is shown under that comment.
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>
@@ -266,85 +282,127 @@ const ThreadDetail = ({
           </p>
         ) : (
           replies.map((reply) => (
-            <article
-              key={reply.id}
-              className="card w-full bg-base-100 border border-base-300 shadow-sm"
-            >
-              <div className="card-body gap-2">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    {reply.user_id ? (
-                      <Link
-                        to={localizePath(`/profile/${reply.user_id}`, locale)}
-                        className="avatar"
-                        aria-label={`View ${reply.username || "Anonymous"} profile`}
-                      >
-                        <div className="w-8 h-8 rounded-full bg-base-300 overflow-hidden flex items-center justify-center">
-                          {reply.photo ? (
-                            <img
-                              src={reply.photo}
-                              alt={reply.username || "User"}
-                              className="w-full h-full object-cover"
-                            />
-                          ) : (
-                            <span className="text-xs font-semibold text-base-content/70">
-                              {getAuthorInitial(reply.username)}
-                            </span>
-                          )}
-                        </div>
-                      </Link>
-                    ) : (
-                      <div className="avatar">
-                        <div className="w-8 h-8 rounded-full bg-base-300 overflow-hidden flex items-center justify-center">
-                          {reply.photo ? (
-                            <img
-                              src={reply.photo}
-                              alt={reply.username || "User"}
-                              className="w-full h-full object-cover"
-                            />
-                          ) : (
-                            <span className="text-xs font-semibold text-base-content/70">
-                              {getAuthorInitial(reply.username)}
-                            </span>
-                          )}
-                        </div>
-                      </div>
-                    )}
-                    <div>
+            <Fragment key={reply.id}>
+              <article
+                className="card w-full bg-base-100 border border-base-300 shadow-sm"
+              >
+                <div className="card-body gap-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
                       {reply.user_id ? (
                         <Link
-                          className="font-semibold link link-hover"
                           to={localizePath(`/profile/${reply.user_id}`, locale)}
+                          className="avatar"
+                          aria-label={`View ${reply.username || "Anonymous"} profile`}
                         >
-                          {reply.username || "Anonymous"}
+                          <div className="w-8 h-8 rounded-full bg-base-300 overflow-hidden flex items-center justify-center">
+                            {reply.photo ? (
+                              <img
+                                src={reply.photo}
+                                alt={reply.username || "User"}
+                                className="w-full h-full object-cover"
+                              />
+                            ) : (
+                              <span className="text-xs font-semibold text-base-content/70">
+                                {getAuthorInitial(reply.username)}
+                              </span>
+                            )}
+                          </div>
                         </Link>
                       ) : (
-                        <p className="font-semibold">
-                          {reply.username || "Anonymous"}
+                        <div className="avatar">
+                          <div className="w-8 h-8 rounded-full bg-base-300 overflow-hidden flex items-center justify-center">
+                            {reply.photo ? (
+                              <img
+                                src={reply.photo}
+                                alt={reply.username || "User"}
+                                className="w-full h-full object-cover"
+                              />
+                            ) : (
+                              <span className="text-xs font-semibold text-base-content/70">
+                                {getAuthorInitial(reply.username)}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                      <div>
+                        {reply.user_id ? (
+                          <Link
+                            className="font-semibold link link-hover"
+                            to={localizePath(`/profile/${reply.user_id}`, locale)}
+                          >
+                            {reply.username || "Anonymous"}
+                          </Link>
+                        ) : (
+                          <p className="font-semibold">
+                            {reply.username || "Anonymous"}
+                          </p>
+                        )}
+                        <p className="text-xs text-base-content/60">
+                          <DateTimeDisplay
+                            timestamp={reply.created_at}
+                            preset="relativeDateTime"
+                          />
                         </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {canPost && (
+                        <button
+                          type="button"
+                          className="btn btn-sm btn-ghost"
+                          onClick={() => onReplyToReply(reply)}
+                        >
+                          Reply
+                        </button>
+                      )}
+                      {currentUserId && reply.user_id === currentUserId && (
+                        <button
+                          type="button"
+                          className="btn btn-sm btn-error btn-outline gap-2"
+                          onClick={() => handleDeleteReply(reply.id)}
+                        >
+                          <FaTrash />
+                          Delete
+                        </button>
                       )}
-                      <p className="text-xs text-base-content/60">
-                        <DateTimeDisplay
-                          timestamp={reply.created_at}
-                          preset="relativeDateTime"
-                        />
-                      </p>
                     </div>
                   </div>
-                  {currentUserId && reply.user_id === currentUserId && (
+                  <p className="text-base-content/80 wrap-break-word whitespace-pre-wrap">{reply.content}</p>
+                </div>
+              </article>
+
+              {canPost && replyTarget && replyTarget.replyId === reply.id && (
+                <form
+                  className="ml-10 mt-2 space-y-3 rounded-xl border border-base-300 bg-base-100 p-3"
+                  onSubmit={onCreateReply}
+                >
+                  <div className="alert alert-info py-2">
+                    <span>Replying to @{replyTarget.username}</span>
                     <button
                       type="button"
-                      className="btn btn-sm btn-error btn-outline gap-2"
-                      onClick={() => handleDeleteReply(reply.id)}
+                      className="btn btn-xs"
+                      onClick={onReplyTargetClear}
                     >
-                      <FaTrash />
-                      Delete
+                      Cancel
                     </button>
-                  )}
-                </div>
-                <p className="text-base-content/80 wrap-break-word whitespace-pre-wrap">{reply.content}</p>
-              </div>
-            </article>
+                  </div>
+                  <textarea
+                    className="textarea textarea-bordered w-full min-h-24"
+                    placeholder={`Reply to @${replyTarget.username}...`}
+                    value={replyContent}
+                    onChange={(event) => onReplyContentChange(event.target.value)}
+                  />
+                  <div className="flex justify-end">
+                    <button type="submit" className={primaryActionButtonClass}>
+                      <FaCheck />
+                      Post reply
+                    </button>
+                  </div>
+                </form>
+              )}
+            </Fragment>
           ))
         )}
       </div>

From 6d3ac7da0e48b69bde9d09d92f164c8a3e0ef7d0 Mon Sep 17 00:00:00 2001
From: Stephen <stephen.t.j.leong@gmail.com>
Date: Mon, 20 Apr 2026 03:06:11 +0100
Subject: [PATCH 2/6] feat: enhance reply handling in forums with keyboard
 event support and optimized rendering

---
 .../src/pages/public/travel-advice/Forums.tsx |  24 +-
 .../travel-advice/forums/ThreadDetail.tsx     | 315 +++++++++++-------
 2 files changed, 214 insertions(+), 125 deletions(-)

diff --git a/frontend/src/pages/public/travel-advice/Forums.tsx b/frontend/src/pages/public/travel-advice/Forums.tsx
index 61826fc..8142db4 100644
--- a/frontend/src/pages/public/travel-advice/Forums.tsx
+++ b/frontend/src/pages/public/travel-advice/Forums.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState, useEffect } from "react";
-import type { FormEvent } from "react";
+import type { FormEvent, KeyboardEvent } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 
 import { useAuth } from "../../../context/AuthContext";
@@ -397,6 +397,27 @@ const Forums = () => {
     setReplyContent((previous) => stripLeadingMention(previous));
   };
 
+  const handleReplyContentKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!replyTarget || event.key !== "Backspace") {
+      return;
+    }
+
+    const input = event.currentTarget;
+    const isCaretSelection = input.selectionStart === input.selectionEnd;
+    const mentionPrefix = getMentionPrefix(replyTarget.username);
+
+    if (!isCaretSelection) {
+      return;
+    }
+
+    if (input.selectionStart > mentionPrefix.length) {
+      return;
+    }
+
+    event.preventDefault();
+    handleReplyTargetClear();
+  };
+
   return (
     <Layout>
       {selectedThread ? (
@@ -411,6 +432,7 @@ const Forums = () => {
           currentUserId={currentUserId}
           replyContent={replyContent}
           onReplyContentChange={handleReplyContentChange}
+          onReplyContentKeyDown={handleReplyContentKeyDown}
           onCreateReply={handleCreateReply}
           replyTarget={replyTarget}
           onReplyTargetClear={handleReplyTargetClear}
diff --git a/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx b/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
index 9850ccb..46bb93b 100644
--- a/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
+++ b/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
@@ -1,5 +1,6 @@
-import { Fragment, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 import type { FormEvent } from "react";
+import type { KeyboardEvent as ReactKeyboardEvent } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { FaCheck, FaEdit, FaTimes, FaTrash } from "react-icons/fa";
 import Pagination from "../../../../components/globals/Pagination";
@@ -19,6 +20,7 @@ type ThreadDetailProps = {
   currentUserId: string | null;
   replyContent: string;
   onReplyContentChange: (content: string) => void;
+  onReplyContentKeyDown: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;
   onCreateReply: (event: FormEvent<HTMLFormElement>) => void;
   replyTarget: { replyId: string; username: string } | null;
   onReplyTargetClear: () => void;
@@ -44,6 +46,7 @@ const ThreadDetail = ({
   currentUserId,
   replyContent,
   onReplyContentChange,
+  onReplyContentKeyDown,
   onCreateReply,
   replyTarget,
   onReplyTargetClear,
@@ -58,6 +61,33 @@ const ThreadDetail = ({
   const [isEditingThread, setIsEditingThread] = useState(false);
   const [editingTitle, setEditingTitle] = useState(thread.title);
   const [editingBody, setEditingBody] = useState(thread.body ?? "");
+  const [expandedReplyParents, setExpandedReplyParents] = useState<Record<string, boolean>>({});
+
+  const { topLevelReplies, repliesByParent } = useMemo(() => {
+    const replyIds = new Set(replies.map((reply) => reply.id));
+    const grouped = new Map<string, Reply[]>();
+    const topLevel: Reply[] = [];
+
+    for (const reply of replies) {
+      const parentId = reply.parent_reply_id;
+      if (!parentId || !replyIds.has(parentId)) {
+        topLevel.push(reply);
+        continue;
+      }
+
+      const children = grouped.get(parentId);
+      if (children) {
+        children.push(reply);
+      } else {
+        grouped.set(parentId, [reply]);
+      }
+    }
+
+    return {
+      topLevelReplies: topLevel,
+      repliesByParent: grouped,
+    };
+  }, [replies]);
 
   const isOwnThread = Boolean(
     currentUserId && thread.user_id === currentUserId,
@@ -101,6 +131,164 @@ const ThreadDetail = ({
   const actionButtonClass = "btn btn-sm btn-ghost gap-2";
   const primaryActionButtonClass = "btn btn-sm btn-neutral gap-2";
 
+  const toggleViewMoreReplies = (parentReplyId: string) => {
+    setExpandedReplyParents((previous) => ({
+      ...previous,
+      [parentReplyId]: !previous[parentReplyId],
+    }));
+  };
+
+  const renderReply = (reply: Reply, depth: number) => {
+    const isNestedReply = depth > 0;
+    const nestedReplies = repliesByParent.get(reply.id) ?? [];
+    const isExpanded = Boolean(expandedReplyParents[reply.id]);
+    const hasMoreReplies = nestedReplies.length > 3;
+    const visibleReplies = hasMoreReplies && !isExpanded
+      ? nestedReplies.slice(0, 3)
+      : nestedReplies;
+
+    return (
+      <Fragment key={reply.id}>
+        <article
+          className={`card w-full bg-base-100 border border-base-300 shadow-sm ${isNestedReply ? "ml-10" : ""}`}
+        >
+          <div className="card-body gap-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {reply.user_id ? (
+                  <Link
+                    to={localizePath(`/profile/${reply.user_id}`, locale)}
+                    className="avatar"
+                    aria-label={`View ${reply.username || "Anonymous"} profile`}
+                  >
+                    <div className="w-8 h-8 rounded-full bg-base-300 overflow-hidden flex items-center justify-center">
+                      {reply.photo ? (
+                        <img
+                          src={reply.photo}
+                          alt={reply.username || "User"}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <span className="text-xs font-semibold text-base-content/70">
+                          {getAuthorInitial(reply.username)}
+                        </span>
+                      )}
+                    </div>
+                  </Link>
+                ) : (
+                  <div className="avatar">
+                    <div className="w-8 h-8 rounded-full bg-base-300 overflow-hidden flex items-center justify-center">
+                      {reply.photo ? (
+                        <img
+                          src={reply.photo}
+                          alt={reply.username || "User"}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <span className="text-xs font-semibold text-base-content/70">
+                          {getAuthorInitial(reply.username)}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                )}
+                <div>
+                  {reply.user_id ? (
+                    <Link
+                      className="font-semibold link link-hover"
+                      to={localizePath(`/profile/${reply.user_id}`, locale)}
+                    >
+                      {reply.username || "Anonymous"}
+                    </Link>
+                  ) : (
+                    <p className="font-semibold">
+                      {reply.username || "Anonymous"}
+                    </p>
+                  )}
+                  <p className="text-xs text-base-content/60">
+                    <DateTimeDisplay
+                      timestamp={reply.created_at}
+                      preset="relativeDateTime"
+                    />
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                {canPost && (
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-ghost"
+                    onClick={() => onReplyToReply(reply)}
+                  >
+                    Reply
+                  </button>
+                )}
+                {currentUserId && reply.user_id === currentUserId && (
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-error btn-outline gap-2"
+                    onClick={() => handleDeleteReply(reply.id)}
+                  >
+                    <FaTrash />
+                    Delete
+                  </button>
+                )}
+              </div>
+            </div>
+            <p className="text-base-content/80 wrap-break-word whitespace-pre-wrap">{reply.content}</p>
+          </div>
+        </article>
+
+        {canPost && replyTarget && replyTarget.replyId === reply.id && (
+          <form
+            className="ml-10 mt-2 space-y-3 rounded-xl border border-base-300 bg-base-100 p-3"
+            onSubmit={onCreateReply}
+          >
+            <div className="alert alert-info py-2">
+              <span>Replying to @{replyTarget.username}</span>
+              <button
+                type="button"
+                className="btn btn-xs"
+                onClick={onReplyTargetClear}
+              >
+                Cancel
+              </button>
+            </div>
+            <textarea
+              className="textarea textarea-bordered w-full min-h-24"
+              placeholder={`Reply to @${replyTarget.username}...`}
+              value={replyContent}
+              onChange={(event) => onReplyContentChange(event.target.value)}
+              onKeyDown={onReplyContentKeyDown}
+            />
+            <div className="flex justify-end">
+              <button type="submit" className={primaryActionButtonClass}>
+                <FaCheck />
+                Post reply
+              </button>
+            </div>
+          </form>
+        )}
+
+        {visibleReplies.map((nestedReply) => renderReply(nestedReply, 1))}
+
+        {hasMoreReplies && (
+          <div className="ml-10 mt-2">
+            <button
+              type="button"
+              className="btn btn-sm btn-ghost"
+              onClick={() => toggleViewMoreReplies(reply.id)}
+            >
+              {isExpanded
+                ? "Show fewer replies"
+                : `View more replies (${nestedReplies.length - 3})`}
+            </button>
+          </div>
+        )}
+      </Fragment>
+    );
+  };
+
   return (
     <div className="w-full space-y-6">
       <button className="btn btn-ghost gap-2" onClick={onBack}>
@@ -249,6 +437,7 @@ const ThreadDetail = ({
                     placeholder="Share your thoughts..."
                     value={replyContent}
                     onChange={(event) => onReplyContentChange(event.target.value)}
+                    onKeyDown={onReplyContentKeyDown}
                   />
                   <div className="flex justify-end">
                     <button type="submit" className={primaryActionButtonClass}>
@@ -281,129 +470,7 @@ const ThreadDetail = ({
             No replies yet. Be the first to reply!
           </p>
         ) : (
-          replies.map((reply) => (
-            <Fragment key={reply.id}>
-              <article
-                className="card w-full bg-base-100 border border-base-300 shadow-sm"
-              >
-                <div className="card-body gap-2">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      {reply.user_id ? (
-                        <Link
-                          to={localizePath(`/profile/${reply.user_id}`, locale)}
-                          className="avatar"
-                          aria-label={`View ${reply.username || "Anonymous"} profile`}
-                        >
-                          <div className="w-8 h-8 rounded-full bg-base-300 overflow-hidden flex items-center justify-center">
-                            {reply.photo ? (
-                              <img
-                                src={reply.photo}
-                                alt={reply.username || "User"}
-                                className="w-full h-full object-cover"
-                              />
-                            ) : (
-                              <span className="text-xs font-semibold text-base-content/70">
-                                {getAuthorInitial(reply.username)}
-                              </span>
-                            )}
-                          </div>
-                        </Link>
-                      ) : (
-                        <div className="avatar">
-                          <div className="w-8 h-8 rounded-full bg-base-300 overflow-hidden flex items-center justify-center">
-                            {reply.photo ? (
-                              <img
-                                src={reply.photo}
-                                alt={reply.username || "User"}
-                                className="w-full h-full object-cover"
-                              />
-                            ) : (
-                              <span className="text-xs font-semibold text-base-content/70">
-                                {getAuthorInitial(reply.username)}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                      )}
-                      <div>
-                        {reply.user_id ? (
-                          <Link
-                            className="font-semibold link link-hover"
-                            to={localizePath(`/profile/${reply.user_id}`, locale)}
-                          >
-                            {reply.username || "Anonymous"}
-                          </Link>
-                        ) : (
-                          <p className="font-semibold">
-                            {reply.username || "Anonymous"}
-                          </p>
-                        )}
-                        <p className="text-xs text-base-content/60">
-                          <DateTimeDisplay
-                            timestamp={reply.created_at}
-                            preset="relativeDateTime"
-                          />
-                        </p>
-                      </div>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      {canPost && (
-                        <button
-                          type="button"
-                          className="btn btn-sm btn-ghost"
-                          onClick={() => onReplyToReply(reply)}
-                        >
-                          Reply
-                        </button>
-                      )}
-                      {currentUserId && reply.user_id === currentUserId && (
-                        <button
-                          type="button"
-                          className="btn btn-sm btn-error btn-outline gap-2"
-                          onClick={() => handleDeleteReply(reply.id)}
-                        >
-                          <FaTrash />
-                          Delete
-                        </button>
-                      )}
-                    </div>
-                  </div>
-                  <p className="text-base-content/80 wrap-break-word whitespace-pre-wrap">{reply.content}</p>
-                </div>
-              </article>
-
-              {canPost && replyTarget && replyTarget.replyId === reply.id && (
-                <form
-                  className="ml-10 mt-2 space-y-3 rounded-xl border border-base-300 bg-base-100 p-3"
-                  onSubmit={onCreateReply}
-                >
-                  <div className="alert alert-info py-2">
-                    <span>Replying to @{replyTarget.username}</span>
-                    <button
-                      type="button"
-                      className="btn btn-xs"
-                      onClick={onReplyTargetClear}
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                  <textarea
-                    className="textarea textarea-bordered w-full min-h-24"
-                    placeholder={`Reply to @${replyTarget.username}...`}
-                    value={replyContent}
-                    onChange={(event) => onReplyContentChange(event.target.value)}
-                  />
-                  <div className="flex justify-end">
-                    <button type="submit" className={primaryActionButtonClass}>
-                      <FaCheck />
-                      Post reply
-                    </button>
-                  </div>
-                </form>
-              )}
-            </Fragment>
-          ))
+          topLevelReplies.map((reply) => renderReply(reply, 0))
         )}
       </div>
 

From e1efdaa7b80eca85bf3ea546f6bfa7bc341eccb6 Mon Sep 17 00:00:00 2001
From: Stephen <stephen.t.j.leong@gmail.com>
Date: Mon, 20 Apr 2026 03:16:02 +0100
Subject: [PATCH 3/6] feat: add country code support to profiles, threads, and
 replies with normalization and flag display

---
 backend/src/db/handlers/profiles.ts           | 14 ++--
 .../routes/authenticated/forums/replies.ts    |  3 +-
 .../routes/authenticated/forums/threads.ts    |  6 +-
 backend/src/routes/authenticated/profiles.ts  | 16 ++++-
 frontend/src/context/AuthContext.tsx          |  1 +
 frontend/src/pages/authenticated/Profile.tsx  | 35 +++++++++-
 .../travel-advice/forums/ThreadDetail.tsx     | 19 +++++
 .../travel-advice/forums/ThreadsList.tsx      | 10 +++
 .../public/travel-advice/forums/types.ts      |  2 +
 frontend/src/utils/countries.ts               | 69 +++++++++++++++++++
 10 files changed, 165 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/utils/countries.ts

diff --git a/backend/src/db/handlers/profiles.ts b/backend/src/db/handlers/profiles.ts
index 0229028..0036449 100644
--- a/backend/src/db/handlers/profiles.ts
+++ b/backend/src/db/handlers/profiles.ts
@@ -9,6 +9,7 @@ type Profile = {
   photo?: string | null;
   settings?: Record<string, any> | null;
   bio?: string | null;
+  countryCode?: string | null;
 };
 
 function defaultUsername(email: string): string {
@@ -50,7 +51,7 @@ export const uploadAvatar = async (
 const getProfileById = async (userId: string) => {
   try {
     const result = await pool.query(
-      "SELECT id, photo, username, bio FROM profiles WHERE id = $1",
+      "SELECT id, photo, username, bio, country_code FROM profiles WHERE id = $1",
       [userId]
     );
     return result.rows[0];
@@ -63,7 +64,7 @@ const getProfileById = async (userId: string) => {
 const getMyProfile = async (userId: string) => {
     try {
         const result = await pool.query(
-          "SELECT id, photo, username, email, settings, bio FROM profiles WHERE id = $1",
+          "SELECT id, photo, username, email, settings, bio, country_code FROM profiles WHERE id = $1",
           [userId]
         );
         return result.rows[0];
@@ -79,9 +80,9 @@ const createProfile = async (userProfile: Profile) => {
   }
   const result = await pool.query(
     `
-        INSERT INTO profiles (id, email, username, photo, settings, bio, created_at, updated_at) 
-        VALUES ($1, $2, $3, $4, $5, $6, NOW(), NOW())
-        RETURNING id, email, username, photo, settings, bio
+        INSERT INTO profiles (id, email, username, photo, settings, bio, country_code, created_at, updated_at) 
+        VALUES ($1, $2, $3, $4, $5, $6, $7, NOW(), NOW())
+        RETURNING id, email, username, photo, settings, bio, country_code
         `,
     [
       userProfile.userId,
@@ -90,6 +91,7 @@ const createProfile = async (userProfile: Profile) => {
       userProfile.photo,
       userProfile.settings,
       userProfile.bio,
+      userProfile.countryCode ?? null,
     ]
   );
   return result.rows[0];
@@ -103,6 +105,7 @@ const updateProfile = async (userProfile: Profile) => {
                 photo = $3,
                 settings = $4,
                 bio = $5,
+                country_code = $6,
                 updated_at = NOW()
             WHERE id = $1 
             RETURNING *
@@ -113,6 +116,7 @@ const updateProfile = async (userProfile: Profile) => {
       userProfile.photo,
       userProfile.settings,
       userProfile.bio,
+      userProfile.countryCode ?? null,
     ]
   );
   return result.rows[0];
diff --git a/backend/src/routes/authenticated/forums/replies.ts b/backend/src/routes/authenticated/forums/replies.ts
index 310e009..2249a71 100644
--- a/backend/src/routes/authenticated/forums/replies.ts
+++ b/backend/src/routes/authenticated/forums/replies.ts
@@ -40,7 +40,8 @@ router.get("/", async (req, res) => {
 				r.parent_reply_id,
 				r.created_at,
 				p.username,
-				p.photo
+				p.photo,
+				p.country_code
 			FROM public.replies r
 			LEFT JOIN public.profiles p ON p.id = r.user_id
 			WHERE r.thread_id = $1
diff --git a/backend/src/routes/authenticated/forums/threads.ts b/backend/src/routes/authenticated/forums/threads.ts
index 9404b36..cac388c 100644
--- a/backend/src/routes/authenticated/forums/threads.ts
+++ b/backend/src/routes/authenticated/forums/threads.ts
@@ -72,7 +72,8 @@ router.get("/", async (req, res) => {
 				t.created_at,
 				t.updated_at,
 				p.username,
-				p.photo
+				p.photo,
+				p.country_code
 			FROM public.threads t
 			LEFT JOIN public.profiles p ON p.id = t.user_id
 			${whereSql}
@@ -113,7 +114,8 @@ router.get("/:id", async (req, res) => {
 				t.created_at,
 				t.updated_at,
 				p.username,
-				p.photo
+				p.photo,
+				p.country_code
 			FROM public.threads t
 			LEFT JOIN public.profiles p ON p.id = t.user_id
 			WHERE t.id = $1
diff --git a/backend/src/routes/authenticated/profiles.ts b/backend/src/routes/authenticated/profiles.ts
index 4710de2..4219880 100644
--- a/backend/src/routes/authenticated/profiles.ts
+++ b/backend/src/routes/authenticated/profiles.ts
@@ -15,6 +15,12 @@ import { authenticateToken } from "../../middlewares/authenticator";
 const router = Router();
 const upload = multer({ storage: multer.memoryStorage() });
 
+const normalizeCountryCode = (value: unknown): string | null => {
+  if (typeof value !== "string") return null;
+  const normalized = value.trim().toUpperCase();
+  return /^[A-Z]{2}$/.test(normalized) ? normalized : null;
+};
+
 // Personal profile routes
 
 router.get("/me", authenticateToken, async (_req, res) => {
@@ -41,13 +47,18 @@ router.patch(
     try {
       const userId = req.user.sub;
 
-      const existingProfile = await getProfileById(userId);
+      const existingProfile = await getMyProfile(userId);
 
       if (!existingProfile) {
         return res.status(404).json({ error: "Profile not found" });
       }
 
       const photoUrl = await uploadAvatar(userId, req.file);
+      const hasCountryCodeField = Object.prototype.hasOwnProperty.call(
+        req.body,
+        "country_code",
+      );
+      const normalizedCountryCode = normalizeCountryCode(req.body.country_code);
 
       const updatedProfile = {
         userId,
@@ -55,6 +66,9 @@ router.patch(
         photo: photoUrl ?? existingProfile.photo,
         settings: req.body.settings ?? existingProfile.settings ?? null, // never undefined
         bio: req.body.bio ?? existingProfile.bio ?? null,
+        countryCode: hasCountryCodeField
+          ? normalizedCountryCode
+          : existingProfile.country_code ?? null,
       };
 
       const result = await updateProfile(updatedProfile);
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 6c7e8e5..0124354 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -9,6 +9,7 @@ export type ProfileType = {
   username: string;
   photo: string | null;
   bio: string | null;
+  country_code: string | null;
 };
 
 type AuthContextType = {
diff --git a/frontend/src/pages/authenticated/Profile.tsx b/frontend/src/pages/authenticated/Profile.tsx
index aa26b3a..5a86ff4 100644
--- a/frontend/src/pages/authenticated/Profile.tsx
+++ b/frontend/src/pages/authenticated/Profile.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation, useParams } from "react-router-dom";
 
 import CONFIG from "../../config";
@@ -11,6 +11,7 @@ import type { Thread, ThreadsResponse } from "../public/travel-advice/forums/typ
 import Pagination from "../../components/globals/Pagination";
 import { DateTimeDisplay } from "../../utils/formatDateTime";
 import { getLocaleFromPathname, localizePath } from "../../utils/localeRouting";
+import { getCountryOptions, getFlagUrl, normalizeCountryCode } from "../../utils/countries";
 
 const Profile = () => {
   const { t } = useTranslation();
@@ -34,6 +35,7 @@ const Profile = () => {
   const [editing, setEditing] = useState(false);
   const [editUsername, setEditUsername] = useState("");
   const [editBio, setEditBio] = useState("");
+  const [editCountryCode, setEditCountryCode] = useState("");
   const [editPhoto, setEditPhoto] = useState<File | null>(null);
   const [editPhotoPreview, setEditPhotoPreview] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
@@ -44,6 +46,8 @@ const Profile = () => {
   const [threadsLoading, setThreadsLoading] = useState(false);
   const [threadsError, setThreadsError] = useState<string | null>(null);
 
+  const countryOptions = useMemo(() => getCountryOptions(locale), [locale]);
+
   const photoInputRef = useRef<HTMLInputElement>(null);
 
   const getProfile = useCallback(async () => {
@@ -132,6 +136,7 @@ const Profile = () => {
     if (!currentProfile) return;
     setEditUsername(currentProfile.username);
     setEditBio(currentProfile.bio ?? "");
+    setEditCountryCode(currentProfile.country_code ?? "");
     setEditPhoto(null);
     setEditPhotoPreview(null);
     setSaveError(null);
@@ -161,6 +166,7 @@ const Profile = () => {
       const formData = new FormData();
       formData.append("username", editUsername);
       formData.append("bio", editBio);
+      formData.append("country_code", normalizeCountryCode(editCountryCode) ?? "");
       if (editPhoto) formData.append("photo", editPhoto);
 
       const res = await fetch(`${CONFIG.API_BASE_URL}/profiles/me`, {
@@ -182,6 +188,7 @@ const Profile = () => {
 
   const avatarSrc = editPhotoPreview ?? currentProfile?.photo ?? null;
   const avatarFallback = currentProfile?.username?.[0]?.toUpperCase() ?? "?";
+  const profileFlagUrl = getFlagUrl(currentProfile?.country_code, 24);
 
   return (
     <Layout>
@@ -235,6 +242,14 @@ const Profile = () => {
               <>
                 <h2 className="flex items-center gap-2 text-xl font-semibold">
                   {currentProfile.username}
+                  {profileFlagUrl && (
+                    <img
+                      src={profileFlagUrl}
+                      alt={`${currentProfile.country_code} flag`}
+                      className="h-4 w-6 rounded-sm object-cover border border-base-300"
+                      loading="lazy"
+                    />
+                  )}
                   {isOwnProfile && (
                     <button
                       className="cursor-pointer text-gray-400 hover:text-gray-600"
@@ -291,6 +306,24 @@ const Profile = () => {
                   />
                 </label>
 
+                <label className="form-control w-full">
+                  <div className="label">
+                    <span className="label-text">Country</span>
+                  </div>
+                  <select
+                    className="select select-bordered w-full"
+                    value={editCountryCode}
+                    onChange={(event) => setEditCountryCode(event.target.value)}
+                  >
+                    <option value="">Prefer not to say</option>
+                    {countryOptions.map((country) => (
+                      <option key={country.code} value={country.code}>
+                        {country.name}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+
                 {saveError && <p className="text-red-500 text-sm">{saveError}</p>}
 
                 <div className="flex gap-2 justify-end">
diff --git a/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx b/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
index 46bb93b..b5204d5 100644
--- a/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
+++ b/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
@@ -6,6 +6,7 @@ import { FaCheck, FaEdit, FaTimes, FaTrash } from "react-icons/fa";
 import Pagination from "../../../../components/globals/Pagination";
 import { DateTimeDisplay } from "../../../../utils/formatDateTime";
 import { getLocaleFromPathname, localizePath } from "../../../../utils/localeRouting";
+import { getFlagUrl } from "../../../../utils/countries";
 
 import type { Reply, Thread } from "./types";
 
@@ -130,6 +131,7 @@ const ThreadDetail = ({
 
   const actionButtonClass = "btn btn-sm btn-ghost gap-2";
   const primaryActionButtonClass = "btn btn-sm btn-neutral gap-2";
+  const threadFlagUrl = getFlagUrl(thread.country_code, 20);
 
   const toggleViewMoreReplies = (parentReplyId: string) => {
     setExpandedReplyParents((previous) => ({
@@ -143,6 +145,7 @@ const ThreadDetail = ({
     const nestedReplies = repliesByParent.get(reply.id) ?? [];
     const isExpanded = Boolean(expandedReplyParents[reply.id]);
     const hasMoreReplies = nestedReplies.length > 3;
+    const replyFlagUrl = getFlagUrl(reply.country_code, 20);
     const visibleReplies = hasMoreReplies && !isExpanded
       ? nestedReplies.slice(0, 3)
       : nestedReplies;
@@ -205,6 +208,14 @@ const ThreadDetail = ({
                       {reply.username || "Anonymous"}
                     </p>
                   )}
+                  {replyFlagUrl && (
+                    <img
+                      src={replyFlagUrl}
+                      alt={`${reply.country_code} flag`}
+                      className="mt-1 h-3.5 w-5 rounded-sm object-cover border border-base-300"
+                      loading="lazy"
+                    />
+                  )}
                   <p className="text-xs text-base-content/60">
                     <DateTimeDisplay
                       timestamp={reply.created_at}
@@ -347,6 +358,14 @@ const ThreadDetail = ({
                   </Link>
                 )}
                 {!thread.user_id && <span>{thread.username || "Anonymous"}</span>}
+                {threadFlagUrl && (
+                  <img
+                    src={threadFlagUrl}
+                    alt={`${thread.country_code} flag`}
+                    className="h-3.5 w-5 rounded-sm object-cover border border-base-300"
+                    loading="lazy"
+                  />
+                )}
                 <span>•</span>
                 <span>
                   <DateTimeDisplay
diff --git a/frontend/src/pages/public/travel-advice/forums/ThreadsList.tsx b/frontend/src/pages/public/travel-advice/forums/ThreadsList.tsx
index 635ab4d..41eefb8 100644
--- a/frontend/src/pages/public/travel-advice/forums/ThreadsList.tsx
+++ b/frontend/src/pages/public/travel-advice/forums/ThreadsList.tsx
@@ -7,6 +7,7 @@ import Pagination from "../../../../components/globals/Pagination";
 import SearchSortFilterCard from "../../../../components/globals/SearchSortFilterCard";
 import { DateTimeDisplay } from "../../../../utils/formatDateTime";
 import { getLocaleFromPathname, localizePath } from "../../../../utils/localeRouting";
+import { getFlagUrl } from "../../../../utils/countries";
 
 import type { Thread } from "./types";
 
@@ -242,6 +243,7 @@ const ThreadsList = ({
               currentUserId && thread.user_id === currentUserId,
             );
             const isEditing = editingThreadId === thread.id;
+            const threadFlagUrl = getFlagUrl(thread.country_code, 20);
 
             return (
               <article
@@ -371,6 +373,14 @@ const ThreadsList = ({
                     ) : (
                       <span className="wrap-break-word">{thread.username || "Anonymous"}</span>
                     )}
+                    {threadFlagUrl && (
+                      <img
+                        src={threadFlagUrl}
+                        alt={`${thread.country_code} flag`}
+                        className="h-3.5 w-5 rounded-sm object-cover border border-base-300"
+                        loading="lazy"
+                      />
+                    )}
                     <span>•</span>
                     <span>
                       <DateTimeDisplay
diff --git a/frontend/src/pages/public/travel-advice/forums/types.ts b/frontend/src/pages/public/travel-advice/forums/types.ts
index 1019f43..eb0ad65 100644
--- a/frontend/src/pages/public/travel-advice/forums/types.ts
+++ b/frontend/src/pages/public/travel-advice/forums/types.ts
@@ -7,6 +7,7 @@ export type Thread = {
   updated_at: string;
   username: string | null;
   photo: string | null;
+  country_code: string | null;
 };
 
 export type ThreadsResponse = {
@@ -26,6 +27,7 @@ export type Reply = {
   created_at: string;
   username: string | null;
   photo: string | null;
+  country_code: string | null;
 };
 
 export type RepliesResponse = {
diff --git a/frontend/src/utils/countries.ts b/frontend/src/utils/countries.ts
new file mode 100644
index 0000000..0477830
--- /dev/null
+++ b/frontend/src/utils/countries.ts
@@ -0,0 +1,69 @@
+export type CountryOption = {
+  code: string;
+  name: string;
+};
+
+const FALLBACK_COUNTRY_CODES = [
+  "SG",
+  "US",
+  "GB",
+  "HK",
+  "MY",
+  "ID",
+  "TH",
+  "PH",
+  "VN",
+  "IN",
+  "AU",
+  "JP",
+  "KR",
+  "CN",
+  "FR",
+  "DE",
+  "ES",
+  "IT",
+  "NL",
+  "BR",
+  "CA",
+];
+
+export const normalizeCountryCode = (value?: string | null): string | null => {
+  if (!value) return null;
+  const normalized = value.trim().toUpperCase();
+  return /^[A-Z]{2}$/.test(normalized) ? normalized : null;
+};
+
+export const getFlagUrl = (countryCode?: string | null, size = 24): string | null => {
+  const normalized = normalizeCountryCode(countryCode);
+  if (!normalized) return null;
+  return `https://flagsapi.com/${normalized}/flat/${size}.png`;
+};
+
+const getDisplayName = (code: string, displayNames?: Intl.DisplayNames): string => {
+  return displayNames?.of(code) ?? code;
+};
+
+export const getCountryOptions = (locale = "en"): CountryOption[] => {
+  let displayNames: Intl.DisplayNames | undefined;
+  if (typeof Intl !== "undefined" && typeof Intl.DisplayNames === "function") {
+    try {
+      displayNames = new Intl.DisplayNames([locale], { type: "region" });
+    } catch {
+      displayNames = undefined;
+    }
+  }
+
+  // Intl.supportedValuesOf does not support "region" keys; use a curated fallback list.
+  const regionCodes = FALLBACK_COUNTRY_CODES;
+
+  const uniqueCodes = Array.from(
+    new Set(regionCodes.map((code) => normalizeCountryCode(code)).filter((code): code is string => Boolean(code))),
+  );
+
+  return uniqueCodes
+    .map((code) => ({
+      code,
+      name: getDisplayName(code, displayNames),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+};

From 542fb4e723f5afb1585f3a29913dc88b62120b5f Mon Sep 17 00:00:00 2001
From: Stephen <stephen.t.j.leong@gmail.com>
Date: Mon, 20 Apr 2026 03:23:45 +0100
Subject: [PATCH 4/6] feat: normalize country code handling in forums and
 threads for improved consistency

---
 .../src/pages/public/travel-advice/Forums.tsx | 10 ++++++-
 .../travel-advice/forums/ThreadDetail.tsx     | 26 ++++++++++++++++---
 .../travel-advice/forums/ThreadsList.tsx      | 21 +++++++++++++--
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/public/travel-advice/Forums.tsx b/frontend/src/pages/public/travel-advice/Forums.tsx
index 8142db4..fdb98d4 100644
--- a/frontend/src/pages/public/travel-advice/Forums.tsx
+++ b/frontend/src/pages/public/travel-advice/Forums.tsx
@@ -11,6 +11,10 @@ import ThreadsList from "./forums/ThreadsList";
 import type { Reply, RepliesResponse, Thread, ThreadsResponse } from "./forums/types";
 import { getLocaleFromPathname, localizePath } from "../../../utils/localeRouting";
 
+type ReplyApiShape = Reply & {
+  countryCode?: string | null;
+};
+
 const Forums = () => {
   const { profile, token } = useAuth();
   const navigate = useNavigate();
@@ -137,7 +141,11 @@ const Forums = () => {
       }
 
       const result: RepliesResponse = await response.json();
-      setReplies(result.data);
+      const normalizedReplies = (result.data as ReplyApiShape[]).map((reply) => ({
+        ...reply,
+        country_code: reply.country_code ?? reply.countryCode ?? null,
+      }));
+      setReplies(normalizedReplies);
       setRepliesTotalPages(result.totalPages);
     } catch (err) {
       console.error("Error fetching replies:", err);
diff --git a/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx b/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
index b5204d5..dfbd5c2 100644
--- a/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
+++ b/frontend/src/pages/public/travel-advice/forums/ThreadDetail.tsx
@@ -10,6 +10,15 @@ import { getFlagUrl } from "../../../../utils/countries";
 
 import type { Reply, Thread } from "./types";
 
+type CountryCodeCarrier = {
+  country_code?: string | null;
+  countryCode?: string | null;
+  profile?: {
+    country_code?: string | null;
+    countryCode?: string | null;
+  } | null;
+};
+
 type ThreadDetailProps = {
   thread: Thread;
   replies: Reply[];
@@ -131,7 +140,15 @@ const ThreadDetail = ({
 
   const actionButtonClass = "btn btn-sm btn-ghost gap-2";
   const primaryActionButtonClass = "btn btn-sm btn-neutral gap-2";
-  const threadFlagUrl = getFlagUrl(thread.country_code, 20);
+  const getCountryCode = (value: CountryCodeCarrier) => {
+    return value.country_code
+      ?? value.countryCode
+      ?? value.profile?.country_code
+      ?? value.profile?.countryCode
+      ?? null;
+  };
+  const threadCountryCode = getCountryCode(thread as Thread & CountryCodeCarrier);
+  const threadFlagUrl = getFlagUrl(threadCountryCode, 64);
 
   const toggleViewMoreReplies = (parentReplyId: string) => {
     setExpandedReplyParents((previous) => ({
@@ -145,7 +162,8 @@ const ThreadDetail = ({
     const nestedReplies = repliesByParent.get(reply.id) ?? [];
     const isExpanded = Boolean(expandedReplyParents[reply.id]);
     const hasMoreReplies = nestedReplies.length > 3;
-    const replyFlagUrl = getFlagUrl(reply.country_code, 20);
+    const replyCountryCode = getCountryCode(reply as Reply & CountryCodeCarrier);
+    const replyFlagUrl = getFlagUrl(replyCountryCode, 64);
     const visibleReplies = hasMoreReplies && !isExpanded
       ? nestedReplies.slice(0, 3)
       : nestedReplies;
@@ -211,7 +229,7 @@ const ThreadDetail = ({
                   {replyFlagUrl && (
                     <img
                       src={replyFlagUrl}
-                      alt={`${reply.country_code} flag`}
+                      alt={`${replyCountryCode} flag`}
                       className="mt-1 h-3.5 w-5 rounded-sm object-cover border border-base-300"
                       loading="lazy"
                     />
@@ -361,7 +379,7 @@ const ThreadDetail = ({
                 {threadFlagUrl && (
                   <img
                     src={threadFlagUrl}
-                    alt={`${thread.country_code} flag`}
+                    alt={`${threadCountryCode} flag`}
                     className="h-3.5 w-5 rounded-sm object-cover border border-base-300"
                     loading="lazy"
                   />
diff --git a/frontend/src/pages/public/travel-advice/forums/ThreadsList.tsx b/frontend/src/pages/public/travel-advice/forums/ThreadsList.tsx
index 41eefb8..2fb9711 100644
--- a/frontend/src/pages/public/travel-advice/forums/ThreadsList.tsx
+++ b/frontend/src/pages/public/travel-advice/forums/ThreadsList.tsx
@@ -11,6 +11,15 @@ import { getFlagUrl } from "../../../../utils/countries";
 
 import type { Thread } from "./types";
 
+type CountryCodeCarrier = {
+  country_code?: string | null;
+  countryCode?: string | null;
+  profile?: {
+    country_code?: string | null;
+    countryCode?: string | null;
+  } | null;
+};
+
 type ThreadsListProps = {
   threads: Thread[];
   loading: boolean;
@@ -126,6 +135,13 @@ const ThreadsList = ({
     { value: "desc", label: descendingLabel },
     { value: "asc", label: ascendingLabel },
   ];
+  const getCountryCode = (value: CountryCodeCarrier) => {
+    return value.country_code
+      ?? value.countryCode
+      ?? value.profile?.country_code
+      ?? value.profile?.countryCode
+      ?? null;
+  };
 
   return (
     <div className="w-full space-y-6">
@@ -243,7 +259,8 @@ const ThreadsList = ({
               currentUserId && thread.user_id === currentUserId,
             );
             const isEditing = editingThreadId === thread.id;
-            const threadFlagUrl = getFlagUrl(thread.country_code, 20);
+            const threadCountryCode = getCountryCode(thread as Thread & CountryCodeCarrier);
+            const threadFlagUrl = getFlagUrl(threadCountryCode, 64);
 
             return (
               <article
@@ -376,7 +393,7 @@ const ThreadsList = ({
                     {threadFlagUrl && (
                       <img
                         src={threadFlagUrl}
-                        alt={`${thread.country_code} flag`}
+                        alt={`${threadCountryCode} flag`}
                         className="h-3.5 w-5 rounded-sm object-cover border border-base-300"
                         loading="lazy"
                       />

From d4f8398cd7efb03f0dc1b713e1f9723d3565d14a Mon Sep 17 00:00:00 2001
From: Stephen <stephen.t.j.leong@gmail.com>
Date: Mon, 20 Apr 2026 03:33:36 +0100
Subject: [PATCH 5/6] feat: refactor country code handling in profiles,
 threads, and replies for improved consistency and settings management

---
 backend/src/db/handlers/profiles.ts           | 38 ++++++++----
 .../routes/authenticated/forums/replies.ts    |  2 +-
 .../routes/authenticated/forums/threads.ts    |  4 +-
 backend/src/routes/authenticated/profiles.ts  | 43 ++++++++++++--
 frontend/src/App.tsx                          | 58 ++++++++++++++++++-
 frontend/src/components/i18n/LangToggler.tsx  | 28 +++++++++
 frontend/src/context/AuthContext.tsx          |  5 ++
 frontend/src/pages/authenticated/Profile.tsx  | 11 +++-
 8 files changed, 166 insertions(+), 23 deletions(-)

diff --git a/backend/src/db/handlers/profiles.ts b/backend/src/db/handlers/profiles.ts
index 0036449..8c1c72e 100644
--- a/backend/src/db/handlers/profiles.ts
+++ b/backend/src/db/handlers/profiles.ts
@@ -7,9 +7,8 @@ type Profile = {
   email?: string | null;
   username?: string;
   photo?: string | null;
-  settings?: Record<string, any> | null;
+  settings?: Record<string, unknown> | null;
   bio?: string | null;
-  countryCode?: string | null;
 };
 
 function defaultUsername(email: string): string {
@@ -51,7 +50,16 @@ export const uploadAvatar = async (
 const getProfileById = async (userId: string) => {
   try {
     const result = await pool.query(
-      "SELECT id, photo, username, bio, country_code FROM profiles WHERE id = $1",
+      `
+      SELECT
+        id,
+        photo,
+        username,
+        bio,
+        settings->>'country_code' AS country_code
+      FROM profiles
+      WHERE id = $1
+      `,
       [userId]
     );
     return result.rows[0];
@@ -64,7 +72,18 @@ const getProfileById = async (userId: string) => {
 const getMyProfile = async (userId: string) => {
     try {
         const result = await pool.query(
-          "SELECT id, photo, username, email, settings, bio, country_code FROM profiles WHERE id = $1",
+          `
+          SELECT
+            id,
+            photo,
+            username,
+            email,
+            settings,
+            bio,
+            settings->>'country_code' AS country_code
+          FROM profiles
+          WHERE id = $1
+          `,
           [userId]
         );
         return result.rows[0];
@@ -80,9 +99,9 @@ const createProfile = async (userProfile: Profile) => {
   }
   const result = await pool.query(
     `
-        INSERT INTO profiles (id, email, username, photo, settings, bio, country_code, created_at, updated_at) 
-        VALUES ($1, $2, $3, $4, $5, $6, $7, NOW(), NOW())
-        RETURNING id, email, username, photo, settings, bio, country_code
+        INSERT INTO profiles (id, email, username, photo, settings, bio, created_at, updated_at)
+        VALUES ($1, $2, $3, $4, $5, $6, NOW(), NOW())
+        RETURNING id, email, username, photo, settings, bio, settings->>'country_code' AS country_code
         `,
     [
       userProfile.userId,
@@ -91,7 +110,6 @@ const createProfile = async (userProfile: Profile) => {
       userProfile.photo,
       userProfile.settings,
       userProfile.bio,
-      userProfile.countryCode ?? null,
     ]
   );
   return result.rows[0];
@@ -105,10 +123,9 @@ const updateProfile = async (userProfile: Profile) => {
                 photo = $3,
                 settings = $4,
                 bio = $5,
-                country_code = $6,
                 updated_at = NOW()
             WHERE id = $1 
-            RETURNING *
+            RETURNING id, email, username, photo, settings, bio, settings->>'country_code' AS country_code
         `,
     [
       userProfile.userId,
@@ -116,7 +133,6 @@ const updateProfile = async (userProfile: Profile) => {
       userProfile.photo,
       userProfile.settings,
       userProfile.bio,
-      userProfile.countryCode ?? null,
     ]
   );
   return result.rows[0];
diff --git a/backend/src/routes/authenticated/forums/replies.ts b/backend/src/routes/authenticated/forums/replies.ts
index 2249a71..40a6e09 100644
--- a/backend/src/routes/authenticated/forums/replies.ts
+++ b/backend/src/routes/authenticated/forums/replies.ts
@@ -41,7 +41,7 @@ router.get("/", async (req, res) => {
 				r.created_at,
 				p.username,
 				p.photo,
-				p.country_code
+				p.settings->>'country_code' AS country_code
 			FROM public.replies r
 			LEFT JOIN public.profiles p ON p.id = r.user_id
 			WHERE r.thread_id = $1
diff --git a/backend/src/routes/authenticated/forums/threads.ts b/backend/src/routes/authenticated/forums/threads.ts
index cac388c..c2f4d6a 100644
--- a/backend/src/routes/authenticated/forums/threads.ts
+++ b/backend/src/routes/authenticated/forums/threads.ts
@@ -73,7 +73,7 @@ router.get("/", async (req, res) => {
 				t.updated_at,
 				p.username,
 				p.photo,
-				p.country_code
+				p.settings->>'country_code' AS country_code
 			FROM public.threads t
 			LEFT JOIN public.profiles p ON p.id = t.user_id
 			${whereSql}
@@ -115,7 +115,7 @@ router.get("/:id", async (req, res) => {
 				t.updated_at,
 				p.username,
 				p.photo,
-				p.country_code
+				p.settings->>'country_code' AS country_code
 			FROM public.threads t
 			LEFT JOIN public.profiles p ON p.id = t.user_id
 			WHERE t.id = $1
diff --git a/backend/src/routes/authenticated/profiles.ts b/backend/src/routes/authenticated/profiles.ts
index 4219880..cdda23b 100644
--- a/backend/src/routes/authenticated/profiles.ts
+++ b/backend/src/routes/authenticated/profiles.ts
@@ -21,6 +21,27 @@ const normalizeCountryCode = (value: unknown): string | null => {
   return /^[A-Z]{2}$/.test(normalized) ? normalized : null;
 };
 
+const parseSettingsInput = (value: unknown): Record<string, unknown> | null => {
+  if (!value) return null;
+
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value) as unknown;
+      return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+        ? (parsed as Record<string, unknown>)
+        : null;
+    } catch {
+      return null;
+    }
+  }
+
+  if (typeof value === "object" && !Array.isArray(value)) {
+    return value as Record<string, unknown>;
+  }
+
+  return null;
+};
+
 // Personal profile routes
 
 router.get("/me", authenticateToken, async (_req, res) => {
@@ -59,16 +80,30 @@ router.patch(
         "country_code",
       );
       const normalizedCountryCode = normalizeCountryCode(req.body.country_code);
+      const incomingSettings = parseSettingsInput(req.body.settings);
+      const existingSettings =
+        existingProfile.settings && typeof existingProfile.settings === "object"
+          ? (existingProfile.settings as Record<string, unknown>)
+          : {};
+      const mergedSettings: Record<string, unknown> = {
+        ...existingSettings,
+        ...(incomingSettings ?? {}),
+      };
+
+      if (hasCountryCodeField) {
+        if (normalizedCountryCode) {
+          mergedSettings.country_code = normalizedCountryCode;
+        } else {
+          delete mergedSettings.country_code;
+        }
+      }
 
       const updatedProfile = {
         userId,
         username: req.body.username ?? existingProfile.username,
         photo: photoUrl ?? existingProfile.photo,
-        settings: req.body.settings ?? existingProfile.settings ?? null, // never undefined
+        settings: Object.keys(mergedSettings).length > 0 ? mergedSettings : null,
         bio: req.body.bio ?? existingProfile.bio ?? null,
-        countryCode: hasCountryCodeField
-          ? normalizedCountryCode
-          : existingProfile.country_code ?? null,
       };
 
       const result = await updateProfile(updatedProfile);
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4463e21..5487eb6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -20,10 +20,64 @@ import {
   DEFAULT_LOCALE,
   normalizeLocale,
   resolvePathLocaleSegment,
+  type AppLocale,
 } from "./i18n/locales";
 import { localizePath, parseLocaleFromPathname } from "./utils/localeRouting";
 import TopAttractions from "./pages/public/explore/TopAttractions";
 
+const PROFILE_STORAGE_KEY = "profile";
+const HANT_DEFAULT_COUNTRY_CODES = new Set(["HK", "CN", "TW"]);
+
+const resolveLocaleFromCountryCode = (
+  countryCode: string | null | undefined,
+): AppLocale => {
+  const normalized = countryCode?.trim().toUpperCase() ?? "";
+  return HANT_DEFAULT_COUNTRY_CODES.has(normalized)
+    ? "zh-Hant-HK"
+    : "en-GB";
+};
+
+const getUserDefaultLocale = (): AppLocale => {
+  if (typeof window === "undefined") return DEFAULT_LOCALE;
+
+  try {
+    const rawProfile = window.localStorage.getItem(PROFILE_STORAGE_KEY);
+    if (!rawProfile) return DEFAULT_LOCALE;
+
+    const parsedProfile = JSON.parse(rawProfile) as {
+      settings?: {
+        last_used_locale?: unknown;
+        country_code?: unknown;
+      };
+      country_code?: unknown;
+      countryCode?: unknown;
+    };
+
+    const localeFromSettings = normalizeLocale(
+      typeof parsedProfile.settings?.last_used_locale === "string"
+        ? parsedProfile.settings.last_used_locale
+        : null,
+    );
+
+    if (localeFromSettings) {
+      return localeFromSettings;
+    }
+
+    const countryCode =
+      typeof parsedProfile.settings?.country_code === "string"
+        ? parsedProfile.settings.country_code
+        : typeof parsedProfile.country_code === "string"
+        ? parsedProfile.country_code
+        : typeof parsedProfile.countryCode === "string"
+          ? parsedProfile.countryCode
+          : null;
+
+    return resolveLocaleFromCountryCode(countryCode);
+  } catch {
+    return DEFAULT_LOCALE;
+  }
+};
+
 const KNOWN_UNLOCALIZED_PATH_PATTERNS = [
   /^\/$/,
   /^\/events(?:\/[^/]+)?\/?$/,
@@ -68,7 +122,7 @@ const resolveLangQuery = (search: string) => {
 const MissingLocaleRedirect = () => {
   const location = useLocation();
   const langQuery = resolveLangQuery(location.search);
-  const nextLocale = langQuery?.locale ?? DEFAULT_LOCALE;
+  const nextLocale = langQuery?.locale ?? getUserDefaultLocale();
   const nextSearch = langQuery?.search ?? location.search;
 
   return (
@@ -125,7 +179,7 @@ const LocaleGate = () => {
 
     return (
       <Navigate
-        to={`${localizePath("/", langQuery?.locale ?? DEFAULT_LOCALE)}${langQuery?.search ?? ""}${location.hash}`}
+        to={`${localizePath("/", langQuery?.locale ?? getUserDefaultLocale())}${langQuery?.search ?? ""}${location.hash}`}
         replace
       />
     );
diff --git a/frontend/src/components/i18n/LangToggler.tsx b/frontend/src/components/i18n/LangToggler.tsx
index 71b2f22..16fa584 100644
--- a/frontend/src/components/i18n/LangToggler.tsx
+++ b/frontend/src/components/i18n/LangToggler.tsx
@@ -5,9 +5,12 @@ import { useState, useRef, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import type { AppLocale } from "../../i18n/locales";
 import { replaceLocaleInPathname } from "../../utils/localeRouting";
+import { useAuth } from "../../context/AuthContext";
+import CONFIG from "../../config";
 
 const LangToggler = () => {
     const { i18n, t } = useTranslation();
+    const { token, profile, refreshProfile } = useAuth();
     const location = useLocation();
     const navigate = useNavigate();
     const [open, setOpen] = useState(false);
@@ -32,6 +35,31 @@ const LangToggler = () => {
     const changeLang = async (lng: AppLocale) => {
         const nextPathname = replaceLocaleInPathname(location.pathname, lng);
         await i18n.changeLanguage(lng);
+
+        if (token && profile) {
+            try {
+                const mergedSettings = {
+                    ...(profile.settings ?? {}),
+                    last_used_locale: lng,
+                };
+
+                await fetch(`${CONFIG.API_BASE_URL}/profiles/me`, {
+                    method: "PATCH",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                    body: JSON.stringify({
+                        settings: mergedSettings,
+                    }),
+                });
+
+                await refreshProfile();
+            } catch {
+                // Ignore locale preference persistence failures and continue navigation.
+            }
+        }
+
         navigate(`${nextPathname}${location.search}${location.hash}`);
         setOpen(false);
     };
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 0124354..fd4f498 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -10,6 +10,11 @@ export type ProfileType = {
   photo: string | null;
   bio: string | null;
   country_code: string | null;
+  settings: {
+    country_code?: string;
+    last_used_locale?: string;
+    [key: string]: unknown;
+  } | null;
 };
 
 type AuthContextType = {
diff --git a/frontend/src/pages/authenticated/Profile.tsx b/frontend/src/pages/authenticated/Profile.tsx
index 5a86ff4..4383c06 100644
--- a/frontend/src/pages/authenticated/Profile.tsx
+++ b/frontend/src/pages/authenticated/Profile.tsx
@@ -13,6 +13,10 @@ import { DateTimeDisplay } from "../../utils/formatDateTime";
 import { getLocaleFromPathname, localizePath } from "../../utils/localeRouting";
 import { getCountryOptions, getFlagUrl, normalizeCountryCode } from "../../utils/countries";
 
+const getProfileCountryCode = (profile: ProfileType | null) => {
+  return profile?.settings?.country_code ?? profile?.country_code ?? null;
+};
+
 const Profile = () => {
   const { t } = useTranslation();
   const location = useLocation();
@@ -136,7 +140,7 @@ const Profile = () => {
     if (!currentProfile) return;
     setEditUsername(currentProfile.username);
     setEditBio(currentProfile.bio ?? "");
-    setEditCountryCode(currentProfile.country_code ?? "");
+    setEditCountryCode(getProfileCountryCode(currentProfile) ?? "");
     setEditPhoto(null);
     setEditPhotoPreview(null);
     setSaveError(null);
@@ -188,7 +192,8 @@ const Profile = () => {
 
   const avatarSrc = editPhotoPreview ?? currentProfile?.photo ?? null;
   const avatarFallback = currentProfile?.username?.[0]?.toUpperCase() ?? "?";
-  const profileFlagUrl = getFlagUrl(currentProfile?.country_code, 24);
+  const profileCountryCode = getProfileCountryCode(currentProfile);
+  const profileFlagUrl = getFlagUrl(profileCountryCode, 24);
 
   return (
     <Layout>
@@ -245,7 +250,7 @@ const Profile = () => {
                   {profileFlagUrl && (
                     <img
                       src={profileFlagUrl}
-                      alt={`${currentProfile.country_code} flag`}
+                      alt={`${profileCountryCode} flag`}
                       className="h-4 w-6 rounded-sm object-cover border border-base-300"
                       loading="lazy"
                     />

From b52223017e6ee14ae852f1f0a47e908ad0bb9980 Mon Sep 17 00:00:00 2001
From: Stephen <stephen.t.j.leong@gmail.com>
Date: Mon, 20 Apr 2026 03:33:46 +0100
Subject: [PATCH 6/6] fix: correct country code retrieval logic in
 getUserDefaultLocale function

---
 frontend/src/App.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5487eb6..86463d4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -67,10 +67,10 @@ const getUserDefaultLocale = (): AppLocale => {
       typeof parsedProfile.settings?.country_code === "string"
         ? parsedProfile.settings.country_code
         : typeof parsedProfile.country_code === "string"
-        ? parsedProfile.country_code
-        : typeof parsedProfile.countryCode === "string"
-          ? parsedProfile.countryCode
-          : null;
+          ? parsedProfile.country_code
+          : typeof parsedProfile.countryCode === "string"
+            ? parsedProfile.countryCode
+            : null;
 
     return resolveLocaleFromCountryCode(countryCode);
   } catch {