chore: created by added to sidebar and peek view

web/core/components/issues/issue-detail/sidebar.tsx

@@ -14,6 +14,7 @@ import {
   Tag,
   Trash2,
   Triangle,
+  UserCircle2,
   Users,
   XCircle,
 } from "lucide-react";
@@ -38,6 +39,7 @@ import {
 } from "@/components/dropdowns";
 // ui
 // helpers
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import {
   ArchiveIssueModal,
   DeleteIssueModal,
@@ -56,7 +58,7 @@ import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // types
-import { useProjectEstimates, useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store";
+import { useProjectEstimates, useIssueDetail, useProject, useProjectState, useUser, useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
 import type { TIssueOperations } from "./root";
@@ -88,11 +90,14 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+  const { getUserDetails } = useMember();
   const { getStateById } = useProjectState();
   const { isMobile } = usePlatformOS();
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
 
+  const createdByDetails = getUserDetails(issue.created_by);
+
   const handleCopyText = () => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
@@ -258,6 +263,21 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               />
             </div>
 
+            {createdByDetails && (
+              <div className="flex h-8 items-center gap-2">
+                <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
+                  <UserCircle2 className="h-4 w-4 flex-shrink-0" />
+                  <span>Created by</span>
+                </div>
+                <Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
+                  <div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
+                    <ButtonAvatars showTooltip={false} userIds={createdByDetails.id} />
+                    <span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
+                  </div>
+                </Tooltip>
+              </div>
+            )}
+
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <CalendarClock className="h-4 w-4 flex-shrink-0" />

web/core/components/issues/peek-overview/properties.tsx

@@ -13,10 +13,11 @@ import {
   CalendarClock,
   CalendarCheck2,
   Users,
+  UserCircle2,
 } from "lucide-react";
 // hooks
 // ui icons
-import { DiceIcon, DoubleCircleIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
+import { DiceIcon, DoubleCircleIcon, ContrastIcon, RelatedIcon, Tooltip } from "@plane/ui";
 // components
 import {
   DateDropdown,
@@ -25,6 +26,7 @@ import {
   MemberDropdown,
   StateDropdown,
 } from "@/components/dropdowns";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import {
   IssueLinkRoot,
   IssueCycleSelect,
@@ -38,7 +40,8 @@ import {
 import { cn } from "@/helpers/common.helper";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
-import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+import { useIssueDetail, useMember, useProject, useProjectState } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
 interface IPeekOverviewProperties {
   workspaceSlug: string;
@@ -56,9 +59,12 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
     issue: { getIssueById },
   } = useIssueDetail();
   const { getStateById } = useProjectState();
+  const { getUserDetails } = useMember();
+  const { isMobile } = usePlatformOS();
   // derived values
   const issue = getIssueById(issueId);
   if (!issue) return <></>;
+  const createdByDetails = getUserDetails(issue?.created_by);
   const projectDetails = getProjectById(issue.project_id);
   const isEstimateEnabled = projectDetails?.estimate;
   const stateDetails = getStateById(issue.state_id);
@@ -134,6 +140,22 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           />
         </div>
 
+        {/* created by */}
+        {createdByDetails && (
+          <div className="flex w-full items-center gap-3 h-8">
+            <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+              <UserCircle2 className="h-4 w-4 flex-shrink-0" />
+              <span>Created by</span>
+            </div>
+            <Tooltip tooltipContent={createdByDetails?.display_name} isMobile={isMobile}>
+              <div className="h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-default">
+                <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />
+                <span className="flex-grow truncate text-xs leading-5">{createdByDetails?.display_name}</span>
+              </div>
+            </Tooltip>
+          </div>
+        )}
+
         {/* start date */}
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">