enhancement: disabled config when server is running

[urmauur]

Describe Your Changes

This pull request refactors the LocalAPIServer component in web-app/src/routes/settings/local-api-server.tsx to improve readability and user experience. The key changes include introducing a derived state variable for server status, simplifying button logic, and disabling certain UI elements when the server is running.

Refactoring and Code Simplification:

• Introduced a new derived state variable, isServerRunning, to simplify logic related to the server's running state. This replaces repeated checks of serverStatus === 'running'. [1] [2]

UI Enhancements:

• Updated the button logic in the LocalAPIServer component to use isServerRunning for determining its variant and label text, improving code clarity.
• Disabled interactive elements (e.g., ServerHostSwitcher, PortInput, ApiPrefixInput, and switches for CORS and verbose logs) when the server is running by applying conditional classes (opacity-50 and pointer-events-none) using the cn utility. This ensures a better user experience by preventing changes to settings while the server is active. [1] [2] [3]

Utility Import:

• Added the cn utility import from @/lib/utils to handle conditional class names for UI elements.

Fixes Issues

• Closes #
• Closes #

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

---

Important

Refactors LocalAPIServer to use isServerRunning for logic simplification and disables certain UI elements when the server is running.

• Behavior:
  • Introduced isServerRunning in LocalAPIServer to replace serverStatus === 'running' checks.
  • Simplified button logic using isServerRunning for variant and label.
• UI Enhancements:
  • Disabled ServerHostSwitcher, PortInput, ApiPrefixInput, and switches for CORS and verbose logs when server is running using cn utility.
• Utility Import:
  • Added cn utility import from @/lib/utils for conditional class names.

^{This description was created by for be5f910. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 756cbbf in 58 seconds. Click for details.

• Reviewed 82 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 3 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/routes/settings/local-api-server.tsx:100

• Draft comment:
  Good use of a derived state variable (isServerRunning) to simplify repeated checks of the server status.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

2. web-app/src/routes/settings/local-api-server.tsx:122

• Draft comment:
  Using the derived 'isServerRunning' for the button variant and label improves clarity.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

3. web-app/src/routes/settings/local-api-server.tsx:147

• Draft comment:
  Consistent application of conditional classes using 'cn' to disable inputs is good. Consider extracting the repeated 'opacity-50 pointer-events-none' string into a constant for easier maintenance.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_eCQ7iepHyITtMwUk

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[github-actions]

This is the build for this pull request. You can download it from the Artifacts section here: Build URL.

[louis-menlo]

Thanks!

[github-actions]

This is the build for this pull request. You can download it from the Artifacts section here: Build URL.

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed be5f910 in 55 seconds. Click for details.

• Reviewed 82 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/routes/settings/local-api-server.tsx:105

• Draft comment:
  Good use of derived state with 'isServerRunning' to simplify conditional checks.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

2. web-app/src/routes/settings/local-api-server.tsx:127

• Draft comment:
  The button's variant and label now clearly use 'isServerRunning', enhancing readability.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

3. web-app/src/routes/settings/local-api-server.tsx:159

• Draft comment:
  Using 'cn' to conditionally add 'opacity-50 pointer-events-none' improves UX by visually disabling settings when the server runs. Consider abstracting these disabled classes into a helper to reduce duplication.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

4. web-app/src/routes/settings/local-api-server.tsx:188

• Draft comment:
  For accessibility, consider adding 'aria-disabled' attributes to interactive components in addition to CSS-based disabling.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_CCeATkUCUKfDMhwl

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[github-actions]

This is the build for this pull request. You can download it from the Artifacts section here: Build URL.