Improve images in Waves

[feruzm]

Summary by CodeRabbit

• New Features

  • Consecutive images in wave posts are now auto-grouped into a responsive 2-column image grid, with a special layout for 3-image groups across lists and detailed views.

• Style

  • Adjusted image and zoom styling so opened images are not re-centered and grid images display with improved spacing and sizing.

• Bug Fixes

  • Stopwatch behavior stabilized to prevent duplicate timers and ensure proper active/cleared state handling.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 33f337cc-03d0-45bc-a47d-cf05ffd6b3c9

📥 Commits

Reviewing files that changed from the base of the PR and between c58080c and cca128f.

📒 Files selected for processing (1)

• apps/web/src/utils/use-stopwatch.ts

---

📝 Walkthrough

Walkthrough

Adds a new client-side hook useWaveImageGrid that groups adjacent image containers into .wave-image-grid, wires it into wave detail and list components via DOM refs, and replaces prior CSS-only multi-image layout with new grid styles and minor stopwatch/start fixes.

Changes

Cohort / File(s)	Summary
Image Grid Hook apps/web/src/app/waves/_hooks/use-wave-image-grid.ts, apps/web/src/app/waves/_hooks/index.ts	New useWaveImageGrid(containerRef, body) hook that queries .markdown-image-container, groups adjacent image wrappers into <div class="wave-image-grid">, moves nodes and removes empty <p> wrappers; re-exported from hooks index.
Component Integration apps/web/src/app/waves/[author]/[permlink]/_components/wave-view-details.tsx, apps/web/src/app/waves/_components/waves-list-item.tsx	Added useRef contentRef, attached to content container, and invoke useWaveImageGrid(contentRef, entry?.body) (conditionally for muted items in list).
Styling Updates apps/web/src/features/waves/styles/thread-render.scss, apps/web/src/app/waves/common.scss	Removed CSS-only adjacency/:has() rules; added .wave-image-grid styles providing a 2-column grid and a 3-image special case; updated selectors to exclude .medium-zoom-image--opened and adjusted image margins.
Stopwatch / Recorder tweak apps/web/src/features/shared/video-upload-threespeak/video-upload-recorder-actions.tsx, apps/web/src/utils/use-stopwatch.ts	Recorder effect deps reduced (stopwatch removed with eslint-disable); use-stopwatch now prevents double intervals in start() and sets isActive=false in clear().

Sequence Diagram(s)

sequenceDiagram
    participant Component as WavesListItem / WaveViewDetails
    participant Hook as useWaveImageGrid
    participant DOM as ContentContainer (DOM)
    participant CSS as Stylesheet (.wave-image-grid)
    rect rgba(135,206,235,0.5)
      Component->>Hook: call useWaveImageGrid(contentRef, body)
    end
    rect rgba(173,216,230,0.5)
      Hook->>DOM: read containerRef.current, query `.markdown-image-container`
      Hook->>DOM: remove prior `.wave-image-grid` wrappers
      Hook->>DOM: group adjacent wrappers, insert `.wave-image-grid`, move nodes, remove empty <p>
    end
    rect rgba(144,238,144,0.5)
      DOM->>CSS: matched `.wave-image-grid` rules apply (2-col, 3-image layout)
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Waves images and hashtag filter improvements #730: Prior CSS-only multi-image grouping for waves — replaced here by JS-driven useWaveImageGrid and new .wave-image-grid styles.

Poem

🐰 I hopped through nodes and grouped each sight,
Images once scattered now snug and tight.
I nudged wrappers, shifted p's with care,
Now waves wear grids — tidy like my lair. 🥕📸

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Improve images in Waves' is directly related to the main changes in the pull request, which focuses on implementing image grid functionality and styling improvements for image rendering in the Waves feature.

_{✏️ 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 image

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

apps/web/src/utils/use-stopwatch.ts (1)

44-48: Guard logic is correct but isActive state may become inconsistent.

The guard correctly prevents duplicate intervals. However, note that clear() (lines 38-42) doesn't set isActive = false, which can leave isActive in a stale true state after clearing. This is pre-existing behavior, but worth addressing for consistency.

🔧 Optional: Keep isActive in sync with clear()

 const clear = useCallback(() => {
   clearInterval(intervalRef.current);
   intervalRef.current = null;
   setTime({ seconds: 0, minutes: 0, hours: 0 });
+  setIsActive(false);
 }, []);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/utils/use-stopwatch.ts` around lines 44 - 48, The start/clear
mismatch can leave isActive true after clearing the interval; update the clear
function (the clear helper used by use-stopwatch and referenced alongside start
and tick) to also call setIsActive(false) when it clears intervalRef.current,
ensuring isActive is kept in sync with interval state and avoiding stale true
state after clear().

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@apps/web/src/utils/use-stopwatch.ts`:
- Around line 44-48: The start/clear mismatch can leave isActive true after
clearing the interval; update the clear function (the clear helper used by
use-stopwatch and referenced alongside start and tick) to also call
setIsActive(false) when it clears intervalRef.current, ensuring isActive is kept
in sync with interval state and avoiding stale true state after clear().

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3a95bbd5-0b76-4fce-acdd-b7f6088d6b70

📥 Commits

Reviewing files that changed from the base of the PR and between 8032218 and c58080c.

📒 Files selected for processing (5)

• apps/web/src/app/waves/_hooks/use-wave-image-grid.ts
• apps/web/src/app/waves/common.scss
• apps/web/src/features/shared/video-upload-threespeak/video-upload-recorder-actions.tsx
• apps/web/src/features/waves/styles/thread-render.scss
• apps/web/src/utils/use-stopwatch.ts

✅ Files skipped from review due to trivial changes (1)

• apps/web/src/app/waves/common.scss

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/src/app/waves/_hooks/use-wave-image-grid.ts