feat: adds project branding, favicon, and logo assets (#41)

wgordon17 · web-flow · commit f21282a4145e · 2026-04-01T16:44:20.000-04:00
- Logo SVG: Bootstrap search glass + Octicons git-merge, purple #7c3aed
- Favicon SVG: Lucide search icon with prefers-color-scheme dark/light
- PNG fallback favicon and apple-touch-icon (logo-192.png)
- Social preview image (1280x640) and OAuth app icon (logo-512.png)
- Inline logo in navbar Header component using currentColor
- Logo in README, fixes stale onboarding description
- Notification icon switched to PNG for Chrome compatibility
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="public/assets/logo.svg" width="96" height="96" alt="GitHub Tracker logo">
+</p>
+
 # GitHub Tracker
 
 Dashboard SPA tracking GitHub issues, PRs, and GHA workflow runs across multiple repos/orgs. Built with SolidJS on Cloudflare Workers.
@@ -7,7 +11,7 @@ Dashboard SPA tracking GitHub issues, PRs, and GHA workflow runs across multiple
 - **Issues Tab** — Open issues where you're the creator, assignee, or mentioned. Sortable, filterable, paginated. Dependency Dashboard issues hidden by default (toggleable).
 - **Pull Requests Tab** — Open PRs with CI check status indicators (green/yellow/red dots). Draft badges, reviewer names.
 - **Actions Tab** — GHA workflow runs grouped by repo and workflow. Accordion collapse, PR run toggle.
-- **Onboarding Wizard** — Two-step org/repo selection with search filtering and bulk select.
+- **Onboarding Wizard** — Single-step repo selection with search filtering and bulk select.
 - **PAT Authentication** — Optional Personal Access Token login as alternative to OAuth. Client-side format validation, detailed token creation instructions for classic and fine-grained PATs.
 - **Settings Page** — Refresh interval, notification preferences, theme (light/dark/system), density, GitHub Actions limits. Shows current auth method and hides OAuth-specific options for PAT users.
 - **Desktop Notifications** — New item alerts with per-type toggles and batching.
diff --git a/index.html b/index.html
@@ -4,6 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>GitHub Tracker</title>
+    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
+    <link rel="icon" type="image/png" href="/assets/logo-192.png" sizes="192x192" />
+    <link rel="apple-touch-icon" href="/assets/logo-192.png" />
     <script>try{let c=JSON.parse(localStorage.getItem('github-tracker:config')||'{}');if(c.theme==='dark'||(c.theme!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('dark')}catch(e){}</script>
   </head>
   <body>
diff --git a/public/assets/favicon.svg b/public/assets/favicon.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <style>
+    .icon { fill: none; stroke: #24292f; }
+    @media (prefers-color-scheme: dark) {
+      .icon { stroke: #e6edf3; }
+    }
+  </style>
+
+  <!-- Magnifying glass (Lucide search, ISC — thickened for favicon clarity) -->
+  <circle cx="10.5" cy="10.5" r="7.5" class="icon" stroke-width="1.8" stroke-linecap="round"/>
+  <line x1="15.8" y1="15.8" x2="23" y2="23" class="icon" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
diff --git a/public/assets/logo-192.png b/public/assets/logo-192.png
diff --git a/public/assets/logo-512.png b/public/assets/logo-512.png
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <clipPath id="logo-lens">
+      <circle cx="6.5" cy="6.5" r="5"/>
+    </clipPath>
+  </defs>
+
+  <!-- Magnifying glass (Bootstrap Icons search, MIT) -->
+  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" fill="#7c3aed"/>
+
+  <!-- Git merge (Octicons git-merge-24, MIT, scaled to fit lens) -->
+  <g clip-path="url(#logo-lens)">
+    <g transform="translate(3.05, 2.66) scale(0.32)">
+      <path d="M15 13.25a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm-12.5 6a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm0-14.5a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0ZM5.75 6.5a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 5.75 6.5Zm0 14.5a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 5.75 21Zm12.5-6a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 18.25 15Z" fill="#7c3aed"/>
+      <path d="M6.5 7.25c0 2.9 2.35 5.25 5.25 5.25h4.5V14h-4.5A6.75 6.75 0 0 1 5 7.25Z" fill="#7c3aed"/>
+      <path d="M5.75 16.75A.75.75 0 0 1 5 16V8a.75.75 0 0 1 1.5 0v8a.75.75 0 0 1-.75.75Z" fill="#7c3aed"/>
+    </g>
+  </g>
+</svg>
diff --git a/public/assets/social-preview.png b/public/assets/social-preview.png
diff --git a/public/assets/social-preview.svg b/public/assets/social-preview.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="640" viewBox="0 0 1280 640">
+  <defs>
+    <clipPath id="sp-lens">
+      <circle cx="6.5" cy="6.5" r="5"/>
+    </clipPath>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1280" height="640" rx="0" fill="#0f172a"/>
+
+  <!-- Centered logo (scaled up from 16x16 viewBox) -->
+  <g transform="translate(520, 140) scale(15)">
+    <!-- Magnifying glass (Bootstrap Icons search, MIT) -->
+    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" fill="#c4b5fd"/>
+
+    <!-- Git merge (Octicons git-merge-24, MIT) -->
+    <g clip-path="url(#sp-lens)">
+      <g transform="translate(3.05, 2.66) scale(0.32)">
+        <path d="M15 13.25a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm-12.5 6a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm0-14.5a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0ZM5.75 6.5a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 5.75 6.5Zm0 14.5a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 5.75 21Zm12.5-6a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 18.25 15Z" fill="#c4b5fd"/>
+        <path d="M6.5 7.25c0 2.9 2.35 5.25 5.25 5.25h4.5V14h-4.5A6.75 6.75 0 0 1 5 7.25Z" fill="#c4b5fd"/>
+        <path d="M5.75 16.75A.75.75 0 0 1 5 16V8a.75.75 0 0 1 1.5 0v8a.75.75 0 0 1-.75.75Z" fill="#c4b5fd"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Title text -->
+  <text x="640" y="480" text-anchor="middle" fill="#f8fafc" font-family="system-ui, -apple-system, sans-serif" font-size="56" font-weight="700">GitHub Tracker</text>
+
+  <!-- Subtitle -->
+  <text x="640" y="530" text-anchor="middle" fill="#94a3b8" font-family="system-ui, -apple-system, sans-serif" font-size="24">Issues, PRs, and Actions across all your repos</text>
+</svg>
diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
@@ -29,7 +29,12 @@ export default function Header() {
     <>
       <header class="navbar fixed top-0 left-0 right-0 z-50 bg-base-100 border-b border-base-300 shadow-sm min-h-14">
         <div class="max-w-6xl mx-auto w-full flex items-center gap-4 px-4">
-        <span class="font-semibold text-base-content text-lg shrink-0">
+        <span class="font-semibold text-base-content text-lg shrink-0 inline-flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <defs><clipPath id="nav-lens"><circle cx="6.5" cy="6.5" r="5"/></clipPath></defs>
+            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+            <g clip-path="url(#nav-lens)"><g transform="translate(3.05,2.66) scale(0.32)"><path d="M15 13.25a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm-12.5 6a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm0-14.5a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0ZM5.75 6.5a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 5.75 6.5Zm0 14.5a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 5.75 21Zm12.5-6a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 18.25 15Z"/><path d="M6.5 7.25c0 2.9 2.35 5.25 5.25 5.25h4.5V14h-4.5A6.75 6.75 0 0 1 5 7.25Z"/><path d="M5.75 16.75A.75.75 0 0 1 5 16V8a.75.75 0 0 1 1.5 0v8a.75.75 0 0 1-.75.75Z"/></g></g>
+          </svg>
           GitHub Tracker
         </span>
 
diff --git a/src/app/lib/notifications.ts b/src/app/lib/notifications.ts
@@ -100,7 +100,7 @@ function fireNotification(
   tag: string,
   url?: string
 ): void {
-  const n = new Notification(title, { body, tag, icon: "/favicon.ico" });
+  const n = new Notification(title, { body, tag, icon: "/assets/logo-192.png" });
   if (url) {
     const safeUrl = url;
     n.onclick = () => openUrl(safeUrl);
