feat(ui): show project social links across update, what's new and welcome modals#353
Conversation
…come modals Add a shared SocialLinks component (GitHub, Discord, X, Bluesky, Mastodon) sourced from the auto-generated links config, and surface it in the Info settings tab, the update notification modal, the what's new modal and the welcome screen. Make scripts/sync-links.js generic so any link in package.json is emitted to src/config/links.ts, and add the X/Bluesky/Mastodon URLs.
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| import { LINKS } from "../config/links"; | ||
|
|
||
| const openUrl = vi.fn(); | ||
| vi.mock("@tauri-apps/plugin-opener", () => ({ |
There was a problem hiding this comment.
WARNING: vi.mock factory references module-scope variable
The factory captures openUrl which is declared after the hoisted vi.mock. Vitest explicitly recommends using vi.hoisted() for variables used inside mock factories. Consider removing the local vi.mock block and relying on the existing mock from tests/setup.ts (import openUrl from @tauri-apps/plugin-opener to assert on it), or use vi.hoisted(() => ({ openUrl: vi.fn() })).
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| } | ||
|
|
||
| // 2. Create/update src/config/links.ts | ||
| const constKey = (key) => key.toUpperCase().replace(/[^A-Z0-9]+/g, '_'); |
There was a problem hiding this comment.
WARNING: constKey can produce invalid JS identifiers
If a package.json link key starts with a digit (e.g., "123link": "..."), constKey returns "123LINK" which is an invalid JavaScript identifier and would cause a syntax error in the generated src/config/links.ts.
| const constKey = (key) => key.toUpperCase().replace(/[^A-Z0-9]+/g, '_'); | |
| const constKey = (key) => key.toUpperCase().replace(/[^A-Z0-9]+/g, '_').replace(/^\d/, '_$&'); |
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| }: SocialLinksProps) { | ||
| const links = exclude?.length | ||
| ? SOCIAL_LINKS.filter((link) => !exclude.includes(link.label)) | ||
| : SOCIAL_LINKS; |
There was a problem hiding this comment.
SUGGESTION: Filtering exclude by display label is brittle
If a social network's display label changes in SOCIAL_LINKS (e.g., "X" → "Twitter"), exclude={ ["X"] } calls silently fail to exclude anything because the filter matches against link.label. Consider adding a stable id field to SocialLink and filtering by that instead.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| import { LINKS } from "../config/links"; | ||
|
|
||
| const openUrl = vi.fn(); | ||
| vi.mock("@tauri-apps/plugin-opener", () => ({ |
There was a problem hiding this comment.
WARNING: vi.mock factory references module-scope variable
The factory captures openUrl which is declared after the hoisted vi.mock. Vitest explicitly recommends using vi.hoisted() for variables used inside mock factories. Consider removing the local vi.mock block and relying on the existing mock from tests/setup.ts (import openUrl from @tauri-apps/plugin-opener to assert on it), or use vi.hoisted(() => ({ openUrl: vi.fn() })).
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| } | ||
|
|
||
| // 2. Create/update src/config/links.ts | ||
| const constKey = (key) => key.toUpperCase().replace(/[^A-Z0-9]+/g, '_'); |
There was a problem hiding this comment.
WARNING: constKey can produce invalid JS identifiers
If a package.json link key starts with a digit (e.g., "123link": "..."), constKey returns "123LINK" which is an invalid JavaScript identifier and would cause a syntax error in the generated src/config/links.ts.
| const constKey = (key) => key.toUpperCase().replace(/[^A-Z0-9]+/g, '_'); | |
| const constKey = (key) => key.toUpperCase().replace(/[^A-Z0-9]+/g, '_').replace(/^\d/, '_$&'); |
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
| }: SocialLinksProps) { | ||
| const links = exclude?.length | ||
| ? SOCIAL_LINKS.filter((link) => !exclude.includes(link.label)) | ||
| : SOCIAL_LINKS; |
There was a problem hiding this comment.
SUGGESTION: Filtering exclude by display label is brittle
If a social network's display label changes in SOCIAL_LINKS (e.g., "X" → "Twitter"), exclude={ ["X"] } calls silently fail to exclude anything because the filter matches against link.label. Consider adding a stable id field to SocialLink and filtering by that instead.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
Code Review SummaryStatus: 3 Issues Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
SUGGESTION
Files Reviewed (17 files)
Fix these issues in Kilo Cloud Reviewed by kimi-k2.6-20260420 · Input: 54.1K · Output: 33.8K · Cached: 252.4K |
Code Review SummaryStatus: 3 Issues Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
SUGGESTION
Files Reviewed (17 files)
|
1 participant
Adds the project's social links (GitHub, Discord, X, Bluesky, Mastodon) to the places where users already look for the project online, matching what's on the website.
Where they show up
How it's wired
SocialLinkscomponent renders the buttons and opens each URL externally. It takesiconSize,showLabelsandexcludeprops so the same component fits every spot.src/config/socialLinks.tsand pulls URLs from the generatedsrc/config/links.ts(single source of truth).scripts/sync-links.jsnow emits any entry from thelinkssection ofpackage.jsoninstead of hardcoding Discord/GitHub, so the three new URLs are generated automatically. Also dropped a few stray leftover lines in that script.src/components/icons/BrandIcons.tsx); Discord already existed and GitHub uses lucide.i18n
settings.followUsandsettings.followUsDescadded to all 8 locales.Tests
Unit tests for
SocialLinks(link data, rendering, label toggle, exclude prop, click → open URL).tsc, eslint and vitest all pass.