refactor(branding): extract GemLogo to shared component and add to About section

apps/web/src/components/common/gem-logo.tsx

@@ -0,0 +1,33 @@
+export function GemLogo({ className = "h-6 w-6" }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 140 140"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <polygon points="70,16 100,48 70,60 40,48" fill="currentColor" opacity="1" />
+      <polygon points="40,48 70,60 70,124 22,60" fill="currentColor" opacity="0.7" />
+      <polygon points="100,48 70,60 70,124 118,60" fill="currentColor" opacity="0.5" />
+      <polygon points="70,16 40,48 22,60" fill="currentColor" opacity="0.85" />
+      <polygon points="70,16 100,48 118,60" fill="currentColor" opacity="0.65" />
+      <polygon
+        points="70,16 118,60 70,124 22,60"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="40"
+        y1="48"
+        x2="100"
+        y2="48"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        opacity="0.4"
+      />
+    </svg>
+  );
+}

apps/web/src/components/layout/app-layout.tsx

@@ -5,46 +5,13 @@ import { useMobile } from "@/hooks/use-mobile";
 import { apiGet } from "@/lib/api";
 import { cn } from "@/lib/utils";
 import { Dropzone } from "../common/dropzone";
+import { GemLogo } from "../common/gem-logo";
 import { HelpDialog } from "../help/help-dialog";
 import { SettingsDialog } from "../settings/settings-dialog";
 import { Footer } from "./footer";
 import { Sidebar } from "./sidebar";
 import { ToolPanel } from "./tool-panel";
 
-function GemLogo({ className = "h-6 w-6" }: { className?: string }) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 140 140"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <polygon points="70,16 100,48 70,60 40,48" fill="currentColor" opacity="1" />
-      <polygon points="40,48 70,60 70,124 22,60" fill="currentColor" opacity="0.7" />
-      <polygon points="100,48 70,60 70,124 118,60" fill="currentColor" opacity="0.5" />
-      <polygon points="70,16 40,48 22,60" fill="currentColor" opacity="0.85" />
-      <polygon points="70,16 100,48 118,60" fill="currentColor" opacity="0.65" />
-      <polygon
-        points="70,16 118,60 70,124 22,60"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2.5"
-        strokeLinejoin="round"
-      />
-      <line
-        x1="40"
-        y1="48"
-        x2="100"
-        y2="48"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        opacity="0.4"
-      />
-    </svg>
-  );
-}
-
 interface AppLayoutProps {
   children?: React.ReactNode;
   showToolPanel?: boolean;

apps/web/src/components/settings/settings-dialog.tsx

@@ -25,6 +25,7 @@ import {
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { apiDelete, apiGet, apiPost, apiPut, clearToken } from "@/lib/api";
 import { cn } from "@/lib/utils";
+import { GemLogo } from "../common/gem-logo";
 
 interface SettingsDialogProps {
   open: boolean;
@@ -1729,6 +1730,7 @@ function AboutSection() {
 
       <div className="p-4 rounded-lg border border-border bg-muted/20 space-y-3">
         <div className="flex items-center gap-3">
+          <GemLogo className="h-8 w-8 text-primary" />
           <div className="text-2xl font-bold text-foreground">
             Stirling <span className="text-primary">Image</span>
           </div>