Skip to content

wip#2242

Merged
simo6529 merged 5 commits intomainfrom
mobile-single-drop-chat-long-press-fix
Apr 9, 2026
Merged

wip#2242
simo6529 merged 5 commits intomainfrom
mobile-single-drop-chat-long-press-fix

Conversation

@simo6529
Copy link
Copy Markdown
Collaborator

@simo6529 simo6529 commented Apr 9, 2026

Summary by CodeRabbit

  • New Features

    • Introduced a context/provider to centralize mobile z-index class names and wired mobile menus/dialogs to use those values.
  • Tests

    • Expanded tests and mocks to assert default and overridden z-index class handling for mobile wrappers and dialogs.
  • Chores

    • Updated local development configuration for allowed origins and dev tool execution command.

Signed-off-by: Simo <simo@6529.io>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 9, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 674d4c6b-7140-46aa-bd25-6c22b02ca6fc

📥 Commits

Reviewing files that changed from the base of the PR and between 979d199 and a60ee0d.

📒 Files selected for processing (3)
  • .mcp.json
  • __tests__/components/waves/drops/WaveDropMobileMenu.test.tsx
  • components/waves/drops/WaveDropLayerContext.tsx
✅ Files skipped from review due to trivial changes (2)
  • .mcp.json
  • components/waves/drops/WaveDropLayerContext.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • tests/components/waves/drops/WaveDropMobileMenu.test.tsx

📝 Walkthrough

Walkthrough

Introduces a WaveDropLayer context to manage mobile z-index Tailwind class names and threads configurable z-index props through mobile dialog/wrapper components. Components and tests were updated so context values or explicit props control dialog/menu stacking order.

Changes

Cohort / File(s) Summary
Z-Index Context Layer
components/waves/drops/WaveDropLayerContext.tsx
New React context, provider and useWaveDropLayers hook that expose default mobileMenuZIndexClassName and mobileDialogZIndexClassName and allow partial overrides.
Mobile Dialog Components
components/mobile-wrapper-dialog/MobileWrapperDialog.tsx, components/utils/select/dropdown/CommonDropdownItemsMobileWrapper.tsx
Added optional zIndexClassName props (defaults: tw-z-[1010] and tw-z-[1000]) and apply them to the Dialog root className instead of hard-coded values.
Wave Drop Components
components/waves/drops/WaveDropActionsAddReaction.tsx, components/waves/drops/WaveDropMobileMenu.tsx, components/waves/drop/SingleWaveDropChat.tsx
Threaded z-index props: WaveDropActionsAddReaction accepts dialogZIndexClassName; WaveDropMobileMenu reads context (useWaveDropLayers) and forwards values; SingleWaveDropChat wraps children with WaveDropLayerProvider using explicit mobile z-index values.
Tests & Mocks
__tests__/components/utils/select/dropdown/CommonDropdownItemsMobileWrapper.test.tsx, __tests__/components/waves/drops/WaveDropActionsAddReaction.test.tsx, __tests__/components/waves/drops/WaveDropMobileMenu.test.tsx
Updated Jest mocks to export components that surface data-* attributes for captured z-index values; added assertions verifying default and custom z-index class propagation and provider overrides.
Configuration & Tooling
config/nextConfig.ts, .mcp.json
Added 192.168.1.77 to allowed dev origins; updated MCP .mcp.json to use absolute /opt/homebrew/bin/npx command.

Sequence Diagram

