Add a theme select control and appearance preview to the settings page

[mikewheeleer]

Expand the settings page with an appearance preview and API base display

Description

src/app/settings/page.tsx is a near-empty stub: it renders only a heading and the ThemeToggle. Operators have nowhere to confirm which backend the dashboard is pointed at or preview how the chosen theme looks. This issue makes settings a useful operator surface.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Add a read-only "API base" row showing the configured NEXT_PUBLIC_STABLEROUTE_API_BASE (or the localhost default) so operators can verify the target, reusing src/components/Card.tsx.
• Add a small live appearance preview (sample text/surface) below the existing ThemeToggle so the effect of light/dark/system is visible without leaving the page.
• Keep the #main-content/focus:outline-none skip target and the existing metadata title.
• Do not log or expose any secret; only the public API base may be displayed.

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/settings-08-appearance-and-apibase
• Implement changes
  • Write code in: src/app/settings/page.tsx using src/components/Card.tsx and src/components/ThemeToggle.tsx.
  • Write comprehensive tests in: create src/app/settings/page.test.tsx asserting the API base row and preview render.
  • Add documentation: note the settings surface in README.md.
  • Add JSDoc to any helper.
  • Validate only the public base is shown and never any credential.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.
• Cover edge cases: default base, custom env base, and theme preview reflects selection.
• Include the full npm test output in the PR description.

Example commit message

feat: add appearance preview and API base display to settings page

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[YfengJ]

Hi maintainers, I would like to apply for this issue if it is available.

If assigned, I will keep the change scoped to the settings page: show the public API base using the existing env/default behavior, add a small appearance preview below ThemeToggle, reuse Card, avoid exposing anything secret, and add tests for default/custom API base plus preview rendering.

I will wait for maintainer or GrantFox assignment/confirmation before cloning, implementing, or opening a PR.

[KarenZita01]

Hi maintainer, I would love to take on this issue. I’ve reviewed it and I know it is something I can work on. I have an experience with Rust, Soroban smart contracts, frontend and other programming languages.