feat: integrate icon

frontend/index.html

@@ -3,12 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>Plotzilla</title>
   </head>
   <body>
     <header class="topbar" id="topbar">
       <div class="win-controls" id="win-left"></div>
-      <div class="brand"><span class="logo" data-icon="logo"></span>Plotzilla</div>
+      <div class="brand"><img class="logo" src="/favicon.svg" alt="" />Plotzilla</div>
       <div class="doc">
         <span id="doc-name" class="doc-name">Untitled</span>
         <span id="save-state" class="save-state"></span>

frontend/public/favicon.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128">
+  <!-- Plotzilla's icon (desktop/plotzilla.svg) simplified for 16–32 px:
+       full-bleed tile, no depth edge, no script lines, a bolder pen. -->
+  <defs>
+    <linearGradient id="tile" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#3b82f6"/>
+      <stop offset="1" stop-color="#6366f1"/>
+    </linearGradient>
+    <clipPath id="bar"><rect x="14" y="56" width="80" height="16"/></clipPath>
+    <clipPath id="arm"><rect x="14" y="32" width="80" height="17" rx="5"/></clipPath>
+  </defs>
+  <rect width="128" height="128" rx="30" fill="url(#tile)"/>
+  <!-- Centred: same space on both sides. -->
+  <g transform="translate(10.55 0)">
+  <g transform="rotate(-16 14 52)">
+    <rect x="14" y="32" width="80" height="17" rx="5" fill="#fff"/>
+    <g clip-path="url(#arm)" fill="#312e81">
+      <path d="M28 32h14l-10 17H18zM56 32h14l-10 17H46zM84 32h14l-10 17H74z"/>
+    </g>
+  </g>
+  <rect x="14" y="56" width="80" height="54" rx="8" fill="#fff"/>
+  <g clip-path="url(#bar)" fill="#312e81">
+    <path d="M24 56h14l-10 16H14zM52 56h14l-10 16H42zM80 56h14l-10 16H70z"/>
+  </g>
+  <g transform="translate(46 100) rotate(-45)" stroke="#fff" stroke-width="5" stroke-linejoin="round">
+    <path d="M0 0 20-10h6v20h-6z" fill="#fbbf24"/>
+    <rect x="26" y="-12" width="38" height="24" rx="12" fill="#312e81"/>
+  </g>
+  </g>
+</svg>

frontend/src/icons.ts

@@ -1,6 +1,5 @@
 // Stroke icons in the Lucide style (24×24 grid, ISC licence).
 const paths: Record<string, string> = {
-  logo: '<path d="M4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8H4Z"/><path d="m4 11-.88-2.87a2 2 0 0 1 1.33-2.5l11.48-3.5a2 2 0 0 1 2.5 1.32l.87 2.87L4 11.01Z"/><path d="m6.6 4.99 3.38 4.2"/><path d="m11.86 3.38 3.38 4.2"/>',
   new: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="M9 15h6"/>',
   open: '<path d="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"/>',
   save: '<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8"/><path d="M7 3v5h8"/>',

frontend/src/style.css

@@ -248,22 +248,15 @@ body.backdrop .topbar > * {
   letter-spacing: 0.01em;
 }
 
+/* The application icon (frontend/public/favicon.svg), which draws its own
+   rounded tile. */
 .brand .logo {
-  display: grid;
-  place-items: center;
   width: 30px;
   height: 30px;
-  border-radius: 9px;
+  border-radius: 7px;
-  color: #fff;
-  background: linear-gradient(135deg, #3b82f6, #6366f1);
   box-shadow: 0 4px 14px rgb(59 130 246 / 0.4);
 }
 
-.brand .logo svg {
-  width: 17px;
-  height: 17px;
-}
-
 .doc {
   display: flex;
   align-items: center;