feat: allow clicking keyboard hints throughout #266

2026-06-11T17:25:42Z

talksik commented

2026-06-11 17:25:42 +00:00

(Migrated from github.com)

Closes #186

Summary by CodeRabbit

New Features
- Added a unified keyboard-hint control and styled key chips for interactive shortcuts across the app.
Style
- Replaced scattered inline key/kbd hints with the unified control, standardizing appearance and behavior in overlays, editors, playback, and navigation.
- Improved hint wording, titles/ARIA, and click/tap affordances for keyboard shortcuts.

Closes #186  ## Summary by CodeRabbit * **New Features** * Added a unified keyboard-hint control and styled key chips for interactive shortcuts across the app. * **Style** * Replaced scattered inline key/kbd hints with the unified control, standardizing appearance and behavior in overlays, editors, playback, and navigation. * Improved hint wording, titles/ARIA, and click/tap affordances for keyboard shortcuts.

coderabbitai[bot] commented

2026-06-11 17:25:59 +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: e0523d50-f395-4995-bba9-b64c341a2f72

📥 Commits

Reviewing files that changed from the base of the PR and between dd850d28d1 and 1cf144bce3.

📒 Files selected for processing (2)

js/desktop/src/features/particles/stream-view.tsx
js/desktop/src/hooks/use-stream-navigation-keys.ts

📝 Walkthrough

Walkthrough

Adds Kbd primitives and a reusable KeyHint component, then replaces inline hint markup across overlays, compose flows, stream view, and other UI with KeyHint instances that optionally handle clicks and preserve focus.

Changes

KeyHint Foundation and Keyboard Shortcut Consolidation

Layer / File(s)	Summary
KeyHint component foundation `js/desktop/src/components/ui/kbd.tsx`, `js/desktop/src/components/key-hint.tsx`	New `Kbd` and `KbdGroup` primitives and `KeyHint` component render key chips, support `prefix`/`separator`/`children`, and render as a non-interactive `span` or clickable `button` with focus-preserving `onMouseDown` handling.
Overlay keyboard shortcuts `js/desktop/src/components/confirm-destructive-overlay.tsx`, `js/desktop/src/components/keybindings-overlay.tsx`, `js/desktop/src/features/particles/rename-stream-overlay.tsx`, `js/desktop/src/features/particles/stream-members-overlay.tsx`	Overlay components replace inline `<kbd>` close/navigation hints with `KeyHint` elements wired to `onClose` or equivalent handlers and updated title/aria text.
Compose feature keyboard shortcuts `js/desktop/src/features/compose/text-editor.tsx`, `js/desktop/src/features/compose/recording-overlay.tsx`, `js/desktop/src/features/compose/compose-overlay.tsx`, `js/desktop/src/features/compose/configure-stream-step.tsx`	Compose-related UIs now use `KeyHint` for Esc, Enter, Meta+Enter, Meta+M, and other hints, preserving conditional rendering and existing click/keyboard handlers.
Additional component keyboard shortcuts `js/desktop/src/components/video-audio-toggle.tsx`, `js/desktop/src/features/attachments/attachment-lightbox.tsx`, `js/desktop/src/components/keybindings-overlay.tsx`, `js/desktop/src/features/network-root.tsx`	Other components migrated from inline `<kbd>`/button markup to `KeyHint`, delegating click behavior to existing handlers and adding title/aria attributes where applicable.
Stream view controls and huddle integration `js/desktop/src/features/particles/stream-view.tsx`, `js/desktop/src/hooks/use-stream-navigation-keys.ts`	`StreamViewControls` refactored to use `KeyHint` for in-stream actions and receives `onOpenHuddle` and `onExit` callbacks; `useStreamNavigationKeys` now accepts `onExit` and calls it on Escape.

🎯 3 (Moderate) | ⏱️ ~22 minutes

"🐰
Keys once scattered, now they unite,
One component to make hints bright,
Click or type, both work just right,
Keyboard flows polished in sight,
Hop on — shortcuts feel light!"

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

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

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: allow clicking keyboard hints throughout' clearly and concisely describes the main change—enabling keyboard hint clicks across the application.
Linked Issues check	✅ Passed	The PR successfully addresses issue `#186` by implementing clickable keyboard shortcut hints via the new KeyHint component, allowing mouse-click alternatives throughout the UI.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with the PR objectives. New components (KeyHint, Kbd, KbdGroup) support the feature, and refactored files consistently replace hardcoded keyboard hints with the reusable KeyHint component.

