feat(sites): show site icons and update supported sites layout (#23)

Modified SupportedSites.tsx:
- Added ImageWithPlaceholder import and IPC service import to fetch site icons.
- Implemented SiteIcon component that loads site icon via ipcServices.app.getSiteIcon and handles errors/cancellation.
- Updated layout: adjusted grid to include lg:grid-cols-3 and restructured list items into anchor cards with icon, label, external link icon, and description with truncation.
These changes are focused on UI improvements for the SupportedSites page and fetching site icons from the main process.

src/main/ipc/services/app-service.ts

@@ -32,6 +32,26 @@ class AppService extends IpcService {
 
     return dialog.showMessageBox(options)
   }
+
+  @IpcMethod()
+  async getSiteIcon(_context: IpcContext, domain: string): Promise<string | null> {
+    try {
+      const iconUrl = `https://unavatar.io/${domain}`
+      const response = await fetch(iconUrl)
+      if (!response.ok) {
+        return null
+      }
+
+      const arrayBuffer = await response.arrayBuffer()
+      const buffer = Buffer.from(arrayBuffer)
+      const contentType = response.headers.get('content-type') || 'image/png'
+      const base64 = buffer.toString('base64')
+      return `data:${contentType};base64,${base64}`
+    } catch (error) {
+      console.error('Failed to fetch site icon:', error)
+      return null
+    }
+  }
 }
 
 export { AppService }

src/renderer/src/data/popularSites.ts

@@ -1,24 +1,26 @@
 export interface PopularSite {
   id: string
+  url: string
+  domain: string
 }
 
 export const popularSites: PopularSite[] = [
-  { id: 'youtube' },
-  { id: 'youtubemusic' },
-  { id: 'tiktok' },
-  { id: 'facebook' },
-  { id: 'instagram' },
-  { id: 'twitter' },
-  { id: 'soundcloud' },
-  { id: 'reddit' },
-  { id: 'vimeo' },
-  { id: 'dailymotion' },
-  { id: 'twitch' },
-  { id: 'linkedin' },
-  { id: 'pinterest' },
-  { id: 'tumblr' },
-  { id: 'mixcloud' },
-  { id: 'niconico' },
-  { id: 'kick' },
-  { id: 'bandcamp' }
+  { id: 'youtube', url: 'https://www.youtube.com', domain: 'youtube.com' },
+  { id: 'youtubemusic', url: 'https://music.youtube.com', domain: 'youtube.com' },
+  { id: 'tiktok', url: 'https://www.tiktok.com', domain: 'tiktok.com' },
+  { id: 'facebook', url: 'https://www.facebook.com', domain: 'facebook.com' },
+  { id: 'instagram', url: 'https://www.instagram.com', domain: 'instagram.com' },
+  { id: 'twitter', url: 'https://twitter.com', domain: 'twitter.com' },
+  { id: 'soundcloud', url: 'https://soundcloud.com', domain: 'soundcloud.com' },
+  { id: 'reddit', url: 'https://www.reddit.com', domain: 'reddit.com' },
+  { id: 'vimeo', url: 'https://vimeo.com', domain: 'vimeo.com' },
+  { id: 'dailymotion', url: 'https://www.dailymotion.com', domain: 'dailymotion.com' },
+  { id: 'twitch', url: 'https://www.twitch.tv', domain: 'twitch.tv' },
+  { id: 'linkedin', url: 'https://www.linkedin.com', domain: 'linkedin.com' },
+  { id: 'pinterest', url: 'https://www.pinterest.com', domain: 'pinterest.com' },
+  { id: 'tumblr', url: 'https://www.tumblr.com', domain: 'tumblr.com' },
+  { id: 'mixcloud', url: 'https://www.mixcloud.com', domain: 'mixcloud.com' },
+  { id: 'niconico', url: 'https://www.nicovideo.jp', domain: 'nicovideo.jp' },
+  { id: 'kick', url: 'https://kick.com', domain: 'kick.com' },
+  { id: 'bandcamp', url: 'https://bandcamp.com', domain: 'bandcamp.com' }
 ]

src/renderer/src/pages/SupportedSites.tsx

@@ -6,11 +6,45 @@ import {
   CardHeader,
   CardTitle
 } from '@renderer/components/ui/card'
+import { ImageWithPlaceholder } from '@renderer/components/ui/image-with-placeholder'
 import { popularSites } from '@renderer/data/popularSites'
+import { ipcServices } from '@renderer/lib/ipc'
+import { ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const referenceUrl = 'https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md'
 
+function SiteIcon({ domain, alt }: { domain: string; alt: string }) {
+  const [iconUrl, setIconUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const loadIcon = async () => {
+      try {
+        const dataUrl = await ipcServices.app.getSiteIcon(domain)
+        if (!cancelled) {
+          setIconUrl(dataUrl)
+        }
+      } catch (error) {
+        console.error('Failed to load site icon:', error)
+        if (!cancelled) {
+          setIconUrl(null)
+        }
+      }
+    }
+
+    void loadIcon()
+
+    return () => {
+      cancelled = true
+    }
+  }, [domain])
+
+  return <ImageWithPlaceholder src={iconUrl || undefined} alt={alt} className="w-full h-full" />
+}
+
 export function SupportedSites() {
   const { t } = useTranslation()
 
@@ -28,7 +62,7 @@ export function SupportedSites() {
 
       <section className="space-y-3">
         <h2 className="text-lg font-semibold px-6">{t('sites.popularSection')}</h2>
-        <ul className="grid gap-3 sm:grid-cols-2">
+        <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
           {popularSites.map((site) => {
             const labelKey = `sites.popular.${site.id}.label`
             const descriptionKey = `sites.popular.${site.id}.description`
@@ -37,11 +71,28 @@ export function SupportedSites() {
             const hasDescription = description !== descriptionKey
 
             return (
-              <li key={site.id} className="rounded-md border border-border px-6 py-5">
-                <p className="text-sm font-medium">{label}</p>
-                {hasDescription ? (
-                  <p className="mt-1 text-xs text-muted-foreground">{description}</p>
-                ) : null}
+              <li key={site.id}>
+                <a
+                  href={site.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex items-center gap-3 rounded-md border border-border px-4 py-3 transition-colors hover:bg-muted/50 hover:border-primary/50 group"
+                >
+                  <div className="shrink-0 w-10 h-10 rounded-xs overflow-hidden">
+                    <SiteIcon domain={site.domain} alt={label} />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <p className="text-sm font-medium truncate">{label}</p>
+                      <ExternalLink className="w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+                    </div>
+                    {hasDescription ? (
+                      <p className="mt-0.5 text-xs text-muted-foreground line-clamp-1">
+                        {description}
+                      </p>
+                    ) : null}
+                  </div>
+                </a>
               </li>
             )
           })}