Improve stream sidebar experience and avatar affordance #284

2026-06-13T18:26:40Z

talksik commented

2026-06-13 18:26:40 +00:00

(Migrated from github.com)

Closes #283
Closes #282

Summary by CodeRabbit

Improvements
- Sidebar: narrower layout, shows message counts, header no longer displays a stream name, and text items truncate sooner
- Stream view now initializes to player mode by default with unchanged toggle between player and list
Style
- Refined profile avatar sizing and fallback text sizing on Settings
- Adjusted camera icon dimensions for clearer visual hierarchy
- Ensured scroll area renders full-width content

Closes #283 Closes #282  ## Summary by CodeRabbit * **Improvements** * Sidebar: narrower layout, shows message counts, header no longer displays a stream name, and text items truncate sooner * Stream view now initializes to player mode by default with unchanged toggle between player and list * **Style** * Refined profile avatar sizing and fallback text sizing on Settings * Adjusted camera icon dimensions for clearer visual hierarchy * Ensured scroll area renders full-width content

coderabbitai[bot] commented

2026-06-13 18:26:53 +00:00

(Migrated from github.com)

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b6125fe9-d4e6-43b8-99f0-fa4a3b077ef4

📥 Commits

Reviewing files that changed from the base of the PR and between 3175b04d3c and ba0fbcb4ba.

📒 Files selected for processing (1)

js/desktop/src/features/particles/stream-view.tsx

💤 Files with no reviewable changes (1)

js/desktop/src/features/particles/stream-view.tsx

📝 Walkthrough

Walkthrough

Removes streamName prop from StreamListSidebar and its callsites; tightens text clamp; defaults useStreamViewMode to 'player'; enforces ScrollArea child full width; and adjusts HumanAvatar sizing and camera overlay icon.

Changes

Stream Sidebar and Layout Refinements

Layer / File(s)	Summary
Stream sidebar component refactoring `js/desktop/src/features/particles/stream-list-sidebar.tsx`	`StreamListSidebarProps` removes `streamName`; component props destructuring drops `streamName`; header no longer displays streamName and shows "{items.length} messages"; text particle clamp reduced from `line-clamp-3` to `line-clamp-2`.
Stream view integration `js/desktop/src/features/particles/stream-view.tsx`	`useStreamViewMode` is now called without arguments; StreamView no longer passes `streamName={streamParticle.properties.name}` to StreamListSidebar.
View mode initial state `js/desktop/src/hooks/use-stream-view-mode.ts`	`useStreamViewMode` becomes parameterless and initializes `mode` to `'player'`, removing prior stream-id-based decide logic.
ScrollArea child width enforcement `js/desktop/src/components/ui/scroll-area.tsx`	`ScrollArea` root `className` adds `[&>div]:!w-full` to force child div full width.
Avatar styling enhancements `js/desktop/src/features/settings-page.tsx`	`HumanAvatar` `className` changed to `size-16` and `fallbackClassName` updated with `text-xl`; camera overlay icon size reduced to `size-2.5`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

flowy-live/llink#279: Related refactors to StreamListSidebar and view-mode wiring.

Poem

I hop along the sidebar's edge,
I clip the lines and trim the ledge.
Avatars snug, the camera small,
View starts as player — ready for all. 🐇

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The hook simplification in useStreamViewMode appears to go beyond proportions/affordance requirements and may represent scope creep.	Clarify whether removing stream-id-driven mode re-evaluation logic from useStreamViewMode was intentional or represents unintended scope expansion beyond the stated UI improvements.
Docstring Coverage	⚠️ Warning	Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: improving the stream sidebar experience through UI adjustments and improving avatar affordance via styling updates.
Linked Issues check	✅ Passed	Changes address both linked issues: `#283` sidebar proportions improved via scroll-area styling and streamName removal for narrower sidebar; `#282` avatar affordance enhanced through HumanAvatar styling adjustments.

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

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

