Sidebar brand mark: hummingbird-key artwork replaces the shield icon

frontend/src/components/Sidebar.tsx

@@ -4,6 +4,7 @@ import { shortenNpub } from '../lib/format';
 import { Avatar } from './Avatar';
 import { CopyButton } from './CopyButton';
 import { Icon, type IconName } from './Icon';
+import logoUrl from '../assets/logo.png';
 
 const NAV_ITEMS: { id: Screen; label: string; icon: IconName }[] = [
   { id: 'home', label: 'Home', icon: 'home' },
@@ -29,7 +30,7 @@ export function Sidebar({ screen, onNavigate }: SidebarProps) {
     <aside className="sidebar">
       <div className="sidebar-brand">
         <span className="sidebar-logo" aria-hidden="true">
-          <Icon name="shield" size={22} />
+          <img src={logoUrl} alt="" draggable={false} />
         </span>
         <div>
           <strong>Keynectr</strong>

frontend/src/styles.css

@@ -299,8 +299,21 @@ a {
   border-radius: 11px;
   display: grid;
   place-items: center;
-  background: var(--primary);
+  background: #fff;
-  color: var(--on-primary);
+  overflow: hidden;
+}
+
+.sidebar-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* The artwork is black-on-white; flip it in dark themes so it stays black
+   bird on dark tile instead of a glaring white square. */
+html[data-theme='dark'] .sidebar-logo img {
+  filter: invert(1);
 }
 
 .sidebar-brand strong {

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />