binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: speeding up reactions and votes 🚀

Browse source
This commit is contained in:
sriram veeraghanta 2023-09-01 20:38:53 +05:30
parent f71a62f142
commit 1732945ec6
9 changed files with 187 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/space/components/issues/board-views/block-state.tsx
View file

@ -1,5 +1,3 @@
"use client";
// constants
import { issueGroupFilter } from "constants/data";
@ -8,8 +6,8 @@ export const IssueBlockState = ({ state }: any) => {
if (stateGroup === null) return <></>;
return (
<div className="flex items-center justify-between gap-1 w-full rounded shadow-sm border-[0.5px] border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs cursor-pointer hover:bg-custom-background-80">
<div className="flex items-center cursor-pointer w-full gap-1.5 text-custom-text-200">
<div className="flex items-center justify-between gap-1 w-full rounded shadow-sm border-[0.5px] border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs">
<div className="flex items-center w-full gap-1.5 text-custom-text-200">
<stateGroup.icon />
<div className="text-xs">{state?.name}</div>
</div>

13
apps/space/components/issues/navbar/theme.tsx
View file

@ -1,25 +1,32 @@
"use client";
// next theme
import { useTheme } from "next-themes";
// mobx react lite
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
export const NavbarTheme = observer(() => {
const [appTheme, setAppTheme] = useState("light");
const { setTheme, theme } = useTheme();
const handleTheme = () => {
setTheme(theme === "light" ? "dark" : "light");
};
useEffect(() => {
if (!theme) return;
setAppTheme(theme);
}, [theme]);
return (
<button
type="button"
onClick={handleTheme}
className="relative w-7 h-7 grid place-items-center bg-custom-background-100 hover:bg-custom-background-80 text-custom-text-100 rounded"
>
<span className="material-symbols-rounded text-sm">{theme === "light" ? "dark_mode" : "light_mode"}</span>
<span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
</button>
);
});

4
apps/space/components/issues/peek-overview/header.tsx
View file

@ -70,7 +70,7 @@ export const PeekOverviewHeader: React.FC<Props> = (props) => {
<div className="flex justify-between items-center">
<div className="flex items-center gap-4">
{issueDetailStore.peekMode === "side" && (
<button type="button" onClick={handleClose} autoFocus={false}>
<button type="button" onClick={handleClose}>
<East
sx={{
fontSize: "14px",
@ -134,7 +134,7 @@ export const PeekOverviewHeader: React.FC<Props> = (props) => {
</div>
{(issueDetailStore.peekMode === "side" || issueDetailStore.peekMode === "modal") && (
<div className="flex items-center gap-2 flex-shrink-0">
<button type="button" onClick={handleCopyLink} className="-rotate-45">
<button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
<Icon iconName="link" />
</button>
</div>

2
apps/space/components/issues/peek-overview/issue-activity.tsx
View file

@ -47,7 +47,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
)}
</>
) : (
<div className="bg-custom-background-80 px-2 py-2.5 flex items-center justify-between gap-2 border border-custom-border-300 rounded">
<div className="bg-custom-background-80 px-2 py-2.5 flex items-center justify-between gap-2 border border-custom-border-300 rounded mt-4">
<p className="flex gap-2 text-sm text-custom-text-200 break-words overflow-hidden">
<Icon iconName="lock" className="!text-sm" />
Sign in to add your comment

6
apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx
View file

@ -24,9 +24,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
if (!workspace_slug || !project_slug || !issueId) return;
const userReaction = reactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
if (userReaction) return;
issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, {
reaction: reactionHex,
});
issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
};
const handleReactionClick = (reactionHex: string) => {
@ -57,6 +55,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
if (reactions.length > 0)
return (
<Tooltip
key={reaction}
tooltipContent={
<div>
{reactions
@ -74,7 +73,6 @@ export const IssueEmojiReactions: React.FC = observer(() => {
handleReactionClick(reaction);
});
}}
key={reaction}
className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
? "bg-custom-primary-100/10"