feat: organize network settings into tabs #264

2026-06-11T16:06:25Z

talksik commented

2026-06-11 16:06:25 +00:00

(Migrated from github.com)

Closes #258

Summary by CodeRabbit

New Features
- Added a tabbed interface to network settings with Members and Plan & Billing sections.
- Introduced a dialog for inviting members to networks via email addresses.
Improvements
- Network creation workflow now routes directly to the members invitation screen.

Closes #258  ## Summary by CodeRabbit * **New Features** * Added a tabbed interface to network settings with Members and Plan & Billing sections. * Introduced a dialog for inviting members to networks via email addresses. * **Improvements** * Network creation workflow now routes directly to the members invitation screen.

coderabbitai[bot] commented

2026-06-11 16:06:39 +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: 02bd8d23-012b-465f-b779-e4e016783942

📥 Commits

Reviewing files that changed from the base of the PR and between c8233c6f0f and aa33622750.

📒 Files selected for processing (2)

js/desktop/src/features/network-settings.tsx
js/desktop/src/features/network-settings/add-members-dialog.tsx

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

js/desktop/src/features/network-settings/add-members-dialog.tsx
js/desktop/src/features/network-settings.tsx

📝 Walkthrough

Walkthrough

This PR refactors network settings from a single-column layout into a tabbed UI controlled by the URL section query parameter, adds a new AddMembersDialog component for inviting members by email, and routes newly created networks to the Members tab with a one-shot onboarding flag that opens the invitation dialog automatically.

Changes

Network Settings Tabbed UI with Member Invitation Onboarding

Layer / File(s)	Summary
Add Members Dialog component `js/desktop/src/features/network-settings/add-members-dialog.tsx`	New dialog component with email chip input, Zod validation, Enter/comma/backspace control, and submit handler that calls `useInviteMembers` and shows a success toast before closing and resetting state.
Settings page tabbed layout and integration `js/desktop/src/features/network-settings.tsx`	Refactors page from single column into vertical `Tabs` UI controlled by the `section` URL param (defaults to `members`). Adds one-shot `addOpen` onboarding initialized from `?add=1` that strips the param after mount. Removes inline `InviteForm`, moves pending invitations into Members tab, renders Billing in Plan & Billing tab. Updates UI components with `SectionHeading` and `Panel` wrapper for consistent styling. Wires "Add members" button to `AddMembersDialog`.
Post-create navigation to members tab `js/desktop/src/features/network-selector.tsx`	Routes newly created networks to the members settings page with `section=members&add=1` query parameters to trigger the invitation dialog onboarding.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant EmailInput as Email Input
  participant Validator as Zod Validator
  participant DialogState as AddMembersDialog State
  participant API as useInviteMembers
  participant Toast

  User->>EmailInput: Type email
  EmailInput->>EmailInput: Commit on Enter/Comma or Blur
  EmailInput->>Validator: Validate email
  Validator-->>DialogState: Add chip or set error
  User->>DialogState: Click Add
  DialogState->>API: mutate(emails)
  API->>Toast: Return success
  Toast->>DialogState: Close and reset

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A tabbed settings home, so neat,
Members invited with emails sweet,
Chips and fields that dance and validate,
From create to onboard—a guided state!
Billing tabs, no more scroll to find,
Network settings, now redesigned! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 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.
Linked Issues check	❓ Inconclusive	The pull request implements the tabbed UI organization for network settings as required by issue `#258`, with no accessible issue details to validate specific coding requirements against.	Provide the detailed requirements from issue `#258` to fully validate that all coding objectives have been met.

✅ 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 'feat: organize network settings into tabs' directly and concisely describes the main change in the pull request, which refactors the settings layout from single-column to a tabbed UI.
Out of Scope Changes check	✅ Passed	All changes are focused on organizing network settings into tabs and adding the AddMembersDialog component, which are directly related to the stated objective of implementing tabbed UI.

