feat: add logo, favicon, and theme system

- Add custom SVG favicon and Logo component (house + network nodes motif) - Update page title to Homelable with meta description - Show Logo in sidebar header and toolbar - Add theme store and ThemeModal for canvas style switching - Refactor node colors and edge styles for theme support
2026-03-11 14:29:15 +01:00
parent 16de7cd390
commit 92d505f78c
19 changed files with 927 additions and 94 deletions
@@ -0,0 +1,46 @@
+interface LogoProps {
+  size?: number;
+  showText?: boolean;
+  className?: string;
+}
+
+export function Logo({ size = 32, showText = true, className = '' }: LogoProps) {
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 64 64"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="32" cy="32" r="32" fill="#0d1117" />
+        <path
+          d="M32 12 L52 30 L48 30 L48 52 L16 52 L16 30 L12 30 Z"
+          fill="#161b22"
+          stroke="#00d4ff"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <rect x="27" y="40" width="10" height="12" rx="1" fill="#0d1117" stroke="#00d4ff" strokeWidth="1" />
+        <circle cx="32" cy="33" r="3" fill="#00d4ff" />
+        <circle cx="22" cy="38" r="2" fill="#39d353" />
+        <line x1="22" y1="38" x2="29" y2="33" stroke="#39d353" strokeWidth="1" opacity="0.7" />
+        <circle cx="42" cy="38" r="2" fill="#39d353" />
+        <line x1="42" y1="38" x2="35" y2="33" stroke="#39d353" strokeWidth="1" opacity="0.7" />
+        <circle cx="32" cy="24" r="2" fill="#a855f7" />
+        <line x1="32" y1="24" x2="32" y2="30" stroke="#a855f7" strokeWidth="1" opacity="0.7" />
+        <circle cx="32" cy="33" r="3" fill="none" stroke="#00d4ff" strokeWidth="1.5" opacity="0.4" />
+      </svg>
+      {showText && (
+        <span
+          className="font-bold tracking-tight"
+          style={{ fontSize: size * 0.55, fontFamily: 'Inter, sans-serif' }}
+        >
+          <span style={{ color: '#00d4ff' }}>Home</span>
+          <span style={{ color: '#ffffff' }}>lable</span>
+        </span>
+      )}
+    </div>
+  );
+}