Settings

[ngoiyaeric]

Make the settings say "System , Users , Models" and make the theme buttons smaller their divs have too much vertical padding.

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

@ngoiyaeric, thanks for reaching out! It looks like your comment just mentioned me without any specific question or request attached. Could you let me know what you'd like help with regarding issue #734? For example:

• Do you want me to review or summarize the issue?
• Would you like me to help plan out code changes for this?
• Are you looking for analysis of a specific part of the codebase related to this issue?

Once you share more details, I'll be happy to dig in!

(o_o) ?

[coderabbitai]

Coding Plan

Summary

• Rename the three settings tab labels to "System", "Users", "Models" by editing only the visible text (triggers and mirrored panel titles), keeping internal value identifiers stable to avoid behavioral changes.
• Keep the settings skeleton and delegated/internal headings in sync with the new names, also fixing the pre-existing skeleton value and tab-count mismatches.
• Reduce the theme buttons' vertical padding (and optionally icon size) in the theme card while preserving their data-testids and active-state styling.

File-Level Change Summary

• components/settings/components/settings.tsx: rename three Tabs.Trigger labels and their matching CardTitles; reduce theme button padding.
• components/settings/components/settings-skeleton.tsx: rename labels, fix users → user-management value, align tab order/count/grid with the real component.
• components/settings/components/user-management-form.tsx: CardTitle "User Management" → "Users".
• components/settings/components/system-prompt-form.tsx: FormLabel "System Prompt" → "System".

Design Choices

Design Choice 1: How should the "Map" tab and internal form labels be treated during the rename?

Options Considered:

1. Rename only the three mentioned tabs and their mirrored panel titles, leaving the "Map" tab untouched.
2. Rename the three tabs and also rework/remove the "Map" tab and unrelated internal labels.

Chosen Option: 1

Rationale: The ticket only calls out the three labels, so we rename those consistently (trigger + panel title) and keep "Map" as-is to avoid scope creep. The ticket explicitly lists only three labels ("System", "Users", "Models") but the UI currently has a fourth tab ("Map") and several internal headings that echo the old names.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Rename Settings Section Labels

This phase updates the visible tab labels and their corresponding panel headers so the settings read "System", "Users", and "Models", while keeping internal tab value identifiers stable so no wiring or behavior changes. Consistency across the live component, its skeleton placeholder, and delegated panel titles is the primary goal.

Task 1: Rename tab triggers and panel titles in the main settings component

Update the user-facing labels in the primary settings component without altering tab values or logic.

• In components/settings/components/settings.tsx, change the three Tabs.Trigger label texts: "System Prompt" → "System", "Model Selection" → "Models", "User Management" → "Users" (leave the map trigger unchanged).
• Update the mirrored Tabs.Content CardTitle texts to match ("System Prompt" → "System", "Model Selection" → "Models"); keep each tab's value prop and className strings intact so existing selection logic and any value-based targeting still work.
• Leave descriptions/CardDescription copy as-is unless a short title-consistent tweak is trivially warranted.

Task 2: Reconcile the loading skeleton with the renamed tabs

Bring the skeleton placeholder in line with the renamed, current tab set to avoid a flash of mismatched labels/order during loading.

• In components/settings/components/settings-skeleton.tsx, update the trigger texts to "System", "Users", "Models" and fix the pre-existing value="users" mismatch to user-management to align with the real component.
• Align tab ordering and grid layout with settings.tsx (four tabs including map, grid-cols-2 md:grid-cols-4) so the skeleton reflects the actual tab count.

Task 3: Update delegated and internal headings for consistency

Ensure headings rendered inside the tab panels reflect the new naming.

• In components/settings/components/user-management-form.tsx, update the CardTitle "User Management" → "Users" (this is the actual rendered title for that tab).
• In components/settings/components/system-prompt-form.tsx, update the FormLabel "System Prompt" → "System" to mirror the renamed section (kept minimal and text-only).

🤖 Prompt for AI agents

Implement the settings section label rename across the settings UI, updating
visible text only while keeping tab `value` identifiers and behavior unchanged.

- In `components/settings/components/settings.tsx`:
- Change the three `Tabs.Trigger` label texts: "System Prompt" → "System",
"Model Selection" → "Models", "User Management" → "Users"; leave the `map`
trigger unchanged.
- Update the mirrored `Tabs.Content` `CardTitle` texts to match ("System Prompt"
→ "System", "Model Selection" → "Models").
- Keep each tab's `value` prop and className strings intact so existing
selection logic and any `value`-based targeting still work.
- Leave `CardDescription` copy as-is unless a trivial title-consistent tweak is
warranted.

