Skip to content

Tooltips UI fixes, refine descriptive text, add talents + constellations rating functionality + main UI in characters page - #30

Merged
woopxwoop merged 9 commits into
mainfrom
talents
Jul 27, 2026
Merged

Tooltips UI fixes, refine descriptive text, add talents + constellations rating functionality + main UI in characters page#30
woopxwoop merged 9 commits into
mainfrom
talents

Conversation

@woopxwoop

@woopxwoop woopxwoop commented Jul 27, 2026

Copy link
Copy Markdown
Owner

Summary by CodeRabbit

  • New Features

    • Added investment insights to character build pages, including talent, level, constellation, and signature weapon priorities.
    • Added clearer upgrade impact labels to help compare investment value.
    • Improved tooltips with accessible labels, truncation detection, tap-to-expand detail sheets, focus management, and scroll locking.
    • Refined artifact substat recommendations for more accurate filtering.
  • Improvements

    • Renamed the Teams page to “Team Simulations” with clearer explanatory text.
    • Updated character and settings guidance text for improved clarity.
    • Refined tooltip and responsive investment-section styling.

@coderabbitai

coderabbitai Bot commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@woopxwoop, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 34 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 357dfca3-ce3a-43a4-9616-83cb4cd224f4

📥 Commits

Reviewing files that changed from the base of the PR and between 250a793 and 30f1be1.

📒 Files selected for processing (2)
  • src/lib/upgrade-priority.ts
  • src/routes/teams/[slug]/+page.svelte
📝 Walkthrough

Walkthrough

The PR adds investment-priority data models and character build displays, filters artifact substat recommendations, extends tooltip detail-sheet behavior, and revises related page and settings presentation text.

Changes

Character investment priorities

Layer / File(s) Summary
Investment contracts and classification
src/lib/types/investment.ts, src/lib/build-stats.ts, src/lib/upgrade-priority.ts
Adds talent simulation and investment interfaces, centralizes artifact-substat detection, and classifies upgrade impacts into priority tiers.
Build investment data preparation
src/routes/characters/[slug]/+page.svelte
Maps talent slots, filters invalid artifact substats, and derives talent and level investment rows.
Build investment presentation
src/routes/characters/[slug]/+page.svelte
Adds talent, level, constellation, and signature-weapon investment sections with responsive styling and priority labels.

Accessible tooltip detail sheets

Layer / File(s) Summary
Tooltip and detail-sheet behavior
src/lib/ui/components/HoverTooltip.svelte
Adds truncation-aware detail-sheet opening, ARIA trigger tracking, focus restoration, cleanup, and fixed tooltip typography.
Tooltip content integrations
src/lib/ui/components/ArtifactTooltip.svelte, src/routes/characters/[slug]/+page.svelte, src/routes/dev/ui/+page.svelte, src/routes/teams/[slug]/+page.svelte
Passes explicit tooltip labels and standardizes artifact, substat, demo, and negative-percentage detail content.

Interface copy and layout cleanup

Layer / File(s) Summary
Page and settings presentation updates
src/routes/characters/+page.svelte, src/routes/teams/+page.svelte, src/routes/settings/...
Revises page descriptions, removes settings section hints, shortens roster guidance, and reformats or updates panel markup and copy.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

Poem

A rabbit taps a tooltip bright,
Then follows truncated text to light.
Talents rank and artifacts roll,
New build guides show the goal.
Hop, hop—priorities take flight!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title is related to the PR’s main themes, though it is a bit long and bundles several changes together.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch talents

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@woopxwoop

Copy link
Copy Markdown
Owner Author

@copilot resolve the merge conflicts in this pull request

@woopxwoop woopxwoop closed this Jul 27, 2026
@woopxwoop woopxwoop reopened this Jul 27, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 9

🤖 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 `@src/lib/ui/components/ArtifactTooltip.svelte`:
- Around line 24-33: Derive the combined artifact title once in the component
script, including the piece-count suffix when pieceCount is available, and reuse
that value for both the HoverTooltip label and the visible tip-detail-text
header. Remove the duplicated inline string construction while preserving the
existing formatting and null handling.

