From 299e7beb5792deb5001cfbc1dd339ad792071ebc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Mon, 2 Feb 2026 01:14:36 +0000
Subject: [PATCH] Use WhyRating brand logo for tab and hub link icons

- Add WhyRating logo icon to Icons component
- Replace 'star' icon with 'whyrating' logo for tab and hub link

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/app/page.tsx         |  4 ++--
 src/components/Icons.tsx | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index fee2272..c6d11cf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,7 +8,7 @@ import { categoryLabels, categoryOrder, bookmarkCategoryLabels, bookmarkCategory
 type TabId = 'services' | 'bookmarks' | 'ai' | 'whyrating' | 'settings';
 
 const tabs: { id: TabId; label: string; icon: string }[] = [
-  { id: 'whyrating', label: 'WhyRating', icon: 'star' },
+  { id: 'whyrating', label: 'WhyRating', icon: 'whyrating' },
   { id: 'services', label: 'Services', icon: 'server' },
   { id: 'ai', label: 'AI', icon: 'bot' },
   { id: 'bookmarks', label: 'Bookmarks', icon: 'external-link' },
@@ -28,7 +28,7 @@ const aiTools = [
 ];
 
 const whyratingLinks = [
-  { name: 'WhyRating Hub', url: 'http://whyrating.nuc.lan', icon: 'star', description: 'WhyRating project hub and quick links' },
+  { name: 'WhyRating Hub', url: 'http://whyrating.nuc.lan', icon: 'whyrating', description: 'WhyRating project hub and quick links' },
 ];
 
 export default function Home() {
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index cfdd30c..333743a 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -108,6 +108,41 @@ export const icons: Record<string, React.ComponentType<IconProps>> = {
   'x': createIcon('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'),
   'settings': createIcon('<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>'),
   'loader': createIcon('<path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/>'),
+
+  // WhyRating brand logo icon
+  'whyrating': function WhyRatingIcon({ className = '', size = 24 }: IconProps) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 120 120"
+        className={className}
+      >
+        <polygon
+          points="60,15 71.5,42 101,46 79.5,66 85,95 60,82 35,95 40.5,66 19,46 48.5,42"
+          fill="#FBBC05"
+          stroke="#FBBC05"
+          strokeWidth="6"
+          strokeLinejoin="round"
+        />
+        <g>
+          <circle cx="60" cy="62" r="27" fill="#1E293B"/>
+          <line x1="83" y1="81" x2="95" y2="91" stroke="#1E293B" strokeWidth="9" strokeLinecap="round"/>
+          <circle cx="60" cy="62" r="21" fill="#FEF3C7"/>
+          <rect x="68" y="44" width="11" height="18" rx="1.5" fill="#15803D"/>
+          <clipPath id="whyrating-lens">
+            <circle cx="60" cy="62" r="21"/>
+          </clipPath>
+          <g clipPath="url(#whyrating-lens)">
+            <rect x="42" y="58" width="11" height="35" rx="1.5" fill="#86EFAC"/>
+            <rect x="55" y="51" width="11" height="42" rx="1.5" fill="#22C55E"/>
+            <rect x="68" y="44" width="11" height="49" rx="1.5" fill="#15803D"/>
+          </g>
+        </g>
+      </svg>
+    );
+  },
 };
 
 export function Icon({ name, className, size }: { name: string; className?: string; size?: number }) {