sequenceDiagram
    participant SingleWaveDropChat as SingleWaveDropChat
    participant WaveDropLayerProvider as WaveDropLayerProvider
    participant WaveDropMobileMenu as WaveDropMobileMenu
    participant CommonDropdownItemsMobileWrapper as MobileWrapper
    participant WaveDropActionsAddReaction as AddReaction
    participant MobileWrapperDialog as MobileDialog

    SingleWaveDropChat->>WaveDropLayerProvider: Wrap children with context (menuZ, dialogZ)
    WaveDropLayerProvider->>WaveDropMobileMenu: Provide z-index values
    WaveDropMobileMenu->>WaveDropMobileMenu: useWaveDropLayers() reads values
    WaveDropMobileMenu->>MobileWrapper: Pass mobileMenuZIndexClassName as zIndexClassName
    MobileWrapper->>MobileWrapper: Apply zIndexClassName to Dialog root
    WaveDropMobileMenu->>AddReaction: Pass mobileDialogZIndexClassName as dialogZIndexClassName
    AddReaction->>MobileDialog: Forward dialogZIndexClassName as zIndexClassName
    MobileDialog->>MobileDialog: Apply zIndexClassName to Dialog root
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • wip #1822 — Touches SingleWaveDropChat.tsx similarly (JSX/wrapping changes).
  • tab longpress fix #1768 — Modifies CommonDropdownItemsMobileWrapper.tsx related to Dialog/Transition structure and tests.
  • Zoom fix #1749 — Changes MobileWrapperDialog.tsx (Dialog/Panel className and viewport handling), overlapping with z-index prop work.

Suggested reviewers

  • ragnep
  • prxt6529

Poem

🐰 I hopped through layers, tidy and bright,

