refactor: replace GemLogo with OtterLogo component for SnapOtter rebrand

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

@@ -1,33 +0,0 @@
-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/common/otter-logo.tsx

@@ -0,0 +1,11 @@
+export function OtterLogo({ className = "h-6 w-6" }: { className?: string }) {
+  return (
+    <img
+      src="/logo.png"
+      alt=""
+      aria-hidden="true"
+      className={className}
+      style={{ imageRendering: "auto" }}
+    />
+  );
+}

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

@@ -6,7 +6,7 @@ import { apiGet } from "@/lib/api";
 import { cn } from "@/lib/utils";
 import { useConnectionStore } from "@/stores/connection-store";
 import { Dropzone } from "../common/dropzone";
-import { GemLogo } from "../common/gem-logo";
+import { OtterLogo } from "../common/otter-logo";
 import { HelpDialog } from "../help/help-dialog";
 import { SettingsDialog } from "../settings/settings-dialog";
 import { AiInstallIndicator } from "./ai-install-indicator";
@@ -68,7 +68,7 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
                 />
               ) : (
                 <div className="flex items-center gap-2">
-                  <GemLogo className="h-5 w-5 text-primary" />
+                  <OtterLogo className="h-5 w-5 text-primary" />
                   <span className="text-sm font-bold text-foreground">
                     <span className="text-primary">ashim</span>
                   </span>
@@ -121,7 +121,7 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
             />
           ) : (
             <div className="flex items-center gap-2">
-              <GemLogo className="h-5 w-5 text-primary" />
+              <OtterLogo className="h-5 w-5 text-primary" />
               <span className="text-sm font-bold text-foreground">
                 <span className="text-primary">ashim</span>
               </span>

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

@@ -32,7 +32,7 @@ import { apiDelete, apiGet, apiPost, apiPut, clearToken, formatHeaders } from "@
 import { cn, copyToClipboard } from "@/lib/utils";
 import { useAnalyticsStore } from "@/stores/analytics-store";
 import { useSettingsStore } from "@/stores/settings-store";
-import { GemLogo } from "../common/gem-logo";
+import { OtterLogo } from "../common/otter-logo";
 import { AiFeaturesSection } from "./ai-features-section";
 
 interface SettingsDialogProps {
@@ -2511,7 +2511,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" />
+          <OtterLogo className="h-8 w-8 text-primary" />
           <div className="text-2xl font-bold text-foreground">
             <span className="text-primary">ashim</span>
           </div>

apps/web/src/pages/fullscreen-grid-page.tsx

@@ -3,7 +3,7 @@ import { ANALYTICS_EVENTS, CATEGORIES, TOOLS } from "@ashim/shared";
 import { Eye, EyeOff, FileImage, LayoutGrid, List, Search } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { GemLogo } from "@/components/common/gem-logo";
+import { OtterLogo } from "@/components/common/otter-logo";
 import { track } from "@/lib/analytics";
 import { apiGet } from "@/lib/api";
 import { ICON_MAP } from "@/lib/icon-map";
@@ -84,7 +84,7 @@ export function FullscreenGridPage() {
             to="/"
             className="flex items-center gap-2 text-lg font-bold text-foreground shrink-0"
           >
-            <GemLogo className="h-6 w-6 text-primary" />
+            <OtterLogo className="h-6 w-6 text-primary" />
             <span className="text-primary">ashim</span>
           </Link>