feat: configurable favicon service URL (#659)

src/components/Favicon/index.tsx

@@ -1,4 +1,6 @@
+import { faviconUrl } from '@/lib/faviconUrl'
 import { cn } from '@/lib/utils'
+import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useState } from 'react'
 
 export function Favicon({
@@ -10,15 +12,18 @@ export function Favicon({
   className?: string
   fallback?: React.ReactNode
 }) {
+  const { faviconUrlTemplate } = useContentPolicy()
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
   if (error) return fallback
 
+  const url = faviconUrl(faviconUrlTemplate, `https://${domain}`)
+
   return (
     <div className={cn('relative', className)}>
       {loading && <div className={cn('absolute inset-0', className)}>{fallback}</div>}
       <img
-        src={`https://${domain}/favicon.ico`}
+        src={url}
         alt={domain}
         className={cn('absolute inset-0', loading && 'opacity-0', className)}
         onError={() => setError(true)}

src/components/Settings/index.tsx

@@ -6,6 +6,7 @@ import {
   toGeneralSettings,
   toPostSettings,
   toRelaySettings,
+  toSystemSettings,
   toTranslation,
   toWallet
 } from '@/lib/link'
@@ -15,6 +16,7 @@ import { useNostr } from '@/providers/NostrProvider'
 import {
   Check,
   ChevronRight,
+  Cog,
   Copy,
   Info,
   KeyRound,
@@ -141,6 +143,13 @@ export default function Settings() {
           </div>
         </SettingItem>
       </AboutInfoDialog>
+      <SettingItem className="clickable" onClick={() => push(toSystemSettings())}>
+        <div className="flex items-center gap-4">
+          <Cog />
+          <div>{t('System')}</div>
+        </div>
+        <ChevronRight />
+      </SettingItem>
       <div className="px-4 mt-4">
         <Donation />
       </div>