Skip to content

Comments

feat: allow links to have custom icons via url or emoji#44

Open
pablaber wants to merge 1 commit intomainfrom
claude/42-allow-custom-link-icons
Open

feat: allow links to have custom icons via url or emoji#44
pablaber wants to merge 1 commit intomainfrom
claude/42-allow-custom-link-icons

Conversation

@pablaber
Copy link
Owner

Summary

Adds support for custom link icons via URL or emoji, in addition to the default favicon behavior. Users can now choose between favicon (default), a custom icon URL, or an emoji icon for each link in the config editor.

Changes

  • src/types/config.ts — Added iconUrl and iconEmoji optional fields to LinkConfig
  • src/screens/HomeScreen/components/iconDisplay.ts — New shared utility that resolves link icon display (emoji > iconUrl > icon > favicon)
  • src/screens/HomeScreen/components/LinkItem.tsx — Updated to render emoji icons or image icons using the shared getIconDisplay utility
  • src/screens/HomeScreen/components/SearchBar.tsx — Updated search dropdown to show emoji icons alongside image favicons
  • src/screens/HomeScreen/HomeScreen.tsx — Updated navigating state to show the correct custom icon (emoji or image)
  • src/screens/ConfigEditorScreen/components/EmojiPicker.tsx — New emoji picker component with categorized emojis and search
  • src/screens/ConfigEditorScreen/components/LinksTab.tsx — Added icon type selector (Favicon/Icon URL/Emoji) per link with emoji picker integration
  • src/App.css — Added styles for emoji icons, emoji picker, and icon selector UI in config editor
  • src/test/fixtures.ts — Added mockLinkWithIconUrl and mockLinkWithEmoji test fixtures
  • src/screens/HomeScreen/components/LinkItem.test.tsx — Added tests for iconUrl, iconEmoji rendering, and priority ordering

Issue Reference

Closes #42

Testing

All tests pass (87 tests across 11 test files). Lint and build succeed.

npm run lint && npm run test && npm run build

Verification

gh pr checkout PRNUM
npm ci
npm run dev
  • Open the app and verify existing links still show favicons by default
  • Open Settings > Links tab and verify each link has an icon type dropdown (Favicon/Icon URL/Emoji)
  • Change a link's icon type to "Icon URL" and enter a custom icon URL — verify it displays on the home screen
  • Change a link's icon type to "Emoji" and pick an emoji from the picker — verify it displays on the home screen
  • Verify the emoji picker has categories, search functionality, and closes properly
  • Reset a custom icon back to "Favicon" using the X button and verify it falls back to the default favicon
  • Verify custom icons appear correctly in the search dropdown
  • Verify the navigating transition screen shows the correct custom icon
  • Run npm run lint && npm run test && npm run build to verify all checks pass

This PR was automatically generated by an AI agent (Claude Code). Please review carefully before merging.

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.

allow links to have custom icons

1 participant