- In `components/settings/components/settings-skeleton.tsx`:
  - Update the trigger texts to "System", "Users", "Models".
- Fix the pre-existing `value="users"` mismatch to `user-management` to align
with the real component.
- Align tab ordering and grid layout with `settings.tsx` (four tabs including
`map`, `grid-cols-2 md:grid-cols-4`) so the skeleton reflects the actual tab
count.

- In `components/settings/components/user-management-form.tsx`:
- Update the `CardTitle` text from "User Management" to "Users" (this is the
actual rendered title for that tab).

- In `components/settings/components/system-prompt-form.tsx`:
- Update the `FormLabel` text from "System Prompt" to "System" to mirror the
renamed section, keeping the change minimal and text-only.

Phase 2: Shrink Theme Selector Buttons

This phase reduces the visual bulk of the theme selection buttons by trimming their vertical padding so they read as compact controls rather than large blocks.

Reduce theme button padding

Tighten the theme selector button sizing in the settings theme card.

• In components/settings/components/settings.tsx, in the theme button grid base className, reduce the padding (e.g., p-6 → a smaller value such as p-3/py-3) to cut the excess vertical space; optionally reduce icon size (h-8 w-8) slightly if the buttons still feel oversized.
• Preserve the data-testid={theme-select-${t.value}} attributes and active/inactive state classes so existing theme tests and behavior remain intact.

🤖 Prompt for AI agents

Adjust the theme selector button styling in
`components/settings/components/settings.tsx` to reduce vertical bulk.

- In the theme button grid base className, reduce the padding (e.g., `p-6` → a
smaller value such as `p-3`/`py-3`) to cut the excess vertical space.
- Optionally reduce icon size (`h-8 w-8`) slightly if the buttons still feel
oversized.
- Preserve the `data-testid={`theme-select-${t.value}`}` attributes and
active/inactive state classes so existing theme tests and behavior remain
intact.

Research

The settings UI lives under components/settings/. The main interactive component is components/settings/components/settings.tsx, which renders a "Theme Selection" card (three plain buttons: Light/Dark/Earth) above a Radix Tabs navigation with four tabs (system-prompt, model, user-management, map). Each tab's panel header is a CardTitle whose text mirrors the tab label, except the User Management panel which delegates its title to user-management-form.tsx. A separate loading placeholder, settings-skeleton.tsx, independently duplicates a (currently stale) 3-tab list that must be kept in sync. No tests assert against these tab label strings, and the theme buttons carry stable data-testids that will remain unchanged.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Implement the settings section label rename across the settings UI, updating
visible text only while keeping tab `value` identifiers and behavior unchanged.

- In `components/settings/components/settings.tsx`:
- Change the three `Tabs.Trigger` label texts: "System Prompt" → "System",
"Model Selection" → "Models", "User Management" → "Users"; leave the `map`
trigger unchanged.
- Update the mirrored `Tabs.Content` `CardTitle` texts to match ("System Prompt"
→ "System", "Model Selection" → "Models").
- Keep each tab's `value` prop and className strings intact so existing
selection logic and any `value`-based targeting still work.
- Leave `CardDescription` copy as-is unless a trivial title-consistent tweak is
warranted.

- In `components/settings/components/settings-skeleton.tsx`:
  - Update the trigger texts to "System", "Users", "Models".
- Fix the pre-existing `value="users"` mismatch to `user-management` to align
with the real component.
- Align tab ordering and grid layout with `settings.tsx` (four tabs including
`map`, `grid-cols-2 md:grid-cols-4`) so the skeleton reflects the actual tab
count.

- In `components/settings/components/user-management-form.tsx`:
- Update the `CardTitle` text from "User Management" to "Users" (this is the
actual rendered title for that tab).

- In `components/settings/components/system-prompt-form.tsx`:
- Update the `FormLabel` text from "System Prompt" to "System" to mirror the
renamed section, keeping the change minimal and text-only.
===============================================================================

Task: 2

Adjust the theme selector button styling in
`components/settings/components/settings.tsx` to reduce vertical bulk.

- In the theme button grid base className, reduce the padding (e.g., `p-6` → a
smaller value such as `p-3`/`py-3`) to cut the excess vertical space.
- Optionally reduce icon size (`h-8 w-8`) slightly if the buttons still feel
oversized.
- Preserve the `data-testid={`theme-select-${t.value}`}` attributes and
active/inactive state classes so existing theme tests and behavior remain
intact.

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!