Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 19 additions & 13 deletions components/waves/drops/WaveDropMobileMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ import { ApiDropType } from "@/generated/models/ApiDropType";
import { getWaveRoute } from "@/helpers/navigation.helpers";
import type { ExtendedDrop } from "@/helpers/waves/drop.helpers";
import { DropSize } from "@/helpers/waves/drop.helpers";
import type { FC} from "react";
import type { FC } from "react";
import { useContext, useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import WaveDropActionsAddReaction from "./WaveDropActionsAddReaction";
import WaveDropActionsMarkUnread from "./WaveDropActionsMarkUnread";
import WaveDropActionsRate from "./WaveDropActionsRate";
import WaveDropMobileMenuBoost from "./WaveDropMobileMenuBoost";
import WaveDropMobileMenuDelete from "./WaveDropMobileMenuDelete";
import WaveDropMobileMenuEdit from "./WaveDropMobileMenuEdit";
import WaveDropMobileMenuFollow from "./WaveDropMobileMenuFollow";
Expand Down Expand Up @@ -152,9 +153,9 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
{showReplyAndQuote && (
<>
<button
className={`tw-border-0 tw-flex tw-items-center tw-gap-x-4 tw-p-4 tw-bg-iron-950 tw-rounded-xl ${
className={`tw-flex tw-items-center tw-gap-x-4 tw-rounded-xl tw-border-0 tw-bg-iron-950 tw-p-4 ${
isTemporaryDrop
? "tw-opacity-50 tw-cursor-default"
? "tw-cursor-default tw-opacity-50"
: "active:tw-bg-iron-800"
} tw-transition-colors tw-duration-200`}
onClick={() => {
Expand All @@ -164,7 +165,7 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
disabled={isTemporaryDrop}
>
<svg
className="tw-flex-shrink-0 tw-w-5 tw-h-5 tw-text-iron-300"
className="tw-h-5 tw-w-5 tw-flex-shrink-0 tw-text-iron-300"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
fill="none"
Expand All @@ -178,14 +179,14 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
d="M7.49 12L3.74 8.248m0 0l3.75-3.75m-3.75 3.75h16.5V19.5"
/>
</svg>
<span className="tw-text-iron-300 tw-font-semibold tw-text-base">
<span className="tw-text-base tw-font-semibold tw-text-iron-300">
Reply
</span>
</button>
<button
className={`tw-border-0 tw-flex tw-items-center tw-gap-x-4 tw-p-4 tw-bg-iron-950 tw-rounded-xl ${
className={`tw-flex tw-items-center tw-gap-x-4 tw-rounded-xl tw-border-0 tw-bg-iron-950 tw-p-4 ${
isTemporaryDrop
? "tw-opacity-50 tw-cursor-default"
? "tw-cursor-default tw-opacity-50"
: "active:tw-bg-iron-800"
} tw-transition-colors tw-duration-200`}
onClick={() => {
Expand All @@ -195,7 +196,7 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
disabled={isTemporaryDrop}
>
<svg
className="tw-flex-shrink-0 tw-w-5 tw-h-5 tw-text-iron-300"
className="tw-h-5 tw-w-5 tw-flex-shrink-0 tw-text-iron-300"
viewBox="0 0 24 24"
aria-hidden="true"
fill="none"
Expand All @@ -210,13 +211,18 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
fill="currentColor"
/>
</svg>
<span className="tw-text-iron-300 tw-font-semibold tw-text-base">
<span className="tw-text-base tw-font-semibold tw-text-iron-300">
Quote
</span>
</button>
</>
)}

<WaveDropMobileMenuBoost
drop={extendedDrop}
onBoostChange={closeMenu}
/>

{showOpenOption && (
<WaveDropMobileMenuOpen
drop={{
Expand All @@ -231,16 +237,16 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({

{showCopyOption && (
<button
className={`tw-border-0 tw-flex tw-items-center tw-gap-x-4 tw-p-4 tw-bg-iron-950 tw-rounded-xl ${
className={`tw-flex tw-items-center tw-gap-x-4 tw-rounded-xl tw-border-0 tw-bg-iron-950 tw-p-4 ${
isTemporaryDrop
? "tw-opacity-50 tw-cursor-default"
? "tw-cursor-default tw-opacity-50"
: "active:tw-bg-iron-800"
} tw-transition-colors tw-duration-200`}
onClick={copyToClipboard}
disabled={isTemporaryDrop}
>
<svg
className="tw-flex-shrink-0 tw-w-5 tw-h-5 tw-text-iron-300"
className="tw-h-5 tw-w-5 tw-flex-shrink-0 tw-text-iron-300"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
Expand All @@ -254,7 +260,7 @@ const WaveDropMobileMenu: FC<WaveDropMobileMenuProps> = ({
/>
</svg>
<span
className={`tw-font-semibold tw-text-base ${
className={`tw-text-base tw-font-semibold ${
copied ? "tw-text-primary-400" : "tw-text-iron-300"
}`}
>
Expand Down
71 changes: 71 additions & 0 deletions components/waves/drops/WaveDropMobileMenuBoost.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
"use client";

import { AuthContext } from "@/components/auth/Auth";
import BoostIcon from "@/components/common/icons/BoostIcon";
import type { ExtendedDrop } from "@/helpers/waves/drop.helpers";
import { useDropBoostMutation } from "@/hooks/drops/useDropBoostMutation";
import type { FC } from "react";
import { useContext, useState } from "react";

interface WaveDropMobileMenuBoostProps {
readonly drop: ExtendedDrop;
readonly onBoostChange: () => void;
}

const WaveDropMobileMenuBoost: FC<WaveDropMobileMenuBoostProps> = ({
drop,
onBoostChange,
}) => {
const { connectedProfile } = useContext(AuthContext);
const { toggleBoost, isPending } = useDropBoostMutation();
const [isLocalPending, setIsLocalPending] = useState(false);
Comment thread
simo6529 marked this conversation as resolved.

const isTemporaryDrop = drop.id.startsWith("temp-");
const canBoost = !isTemporaryDrop && !!connectedProfile;
const isBoosted = drop.context_profile_context?.boosted ?? false;
const isLoading = isPending || isLocalPending;

const handleClick = () => {
if (!canBoost || isLoading) return;

setIsLocalPending(true);
try {
toggleBoost(drop);
onBoostChange();
} catch (error) {
console.error("Failed to toggle boost:", error);
} finally {
setIsLocalPending(false);
}
};

if (!canBoost) {
return null;
}

return (
<button
className={`tw-flex tw-items-center tw-gap-x-4 tw-rounded-xl tw-border-0 tw-bg-iron-950 tw-p-4 ${
isLoading ? "tw-cursor-default tw-opacity-50" : "active:tw-bg-iron-800"
} tw-transition-colors tw-duration-200`}
onClick={handleClick}
disabled={isLoading}
>
<BoostIcon
className={`tw-size-5 tw-flex-shrink-0 ${
isBoosted ? "tw-text-orange-400" : "tw-text-iron-300"
}`}
variant={isBoosted ? "filled" : "outlined"}
/>
<span
className={`tw-text-base tw-font-semibold ${
isBoosted ? "tw-text-orange-400" : "tw-text-iron-300"
}`}
>
{isBoosted ? "Remove Boost" : "Boost"}
</span>
</button>
);
};

export default WaveDropMobileMenuBoost;
Loading