[![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/flowy-live/llink/pull/284?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)  No actionable comments were generated in the recent review. 🎉 <details> <summary>ℹ️ Recent review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: defaults **Review profile**: CHILL **Plan**: Pro Plus **Run ID**: `b6125fe9-d4e6-43b8-99f0-fa4a3b077ef4` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 3175b04d3c666d7bc1715b349fa141d55fa462f2 and ba0fbcb4bab9103444fe2414ff84d1bce2d516c0. </details> <details> <summary>📒 Files selected for processing (1)</summary> * `js/desktop/src/features/particles/stream-view.tsx` </details> <details> <summary>💤 Files with no reviewable changes (1)</summary> * js/desktop/src/features/particles/stream-view.tsx </details> </details> ---  <details> <summary>📝 Walkthrough</summary> ## Walkthrough Removes `streamName` prop from StreamListSidebar and its callsites; tightens text clamp; defaults useStreamViewMode to 'player'; enforces ScrollArea child full width; and adjusts HumanAvatar sizing and camera overlay icon. ## Changes **Stream Sidebar and Layout Refinements** |Layer / File(s)|Summary| |---|---| |**Stream sidebar component refactoring** <br> `js/desktop/src/features/particles/stream-list-sidebar.tsx`|`StreamListSidebarProps` removes `streamName`; component props destructuring drops `streamName`; header no longer displays streamName and shows "{items.length} messages"; text particle clamp reduced from `line-clamp-3` to `line-clamp-2`.| |**Stream view integration** <br> `js/desktop/src/features/particles/stream-view.tsx`|`useStreamViewMode` is now called without arguments; StreamView no longer passes `streamName={streamParticle.properties.name}` to StreamListSidebar.| |**View mode initial state** <br> `js/desktop/src/hooks/use-stream-view-mode.ts`|`useStreamViewMode` becomes parameterless and initializes `mode` to `'player'`, removing prior stream-id-based decide logic.| |**ScrollArea child width enforcement** <br> `js/desktop/src/components/ui/scroll-area.tsx`|`ScrollArea` root `className` adds `[&>div]:!w-full` to force child div full width.| |**Avatar styling enhancements** <br> `js/desktop/src/features/settings-page.tsx`|`HumanAvatar` `className` changed to `size-16` and `fallbackClassName` updated with `text-xl`; camera overlay icon size reduced to `size-2.5`.| ## Estimated code review effort 🎯 3 (Moderate) | ⏱️ ~20 minutes ## Possibly related PRs - [flowy-live/llink#279](https://github.com/flowy-live/llink/pull/279): Related refactors to StreamListSidebar and view-mode wiring. ## Poem > I hop along the sidebar's edge, > I clip the lines and trim the ledge. > Avatars snug, the camera small, > View starts as player — ready for all. 🐇 </details>   <details> <summary>🚥 Pre-merge checks | ✅ 3 | ❌ 2</summary> ### ❌ Failed checks (2 warnings) | Check name | Status | Explanation | Resolution | | :------------------------: | :--------- | :----------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Out of Scope Changes check | ⚠️ Warning | The hook simplification in useStreamViewMode appears to go beyond proportions/affordance requirements and may represent scope creep. | Clarify whether removing stream-id-driven mode re-evaluation logic from useStreamViewMode was intentional or represents unintended scope expansion beyond the stated UI improvements. | | Docstring Coverage | ⚠️ Warning | Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. | <details> <summary>✅ Passed checks (3 passed)</summary> | Check name | Status | Explanation | | :-----------------: | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. | | Title check | ✅ Passed | The title accurately summarizes the main changes: improving the stream sidebar experience through UI adjustments and improving avatar affordance via styling updates. | | Linked Issues check | ✅ Passed | Changes address both linked issues: `#283` sidebar proportions improved via scroll-area styling and streamName removal for narrower sidebar; `#282` avatar affordance enhanced through HumanAvatar styling adjustments. | </details> <sub>✏️ Tip: You can configure your own custom pre-merge checks in the settings.</sub> </details>   <details> <summary>✨ Finishing Touches</summary> <details> <summary>📝 Generate docstrings</summary> - [ ]  Create stacked PR - [ ]  Commit on current branch </details> <details> <summary>🧪 Generate unit tests (beta)</summary> - [ ]  Create PR with unit tests - [ ]  Commit unit tests in branch `experience-nits` </details> </details>   --- <sub>Comment `@coderabbitai help` to get the list of available commands and usage tips.</sub>

coderabbitai[bot] (Migrated from github.com) reviewed 2026-06-13 18:29:32 +00:00

coderabbitai[bot] (Migrated from github.com) left a comment

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@js/desktop/src/components/ui/scroll-area.tsx`:
- Line 19: The Tailwind important modifier is placed before the utility in the
className string inside the ScrollArea component; change the arbitrary variant
"[&>div]:!w-full" to place the ! after the utility like "[&>div]:w-full!" so it
conforms to Tailwind v4 syntax; update the className assignment used in the
component (the string containing "focus-visible:ring-ring/50 size-full
rounded-[inherit] transition-[color,box-shadow] outline-none
focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full") to use the
corrected "[&>div]:w-full!" token.

In `@js/desktop/src/hooks/use-stream-view-mode.ts`:
- Line 21: The initial state for mode was changed to a constant 'player',
causing inconsistent behavior; restore the lazy initializer so the state is
computed via decideMode(streamParticle, userId) on first mount (i.e., change the
useState in use-stream-view-mode.ts back to useState<StreamViewMode>(() =>
decideMode(streamParticle, userId))). Ensure this makes the initial mount match
the navigation recomputation that already calls decideMode; alternatively, if
starting always in 'player' was intentional, document that rationale and remove
the navigation re-computation and the now-unused decideMode function to keep
behavior consistent.

🪄 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 Plus

Run ID: 05fb4bae-9ed4-4693-a929-ca4778cf53bf

📥 Commits

Reviewing files that changed from the base of the PR and between 9249cb4107 and 3381ff0b02.

📒 Files selected for processing (5)

js/desktop/src/components/ui/scroll-area.tsx
js/desktop/src/features/particles/stream-list-sidebar.tsx
js/desktop/src/features/particles/stream-view.tsx
js/desktop/src/features/settings-page.tsx
js/desktop/src/hooks/use-stream-view-mode.ts

💤 Files with no reviewable changes (1)

js/desktop/src/features/particles/stream-view.tsx

**Actionable comments posted: 2** <details> <summary>🤖 Prompt for all review comments with AI agents</summary> ``` Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. Inline comments: In `@js/desktop/src/components/ui/scroll-area.tsx`: - Line 19: The Tailwind important modifier is placed before the utility in the className string inside the ScrollArea component; change the arbitrary variant "[&>div]:!w-full" to place the ! after the utility like "[&>div]:w-full!" so it conforms to Tailwind v4 syntax; update the className assignment used in the component (the string containing "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full") to use the corrected "[&>div]:w-full!" token. In `@js/desktop/src/hooks/use-stream-view-mode.ts`: - Line 21: The initial state for mode was changed to a constant 'player', causing inconsistent behavior; restore the lazy initializer so the state is computed via decideMode(streamParticle, userId) on first mount (i.e., change the useState in use-stream-view-mode.ts back to useState<StreamViewMode>(() => decideMode(streamParticle, userId))). Ensure this makes the initial mount match the navigation recomputation that already calls decideMode; alternatively, if starting always in 'player' was intentional, document that rationale and remove the navigation re-computation and the now-unused decideMode function to keep behavior consistent. ``` </details> <details> <summary>🪄 Autofix (Beta)</summary> Fix all unresolved CodeRabbit comments on this PR: - [ ]  Push a commit to this branch (recommended) - [ ]  Create a new PR with the fixes </details> --- <details> <summary>ℹ️ Review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: defaults **Review profile**: CHILL **Plan**: Pro Plus **Run ID**: `05fb4bae-9ed4-4693-a929-ca4778cf53bf` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 9249cb4107fc1f5bcc4516740f1e793c0f4da778 and 3381ff0b025daf6df02ab10680e869b1ba4313c4. </details> <details> <summary>📒 Files selected for processing (5)</summary> * `js/desktop/src/components/ui/scroll-area.tsx` * `js/desktop/src/features/particles/stream-list-sidebar.tsx` * `js/desktop/src/features/particles/stream-view.tsx` * `js/desktop/src/features/settings-page.tsx` * `js/desktop/src/hooks/use-stream-view-mode.ts` </details> <details> <summary>💤 Files with no reviewable changes (1)</summary> * js/desktop/src/features/particles/stream-view.tsx </details> </details>

js/desktop/src/components/ui/scroll-area.tsx

						
				@@ -18,3 +18,3 @@

				        data-slot="scroll-area-viewport"

				        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"

				        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full"

				      >

coderabbitai[bot] (Migrated from github.com) commented

2026-06-13 18:29:32 +00:00

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🌐 Web query:

Tailwind CSS v4 important modifier syntax arbitrary variants

💡 Result:

In Tailwind CSS v4, the syntax and handling for important modifiers and arbitrary variants have been updated to align with standard CSS conventions and a CSS-first configuration approach. Important Modifier Syntax In Tailwind v4, the important modifier (!) is placed at the end of the utility class, mirroring native CSS where!important follows the declaration [1][2][3]. - Example: Instead of!text-blue-500 (v3 style), use text-blue-500! [4][2][3]. - This applies to utilities in HTML as well as those used within @apply directives in CSS [5][3]. - Global important: To apply!important to all utility classes globally, add the important keyword to the Tailwind import statement in your CSS: @import "tailwindcss" important; [6][7]. You can also wrap all utilities in a custom selector by specifying it, for example: @import "tailwindcss" important(#app); [6]. Arbitrary Variants Arbitrary variants allow for on-the-fly selector modification directly in your HTML using square bracket notation, similar to arbitrary values [8][9]. - Syntax: They are written as [selector], where the ampersand (&) represents the current element [10]. - Example: [

...

] applies styles to child list items [10]. - If a selector contains spaces, use an underscore (e.g., [&_p]:text-blue-500) [8]. - For frequently used variants, Tailwind v4 introduces the @custom-variant directive in CSS, which allows you to define reusable variant selectors without requiring JavaScript plugins [11][12]. Top Results: [4][6][2][8][3]

Citations:

Fix Tailwind v4 important modifier placement in scroll-area.tsx.

In Tailwind v4, ! must come after the utility (even inside arbitrary variants), so [&>div]:w-full! instead of [&>div]:!w-full.

🔧 Proposed fix

-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:w-full!"

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@js/desktop/src/components/ui/scroll-area.tsx` at line 19, The Tailwind
important modifier is placed before the utility in the className string inside
the ScrollArea component; change the arbitrary variant "[&>div]:!w-full" to
place the ! after the utility like "[&>div]:w-full!" so it conforms to Tailwind
v4 syntax; update the className assignment used in the component (the string
containing "focus-visible:ring-ring/50 size-full rounded-[inherit]
transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
focus-visible:outline-1 [&>div]:!w-full") to use the corrected "[&>div]:w-full!"
token.

_⚠️ Potential issue_ | _🔴 Critical_ <details> <summary>🧩 Analysis chain</summary> 🌐 Web query: `Tailwind CSS v4 important modifier syntax arbitrary variants` 💡 Result: In Tailwind CSS v4, the syntax and handling for important modifiers and arbitrary variants have been updated to align with standard CSS conventions and a CSS-first configuration approach. Important Modifier Syntax In Tailwind v4, the important modifier (!) is placed at the end of the utility class, mirroring native CSS where!important follows the declaration [1][2][3]. - Example: Instead of!text-blue-500 (v3 style), use text-blue-500! [4][2][3]. - This applies to utilities in HTML as well as those used within `@apply` directives in CSS [5][3]. - Global important: To apply!important to all utility classes globally, add the important keyword to the Tailwind import statement in your CSS: `@import` "tailwindcss" important; [6][7]. You can also wrap all utilities in a custom selector by specifying it, for example: `@import` "tailwindcss" important(`#app`); [6]. Arbitrary Variants Arbitrary variants allow for on-the-fly selector modification directly in your HTML using square bracket notation, similar to arbitrary values [8][9]. - Syntax: They are written as [selector], where the ampersand (&) represents the current element [10]. - Example: [<div class="[&>li]:py-2">...</div>] applies styles to child list items [10]. - If a selector contains spaces, use an underscore (e.g., [&_p]:text-blue-500) [8]. - For frequently used variants, Tailwind v4 introduces the `@custom-variant` directive in CSS, which allows you to define reusable variant selectors without requiring JavaScript plugins [11][12]. Top Results: [4][6][2][8][3] Citations: - 1: https://stackoverflow.com/questions/75664539/tailwind-css-class-precedence-is-not-respected - 2: https://playbooks.com/skills/fusengine/agents/tailwindcss-v4 - 3: https://tailwindcss.com/docs/upgrade-guide - 4: https://tailwindlabs-tailwindcss.mintlify.app/advanced/important-modifier - 5: https://github.com/tailwindlabs/tailwindcss/pull/14434 - 6: https://github.com/tailwindlabs/tailwindcss/pull/14448 - 7: https://github.com/tailwindlabs/tailwindcss/discussions/17994 - 8: https://tailwindcss.com/docs/hover-focus-and-other-states - 9: https://tailwindcss.com/docs/adding-custom-styles - 10: https://llmbestpractices.com/frontend/tailwind-arbitrary-values - 11: https://tailwindcss.com/docs/functions-and-directives - 12: https://deepwiki.com/tlq5l/tailwindcss-v4-skill/2.4-the-@variant-and-@custom-variant-directives --- </details> **Fix Tailwind v4 important modifier placement in `scroll-area.tsx`.** In Tailwind v4, `!` must come **after** the utility (even inside arbitrary variants), so `[&>div]:w-full!` instead of `[&>div]:!w-full`. <details> <summary>🔧 Proposed fix</summary> ```diff - className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full" + className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:w-full!" ``` </details> <details> <summary>🤖 Prompt for AI Agents</summary> ``` Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@js/desktop/src/components/ui/scroll-area.tsx` at line 19, The Tailwind important modifier is placed before the utility in the className string inside the ScrollArea component; change the arbitrary variant "[&>div]:!w-full" to place the ! after the utility like "[&>div]:w-full!" so it conforms to Tailwind v4 syntax; update the className assignment used in the component (the string containing "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!w-full") to use the corrected "[&>div]:w-full!" token. ``` </details>

js/desktop/src/hooks/use-stream-view-mode.ts

coderabbitai[bot] (Migrated from github.com) commented

2026-06-13 18:29:32 +00:00

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Inconsistent initial mode behavior degrades UX for caught-up users.

Removing the lazy initializer that computed the initial mode via decideMode(streamParticle, userId) creates a behavioral inconsistency:

First mount: Mode is always 'player', regardless of whether the user is caught up with the stream.
Navigation (lines 25-27): Mode is correctly computed via decideMode, so subsequent streams show the appropriate view.

This means users who are caught up with a stream will initially see the player view when they should see the list view, but navigating to another stream and back will show the correct mode. The inconsistency is confusing and degrades the user experience.

Recommended fix: Restore the lazy initializer to ensure consistent behavior on both initial mount and navigation.

🔄 Proposed fix to restore consistent initial mode

-  const [mode, setMode] = useState<StreamViewMode>('player');
+  const [mode, setMode] = useState<StreamViewMode>(() =>
+    decideMode(streamParticle, userId)
+  );

If this change was intentional (e.g., to always start in player mode for layout reasons), please document the rationale and consider removing the navigation re-computation logic (lines 23-28) and the now-mostly-unused decideMode function for consistency.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  const [mode, setMode] = useState<StreamViewMode>(() =>
    decideMode(streamParticle, userId)
  );

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@js/desktop/src/hooks/use-stream-view-mode.ts` at line 21, The initial state
for mode was changed to a constant 'player', causing inconsistent behavior;
restore the lazy initializer so the state is computed via
decideMode(streamParticle, userId) on first mount (i.e., change the useState in
use-stream-view-mode.ts back to useState<StreamViewMode>(() =>
decideMode(streamParticle, userId))). Ensure this makes the initial mount match
the navigation recomputation that already calls decideMode; alternatively, if
starting always in 'player' was intentional, document that rationale and remove
the navigation re-computation and the now-unused decideMode function to keep
behavior consistent.

_⚠️ Potential issue_ | _🟠 Major_ | _⚡ Quick win_ **Inconsistent initial mode behavior degrades UX for caught-up users.** Removing the lazy initializer that computed the initial mode via `decideMode(streamParticle, userId)` creates a behavioral inconsistency: - **First mount**: Mode is always `'player'`, regardless of whether the user is caught up with the stream. - **Navigation** (lines 25-27): Mode is correctly computed via `decideMode`, so subsequent streams show the appropriate view. This means users who are caught up with a stream will initially see the player view when they should see the list view, but navigating to another stream and back will show the correct mode. The inconsistency is confusing and degrades the user experience. **Recommended fix**: Restore the lazy initializer to ensure consistent behavior on both initial mount and navigation. <details> <summary>🔄 Proposed fix to restore consistent initial mode</summary> ```diff - const [mode, setMode] = useState<StreamViewMode>('player'); + const [mode, setMode] = useState<StreamViewMode>(() => + decideMode(streamParticle, userId) + ); ``` </details> If this change was intentional (e.g., to always start in player mode for layout reasons), please document the rationale and consider removing the navigation re-computation logic (lines 23-28) and the now-mostly-unused `decideMode` function for consistency.  <details> <summary>📝 Committable suggestion</summary> > ‼️ **IMPORTANT** > Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements. ```suggestion const [mode, setMode] = useState<StreamViewMode>(() => decideMode(streamParticle, userId) ); ``` </details>  <details> <summary>🤖 Prompt for AI Agents</summary> ``` Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@js/desktop/src/hooks/use-stream-view-mode.ts` at line 21, The initial state for mode was changed to a constant 'player', causing inconsistent behavior; restore the lazy initializer so the state is computed via decideMode(streamParticle, userId) on first mount (i.e., change the useState in use-stream-view-mode.ts back to useState<StreamViewMode>(() => decideMode(streamParticle, userId))). Ensure this makes the initial mount match the navigation recomputation that already calls decideMode; alternatively, if starting always in 'player' was intentional, document that rationale and remove the navigation re-computation and the now-unused decideMode function to keep behavior consistent. ``` </details>

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: FlowyLabs/llink#284