feat: use SVG logo in sidebar header and canvas brand mark

Author: Codeptor

src/components/LeftModeButtons.tsx

@@ -16,7 +16,7 @@ export function LeftModeButtons() {
 
   return (
     <div className="absolute top-3 left-3 z-10 flex items-center gap-1.5">
-      <span className="flex items-center justify-center w-5 h-5 rounded bg-accent/90 text-accent-foreground font-mono font-black text-[11px] leading-none select-none mr-0.5">G</span>
+      <img src="/favicon.svg" alt="Glyph" className="w-5 h-5 rounded select-none mr-0.5" draggable={false} />
       {PANELS.map((p) => (
         <Button
           key={p.value}

src/components/SidebarHeader.tsx

@@ -3,9 +3,7 @@ export function SidebarHeader() {
     <div className="flex flex-col gap-3 px-4 pt-5 pb-3">
       {/* Brand */}
       <div className="flex items-center gap-2.5">
-        <div className="flex items-center justify-center w-7 h-7 rounded-md bg-accent text-accent-foreground font-mono font-black text-sm leading-none select-none">
-          G
-        </div>
+        <img src="/favicon.svg" alt="Glyph" className="w-7 h-7 rounded-md select-none" draggable={false} />
         <div className="flex flex-col">
           <span className="text-sm font-bold tracking-tight font-mono text-foreground leading-none">
             GLYPH