diff --git a/apps/space/components/issues/peek-overview/header.tsx b/apps/space/components/issues/peek-overview/header.tsx
index 0f13e97c3..7d2e76668 100644
--- a/apps/space/components/issues/peek-overview/header.tsx
+++ b/apps/space/components/issues/peek-overview/header.tsx
@@ -1,9 +1,15 @@
+import React from "react";
+
import { useRouter } from "next/router";
-import { ArrowRightAlt, CloseFullscreen, East, OpenInFull } from "@mui/icons-material";
+
+// headless ui
+import { Listbox, Transition } from "@headlessui/react";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Icon } from "components/ui";
+// icons
+import { East } from "@mui/icons-material";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// store
@@ -72,37 +78,59 @@ export const PeekOverviewHeader: React.FC
= (props) => {
/>
)}
- {/*
-
-
-
- */}
- {/* setMode(val)}
- customButton={
-
- }
- position="left"
+ issueDetailStore.setPeekMode(val)}
+ className="relative flex-shrink-0 text-left"
>
- {peekModes.map((mode) => (
-
-
-
- {mode.label}
+
+ m.key === issueDetailStore.peekMode)?.icon ?? ""} />
+
+
+
+
+
+ {peekModes.map((mode) => (
+
+ `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+ active || selected ? "bg-custom-background-80" : ""
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+ }
+ >
+ {({ selected }) => (
+
+ )}
+
+ ))}
+
diff --git a/apps/space/components/issues/peek-overview/issue-details.tsx b/apps/space/components/issues/peek-overview/issue-details.tsx
index 22bc14c7e..0b329568c 100644
--- a/apps/space/components/issues/peek-overview/issue-details.tsx
+++ b/apps/space/components/issues/peek-overview/issue-details.tsx
@@ -18,19 +18,22 @@ export const PeekOverviewIssueDetails: React.FC
= ({ issueDetails }) => {
{issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
{issueDetails.name}
- "
- : issueDetails.description_html
- }
- customClassName="p-3 min-h-[50px] shadow-sm"
- debouncedUpdatesEnabled={false}
- editable={false}
- />
+ {issueDetails.description_html !== "" && issueDetails.description_html !== "" && (
+ "
+ : issueDetails.description_html
+ }
+ customClassName="p-3 min-h-[50px] shadow-sm"
+ debouncedUpdatesEnabled={false}
+ editable={false}
+ />
+ )}
+ {Object.keys(groupedReactions || {}).map((reaction) => {
+ const reactions = groupedReactions?.[reaction] ?? [];
+ const REACTIONS_LIMIT = 1000;
- {Object.keys(groupedReactions || {}).map(
- (reaction) =>
- groupedReactions?.[reaction]?.length &&
- groupedReactions[reaction].length > 0 && (
-
);
});
diff --git a/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx b/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx
index dace360d4..ac20565ea 100644
--- a/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx
+++ b/apps/space/components/issues/peek-overview/issue-vote-reactions.tsx
@@ -1,15 +1,19 @@
-import { useState, useEffect, useRef } from "react";
-import { observer } from "mobx-react-lite";
+import { useState, useEffect } from "react";
+
import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
// lib
import { useMobxStore } from "lib/mobx/store-provider";
+import { Tooltip } from "components/ui";
export const IssueVotes: React.FC = observer(() => {
const [isSubmitting, setIsSubmitting] = useState(false);
const router = useRouter();
- const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
+ const { workspace_slug, project_slug } = router.query;
const { user: userStore, issueDetails: issueDetailsStore } = useMobxStore();
@@ -18,11 +22,11 @@ export const IssueVotes: React.FC = observer(() => {
const votes = issueId ? issueDetailsStore.details[issueId]?.votes : [];
- const upVoteCount = votes?.filter((vote) => vote.vote === 1).length || 0;
- const downVoteCount = votes?.filter((vote) => vote.vote === -1).length || 0;
+ const allUpVotes = votes?.filter((vote) => vote.vote === 1);
+ const allDownVotes = votes?.filter((vote) => vote.vote === -1);
- const isUpVotedByUser = votes?.some((vote) => vote.actor === user?.id && vote.vote === 1);
- const isDownVotedByUser = votes?.some((vote) => vote.actor === user?.id && vote.vote === -1);
+ const isUpVotedByUser = allUpVotes?.some((vote) => vote.actor === user?.id);
+ const isDownVotedByUser = allDownVotes?.some((vote) => vote.actor === user?.id);
const handleVote = async (e: any, voteValue: 1 | -1) => {
if (!workspace_slug || !project_slug || !issueId) return;
@@ -31,9 +35,10 @@ export const IssueVotes: React.FC = observer(() => {
const actionPerformed = votes?.find((vote) => vote.actor === user?.id && vote.vote === voteValue);
- if (actionPerformed) await issueDetailsStore.removeIssueVote(workspace_slug, project_slug, issueId);
+ if (actionPerformed)
+ await issueDetailsStore.removeIssueVote(workspace_slug.toString(), project_slug.toString(), issueId);
else
- await issueDetailsStore.addIssueVote(workspace_slug, project_slug, issueId, {
+ await issueDetailsStore.addIssueVote(workspace_slug.toString(), project_slug.toString(), issueId, {
vote: voteValue,
});
@@ -46,43 +51,79 @@ export const IssueVotes: React.FC = observer(() => {
userStore.fetchCurrentUser();
}, [user, userStore]);
+ const VOTES_LIMIT = 1000;
+
return (