setShowClearConfirm(false)}>
e.stopPropagation()}>
diff --git a/src/screens/HomeScreen/HomeScreen.tsx b/src/screens/HomeScreen/HomeScreen.tsx
index 3be7265..0fb8a05 100644
--- a/src/screens/HomeScreen/HomeScreen.tsx
+++ b/src/screens/HomeScreen/HomeScreen.tsx
@@ -1,9 +1,10 @@
import { useState, useCallback, useMemo } from 'react';
-import type { AppConfig } from '../../types/config.ts';
+import type { AppConfig, LinkConfig } from '../../types/config.ts';
import { isHosted } from '../../env.ts';
import { SearchBar } from './components/SearchBar.tsx';
import { ModuleGrid } from './components/ModuleGrid.tsx';
import { AboutModal } from './components/AboutModal.tsx';
+import { getIconDisplay } from './components/iconDisplay.ts';
interface HomeScreenProps {
config: AppConfig;
@@ -25,16 +26,18 @@ export function HomeScreen({ config, onOpenSettings }: HomeScreenProps) {
);
if (navigating) {
- let favicon = '';
- try {
- const domain = new URL(navigating.url).hostname;
- favicon = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
- } catch { /* ignore */ }
+ const matchedLink: LinkConfig | undefined = config.modules
+ .flatMap((m) => m.links)
+ .find((l) => l.url === navigating.url);
+ const navIcon = matchedLink ? getIconDisplay(matchedLink) : null;
return (
- {favicon && (
- 
+ {navIcon?.type === 'emoji' && (
+
+ )}
+ {navIcon?.type === 'img' && (
+ 
)}
Navigating to {navigating.label}
diff --git a/src/screens/HomeScreen/components/LinkItem.test.tsx b/src/screens/HomeScreen/components/LinkItem.test.tsx
index 3470491..98d3b40 100644
--- a/src/screens/HomeScreen/components/LinkItem.test.tsx
+++ b/src/screens/HomeScreen/components/LinkItem.test.tsx
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LinkItem } from './LinkItem.tsx';
-import { mockLink, mockLinkWithIcon } from '../../../test/fixtures.ts';
+import { mockLink, mockLinkWithIcon, mockLinkWithIconUrl, mockLinkWithEmoji } from '../../../test/fixtures.ts';
describe('LinkItem', () => {
it('renders the link label', () => {
@@ -26,6 +26,31 @@ describe('LinkItem', () => {
expect(img).toHaveAttribute('src', 'https://example.com/icon.png');
});
+ it('renders a custom icon when link.iconUrl is set', () => {
+ const { container } = render(
- {link.favicon && (
- 
- )}
+ {(() => {
+ const icon = getIconDisplay(link);
+ if (icon?.type === 'emoji') return {icon.emoji};
+ if (icon?.type === 'img') return 
;
+ return null;
+ })()}
{link.label}
{link.moduleTitle}
diff --git a/src/screens/HomeScreen/components/iconDisplay.ts b/src/screens/HomeScreen/components/iconDisplay.ts
new file mode 100644
index 0000000..d66aa3a
--- /dev/null
+++ b/src/screens/HomeScreen/components/iconDisplay.ts
@@ -0,0 +1,21 @@
+import type { LinkConfig } from '../../../types/config.ts';
+
+function getFaviconUrl(url: string): string {
+ try {
+ const domain = new URL(url).hostname;
+ return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
+ } catch {
+ return '';
+ }
+}
+
+export function getIconDisplay(link: LinkConfig): { type: 'emoji'; emoji: string } | { type: 'img'; src: string } | null {
+ if (link.iconEmoji) {
+ return { type: 'emoji', emoji: link.iconEmoji };
+ }
+ const imgSrc = link.iconUrl || link.icon || getFaviconUrl(link.url);
+ if (imgSrc) {
+ return { type: 'img', src: imgSrc };
+ }
+ return null;
+}
diff --git a/src/test/fixtures.ts b/src/test/fixtures.ts
index 8b69c4d..bc7cd11 100644
--- a/src/test/fixtures.ts
+++ b/src/test/fixtures.ts
@@ -11,6 +11,18 @@ export const mockLinkWithIcon: LinkConfig = {
icon: 'https://example.com/icon.png',
};
+export const mockLinkWithIconUrl: LinkConfig = {
+ url: 'https://example.com',
+ label: 'Custom Icon URL',
+ iconUrl: 'https://example.com/custom-icon.png',
+};
+
+export const mockLinkWithEmoji: LinkConfig = {
+ url: 'https://example.com',
+ label: 'Emoji Link',
+ iconEmoji: '๐',
+};
+
export const mockHiddenLink: LinkConfig = {
url: 'https://hidden.com',
label: 'Hidden Link',
diff --git a/src/types/config.ts b/src/types/config.ts
index 39e04c3..fd6c302 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -2,6 +2,8 @@ export interface LinkConfig {
url: string;
label: string;
icon?: string;
+ iconUrl?: string;
+ iconEmoji?: string;
hidden?: boolean;
}