In `@src/lib/ui/components/HoverTooltip.svelte`:
- Around line 28-49: Move the updateTriggerDescription calls from
openDetail/closeDetail into showTip/hideTip so aria-describedby is added only
while the hover/focus tooltip is visible and removed when it hides. Keep the
existing updateTriggerDescription helper and detail-sheet behavior unchanged.
- Around line 146-158: Update HoverTooltip’s openDetail handler to avoid
hijacking clicks from interactive or focusable descendants: before calling
preventDefault, stopPropagation, or opening the sheet, detect whether the event
target is an interactive element and return without handling it. Also gate sheet
opening on the tooltip being useful, such as truncated content or an equivalent
existing condition, while preserving normal detail-sheet behavior for eligible
triggers.

In `@src/lib/upgrade-priority.ts`:
- Line 54: Remove the trailing whitespace from the highly_recommended
user-facing label so it renders as “High impact weapon” without altering the
label’s wording or surrounding mappings.
- Around line 1-18: Update the documentation in UpgradeTier and
UpgradeImpactConfig to describe the impact statistic as median percentage impact
rather than mean percentage impact, including the cutoff comments. Keep the tier
names and threshold behavior unchanged.

In `@src/routes/characters/`[slug]/+page.svelte:
- Around line 248-274: Use one statistic consistently for ordering and impact
classification, preferably median: update talentImportanceRows and the signature
weapon rows in src/routes/characters/[slug]/+page.svelte at lines 248-274 and
801-841 to order and classify with median values, and update the module and
UpgradeImpactConfig documentation in src/lib/upgrade-priority.ts at lines 1-18
to describe median-based cutoffs.

In `@src/routes/dev/ui/`+page.svelte:
- Around line 748-752: Remove the inline color style from the tip-detail-text
paragraph inside HoverTooltip so the tooltip’s .hover-tooltip/.tip-sheet color
declaration cascades correctly. Keep the existing markup and class unchanged.

In `@src/routes/teams/`[slug]/+page.svelte:
- Around line 172-174: Update the HoverTooltip usage around NEG_PCT_TIP to
provide a descriptive accessible label instead of the percentage-valued label
variable. Keep the displayed tip content unchanged and use wording that
identifies the tooltip as explaining the negative percentage.

