feat: add official replies indication

Author: raphico

README.md

@@ -5,12 +5,12 @@ This is a solution to the [Product feedback app challenge on Frontend Mentor](ht
 ## Features
 
 - 👤 User Authentication & profile update
-- 🛡️ Admin Controls (Official Replies, Update Status, Censor Feedback)
+- 🛡️ Admin Controls (Official Replies, Update Status)
 - ➕ Create, Edit, Delete product feedback Requests
 - 👍 Upvote & Sort feedbacks by Votes/Comments
 - 🏷️ Filter suggestions by Category
 - 💬 Comment & Reply (Threaded Conversations)
-- 📊 Roadmap Tracking (Planned, In Progress, Live)
+- 📊 Roadmap Tracking with Kanban view for admins (Planned, In Progress, Live)
 
 ## stack
 

packages/web/src/assets/icon-official.svg

@@ -6,20 +6,38 @@
 }
 
 .comment__user {
-  display: grid;
+  display: flex;
   grid-row: 1 / 2;
   grid-column: 2 / 3;
+  /* align-items: center; */
+  gap: 0.5em;
+}
+
+.comment__user-info {
+  display: grid;
 }
 
 .comment__fullName {
   font-size: var(--fs-100);
   font-weight: var(--fw-bold);
   letter-spacing: -0.19px;
   color: var(--clr-deep-slate-blue);
+  white-space: nowrap;
 }
 
 .comment__username {
   font-size: var(--fs-100);
+  white-space: nowrap;
+}
+
+.comment__official-container {
+  width: 20px;
+  height: 20px;
+}
+
+.comment__official {
+  width: 100%;
+  height: 100%;
 }
 
 .comment__reply-button {

packages/web/src/features/comments/components/comment-list-item.module.css

@@ -6,6 +6,7 @@ import ReplyForm from "./reply-form";
 import { ThreadedComment } from "../types";
 import { useIsLoggedIn } from "@/features/user/hooks";
 import { useNavigate } from "@tanstack/react-router";
+import IconOfficial from "@/assets/icon-official.svg?react";
 
 interface CommentListItemProps extends React.ComponentProps<"article"> {
   comment: ThreadedComment;
@@ -51,12 +52,19 @@ function CommentListItem({ comment, parentComment }: CommentListItemProps) {
         <AvatarFallback>{initials}</AvatarFallback>
       </Avatar>
       <div className={styles["comment__user"]}>
-        <strong className={styles["comment__fullName"]}>
-          {comment.createdBy.fullName}
-        </strong>
-        <span className={styles["comment__username"]}>
-          @{comment.createdBy.username}
-        </span>
+        <div className={styles["comment__user-info"]}>
+          <strong className={styles["comment__fullName"]}>
+            {comment.createdBy.fullName}
+          </strong>
+          <span className={styles["comment__username"]}>
+            @{comment.createdBy.username}
+          </span>
+        </div>
+        {comment.createdBy.role == "admin" && (
+          <div className={styles["comment__official-container"]}>
+            <IconOfficial className={styles["comment__official"]} />
+          </div>
+        )}
       </div>
       <button
         onClick={handleReplyClick}

packages/web/src/features/comments/components/comment-list-item.tsx

@@ -5,7 +5,7 @@ export type Comment = {
   content: string;
   feedbackId: string;
   parentId: string | null;
-  createdBy: Pick<User, "id" | "username" | "fullName" | "avatar">;
+  createdBy: Pick<User, "id" | "username" | "fullName" | "avatar" | "role">;
 };
 
 export type ThreadedComment = Comment & {