_{✏️ 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-harmonic-purring-fox

_{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/266?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**: `e0523d50-f395-4995-bba9-b64c341a2f72` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between dd850d28d13405a8065caccfef5fb52ed148ad18 and 1cf144bce3c8a2d6bf8f414148c22b9ec2781abf. </details> <details> <summary>📒 Files selected for processing (2)</summary> * `js/desktop/src/features/particles/stream-view.tsx` * `js/desktop/src/hooks/use-stream-navigation-keys.ts` </details> </details> ---  <details> <summary>📝 Walkthrough</summary> ## Walkthrough Adds Kbd primitives and a reusable KeyHint component, then replaces inline <kbd> hint markup across overlays, compose flows, stream view, and other UI with KeyHint instances that optionally handle clicks and preserve focus. ## Changes **KeyHint Foundation and Keyboard Shortcut Consolidation** | Layer / File(s)|Summary| |---|---| |**KeyHint component foundation** <br> `js/desktop/src/components/ui/kbd.tsx`, `js/desktop/src/components/key-hint.tsx`|New `Kbd` and `KbdGroup` primitives and `KeyHint` component render key chips, support `prefix`/`separator`/`children`, and render as a non-interactive `span` or clickable `button` with focus-preserving `onMouseDown` handling.| |**Overlay keyboard shortcuts** <br> `js/desktop/src/components/confirm-destructive-overlay.tsx`, `js/desktop/src/components/keybindings-overlay.tsx`, `js/desktop/src/features/particles/rename-stream-overlay.tsx`, `js/desktop/src/features/particles/stream-members-overlay.tsx`|Overlay components replace inline `<kbd>` close/navigation hints with `KeyHint` elements wired to `onClose` or equivalent handlers and updated title/aria text.| |**Compose feature keyboard shortcuts** <br> `js/desktop/src/features/compose/text-editor.tsx`, `js/desktop/src/features/compose/recording-overlay.tsx`, `js/desktop/src/features/compose/compose-overlay.tsx`, `js/desktop/src/features/compose/configure-stream-step.tsx`|Compose-related UIs now use `KeyHint` for Esc, Enter, Meta+Enter, Meta+M, and other hints, preserving conditional rendering and existing click/keyboard handlers.| |**Additional component keyboard shortcuts** <br> `js/desktop/src/components/video-audio-toggle.tsx`, `js/desktop/src/features/attachments/attachment-lightbox.tsx`, `js/desktop/src/components/keybindings-overlay.tsx`, `js/desktop/src/features/network-root.tsx`|Other components migrated from inline `<kbd>`/button markup to `KeyHint`, delegating click behavior to existing handlers and adding title/aria attributes where applicable.| |**Stream view controls and huddle integration** <br> `js/desktop/src/features/particles/stream-view.tsx`, `js/desktop/src/hooks/use-stream-navigation-keys.ts`|`StreamViewControls` refactored to use `KeyHint` for in-stream actions and receives `onOpenHuddle` and `onExit` callbacks; `useStreamNavigationKeys` now accepts `onExit` and calls it on Escape.| 🎯 3 (Moderate) | ⏱️ ~22 minutes > "🐰 > Keys once scattered, now they unite, > One component to make hints bright, > Click or type, both work just right, > Keyboard flows polished in sight, > Hop on — shortcuts feel light!" </details>   <details> <summary>🚥 Pre-merge checks | ✅ 4 | ❌ 1</summary> ### ❌ Failed checks (1 warning) | Check name | Status | Explanation | Resolution | | :----------------: | :--------- | :------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------- | | Docstring Coverage | ⚠️ Warning | Docstring coverage is 40.00% 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 (4 passed)</summary> | Check name | Status | Explanation | | :------------------------: | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. | | Title check | ✅ Passed | The title 'feat: allow clicking keyboard hints throughout' clearly and concisely describes the main change—enabling keyboard hint clicks across the application. | | Linked Issues check | ✅ Passed | The PR successfully addresses issue `#186` by implementing clickable keyboard shortcut hints via the new KeyHint component, allowing mouse-click alternatives throughout the UI. | | Out of Scope Changes check | ✅ Passed | All changes are directly aligned with the PR objectives. New components (KeyHint, Kbd, KbdGroup) support the feature, and refactored files consistently replace hardcoded keyboard hints with the reusable KeyHint component. | </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-harmonic-purring-fox` </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 17:31:13 +00:00

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

Actionable comments posted: 3

🤖 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/key-hint.tsx`:
- Around line 45-49: The Fragment in KeyHint maps keyList with <Fragment
key={k}> which can collide when labels repeat; change the key to a composite
unique identifier (for example using the index) such as `${k}-${i}` to avoid
React reconciliation issues — locate the map in the KeyHint component
(keyList.map((k, i) => ...)) and replace the Fragment key to use both the label
and index (or just the index if appropriate) so each rendered element has a
stable, unique key.

In `@js/desktop/src/components/ui/kbd.tsx`:
- Around line 16-23: KbdGroup is typed as React.ComponentProps<'div'> but
returns a <kbd>, causing a prop-type mismatch; fix by making the component's
props match the rendered element: either change the render to a <div> in the
KbdGroup function or update the props typing to React.ComponentProps<'kbd'>
(adjust any consumers if needed), ensuring the component signature (KbdGroup)
and spread {...props} align with the element type.

In `@js/desktop/src/features/particles/stream-view.tsx`:
- Around line 610-616: The Escape action currently uses history back
(navigate(-1)) which can leave users off the network root; update the Escape
handlers to navigate to the network root instead: replace navigate(-1) in the
KeyHint onClick (KeyHint in stream-view.tsx) and the Escape case in
useStreamNavigationKeys to call navigate(`/${networkId}`) (use the same
networkId used by handleExitNavigate) so the keybinding, title, and exit
countdown all consistently go to the network root; alternatively, if you prefer
history semantics, change the KeyHint title/text from “Back to network” to
“Back”/“History back” instead.

🪄 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: 390544c3-d236-4d15-982a-436bf62b136b

📥 Commits

Reviewing files that changed from the base of the PR and between 9fd7e611f3 and 023e332e01.

📒 Files selected for processing (14)

js/desktop/src/components/confirm-destructive-overlay.tsx
js/desktop/src/components/key-hint.tsx
js/desktop/src/components/keybindings-overlay.tsx
js/desktop/src/components/ui/kbd.tsx
js/desktop/src/components/video-audio-toggle.tsx
js/desktop/src/features/attachments/attachment-lightbox.tsx
js/desktop/src/features/compose/compose-overlay.tsx
js/desktop/src/features/compose/configure-stream-step.tsx
js/desktop/src/features/compose/recording-overlay.tsx
js/desktop/src/features/compose/text-editor.tsx
js/desktop/src/features/network-root.tsx
js/desktop/src/features/particles/rename-stream-overlay.tsx
js/desktop/src/features/particles/stream-members-overlay.tsx
js/desktop/src/features/particles/stream-view.tsx

**Actionable comments posted: 3** <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/key-hint.tsx`: - Around line 45-49: The Fragment in KeyHint maps keyList with <Fragment key={k}> which can collide when labels repeat; change the key to a composite unique identifier (for example using the index) such as `${k}-${i}` to avoid React reconciliation issues — locate the map in the KeyHint component (keyList.map((k, i) => ...)) and replace the Fragment key to use both the label and index (or just the index if appropriate) so each rendered element has a stable, unique key. In `@js/desktop/src/components/ui/kbd.tsx`: - Around line 16-23: KbdGroup is typed as React.ComponentProps<'div'> but returns a <kbd>, causing a prop-type mismatch; fix by making the component's props match the rendered element: either change the render to a <div> in the KbdGroup function or update the props typing to React.ComponentProps<'kbd'> (adjust any consumers if needed), ensuring the component signature (KbdGroup) and spread {...props} align with the element type. In `@js/desktop/src/features/particles/stream-view.tsx`: - Around line 610-616: The Escape action currently uses history back (navigate(-1)) which can leave users off the network root; update the Escape handlers to navigate to the network root instead: replace navigate(-1) in the KeyHint onClick (KeyHint in stream-view.tsx) and the Escape case in useStreamNavigationKeys to call navigate(`/${networkId}`) (use the same networkId used by handleExitNavigate) so the keybinding, title, and exit countdown all consistently go to the network root; alternatively, if you prefer history semantics, change the KeyHint title/text from “Back to network” to “Back”/“History back” instead. ``` </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**: `390544c3-d236-4d15-982a-436bf62b136b` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 9fd7e611f31d09957648ccb5117fc12bbdc6c0bf and 023e332e011714c127bba86ea85b1fada81d43fc. </details> <details> <summary>📒 Files selected for processing (14)</summary> * `js/desktop/src/components/confirm-destructive-overlay.tsx` * `js/desktop/src/components/key-hint.tsx` * `js/desktop/src/components/keybindings-overlay.tsx` * `js/desktop/src/components/ui/kbd.tsx` * `js/desktop/src/components/video-audio-toggle.tsx` * `js/desktop/src/features/attachments/attachment-lightbox.tsx` * `js/desktop/src/features/compose/compose-overlay.tsx` * `js/desktop/src/features/compose/configure-stream-step.tsx` * `js/desktop/src/features/compose/recording-overlay.tsx` * `js/desktop/src/features/compose/text-editor.tsx` * `js/desktop/src/features/network-root.tsx` * `js/desktop/src/features/particles/rename-stream-overlay.tsx` * `js/desktop/src/features/particles/stream-members-overlay.tsx` * `js/desktop/src/features/particles/stream-view.tsx` </details> </details>

js/desktop/src/components/key-hint.tsx

						
				@@ -0,0 +46,4 @@

				        <Fragment key={`${k}-${i}`}>

				          {i > 0 && (separator != null ? <> {separator} </> : ' ')}

				          <Kbd className={chipClass}>{k}</Kbd>

				        </Fragment>

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

2026-06-11 17:31:11 +00:00

⚠️ Potential issue | 🟡 Minor

Prevent React key collisions for repeated labels in KeyHint.
<Fragment key={k}> uses the label as the React key; if keyList contains duplicate labels (e.g. "Shift" twice), reconciliation can be incorrect. Use a composite key with the index.

Proposed fix

-      {keyList.map((k, i) => (
-        <Fragment key={k}>
+      {keyList.map((k, i) => (
+        <Fragment key={`${k}-${i}`}>
           {i > 0 && (separator != null ? <> {separator} </> : ' ')}
           <Kbd className={chipClass}>{k}</Kbd>
         </Fragment>
       ))}

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

      {keyList.map((k, i) => (
        <Fragment key={`${k}-${i}`}>
          {i > 0 && (separator != null ? <> {separator} </> : ' ')}
          <Kbd className={chipClass}>{k}</Kbd>
        </Fragment>

🤖 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/key-hint.tsx` around lines 45 - 49, The Fragment in
KeyHint maps keyList with <Fragment key={k}> which can collide when labels
repeat; change the key to a composite unique identifier (for example using the
index) such as `${k}-${i}` to avoid React reconciliation issues — locate the map
in the KeyHint component (keyList.map((k, i) => ...)) and replace the Fragment
key to use both the label and index (or just the index if appropriate) so each
rendered element has a stable, unique key.

✅ Addressed in commit dd850d2

_⚠️ Potential issue_ | _🟡 Minor_ **Prevent React key collisions for repeated labels in `KeyHint`.** `<Fragment key={k}>` uses the label as the React key; if `keyList` contains duplicate labels (e.g. `"Shift"` twice), reconciliation can be incorrect. Use a composite key with the index. <details> <summary>Proposed fix</summary> ```diff - {keyList.map((k, i) => ( - <Fragment key={k}> + {keyList.map((k, i) => ( + <Fragment key={`${k}-${i}`}> {i > 0 && (separator != null ? <> {separator} </> : ' ')} <Kbd className={chipClass}>{k}</Kbd> </Fragment> ))} ``` </details>  <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 {keyList.map((k, i) => ( <Fragment key={`${k}-${i}`}> {i > 0 && (separator != null ? <> {separator} </> : ' ')} <Kbd className={chipClass}>{k}</Kbd> </Fragment> ``` </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/key-hint.tsx` around lines 45 - 49, The Fragment in KeyHint maps keyList with <Fragment key={k}> which can collide when labels repeat; change the key to a composite unique identifier (for example using the index) such as `${k}-${i}` to avoid React reconciliation issues — locate the map in the KeyHint component (keyList.map((k, i) => ...)) and replace the Fragment key to use both the label and index (or just the index if appropriate) so each rendered element has a stable, unique key. ``` </details>    ✅ Addressed in commit dd850d2

js/desktop/src/components/ui/kbd.tsx

						
				@@ -0,0 +20,4 @@

				      className={cn('inline-flex items-center gap-1', className)}

				      {...props}

				    />

				  );

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

2026-06-11 17:31:12 +00:00

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="js/desktop/src/components/ui/kbd.tsx"
echo "== File =="
ls -l "$FILE"

echo "== Lines 1-120 =="
nl -ba "$FILE" | sed -n '1,120p'

Repository: flowy-live/llink

Length of output: 235

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Find usages of KbdGroup
rg -n --hidden --no-ignore-vcs "\bKbdGroup\b" js/desktop/src || true

Repository: flowy-live/llink

Length of output: 240

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Check if there's another KbdGroup defined elsewhere in repo
rg -n --hidden --no-ignore-vcs "function KbdGroup|const KbdGroup|export .*KbdGroup" js || true

Repository: flowy-live/llink

Length of output: 240

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="js/desktop/src/components/ui/kbd.tsx"
echo "== Lines 1-60 =="
cat -n "$FILE" | sed -n '1,60p'

Repository: flowy-live/llink

Length of output: 1101

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Usage of the component in TSX/TS
rg -n --hidden --no-ignore-vcs "<KbdGroup\\b|KbdGroup\\s*\\(" js/desktop/src || true

Repository: flowy-live/llink

Length of output: 174

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Look for the slot attribute usage to understand expected semantics
rg -n --hidden --no-ignore-vcs "data-slot=['\"]kbd-group['\"]" js/desktop/src || true

Repository: flowy-live/llink

Length of output: 128

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Find all usages of KbdGroup (JS/TSX)
rg -n --hidden --no-ignore-vcs "\b<KbdGroup\b|\bKbdGroup\s*\(" js/desktop/src || true

Repository: flowy-live/llink

Length of output: 174

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Find all occurrences of the data-slot value to infer expected markup
rg -n --hidden --no-ignore-vcs "data-slot=['\"]kbd-group['\"]|kbd-group" js/desktop/src || true

Repository: flowy-live/llink

Length of output: 128

Fix KbdGroup element/prop-type mismatch

KbdGroup is typed as React.ComponentProps<'div'> but renders a <kbd>, creating an API contract mismatch for consumers. Render a <div> (or change the props typing to 'kbd' if <kbd> is intentional).

Proposed fix

 function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <kbd
+    <div
       data-slot="kbd-group"
       className={cn('inline-flex items-center gap-1', className)}
       {...props}
-    />
+    />
   );
 }

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

function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="kbd-group"
      className={cn('inline-flex items-center gap-1', className)}
      {...props}
    />
  );
}

🤖 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/kbd.tsx` around lines 16 - 23, KbdGroup is typed
as React.ComponentProps<'div'> but returns a <kbd>, causing a prop-type
mismatch; fix by making the component's props match the rendered element: either
change the render to a <div> in the KbdGroup function or update the props typing
to React.ComponentProps<'kbd'> (adjust any consumers if needed), ensuring the
component signature (KbdGroup) and spread {...props} align with the element
type.

_⚠️ Potential issue_ | _🟡 Minor_ <details> <summary>🧩 Analysis chain</summary> 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail FILE="js/desktop/src/components/ui/kbd.tsx" echo "== File ==" ls -l "$FILE" echo "== Lines 1-120 ==" nl -ba "$FILE" | sed -n '1,120p' ``` Repository: flowy-live/llink Length of output: 235 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail # Find usages of KbdGroup rg -n --hidden --no-ignore-vcs "\bKbdGroup\b" js/desktop/src || true ``` Repository: flowy-live/llink Length of output: 240 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail # Check if there's another KbdGroup defined elsewhere in repo rg -n --hidden --no-ignore-vcs "function KbdGroup|const KbdGroup|export .*KbdGroup" js || true ``` Repository: flowy-live/llink Length of output: 240 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail FILE="js/desktop/src/components/ui/kbd.tsx" echo "== Lines 1-60 ==" cat -n "$FILE" | sed -n '1,60p' ``` Repository: flowy-live/llink Length of output: 1101 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail # Usage of the component in TSX/TS rg -n --hidden --no-ignore-vcs "<KbdGroup\\b|KbdGroup\\s*\\(" js/desktop/src || true ``` Repository: flowy-live/llink Length of output: 174 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail # Look for the slot attribute usage to understand expected semantics rg -n --hidden --no-ignore-vcs "data-slot=['\"]kbd-group['\"]" js/desktop/src || true ``` Repository: flowy-live/llink Length of output: 128 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail # Find all usages of KbdGroup (JS/TSX) rg -n --hidden --no-ignore-vcs "\b<KbdGroup\b|\bKbdGroup\s*\(" js/desktop/src || true ``` Repository: flowy-live/llink Length of output: 174 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail # Find all occurrences of the data-slot value to infer expected markup rg -n --hidden --no-ignore-vcs "data-slot=['\"]kbd-group['\"]|kbd-group" js/desktop/src || true ``` Repository: flowy-live/llink Length of output: 128 --- </details> **Fix `KbdGroup` element/prop-type mismatch** `KbdGroup` is typed as `React.ComponentProps<'div'>` but renders a `<kbd>`, creating an API contract mismatch for consumers. Render a `<div>` (or change the props typing to `'kbd'` if `<kbd>` is intentional). <details> <summary>Proposed fix</summary> ```diff function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) { return ( - <kbd + <div data-slot="kbd-group" className={cn('inline-flex items-center gap-1', className)} {...props} - /> + /> ); } ``` </details>  <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 function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) { return ( <div data-slot="kbd-group" className={cn('inline-flex items-center gap-1', className)} {...props} /> ); } ``` </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/kbd.tsx` around lines 16 - 23, KbdGroup is typed as React.ComponentProps<'div'> but returns a <kbd>, causing a prop-type mismatch; fix by making the component's props match the rendered element: either change the render to a <div> in the KbdGroup function or update the props typing to React.ComponentProps<'kbd'> (adjust any consumers if needed), ensuring the component signature (KbdGroup) and spread {...props} align with the element type. ``` </details>

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

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

2026-06-11 17:31:12 +00:00

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check keyboard handlers for Esc key in stream navigation/action hooks
rg -n -A5 -B5 "key === 'Escape'" --type=ts -g 'use-stream-*.ts'

Repository: flowy-live/llink

Length of output: 42

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect the referenced regions in stream-view.tsx
FILE="js/desktop/src/features/particles/stream-view.tsx"
echo "=== stream-view.tsx: lines 120-160 ==="
nl -ba "$FILE" | sed -n '120,170p'

echo "=== stream-view.tsx: lines 300-360 ==="
nl -ba "$FILE" | sed -n '300,360p'

echo "=== stream-view.tsx: lines 590-630 ==="
nl -ba "$FILE" | sed -n '590,630p'

# Locate the hooks mentioned in the original comment
echo "=== Locate useStreamNavigationKeys / useStreamActionKeys ==="
rg -n --hidden --no-ignore -S "useStreamNavigationKeys|useStreamActionKeys" "js/desktop/src/features/particles" || true
rg -n --hidden --no-ignore -S "useStreamNavigationKeys|useStreamActionKeys" "js/desktop/src" || true

# Search for Escape handler implementations across stream-related hooks/files
echo "=== Search for Escape handlers and navigation behavior ==="
rg -n -S --hidden --no-ignore \
  -e "Escape|Esc" \
  -e "key ===" \
  -e "navigate\(-1\)" \
  -e "navigate\(\`/\\$\\{networkId\\}\\`\)" \
  js/desktop/src/features/particles js/desktop/src | head -n 200

# Specifically search for navigate(-1) usage in stream navigation context
echo "=== Search navigate(-1) in stream-related code ==="
rg -n -S --hidden --no-ignore "navigate\(-1\)" js/desktop/src/features/particles js/desktop/src | head -n 200

# Try to find the hook file names matching use-stream-*.ts mentioned by the original script
echo "=== List files matching use-stream-*.ts ==="
fd -t f "use-stream-*.ts" js/desktop/src || true

Repository: flowy-live/llink

Length of output: 160

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="js/desktop/src/features/particles/stream-view.tsx"

echo "=== stream-view.tsx: inspect around ~line 136 (keybinding description) ==="
sed -n '120,170p' "$FILE"

echo
echo "=== stream-view.tsx: inspect around ~line 330 (exit countdown) ==="
sed -n '300,360p' "$FILE"

echo
echo "=== stream-view.tsx: inspect around ~line 610 (KeyHint Esc) ==="
sed -n '590,630p' "$FILE"

echo
echo "=== Find keybinding description text ==="
rg -n --hidden --no-ignore "Back to network|network root|navigate\\(-1\\)|navigate\\(\\`/\\$\\{networkId\\}\\`\\)|Escape|Esc" "$FILE" || true

echo
echo "=== Locate useStreamNavigationKeys / useStreamActionKeys definitions/calls ==="
rg -n --hidden --no-ignore -S "useStreamNavigationKeys|useStreamActionKeys" js/desktop/src/features/particles js/desktop/src || true

echo
echo "=== Search for Escape/Esc key handlers + navigate(...) patterns across stream-related code ==="
rg -n --hidden --no-ignore -S \
  -e "key === 'Escape'|key === \"Escape\"|key === 'Esc'|key === \"Esc\"|Escape|Esc" \
  -e "navigate\\(-1\\)" \
  -e "navigate\\(\\`/\\$\\{networkId\\}\\`\\)" \
  js/desktop/src/features/particles js/desktop/src | head -n 200

echo
echo "=== List files matching use-stream-*.ts (if any) ==="
fd -t f "use-stream-*.ts" js/desktop/src || true

echo
echo "=== List any use-stream* files under particles ==="
fd -t f "use-stream*" js/desktop/src/features/particles || true

Repository: flowy-live/llink

Length of output: 6669

🏁 Script executed:

#!/bin/bash
set -euo pipefail

NAV_KEYS="js/desktop/src/hooks/use-stream-navigation-keys.ts"
ACTION_KEYS="js/desktop/src/hooks/use-stream-action-keys.ts"
STREAM_VIEW="js/desktop/src/features/particles/stream-view.tsx"

echo "=== rg: Escape/Esc in navigation/action hooks ==="
rg -n --hidden --no-ignore -S "Escape|Esc" "$NAV_KEYS" "$ACTION_KEYS" || true

echo
echo "=== rg: navigate(-1) in navigation/action hooks ==="
rg -n --hidden --no-ignore -S "navigate\(-1\)" "$NAV_KEYS" "$ACTION_KEYS" || true

echo
echo "=== rg: navigate(\`/${networkId}\`) in navigation/action hooks ==="
# Use single quotes to avoid backtick command substitution
rg -n --hidden --no-ignore -S 'navigate\(`\/\$\{networkId\}\`\)' "$NAV_KEYS" "$ACTION_KEYS" || true

echo
echo "=== Show navigation hook Escape handler block (lines around match) ==="
rg -n --hidden --no-ignore -S "Escape|Esc" "$NAV_KEYS" -C 8 || true

echo
echo "=== Show action hook Escape handler block (lines around match) ==="
rg -n --hidden --no-ignore -S "Escape|Esc" "$ACTION_KEYS" -C 8 || true

echo
echo "=== Also check stream-view where hooks are used (Esc/keybinding wiring) ==="
rg -n --hidden --no-ignore -S "useStreamNavigationKeys|useStreamActionKeys|handleExitNavigate|exit countdown|Esc|Escape" "$STREAM_VIEW" -C 3

Repository: flowy-live/llink

Length of output: 512

🏁 Script executed:

#!/bin/bash
set -euo pipefail

NAV_KEYS="js/desktop/src/hooks/use-stream-navigation-keys.ts"
ACTION_KEYS="js/desktop/src/hooks/use-stream-action-keys.ts"
STREAM_VIEW="js/desktop/src/features/particles/stream-view.tsx"

echo "=== stream-navigation-keys.ts (full file if small, else around Escape case) ==="
wc -l "$NAV_KEYS"
sed -n '1,120p' "$NAV_KEYS"

echo
echo "=== stream-action-keys.ts (full file if small, else around Escape case) ==="
wc -l "$ACTION_KEYS"
sed -n '1,160p' "$ACTION_KEYS"

echo
echo "=== stream-view.tsx: where hooks are wired (around lines ~240-320) ==="
sed -n '220,320p' "$STREAM_VIEW"

echo
echo "=== stream-view.tsx: where exit countdown and handleExitNavigate are defined (around ~320-340) ==="
sed -n '320,360p' "$STREAM_VIEW"

echo
echo "=== Find navigate(-1) occurrences in stream-view.tsx ==="
rg -n "navigate\\(-1\\)" "$STREAM_VIEW" || true

echo
echo "=== Find handleExitNavigate / navigate(\\`/\\$\\{networkId\\}\\`) occurrences in stream-view.tsx ==="
rg -n "handleExitNavigate|navigate\\(\\`/\\$\\{networkId\\}\\`\\)" "$STREAM_VIEW" || true

Repository: flowy-live/llink

Length of output: 9501

Fix “Esc / Back to network” navigation to go to the network root

KeyHint for Esc calls navigate(-1) (js/desktop/src/features/particles/stream-view.tsx around 610-616), and the useStreamNavigationKeys Escape handler also uses navigate(-1) (js/desktop/src/hooks/use-stream-navigation-keys.ts around case 'Escape').
This conflicts with the keybinding/KeyHint copy (“Back to network”) and the exit countdown behavior, which navigates to navigate(\/${networkId}`)(js/desktop/src/features/particles/stream-view.tsx around thehandleExitNavigate`).
If the stream page wasn’t reached via history from the network root, Esc may take the user to the wrong place.

Change the Escape click/keyboard handler to navigate(\/${networkId}`)` for consistency with the exit flow, or update the UI copy/title to match “history back”.

🤖 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/particles/stream-view.tsx` around lines 610 - 616,
The Escape action currently uses history back (navigate(-1)) which can leave
users off the network root; update the Escape handlers to navigate to the
network root instead: replace navigate(-1) in the KeyHint onClick (KeyHint in
stream-view.tsx) and the Escape case in useStreamNavigationKeys to call
navigate(`/${networkId}`) (use the same networkId used by handleExitNavigate) so
the keybinding, title, and exit countdown all consistently go to the network
root; alternatively, if you prefer history semantics, change the KeyHint
title/text from “Back to network” to “Back”/“History back” instead.

✅ Addressed in commit 1cf144b

_⚠️ Potential issue_ | _🟠 Major_ <details> <summary>🧩 Analysis chain</summary> 🏁 Script executed: ```shell #!/bin/bash # Check keyboard handlers for Esc key in stream navigation/action hooks rg -n -A5 -B5 "key === 'Escape'" --type=ts -g 'use-stream-*.ts' ``` Repository: flowy-live/llink Length of output: 42 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail # Inspect the referenced regions in stream-view.tsx FILE="js/desktop/src/features/particles/stream-view.tsx" echo "=== stream-view.tsx: lines 120-160 ===" nl -ba "$FILE" | sed -n '120,170p' echo "=== stream-view.tsx: lines 300-360 ===" nl -ba "$FILE" | sed -n '300,360p' echo "=== stream-view.tsx: lines 590-630 ===" nl -ba "$FILE" | sed -n '590,630p' # Locate the hooks mentioned in the original comment echo "=== Locate useStreamNavigationKeys / useStreamActionKeys ===" rg -n --hidden --no-ignore -S "useStreamNavigationKeys|useStreamActionKeys" "js/desktop/src/features/particles" || true rg -n --hidden --no-ignore -S "useStreamNavigationKeys|useStreamActionKeys" "js/desktop/src" || true # Search for Escape handler implementations across stream-related hooks/files echo "=== Search for Escape handlers and navigation behavior ===" rg -n -S --hidden --no-ignore \ -e "Escape|Esc" \ -e "key ===" \ -e "navigate$-1$" \ -e "navigate$\`/\\$\\{networkId\\}\\`$" \ js/desktop/src/features/particles js/desktop/src | head -n 200 # Specifically search for navigate(-1) usage in stream navigation context echo "=== Search navigate(-1) in stream-related code ===" rg -n -S --hidden --no-ignore "navigate$-1$" js/desktop/src/features/particles js/desktop/src | head -n 200 # Try to find the hook file names matching use-stream-*.ts mentioned by the original script echo "=== List files matching use-stream-*.ts ===" fd -t f "use-stream-*.ts" js/desktop/src || true ``` Repository: flowy-live/llink Length of output: 160 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail FILE="js/desktop/src/features/particles/stream-view.tsx" echo "=== stream-view.tsx: inspect around ~line 136 (keybinding description) ===" sed -n '120,170p' "$FILE" echo echo "=== stream-view.tsx: inspect around ~line 330 (exit countdown) ===" sed -n '300,360p' "$FILE" echo echo "=== stream-view.tsx: inspect around ~line 610 (KeyHint Esc) ===" sed -n '590,630p' "$FILE" echo echo "=== Find keybinding description text ===" rg -n --hidden --no-ignore "Back to network|network root|navigate\$-1\$|navigate\$\\`/\\$\\{networkId\\}\\`\$|Escape|Esc" "$FILE" || true echo echo "=== Locate useStreamNavigationKeys / useStreamActionKeys definitions/calls ===" rg -n --hidden --no-ignore -S "useStreamNavigationKeys|useStreamActionKeys" js/desktop/src/features/particles js/desktop/src || true echo echo "=== Search for Escape/Esc key handlers + navigate(...) patterns across stream-related code ===" rg -n --hidden --no-ignore -S \ -e "key === 'Escape'|key === \"Escape\"|key === 'Esc'|key === \"Esc\"|Escape|Esc" \ -e "navigate\$-1\$" \ -e "navigate\$\\`/\\$\\{networkId\\}\\`\$" \ js/desktop/src/features/particles js/desktop/src | head -n 200 echo echo "=== List files matching use-stream-*.ts (if any) ===" fd -t f "use-stream-*.ts" js/desktop/src || true echo echo "=== List any use-stream* files under particles ===" fd -t f "use-stream*" js/desktop/src/features/particles || true ``` Repository: flowy-live/llink Length of output: 6669 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail NAV_KEYS="js/desktop/src/hooks/use-stream-navigation-keys.ts" ACTION_KEYS="js/desktop/src/hooks/use-stream-action-keys.ts" STREAM_VIEW="js/desktop/src/features/particles/stream-view.tsx" echo "=== rg: Escape/Esc in navigation/action hooks ===" rg -n --hidden --no-ignore -S "Escape|Esc" "$NAV_KEYS" "$ACTION_KEYS" || true echo echo "=== rg: navigate(-1) in navigation/action hooks ===" rg -n --hidden --no-ignore -S "navigate$-1$" "$NAV_KEYS" "$ACTION_KEYS" || true echo echo "=== rg: navigate(\`/${networkId}\`) in navigation/action hooks ===" # Use single quotes to avoid backtick command substitution rg -n --hidden --no-ignore -S 'navigate$`\/\$\{networkId\}\`$' "$NAV_KEYS" "$ACTION_KEYS" || true echo echo "=== Show navigation hook Escape handler block (lines around match) ===" rg -n --hidden --no-ignore -S "Escape|Esc" "$NAV_KEYS" -C 8 || true echo echo "=== Show action hook Escape handler block (lines around match) ===" rg -n --hidden --no-ignore -S "Escape|Esc" "$ACTION_KEYS" -C 8 || true echo echo "=== Also check stream-view where hooks are used (Esc/keybinding wiring) ===" rg -n --hidden --no-ignore -S "useStreamNavigationKeys|useStreamActionKeys|handleExitNavigate|exit countdown|Esc|Escape" "$STREAM_VIEW" -C 3 ``` Repository: flowy-live/llink Length of output: 512 --- 🏁 Script executed: ```shell #!/bin/bash set -euo pipefail NAV_KEYS="js/desktop/src/hooks/use-stream-navigation-keys.ts" ACTION_KEYS="js/desktop/src/hooks/use-stream-action-keys.ts" STREAM_VIEW="js/desktop/src/features/particles/stream-view.tsx" echo "=== stream-navigation-keys.ts (full file if small, else around Escape case) ===" wc -l "$NAV_KEYS" sed -n '1,120p' "$NAV_KEYS" echo echo "=== stream-action-keys.ts (full file if small, else around Escape case) ===" wc -l "$ACTION_KEYS" sed -n '1,160p' "$ACTION_KEYS" echo echo "=== stream-view.tsx: where hooks are wired (around lines ~240-320) ===" sed -n '220,320p' "$STREAM_VIEW" echo echo "=== stream-view.tsx: where exit countdown and handleExitNavigate are defined (around ~320-340) ===" sed -n '320,360p' "$STREAM_VIEW" echo echo "=== Find navigate(-1) occurrences in stream-view.tsx ===" rg -n "navigate\$-1\$" "$STREAM_VIEW" || true echo echo "=== Find handleExitNavigate / navigate(\\`/\\$\\{networkId\\}\\`) occurrences in stream-view.tsx ===" rg -n "handleExitNavigate|navigate\$\\`/\\$\\{networkId\\}\\`\$" "$STREAM_VIEW" || true ``` Repository: flowy-live/llink Length of output: 9501 --- </details> **Fix “Esc / Back to network” navigation to go to the network root** - `KeyHint` for `Esc` calls `navigate(-1)` (js/desktop/src/features/particles/stream-view.tsx around 610-616), and the `useStreamNavigationKeys` Escape handler also uses `navigate(-1)` (js/desktop/src/hooks/use-stream-navigation-keys.ts around case `'Escape'`). - This conflicts with the keybinding/KeyHint copy (“Back to network”) and the exit countdown behavior, which navigates to `navigate(\`/${networkId}\`)` (js/desktop/src/features/particles/stream-view.tsx around the `handleExitNavigate`). - If the stream page wasn’t reached via history from the network root, `Esc` may take the user to the wrong place. Change the Escape click/keyboard handler to `navigate(\`/${networkId}\`)` for consistency with the exit flow, or update the UI copy/title to match “history back”. <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/particles/stream-view.tsx` around lines 610 - 616, The Escape action currently uses history back (navigate(-1)) which can leave users off the network root; update the Escape handlers to navigate to the network root instead: replace navigate(-1) in the KeyHint onClick (KeyHint in stream-view.tsx) and the Escape case in useStreamNavigationKeys to call navigate(`/${networkId}`) (use the same networkId used by handleExitNavigate) so the keybinding, title, and exit countdown all consistently go to the network root; alternatively, if you prefer history semantics, change the KeyHint title/text from “Back to network” to “Back”/“History back” instead. ``` </details>    ✅ Addressed in commit 1cf144b

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: FlowyLabs/llink#266