In `@src/routes/teams/`+page.svelte:
- Around line 243-248: Update the page-meta description near the “Team
Simulations” heading so it does not render incomplete “Database of the teams…”
copy while data is null. Condition the entire description on data availability
or show a loading-safe label, while preserving the team count and existing
loaded-state wording when data is present.
🪄 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: Repository UI (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 3d5c7313-ebb4-4c0e-b63e-983ac5843377

📥 Commits

Reviewing files that changed from the base of the PR and between 1e717c4 and 11ec5e6.

📒 Files selected for processing (16)
  • src/lib/build-stats.ts
  • src/lib/types/investment.ts
  • src/lib/ui/components/ArtifactTooltip.svelte
  • src/lib/ui/components/GameText.svelte
  • src/lib/ui/components/HoverTooltip.svelte
  • src/lib/ui/components/WeaponTooltip.svelte
  • src/lib/upgrade-priority.ts
  • src/routes/characters/+page.svelte
  • src/routes/characters/[slug]/+page.svelte
  • src/routes/dev/ui/+page.svelte
  • src/routes/settings/+layout.svelte
  • src/routes/settings/panels/AccountPanel.svelte
  • src/routes/settings/panels/DisplayPanel.svelte
  • src/routes/settings/panels/RosterPanel.svelte
  • src/routes/teams/+page.svelte
  • src/routes/teams/[slug]/+page.svelte
💤 Files with no reviewable changes (1)
  • src/routes/settings/+layout.svelte

Comment thread src/lib/ui/components/ArtifactTooltip.svelte Outdated
Comment on lines +28 to +49
function updateTriggerDescription(trigger: HTMLElement | null, add: boolean) {
if (!trigger) return;

const describedBy = new Set(
(trigger.getAttribute("aria-describedby") ?? "")
.split(/\s+/)
.filter(Boolean),
);

if (add) {
describedBy.add(tooltipId);
} else {
describedBy.delete(tooltipId);
}

if (!describedBy.size) {
trigger.removeAttribute("aria-describedby");
return;
}

trigger.setAttribute("aria-describedby", [...describedBy].join(" "));
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

aria-describedby is wired to the wrong state.

updateTriggerDescription is only called from openDetail/closeDetail, so the trigger points at #tooltipId exactly when that element renders nothing (markup is gated on {#if !detailOpen}), and never while the hover/focus tooltip is actually visible. The result: keyboard/SR users focusing the trigger get no description, and while the sheet is open the description resolves to an empty node (the sheet already carries its own aria-label).

Move the add/remove calls into showTip/hideTip instead.

♿ Suggested rewiring
   function showTip(trigger: HTMLElement) {
     if (detailOpen) return;
     open = true;
+    updateTriggerDescription(trigger, true);
     requestAnimationFrame(() => {
-  function hideTip() {
+  function hideTip(trigger?: HTMLElement) {
     open = false;
+    if (trigger) updateTriggerDescription(trigger, false);
   }
🤖 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 `@src/lib/ui/components/HoverTooltip.svelte` around lines 28 - 49, Move the
updateTriggerDescription calls from openDetail/closeDetail into showTip/hideTip
so aria-describedby is added only while the hover/focus tooltip is visible and
removed when it hides. Keep the existing updateTriggerDescription helper and
detail-sheet behavior unchanged.

Comment thread src/lib/ui/components/HoverTooltip.svelte
Comment thread src/lib/upgrade-priority.ts
Comment thread src/lib/upgrade-priority.ts Outdated
Comment thread src/routes/characters/[slug]/+page.svelte
Comment thread src/routes/dev/ui/+page.svelte Outdated
Comment thread src/routes/teams/[slug]/+page.svelte Outdated
Comment thread src/routes/teams/+page.svelte Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/routes/dev/ui/+page.svelte (1)

739-743: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Make the tooltip behavior note conditional on truncation.

HoverTooltip returns without opening the detail sheet when the content is not truncated, so click/tap does not always open a sheet as this copy claims. Either qualify the text or remove the truncation gate.

Suggested copy
-          Hover shows a capped tip; click / tap opens a scrollable detail sheet.
+          Hover shows a capped tip; click / tap opens a scrollable detail sheet
+          when the content is truncated.
🤖 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 `@src/routes/dev/ui/`+page.svelte around lines 739 - 743, Update the tooltip
behavior note near HoverTooltip to conditionally mention click/tap opening a
detail sheet only when the content is truncated, or remove that claim so the
copy matches the existing truncation gate. Preserve the note about hover showing
a capped tip and the surrounding mockup description.
🤖 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 `@src/routes/teams/`[slug]/+page.svelte:
- Around line 163-169: Update the negPctTip snippet so the negative-percentage
tooltip is keyboard-reachable without nesting an interactive trigger inside the
row anchor. Render HoverTooltip outside the link with a dedicated focusable
trigger, or configure it to use the row link as its trigger, while preserving
NEG_PCT_TIP and the existing detail-sheet behavior.

---

Outside diff comments:
In `@src/routes/dev/ui/`+page.svelte:
- Around line 739-743: Update the tooltip behavior note near HoverTooltip to
conditionally mention click/tap opening a detail sheet only when the content is
truncated, or remove that claim so the copy matches the existing truncation
gate. Preserve the note about hover showing a capped tip and the surrounding
mockup description.
🪄 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: Repository UI (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 02aa5340-45ca-429c-af16-16690f6969ba

📥 Commits

Reviewing files that changed from the base of the PR and between 11ec5e6 and 250a793.

📒 Files selected for processing (7)
  • src/lib/ui/components/ArtifactTooltip.svelte
  • src/lib/ui/components/HoverTooltip.svelte
  • src/lib/upgrade-priority.ts
  • src/routes/characters/[slug]/+page.svelte
  • src/routes/dev/ui/+page.svelte
  • src/routes/teams/+page.svelte
  • src/routes/teams/[slug]/+page.svelte

Comment thread src/routes/teams/[slug]/+page.svelte Outdated
…le <button> hosting HoverTooltip (keyboard-reachable, no nested interactive in the anchor).
@woopxwoop
woopxwoop merged commit c2bfe55 into main Jul 27, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant