chore: components restructure and improvements (#5383)

* chore: update issue identifier component.

* fix: browser tab closed on closing emoji picker issue fixed.

* chore: revert back changes in logo props.

* chore: update sortable.

* chore: minor componenets restructuring.

* minor ui update.

* fix: issue identifier display in command palette search.

* style: issue activity icons consistency.

web/ce/components/issues/issue-details/index.ts

@@ -1 +1,2 @@
 export * from "./issue-identifier";
+export * from "./issue-properties-activity";

web/ce/components/issues/issue-details/issue-identifier.tsx

@@ -1,27 +1,44 @@
 import { observer } from "mobx-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
 // hooks
 import { useIssueDetail, useProject } from "@/hooks/store";
 
-type TIssueIdentifierProps = {
-  issueId: string;
+type TIssueIdentifierBaseProps = {
   projectId: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  textContainerClassName?: string;
 };
 
+type TIssueIdentifierFromStore = TIssueIdentifierBaseProps & {
+  issueId: string;
+};
+
+type TIssueIdentifierWithDetails = TIssueIdentifierBaseProps & {
+  issueTypeId?: string | null;
+  projectIdentifier: string;
+  issueSequenceId: string | number;
+};
+
+type TIssueIdentifierProps = TIssueIdentifierFromStore | TIssueIdentifierWithDetails;
 export const IssueIdentifier: React.FC<TIssueIdentifierProps> = observer((props) => {
-  const { issueId, projectId } = props;
+  const { projectId, textContainerClassName } = props;
   // store hooks
-  const { getProjectById } = useProject();
+  const { getProjectIdentifierById } = useProject();
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+  // Determine if the component is using store data or not
+  const isUsingStoreData = "issueId" in props;
   // derived values
-  const issue = getIssueById(issueId);
-  const projectDetails = getProjectById(projectId);
+  const issue = isUsingStoreData ? getIssueById(props.issueId) : null;
+  const projectIdentifier = isUsingStoreData ? getProjectIdentifierById(projectId) : props.projectIdentifier;
+  const issueSequenceId = isUsingStoreData ? issue?.sequence_id : props.issueSequenceId;
 
   return (
     <div className="flex items-center space-x-2">
-      <span className="text-base font-medium text-custom-text-300">
-        {projectDetails?.identifier}-{issue?.sequence_id}
+      <span className={cn("text-base font-medium text-custom-text-300", textContainerClassName)}>
+        {projectIdentifier}-{issueSequenceId}
       </span>
     </div>
   );

web/ce/components/issues/issue-details/issue-properties-activity/index.ts

@@ -0,0 +1 @@
+export * from "./root";

web/ce/components/issues/issue-details/issue-properties-activity/root.tsx

@@ -0,0 +1,8 @@
+import { FC } from "react";
+
+type TIssueAdditionalPropertiesActivity = {
+  activityId: string;
+  ends: "top" | "bottom" | undefined;
+};
+
+export const IssueAdditionalPropertiesActivity: FC<TIssueAdditionalPropertiesActivity> = () => <></>;