feat: Connections issues icon & reconnect button

[zardoy]

PR Type

Enhancement, Other

---

Description

• Added a new connectionIssues indicator with corresponding icon, color override, and styling in the UI.

• Implemented connection status tracking in the protocol by monitoring packet activity and updating the gameAdditionalState.

• Integrated the noConnection state into the indicators logic and updated the allIndicators object.

• Added a noConnection property to the global state for tracking connection issues.

• Updated several @rsbuild dependencies and performed dependency cleanup in pnpm-lock.yaml.

---

Changes walkthrough 📝

	Relevant files
Enhancement	IndicatorEffects.tsx Add connection issues indicator with styling.                        src/react/IndicatorEffects.tsx Added a new connectionIssues indicator to the default state and its corresponding icon and color override. Updated the rendering logic to include the new connectionIssues indicator with appropriate styling. +11/-2    mc-protocol.ts Implement connection status tracking in protocol.                src/mineflayer/mc-protocol.ts Introduced a mechanism to track the last packet time and detect connection issues. Updated the gameAdditionalState to reflect connection status based on packet activity. +12/-0    IndicatorEffectsProvider.tsx Integrate connection status into indicator provider.          src/react/IndicatorEffectsProvider.tsx Integrated the noConnection state from gameAdditionalState into the indicators logic. Updated the allIndicators object to include the connectionIssues state. +3/-1      globalState.ts Add noConnection state to global state.                                    src/globalState.ts Added a new noConnection property to the gameAdditionalState proxy for tracking connection issues. +1/-0
Dependencies	package.json Update @rsbuild dependencies to latest versions.                  package.json Updated several @rsbuild dependencies to newer versions. +5/-5      pnpm-lock.yaml Dependency updates and cleanup in pnpm-lock.yaml file.      pnpm-lock.yaml Updated multiple dependencies to newer versions, including @rsbuild/core, @rsbuild/plugin-node-polyfill, and @rsbuild/plugin-react. Added new dependencies such as @jsonjoy.com/base64, @jsonjoy.com/json-pack, and ts-checker-rspack-plugin. Removed outdated dependencies like @types/eslint-scope, @webassemblyjs/ast, and chrome-trace-event. Introduced new peer dependencies and updated transitive dependencies for several packages. +360/-510

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[qodo-merge-pro-for-open-source]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Connection Logic The connection status check uses a fixed 6 second timeout without considering network conditions or server configuration. This could lead to false connection issue reports in cases of temporary lag spikes or servers with different heartbeat intervals. if (Date.now() - lastPacketTime < 6000) { gameAdditionalState.noConnection = false return } gameAdditionalState.noConnection = true }, 1000) Type Safety The colorOverrides object is not properly typed with the indicator keys, which could lead to type errors if indicator keys change. const colorOverrides = { connectionIssues: 'red' }

[qodo-merge-pro-for-open-source]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	✅ Consistent time measurement API usage Suggestion Impact: The commit implemented the suggestion by replacing Date.now() with performance.now() for time comparison code diff: - if (Date.now() - lastPacketTime < 1000) { + if (bot.player?.ping > 500) { // TODO: we cant rely on server ping 1. weird calculations 2. available with delays instead patch minecraft-protocol to get latency of keep_alive packet + gameAdditionalState.poorConnection = true + } else { + gameAdditionalState.poorConnection = false + } + if (performance.now() - lastPacketTime < 1000) { Use performance.now() consistently for time comparisons instead of mixing with Date.now(). This avoids potential timing inconsistencies. src/mineflayer/mc-protocol.ts [24] -if (Date.now() - lastPacketTime < 6000) { +if (performance.now() - lastPacketTime < 6000) { Apply this suggestion Suggestion importance[1-10]: 7 __ Why: Using performance.now() consistently is important for precise timing measurements, as it provides monotonic timestamps and higher resolution than Date.now(). This is particularly relevant for network-related timing checks.	Medium
	Add type safety to object Use TypeScript type safety by properly typing the colorOverrides object with the same key type as defaultIndicatorsState src/react/IndicatorEffects.tsx [61-63] -const colorOverrides = { +const colorOverrides: Partial<Record<keyof typeof defaultIndicatorsState, string>> = { connectionIssues: 'red' } Apply this suggestion Suggestion importance[1-10]: 6 __ Why: Adding proper TypeScript type annotations improves code maintainability and helps catch potential errors at compile time, especially when dealing with shared key types between related objects.	Low