_{✏️ 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 worktree-virtual-floating-hamster

_{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/264?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**: `02bd8d23-012b-465f-b779-e4e016783942` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between c8233c6f0f80aac0f9d522748f7fd454db5372c6 and aa336227505ed99f54b5c06e54b21caec6a6061b. </details> <details> <summary>📒 Files selected for processing (2)</summary> * `js/desktop/src/features/network-settings.tsx` * `js/desktop/src/features/network-settings/add-members-dialog.tsx` </details> <details> <summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary> * js/desktop/src/features/network-settings/add-members-dialog.tsx * js/desktop/src/features/network-settings.tsx </details> </details> ---  <details> <summary>📝 Walkthrough</summary> ## Walkthrough This PR refactors network settings from a single-column layout into a tabbed UI controlled by the URL `section` query parameter, adds a new `AddMembersDialog` component for inviting members by email, and routes newly created networks to the Members tab with a one-shot onboarding flag that opens the invitation dialog automatically. ## Changes **Network Settings Tabbed UI with Member Invitation Onboarding** |Layer / File(s)|Summary| |---|---| |**Add Members Dialog component** <br> `js/desktop/src/features/network-settings/add-members-dialog.tsx`|New dialog component with email chip input, Zod validation, Enter/comma/backspace control, and submit handler that calls `useInviteMembers` and shows a success toast before closing and resetting state.| |**Settings page tabbed layout and integration** <br> `js/desktop/src/features/network-settings.tsx`|Refactors page from single column into vertical `Tabs` UI controlled by the `section` URL param (defaults to `members`). Adds one-shot `addOpen` onboarding initialized from `?add=1` that strips the param after mount. Removes inline `InviteForm`, moves pending invitations into Members tab, renders Billing in Plan & Billing tab. Updates UI components with `SectionHeading` and `Panel` wrapper for consistent styling. Wires "Add members" button to `AddMembersDialog`.| |**Post-create navigation to members tab** <br> `js/desktop/src/features/network-selector.tsx`|Routes newly created networks to the members settings page with `section=members&add=1` query parameters to trigger the invitation dialog onboarding.| ## Sequence Diagram(s) ```mermaid sequenceDiagram participant User participant EmailInput as Email Input participant Validator as Zod Validator participant DialogState as AddMembersDialog State participant API as useInviteMembers participant Toast User->>EmailInput: Type email EmailInput->>EmailInput: Commit on Enter/Comma or Blur EmailInput->>Validator: Validate email Validator-->>DialogState: Add chip or set error User->>DialogState: Click Add DialogState->>API: mutate(emails) API->>Toast: Return success Toast->>DialogState: Close and reset ``` ## Estimated code review effort 🎯 3 (Moderate) | ⏱️ ~25 minutes ## Poem > 🐰 A tabbed settings home, so neat, > Members invited with emails sweet, > Chips and fields that dance and validate, > From create to onboard—a guided state! > Billing tabs, no more scroll to find, > Network settings, now redesigned! ✨ </details>   <details> <summary>🚥 Pre-merge checks | ✅ 3 | ❌ 2</summary> ### ❌ 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. | | Linked Issues check | ❓ Inconclusive | The pull request implements the tabbed UI organization for network settings as required by issue `#258`, with no accessible issue details to validate specific coding requirements against. | Provide the detailed requirements from issue `#258` to fully validate that all coding objectives have been met. | <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 'feat: organize network settings into tabs' directly and concisely describes the main change in the pull request, which refactors the settings layout from single-column to a tabbed UI. | | Out of Scope Changes check | ✅ Passed | All changes are focused on organizing network settings into tabs and adding the AddMembersDialog component, which are directly related to the stated objective of implementing tabbed UI. | </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 `worktree-virtual-floating-hamster` </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-11 16:13:44 +00:00

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

Actionable comments posted: 1

🧹 Nitpick comments (2)

js/desktop/src/features/network-settings/add-members-dialog.tsx (2)
30-37: ⚡ Quick win

Use the shared Button for the chip remove control.

This icon-only action is still an app button, and the raw element skips the standard focus/interaction treatment the design system already gives you. As per coding guidelines, "Use design system components from shadcn whenever possible; add new shadcn components to the design system before using them in the app."
Possible refactor
-      <button
-        type="button"
-        onClick={onRemove}
-        aria-label={`Remove ${email}`}
-        className="text-muted-foreground hover:text-foreground"
-      >
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        onClick={onRemove}
+        aria-label={`Remove ${email}`}
+        className="text-muted-foreground hover:text-foreground size-5"
+      >
         <X className="size-3" />
-      </button>
+      </Button>
🤖 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/features/network-settings/add-members-dialog.tsx` around lines
30 - 37, Replace the raw HTML button used for removing a chip with the shared
design-system Button component: keep the onRemove handler (onClick={onRemove}),
aria-label={`Remove ${email}`}, and the <X /> icon as its child, and apply the
equivalent visual/tactile props (e.g., ghost/icon variant or appropriate size
and text-muted-foreground/hover styles) to the Button so it receives the
standard focus and interaction behavior; add the Button import at the top of
add-members-dialog.tsx and remove the raw <button> element.
Source: Coding guidelines

102-111: Don’t add local onError for invites; refactor the chip remove affordance to use Button.

Invite failures should already surface via the global React Query mutationCache.onError toast from createQueryClient() (wired in App.tsx), so handling only onSuccess here isn’t silent.

EmailChip uses a raw <button> for the remove action even though the shared shadcn Button exists; switch the remove affordance to Button for design-system consistency.
🤖 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/features/network-settings/add-members-dialog.tsx` around lines
102 - 111, Remove any local onError handling from the inviteMembers.mutate call
and keep only onSuccess as shown (letting the global React Query
mutationCache.onError handle failures); then update the EmailChip component so
its remove affordance uses the shared shadcn Button component instead of a raw
<button>—replace the raw button in EmailChip with Button and wire its onClick to
the existing remove handler, keeping prop names and behavior unchanged
(references: inviteMembers.mutate, EmailChip, Button, handleOpenChange).

🤖 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/features/network-settings.tsx`:
- Around line 185-190: The cleanup effect currently captures the render-time
searchParams and mutates that snapshot which can clobber newer URL state (e.g.,
updated section tabs); change the setSearchParams call inside the useEffect to
the functional form setSearchParams(prev => ...) so you operate on the latest
params, create a new URLSearchParams from prev, call delete('add') on that new
instance, and return it (preserving { replace: true } behavior) — follow the
same pattern used in network-root.tsx and update the useEffect that references
searchParams and setSearchParams accordingly.

---

Nitpick comments:
In `@js/desktop/src/features/network-settings/add-members-dialog.tsx`:
- Around line 30-37: Replace the raw HTML button used for removing a chip with
the shared design-system Button component: keep the onRemove handler
(onClick={onRemove}), aria-label={`Remove ${email}`}, and the <X /> icon as its
child, and apply the equivalent visual/tactile props (e.g., ghost/icon variant
or appropriate size and text-muted-foreground/hover styles) to the Button so it
receives the standard focus and interaction behavior; add the Button import at
the top of add-members-dialog.tsx and remove the raw <button> element.
- Around line 102-111: Remove any local onError handling from the
inviteMembers.mutate call and keep only onSuccess as shown (letting the global
React Query mutationCache.onError handle failures); then update the EmailChip
component so its remove affordance uses the shared shadcn Button component
instead of a raw <button>—replace the raw button in EmailChip with Button and
wire its onClick to the existing remove handler, keeping prop names and behavior
unchanged (references: inviteMembers.mutate, EmailChip, Button,
handleOpenChange).

🪄 Autofix (Beta)

✅ Autofix completed

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6d1b2267-8eb8-4ac6-b48e-b571052d4d05

📥 Commits

Reviewing files that changed from the base of the PR and between cf94003b3f and b46df94124.

📒 Files selected for processing (3)

js/desktop/src/features/network-selector.tsx
js/desktop/src/features/network-settings.tsx
js/desktop/src/features/network-settings/add-members-dialog.tsx

**Actionable comments posted: 1** <details> <summary>🧹 Nitpick comments (2)</summary><blockquote> <details> <summary>js/desktop/src/features/network-settings/add-members-dialog.tsx (2)</summary><blockquote> `30-37`: _⚡ Quick win_ **Use the shared `Button` for the chip remove control.** This icon-only action is still an app button, and the raw element skips the standard focus/interaction treatment the design system already gives you. As per coding guidelines, "Use design system components from shadcn whenever possible; add new shadcn components to the design system before using them in the app." <details> <summary>Possible refactor</summary> ```diff - <button - type="button" - onClick={onRemove} - aria-label={`Remove ${email}`} - className="text-muted-foreground hover:text-foreground" - > + <Button + type="button" + variant="ghost" + size="icon-sm" + onClick={onRemove} + aria-label={`Remove ${email}`} + className="text-muted-foreground hover:text-foreground size-5" + > <X className="size-3" /> - </button> + </Button> ``` </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/features/network-settings/add-members-dialog.tsx` around lines 30 - 37, Replace the raw HTML button used for removing a chip with the shared design-system Button component: keep the onRemove handler (onClick={onRemove}), aria-label={`Remove ${email}`}, and the <X /> icon as its child, and apply the equivalent visual/tactile props (e.g., ghost/icon variant or appropriate size and text-muted-foreground/hover styles) to the Button so it receives the standard focus and interaction behavior; add the Button import at the top of add-members-dialog.tsx and remove the raw <button> element. ``` </details>  _Source: Coding guidelines_ --- `102-111`: **Don’t add local `onError` for invites; refactor the chip remove affordance to use `Button`.** - Invite failures should already surface via the global React Query `mutationCache.onError` toast from `createQueryClient()` (wired in `App.tsx`), so handling only `onSuccess` here isn’t silent. - `EmailChip` uses a raw `<button>` for the remove action even though the shared shadcn `Button` exists; switch the remove affordance to `Button` for design-system consistency. <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/features/network-settings/add-members-dialog.tsx` around lines 102 - 111, Remove any local onError handling from the inviteMembers.mutate call and keep only onSuccess as shown (letting the global React Query mutationCache.onError handle failures); then update the EmailChip component so its remove affordance uses the shared shadcn Button component instead of a raw <button>—replace the raw button in EmailChip with Button and wire its onClick to the existing remove handler, keeping prop names and behavior unchanged (references: inviteMembers.mutate, EmailChip, Button, handleOpenChange). ``` </details>  </blockquote></details> </blockquote></details> <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/features/network-settings.tsx`: - Around line 185-190: The cleanup effect currently captures the render-time searchParams and mutates that snapshot which can clobber newer URL state (e.g., updated section tabs); change the setSearchParams call inside the useEffect to the functional form setSearchParams(prev => ...) so you operate on the latest params, create a new URLSearchParams from prev, call delete('add') on that new instance, and return it (preserving { replace: true } behavior) — follow the same pattern used in network-root.tsx and update the useEffect that references searchParams and setSearchParams accordingly. --- Nitpick comments: In `@js/desktop/src/features/network-settings/add-members-dialog.tsx`: - Around line 30-37: Replace the raw HTML button used for removing a chip with the shared design-system Button component: keep the onRemove handler (onClick={onRemove}), aria-label={`Remove ${email}`}, and the <X /> icon as its child, and apply the equivalent visual/tactile props (e.g., ghost/icon variant or appropriate size and text-muted-foreground/hover styles) to the Button so it receives the standard focus and interaction behavior; add the Button import at the top of add-members-dialog.tsx and remove the raw <button> element. - Around line 102-111: Remove any local onError handling from the inviteMembers.mutate call and keep only onSuccess as shown (letting the global React Query mutationCache.onError handle failures); then update the EmailChip component so its remove affordance uses the shared shadcn Button component instead of a raw <button>—replace the raw button in EmailChip with Button and wire its onClick to the existing remove handler, keeping prop names and behavior unchanged (references: inviteMembers.mutate, EmailChip, Button, handleOpenChange). ``` </details> <details> <summary>🪄 Autofix (Beta)</summary> ✅ Autofix completed </details> --- <details> <summary>ℹ️ Review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: defaults **Review profile**: CHILL **Plan**: Pro Plus **Run ID**: `6d1b2267-8eb8-4ac6-b48e-b571052d4d05` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between cf94003b3fd652a107d52f2a113bdbe54bc94350 and b46df94124e8a4afe7c496fe81165f627c6296b5. </details> <details> <summary>📒 Files selected for processing (3)</summary> * `js/desktop/src/features/network-selector.tsx` * `js/desktop/src/features/network-settings.tsx` * `js/desktop/src/features/network-settings/add-members-dialog.tsx` </details> </details>

js/desktop/src/features/network-settings.tsx

						
				@@ -181,7 +156,7 @@ export default function NetworkSettingsPage() {

				  const { networkId } = useParams<{ networkId: string }>();

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

2026-06-11 16:13:43 +00:00

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="js/desktop/src/features/network-settings.tsx"

# Show the relevant block around the reported lines
sed -n '150,220p' "$FILE" | cat -n

# Find all setSearchParams / useSearchParams usages in this file
rg -n "useSearchParams|setSearchParams|searchParams\.|get\('add'|add=|delete\('add'\)" "$FILE"

# Show any other URL/search-param effects in this file
rg -n "useEffect\\(\\s*\\(\\)\\s*=>|useEffect\\(\\s*\\(" "$FILE"

# Also search in nearby related files for shared query-param conventions
rg -n "network-settings\\.tsx|useSearchParams|setSearchParams|add'|section" js/desktop/src/features

Repository: flowy-live/llink

Length of output: 6719

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect the rest of network-settings.tsx around the tabs/dialog and any other search param usage
FILE="js/desktop/src/features/network-settings.tsx"
sed -n '1,260p' "$FILE" | cat -n

# Inspect network-root.tsx where searchParams are also managed
FILE2="js/desktop/src/features/network-root.tsx"
sed -n '1,140p' "$FILE2" | cat -n

# Inspect network-selector usage that navigates with section/add
FILE3="js/desktop/src/features/network-selector.tsx"
sed -n '1,220p' "$FILE3" | cat -n

# Check for any additional setSearchParams in the same feature folder
rg -n "setSearchParams\\(" js/desktop/src/features/network-*.tsx js/desktop/src/features/network-root.tsx

Repository: flowy-live/llink

Length of output: 24667

Avoid clobbering URL state when stripping add=1
In js/desktop/src/features/network-settings.tsx (around lines 185-190), the cleanup effect clones the render-time searchParams before deleting add; if section (tabs) is updated before the effect runs, that newer change can be overwritten. Switch to the functional setSearchParams(prev => ...) pattern (like js/desktop/src/features/network-root.tsx) and delete add from prev instead of the captured snapshot.

🤖 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/features/network-settings.tsx` around lines 185 - 190, The
cleanup effect currently captures the render-time searchParams and mutates that
snapshot which can clobber newer URL state (e.g., updated section tabs); change
the setSearchParams call inside the useEffect to the functional form
setSearchParams(prev => ...) so you operate on the latest params, create a new
URLSearchParams from prev, call delete('add') on that new instance, and return
it (preserving { replace: true } behavior) — follow the same pattern used in
network-root.tsx and update the useEffect that references searchParams and
setSearchParams accordingly.

✅ Addressed in commit c8233c6

_⚠️ Potential issue_ | _🟡 Minor_ <details> <summary>🧩 Analysis chain</summary> 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail FILE="js/desktop/src/features/network-settings.tsx" # Show the relevant block around the reported lines sed -n '150,220p' "$FILE" | cat -n # Find all setSearchParams / useSearchParams usages in this file rg -n "useSearchParams|setSearchParams|searchParams\.|get$'add'|add=|delete\('add'$" "$FILE" # Show any other URL/search-param effects in this file rg -n "useEffect\$\\s*\\(\$\\s*=>|useEffect\\(\\s*\\(" "$FILE" # Also search in nearby related files for shared query-param conventions rg -n "network-settings\\.tsx|useSearchParams|setSearchParams|add'|section" js/desktop/src/features ``` Repository: flowy-live/llink Length of output: 6719 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail # Inspect the rest of network-settings.tsx around the tabs/dialog and any other search param usage FILE="js/desktop/src/features/network-settings.tsx" sed -n '1,260p' "$FILE" | cat -n # Inspect network-root.tsx where searchParams are also managed FILE2="js/desktop/src/features/network-root.tsx" sed -n '1,140p' "$FILE2" | cat -n # Inspect network-selector usage that navigates with section/add FILE3="js/desktop/src/features/network-selector.tsx" sed -n '1,220p' "$FILE3" | cat -n # Check for any additional setSearchParams in the same feature folder rg -n "setSearchParams\\(" js/desktop/src/features/network-*.tsx js/desktop/src/features/network-root.tsx ``` Repository: flowy-live/llink Length of output: 24667 --- </details> **Avoid clobbering URL state when stripping `add=1`** In `js/desktop/src/features/network-settings.tsx` (around lines 185-190), the cleanup effect clones the render-time `searchParams` before deleting `add`; if `section` (tabs) is updated before the effect runs, that newer change can be overwritten. Switch to the functional `setSearchParams(prev => ...)` pattern (like `js/desktop/src/features/network-root.tsx`) and delete `add` from `prev` instead of the captured snapshot. <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/features/network-settings.tsx` around lines 185 - 190, The cleanup effect currently captures the render-time searchParams and mutates that snapshot which can clobber newer URL state (e.g., updated section tabs); change the setSearchParams call inside the useEffect to the functional form setSearchParams(prev => ...) so you operate on the latest params, create a new URLSearchParams from prev, call delete('add') on that new instance, and return it (preserving { replace: true } behavior) — follow the same pattern used in network-root.tsx and update the useEffect that references searchParams and setSearchParams accordingly. ``` </details>    ✅ Addressed in commit c8233c6

coderabbitai[bot] commented

2026-06-11 16:51:13 +00:00

(Migrated from github.com)

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

Fixes Applied Successfully

Fixed 2 file(s) based on 1 unresolved review comment.

Files modified:

js/desktop/src/features/network-settings.tsx
js/desktop/tsconfig.json

Commit: c8233c6f0f80aac0f9d522748f7fd454db5372c6

The changes have been pushed to the worktree-virtual-floating-hamster branch.

Time taken: 5m 33s

> [!NOTE] > Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it. ## Fixes Applied Successfully Fixed 2 file(s) based on 1 unresolved review comment. **Files modified:** - `js/desktop/src/features/network-settings.tsx` - `js/desktop/tsconfig.json` **Commit:** `c8233c6f0f80aac0f9d522748f7fd454db5372c6` The changes have been pushed to the `worktree-virtual-floating-hamster` branch. **Time taken:** `5m 33s`

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: FlowyLabs/llink#264

				`@@ -181,7 +156,7 @@ export default function NetworkSettingsPage() {`
				`const { networkId } = useParams<{ networkId: string }>();`