tw-zes stacked to the left and right,
Context sewn where dialogs dwell,
Props whispering the right z-index spell,
UI stacked snug — a rabbit's delight!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The PR title 'wip' is a vague acronym that does not convey meaningful information about the changeset, which involves z-index management across mobile dropdowns and dialogs. Use a descriptive title that summarizes the main change, such as 'Add z-index customization for mobile dropdown and dialog components' or similar.
✅ Passed checks (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch mobile-single-drop-chat-long-press-fix

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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
config/nextConfig.ts (1)

17-17: Make allowedDevOrigins env-driven instead of hardcoded host IPs.

This works, but hardcoded LAN IPs in shared config tend to go stale and create repeated config churn. Consider reading these from an env var and keeping a minimal default list.

Suggested refactor
-    allowedDevOrigins: ["192.168.1.133", "192.168.1.77"],
+    allowedDevOrigins: (
+      process.env.ALLOWED_DEV_ORIGINS?.split(",").map((v) => v.trim()).filter(Boolean)
+    ) ?? ["192.168.1.133"],
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@config/nextConfig.ts` at line 17, Replace the hardcoded allowedDevOrigins
array with a value derived from an environment variable (e.g.,
process.env.ALLOWED_DEV_ORIGINS or NEXT_ALLOWED_DEV_ORIGINS) so the list can be
changed without code edits; in the nextConfig.ts export that currently contains
allowedDevOrigins, read the env var, fallback to a small sensible default like
["127.0.0.1","localhost"], and parse comma-separated values into an array (trim
entries and ignore empty strings) before assigning to allowedDevOrigins so the
config continues to work when the env var is unset.
components/waves/drop/SingleWaveDropChat.tsx (1)

66-70: Memoize the provider value object to avoid avoidable context rerenders.

The inline object at Line 67 creates a new reference every render, so all useWaveDropLayers() consumers are notified even when values are unchanged.

♻️ Proposed refactor
@@
   const [activeDrop, setActiveDrop] = useState<ActiveDropState | null>({
@@
   const resetActiveDrop = () => {
@@
   };
+
+  const layerOverrides = useMemo(
+    () => ({
+      mobileMenuZIndexClassName: "tw-z-[1020]",
+      mobileDialogZIndexClassName: "tw-z-[1030]",
+    }),
+    []
+  );
@@
-    <WaveDropLayerProvider
-      value={{
-        mobileMenuZIndexClassName: "tw-z-[1020]",
-        mobileDialogZIndexClassName: "tw-z-[1030]",
-      }}
-    >
+    <WaveDropLayerProvider value={layerOverrides}>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@components/waves/drop/SingleWaveDropChat.tsx` around lines 66 - 70, The
provider value object passed to WaveDropLayerProvider is recreated on every
render causing unnecessary context rerenders; wrap the value object (containing
mobileMenuZIndexClassName and mobileDialogZIndexClassName) in a useMemo and pass
that memoized object to WaveDropLayerProvider so its reference only changes when
those z-index strings change; locate the WaveDropLayerProvider usage in
SingleWaveDropChat and replace the inline object with a const memoizedValue =
useMemo(() => ({ mobileMenuZIndexClassName: "...", mobileDialogZIndexClassName:
"..." }), [/* deps */]) and pass memoizedValue, ensuring consumers via
useWaveDropLayers() no longer rerender unnecessarily.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@components/waves/drops/WaveDropLayerContext.tsx`:
- Around line 26-31: The current mergedValue created in useMemo spreads value
over DEFAULT_WAVE_DROP_LAYER_CONTEXT which allows explicit undefined in value to
overwrite required defaults (e.g. mobileMenuZIndexClassName), breaking the
context contract; change the merge logic in the useMemo that produces
mergedValue (and/or create a helper like assignDefaults) to iterate properties
of DEFAULT_WAVE_DROP_LAYER_CONTEXT and for each key use the override only if it
is not undefined (use nullish coalescing or an explicit undefined check) so that
undefined overrides do not replace the default; keep types as
WaveDropLayerContextValue and ensure useMemo depends on value.

---

Nitpick comments:
In `@components/waves/drop/SingleWaveDropChat.tsx`:
- Around line 66-70: The provider value object passed to WaveDropLayerProvider
is recreated on every render causing unnecessary context rerenders; wrap the
value object (containing mobileMenuZIndexClassName and
mobileDialogZIndexClassName) in a useMemo and pass that memoized object to
WaveDropLayerProvider so its reference only changes when those z-index strings
change; locate the WaveDropLayerProvider usage in SingleWaveDropChat and replace
the inline object with a const memoizedValue = useMemo(() => ({
mobileMenuZIndexClassName: "...", mobileDialogZIndexClassName: "..." }), [/*
deps */]) and pass memoizedValue, ensuring consumers via useWaveDropLayers() no
longer rerender unnecessarily.

In `@config/nextConfig.ts`:
- Line 17: Replace the hardcoded allowedDevOrigins array with a value derived
from an environment variable (e.g., process.env.ALLOWED_DEV_ORIGINS or
NEXT_ALLOWED_DEV_ORIGINS) so the list can be changed without code edits; in the
nextConfig.ts export that currently contains allowedDevOrigins, read the env
var, fallback to a small sensible default like ["127.0.0.1","localhost"], and
parse comma-separated values into an array (trim entries and ignore empty
strings) before assigning to allowedDevOrigins so the config continues to work
when the env var is unset.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d3f04e5f-bbd9-46b6-a882-dbf21aad1f69

📥 Commits

Reviewing files that changed from the base of the PR and between e023b49 and 979d199.

📒 Files selected for processing (10)
  • __tests__/components/utils/select/dropdown/CommonDropdownItemsMobileWrapper.test.tsx
  • __tests__/components/waves/drops/WaveDropActionsAddReaction.test.tsx
  • __tests__/components/waves/drops/WaveDropMobileMenu.test.tsx
  • components/mobile-wrapper-dialog/MobileWrapperDialog.tsx
  • components/utils/select/dropdown/CommonDropdownItemsMobileWrapper.tsx
  • components/waves/drop/SingleWaveDropChat.tsx
  • components/waves/drops/WaveDropActionsAddReaction.tsx
  • components/waves/drops/WaveDropLayerContext.tsx
  • components/waves/drops/WaveDropMobileMenu.tsx
  • config/nextConfig.ts

Comment thread components/waves/drops/WaveDropLayerContext.tsx Outdated
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Apr 9, 2026

@simo6529 simo6529 merged commit 32c6189 into main Apr 9, 2026
8 checks passed
@simo6529 simo6529 deleted the mobile-single-drop-chat-long-press-fix branch April 9, 2026 11:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants