fix text selecting

[simo6529]

Summary by CodeRabbit

Release Notes

• Refactor
  • Removed the double-tap boost feature from wave drops.
  • Simplified wave drop component by removing unnecessary authentication dependencies and related interaction handlers.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR removes boost functionality from the WaveDrop component, including double-tap detection, boost mutations, and AuthContext dependency. The component is simplified by replacing a button with a div container and consolidating unused imports while preserving core editing, saving, and mobile menu logic.

Changes

Cohort / File(s)	Summary
Boost & Double-tap Removal components/waves/drops/WaveDrop.tsx	Removed useDropBoostMutation, useDoubleTap imports and all related boost handling logic including handleDoubleTapBoost handler, double-tap event binding, and canBoost gating. Removed AuthContext and useContext imports. Replaced button container with div, eliminating onTouchStart/onTouchEnd/onClick handlers tied to boost flow.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #1714: Related through boost logic codepaths — this PR removes boost usage from WaveDrop while PR #1714 modifies the useDropBoostMutation hook and related boost functionality.

Suggested reviewers

• prxt6529
• ragnep

Poem

🐰 Hops away the boost so grand,
Double-taps now out of hand,
Context gone, simplicity freed,
Cleaner code is all we need! 🌊✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'fix text selecting' is vague and does not accurately describe the main changes in the pull request, which involve removing boost functionality, double-tap detection, and AuthContext dependencies from WaveDrop.tsx.	Consider using a more specific title that reflects the primary change, such as 'Remove boost functionality and double-tap detection from WaveDrop' or 'Simplify WaveDrop by removing boost-related features'.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 39fbba4 and ae9fafc.

📒 Files selected for processing (1)

• components/waves/drops/WaveDrop.tsx

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version

**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or use useMemo instead.
Use useEffectEvent for non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with "use cache" directive at the top of Server Components, routes, or functions. Configure cacheComponents: true in next.config.ts as needed.

**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
Use useEffectEvent when listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')

Files:

• components/waves/drops/WaveDrop.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always add readonly before props in React components

**/*.{tsx,jsx}: Use internal links via <Link> component from Next.js instead of <a> tags
Replace <img> elements with <Image /> from next/image

Files:

• components/waves/drops/WaveDrop.tsx

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (GEMINI.md)

Run npm run lint to ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.

**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by running npm run lint
Do not add eslint-disable comments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions

Files:

• components/waves/drops/WaveDrop.tsx

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (GEMINI.md)

**/*.{jsx,tsx}: Replace <img> elements with <Image /> from next/image to comply with Next.js ESLint rule @next/next/no-img-element.
Use <Link href="/path"> from Next.js for internal navigation instead of raw <a> tags to comply with @next/next/no-html-link-for-pages.

Files:

• components/waves/drops/WaveDrop.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (GEMINI.md)

Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.

Files:

• components/waves/drops/WaveDrop.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript with React functional components and hooks

Files:

• components/waves/drops/WaveDrop.tsx

**/*.{tsx,ts,jsx,js}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer direct named imports from React (useMemo, useRef, FC) over React. namespace usage

Files:

• components/waves/drops/WaveDrop.tsx

🧠 Learnings (3)

📚 Learning: 2025-12-30T14:32:19.360Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts} : Use TypeScript with React functional components and hooks

Applied to files:

• components/waves/drops/WaveDrop.tsx

📚 Learning: 2025-12-30T14:32:19.360Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Prefer direct named imports from React (`useMemo`, `useRef`, `FC`) over `React.` namespace usage

Applied to files:

• components/waves/drops/WaveDrop.tsx

📚 Learning: 2025-12-30T14:32:19.360Z

Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Move data fetching from client Effects to Server Components; mutations go through Server Actions (`'use server'`)

Applied to files:

• components/waves/drops/WaveDrop.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (2)

components/waves/drops/WaveDrop.tsx (2)

13-13: LGTM! Clean import consolidation.

The unused imports (AuthContext, useDoubleTap, useDropBoostMutation, useContext) have been removed correctly, and the remaining imports use direct named imports from React as per coding guidelines.

---

394-414: Verify text selection behavior after removing button wrapper.

The div container is already in place, but the text selection fix depends on where touch-select-none is applied. The class is currently on the outer wrapper (via baseClasses at line 104), which prevents text selection on touch devices via a media query (@media (pointer: coarse)). This affects the entire drop and its content, not just this inner div.

For text selection to work as intended:

• On desktop: Should work since touch-select-none only applies to touch devices (pointer: coarse)
• On touch devices: Will be blocked by the parent's touch-select-none class, regardless of this div

If intentional text selection is needed on touch devices, consider applying touch-select-none more selectively or using user-select-text on specific content areas. Test text selection on both desktop and mobile to confirm the behavior matches the intended fix for "text selecting."

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud