Skip to content

logged out placeholder in the wave view#2153

Merged
ragnep merged 6 commits intomainfrom
waves-logged-out-ux
Mar 23, 2026
Merged

logged out placeholder in the wave view#2153
ragnep merged 6 commits intomainfrom
waves-logged-out-ux

Conversation

@ragnep
Copy link
Copy Markdown
Contributor

@ragnep ragnep commented Mar 23, 2026

Summary by CodeRabbit

  • New Features

    • Public wave previews are now accessible to non-authenticated users, displaying wave name, description, member count, and activity information.
    • Added configurable controls for sidebar and overlay visibility in wave layouts.
  • Refactor

    • Enhanced component flexibility with customizable props for improved UI adaptability.
    • Improved control over data-fetching behavior through optional configuration flags.

Signed-off-by: ragnep <ragneinfo@gmail.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 23, 2026

📝 Walkthrough

Walkthrough

The PR introduces optional feature flags (allowRightSidebar, allowDropOverlay, showLeftSidebar) cascading through the Waves component hierarchy, adds a new PublicWaveShell component and usePublicWaveShellState hook for displaying locked unauthenticated wave previews, and refactors HeaderUserConnect to accept configurable styling, icon, and label props.

Changes

Cohort / File(s) Summary
Component Prop Enhancement
components/header/user/HeaderUserConnect.tsx
Added HeaderUserConnectProps interface with optional className, icon, and label props; updated button rendering to use dynamic content and combined Tailwind classes.
Feature Flags
components/shared/WavesMessagesWrapper.tsx, components/waves/WavesDesktop.tsx
Extended props interfaces with optional allowRightSidebar, allowDropOverlay, and showLeftSidebar flags; conditionally gate right sidebar and drop overlay visibility and behavior based on these flags.
Layout Refactoring
components/waves/layout/WavesLayout.tsx
Refactored content derivation logic to use helper functions; added active wave ID resolution from URL and conditional usePublicWaveShellState initialization; updated rendering to conditionally show PublicWaveShell or ConnectWallet for unauthenticated flows.
Public Wave Shell
components/waves/public/PublicWaveShell.tsx, components/waves/public/usePublicWaveShellState.ts
Added new client-side components: PublicWaveShell renders locked wave preview with member/post counts and connect prompt; usePublicWaveShellState hook manages loading/unavailable/ready states and derives wave metadata including sanitized description preview.
Hook Enhancement
hooks/useWaveById.ts
Added optional UseWaveByIdOptions with enabled flag; updated query control to respect both caller's enabled option and waveId presence; refactored queryFn error handling.
Comment Cleanup
contexts/wave/hooks/useEnhancedWavesListCore.ts
Removed precedence documentation comment; logic for isPinned computation remains unchanged.

Sequence Diagram(s)

sequenceDiagram
    participant User as User (Unauthenticated)
    participant WavesLayout as WavesLayout
    participant usePublicWaveShell as usePublicWaveShellState
    participant useWaveById as useWaveById
    participant PublicWaveShell as PublicWaveShell
    participant API as API

    User->>WavesLayout: Visits /waves/[waveId]
    WavesLayout->>WavesLayout: Derives activeWaveId from URL
    WavesLayout->>WavesLayout: Checks contentState === "not-authenticated"
    WavesLayout->>usePublicWaveShell: Initializes usePublicWaveShellState(activeWaveId)
    usePublicWaveShell->>useWaveById: Calls useWaveById(waveId, { enabled: true })
    useWaveById->>API: Fetches wave metadata
    API-->>useWaveById: Returns wave data
    useWaveById-->>usePublicWaveShell: Returns wave result
    usePublicWaveShell->>usePublicWaveShell: Derives PublicWaveShellData (name, description, counts)
    usePublicWaveShell-->>WavesLayout: Returns { status: "ready", wave: ... }
    WavesLayout->>PublicWaveShell: Renders with wave data
    PublicWaveShell-->>User: Displays locked preview + HeaderUserConnect
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • waves client side navigation #1616: Both PRs modify Waves UI components and active-wave selection/navigation logic through URL-derived state and component hierarchy refactoring.

Suggested reviewers

  • simo6529

Poem

🐰 A shell for public waves, locked but shown with grace,
Feature flags now flowing through each interface space,
Headers configured, sidebars dance at will,
New hooks and shells compose the developer's skill,
Authentication's dance—unauthenticated still! 🌊

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 6.67% 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 'logged out placeholder in the wave view' directly corresponds to the main change: adding a public wave shell component for logged-out users viewing waves, with UI controls for wallet connection.

✏️ 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 waves-logged-out-ux

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 (1)
components/waves/public/PublicWaveShell.tsx (1)

114-121: Consider using index for the line key.

Using lineWidth as the React key works because all values in each row.lines array happen to be unique. However, this is fragile—if duplicate widths are ever added, React will exhibit unexpected behavior. Consider using the index for stability:

🔧 Suggested change
                 <div className="tw-w-full tw-space-y-2.5">
-                  {row.lines.map((lineWidth) => (
+                  {row.lines.map((lineWidth, lineIndex) => (
                     <div
-                      key={lineWidth}
+                      key={lineIndex}
                       className={`tw-h-3 tw-rounded-sm tw-bg-iron-300 ${lineWidth}`}
                     />
                   ))}
                 </div>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@components/waves/public/PublicWaveShell.tsx` around lines 114 - 121, In
PublicWaveShell.tsx replace the fragile key usage in the row.lines.map callback
(currently using key={lineWidth}) with an index-based key: change the map
signature to include the index (e.g., row.lines.map((lineWidth, idx) => ...))
and use that index (e.g., key={idx}) for the rendered div to ensure stable keys
even if duplicate widths appear.
🤖 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/layout/WavesLayout.tsx`:
- Around line 67-85: The isApp branch currently returns publicShell directly,
causing unauthenticated mobile views to miss the same providers used for
authenticated mobile rendering; update the isApp branch in WavesLayout to wrap
publicShell with the same WavesMobile wrapper used elsewhere (i.e., replace the
direct return with a WavesMobile wrapper that provides SidebarProvider,
ContentTabProvider and BrainMobile context) so the component tree (WavesMobile,
publicShell) matches the non-app/mobile rendering and maintains consistent
context provisioning with WavesDesktop/WavesMobile.

---

Nitpick comments:
In `@components/waves/public/PublicWaveShell.tsx`:
- Around line 114-121: In PublicWaveShell.tsx replace the fragile key usage in
the row.lines.map callback (currently using key={lineWidth}) with an index-based
key: change the map signature to include the index (e.g.,
row.lines.map((lineWidth, idx) => ...)) and use that index (e.g., key={idx}) for
the rendered div to ensure stable keys even if duplicate widths appear.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d72b6c87-89b4-4626-bbaa-d78aaefd8132

📥 Commits

Reviewing files that changed from the base of the PR and between 45ddab8 and 06407f3.

📒 Files selected for processing (9)
  • components/header/user/HeaderUserConnect.tsx
  • components/shared/WavesMessagesWrapper.tsx
  • components/waves/WavesDesktop.tsx
  • components/waves/layout/WavesLayout.tsx
  • components/waves/public/PublicWaveShell.tsx
  • components/waves/public/usePublicWaveShellState.ts
  • contexts/wave/hooks/useEnhancedWavesListCore.ts
  • hooks/useVirtualizedWaves.ts
  • hooks/useWaveById.ts
💤 Files with no reviewable changes (1)
  • hooks/useVirtualizedWaves.ts

Comment thread components/waves/layout/WavesLayout.tsx
ragnep added 4 commits March 23, 2026 13:12
Signed-off-by: ragnep <ragneinfo@gmail.com>
Signed-off-by: ragnep <ragneinfo@gmail.com>
Signed-off-by: ragnep <ragneinfo@gmail.com>
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.

🧹 Nitpick comments (1)
components/header/user/HeaderUserConnect.tsx (1)

21-21: Use clsx for robust class merging.

String concatenation works for the current usage where passed classes don't conflict with base classes. However, if conflicting classes are passed in the future (e.g., different background colors), both will be present and the result may be unpredictable. This project already uses clsx throughout the codebase as the standard for class merging.

♻️ Suggested improvement using clsx
+import clsx from "clsx";
 import { useSeizeConnectContext } from "@/components/auth/SeizeConnectContext";
 import type { ReactNode } from "react";
     <button
       onClick={() => seizeConnect()}
       type="button"
-      className={`tw-flex tw-items-center tw-justify-center tw-gap-x-1.5 tw-whitespace-nowrap tw-rounded-lg tw-border-0 tw-bg-iron-200 tw-px-4 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-iron-800 tw-ring-1 tw-ring-inset tw-ring-white tw-transition tw-duration-300 tw-ease-out hover:tw-bg-iron-300 hover:tw-ring-iron-300 focus:tw-z-10 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset ${className ?? ""}`}
+      className={clsx(
+        "tw-flex tw-items-center tw-justify-center tw-gap-x-1.5 tw-whitespace-nowrap tw-rounded-lg tw-border-0 tw-bg-iron-200 tw-px-4 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-iron-800 tw-ring-1 tw-ring-inset tw-ring-white tw-transition tw-duration-300 tw-ease-out hover:tw-bg-iron-300 hover:tw-ring-iron-300 focus:tw-z-10 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset",
+        className
+      )}
     >
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@components/header/user/HeaderUserConnect.tsx` at line 21, The component
HeaderUserConnect currently concatenates tailwind classes using a template
literal for the className, which can produce conflicting/duplicate classes;
replace this template literal with clsx by importing clsx from 'clsx' and pass
the fixed base class string and the incoming className as separate arguments
(e.g., clsx(baseClasses, className)) in the JSX where the current expression
appears (the className assignment in HeaderUserConnect.tsx) so class merging
follows the project's standard and avoids unpredictable conflicts.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@components/header/user/HeaderUserConnect.tsx`:
- Line 21: The component HeaderUserConnect currently concatenates tailwind
classes using a template literal for the className, which can produce
conflicting/duplicate classes; replace this template literal with clsx by
importing clsx from 'clsx' and pass the fixed base class string and the incoming
className as separate arguments (e.g., clsx(baseClasses, className)) in the JSX
where the current expression appears (the className assignment in
HeaderUserConnect.tsx) so class merging follows the project's standard and
avoids unpredictable conflicts.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 42648507-af34-460e-8f92-7395a34fd878

📥 Commits

Reviewing files that changed from the base of the PR and between 367e77f and c8aaa15.

📒 Files selected for processing (4)
  • components/header/user/HeaderUserConnect.tsx
  • components/waves/public/PublicWaveShell.tsx
  • components/waves/public/usePublicWaveShellState.ts
  • contexts/wave/hooks/useEnhancedWavesListCore.ts
💤 Files with no reviewable changes (1)
  • contexts/wave/hooks/useEnhancedWavesListCore.ts
✅ Files skipped from review due to trivial changes (2)
  • components/waves/public/PublicWaveShell.tsx
  • components/waves/public/usePublicWaveShellState.ts

@sonarqubecloud
Copy link
Copy Markdown

@ragnep ragnep merged commit dfefe59 into main Mar 23, 2026
8 checks passed
@ragnep ragnep deleted the waves-logged-out-ux branch March 23, 2026 12:43
@ragnep ragnep restored the waves-logged-out-ux branch March 23, 2026 12:44
@ragnep ragnep deleted the waves-logged-out-ux branch March 23, 2026 12:50
This was referenced Mar 23, 2026
This was referenced Apr 6, 2026
@coderabbitai coderabbitai Bot mentioned this pull request Apr 14, 2026
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.

2 participants