Display the name of the creator for flags & skins

[evanpelle]

Description:

So artists get credit for the work they do.

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory
• I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced

Please put your Discord username so you can be contacted if a bug or regression is found:

evan

[coderabbitai]

Walkthrough

Adds optional artist attribution to cosmetics: schema fields, a new artist-info UI component rendering artist tooltips, and wiring of artist through flag and pattern buttons and modals plus a localization key.

Changes

Cohort / File(s)	Summary
Core Schema src/core/CosmeticSchemas.ts	Added optional artist: string to FlagSchema and PatternSchema (updates inferred Flag/Pattern types).
New UI Component src/client/components/ArtistInfo.ts	New LitElement artist-info that renders in light DOM and shows a hover tooltip "Artist: {name}". Stops click propagation from the icon.
Flag UI & Modals src/client/components/FlagButton.ts, src/client/FlagInputModal.ts, src/client/Store.ts	FlagItem gains optional artist; flag-button payloads now include artist; FlagButton renders <artist-info> and adjusts label/layout spacing and conditional right padding when artist present. Selection and purchase logic unchanged.
Pattern UI src/client/components/PatternButton.ts	Pattern button renders <artist-info> bound to pattern?.artist; title padding now conditionally adds pr-5 when artist exists.
Localization resources/lang/en.json	Added cosmetics.artist_label → "Artist:" for the tooltip label.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🎨 A tiny “?” for who made the hue,
Names now float when cursors view,
Schemas, buttons, modals linked,
Credits shown where art was inked. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main objective of the changeset—adding artist attribution for flags and cosmetic patterns.
Description check	✅ Passed	The description clearly explains the purpose (giving artists credit) and confirms completion of all required checklist items including testing and localization.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/client/components/ArtistInfo.ts`:
- Line 31: The "Artist:" label in the ArtistInfo component is hardcoded; change
it to use translateText by importing translateText from ../Utils and replace the
literal "Artist:" with translateText('artist_label') (or another clear key)
where the template currently renders Artist: ${this.artist}; then add the
corresponding "artist_label": "Artist:" entry to en.json so the text is
localizable.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b8c9234b-768e-4042-bb92-3c470feccbd3

📥 Commits

Reviewing files that changed from the base of the PR and between 4bf18df and c07b2f3.

📒 Files selected for processing (6)

• src/client/FlagInputModal.ts
• src/client/Store.ts
• src/client/components/ArtistInfo.ts
• src/client/components/FlagButton.ts
• src/client/components/PatternButton.ts
• src/core/CosmeticSchemas.ts

[coderabbitai]

🧹 Nitpick comments (1)

src/client/components/FlagButton.ts (1)

57-62: Consider simplifying the dynamic class string for readability.

This works, but extracting the conditional class parts into local constants will make future edits safer and easier.

♻️ Small readability refactor

   render() {
+    const labelPaddingClass = this.flag.artist ? "pr-5" : "";
+    const labelOpacityClass = this.requiresPurchase ? "opacity-50" : "";
+
     return html`
@@
           <div
-            class="text-[10px] font-bold text-white uppercase tracking-wider mt-1 ${this
-              .flag.artist
-              ? "pr-5"
-              : ""} text-center truncate w-full ${this.requiresPurchase
-              ? "opacity-50"
-              : ""}"
+            class="text-[10px] font-bold text-white uppercase tracking-wider mt-1 ${labelPaddingClass} text-center truncate w-full ${labelOpacityClass}"
             title="${translateCosmetic("flags", this.flag.name)}"
           >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/client/components/FlagButton.ts` around lines 57 - 62, In the FlagButton
component simplify the long dynamic class string by extracting the conditional
fragments into local constants (e.g., artistPaddingClass for the flag.artist
condition and purchaseOpacityClass for requiresPurchase) and then compose the
final className using those constants plus the static classes; update the
element that currently builds the template string to use these named variables
(referencing this.flag.artist and this.requiresPurchase) so the class assembly
is clearer and easier to maintain.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/client/components/FlagButton.ts`:
- Around line 57-62: In the FlagButton component simplify the long dynamic class
string by extracting the conditional fragments into local constants (e.g.,
artistPaddingClass for the flag.artist condition and purchaseOpacityClass for
requiresPurchase) and then compose the final className using those constants
plus the static classes; update the element that currently builds the template
string to use these named variables (referencing this.flag.artist and
this.requiresPurchase) so the class assembly is clearer and easier to maintain.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a52969e4-1038-407a-af21-755804707a7c

📥 Commits

Reviewing files that changed from the base of the PR and between c07b2f3 and 5ac5a7d.

📒 Files selected for processing (7)

• resources/lang/en.json
• src/client/FlagInputModal.ts
• src/client/Store.ts
• src/client/components/ArtistInfo.ts
• src/client/components/FlagButton.ts
• src/client/components/PatternButton.ts
• src/core/CosmeticSchemas.ts

✅ Files skipped from review due to trivial changes (3)

• resources/lang/en.json
• src/client/Store.ts
• src/client/components/ArtistInfo.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/client/components/PatternButton.ts