From 2bf48f6cd0a6ee3677c15500132ccc603f81d6b3 Mon Sep 17 00:00:00 2001
From: MythEclipse <asepharyanalm001@gmail.com>
Date: Wed, 3 Jun 2026 20:09:45 +0700
Subject: [PATCH] refactor(ui): remove mascot tooltip from sidebar component

Removes the hardcoded mascot tooltip implementation from the Sidebar
component to clean up the component structure. The tooltip logic is
now handled elsewhere.
---
 services/frontend/src/widgets/Sidebar.tsx | 26 ++---------------------
 1 file changed, 2 insertions(+), 24 deletions(-)

diff --git a/services/frontend/src/widgets/Sidebar.tsx b/services/frontend/src/widgets/Sidebar.tsx
index a62424f..b281f5a 100644
--- a/services/frontend/src/widgets/Sidebar.tsx
+++ b/services/frontend/src/widgets/Sidebar.tsx
@@ -109,30 +109,8 @@ export function Sidebar({
         {/* Spacer pushes mascot to bottom */}
         <div className="flex-1" />
 
-        {/* Mascot PNG with anchored chatbot */}
-        <div className="relative flex justify-center pb-4">
-          {!mascotChat.isOpen && (
-            <motion.div
-              initial={{ opacity: 0, x: -8, y: 6, scale: 0.96 }}
-              animate={{ opacity: 1, x: 0, y: 0, scale: 1 }}
-              transition={{ type: "spring", stiffness: 280, damping: 24 }}
-              className="pointer-events-none fixed bottom-[100px] left-[72px] z-[9999] w-64"
-            >
-              <div className="relative rounded-2xl border border-sky-200/80 bg-white/95 px-4 py-3 text-left shadow-xl shadow-sky-100/70 backdrop-blur-md">
-                <p className="text-[11px] font-semibold uppercase tracking-wide text-primary/70">
-                  Discord Watcher
-                </p>
-                <p className="mt-1 text-xs leading-relaxed text-slate-700">
-                  Halo! Saya mascot mu. Klik aku kalau mau tanya soal obrolan
-                  atau moderasi ✨
-                </p>
-                {/* Outer: border layer — triangle pointing left at center-right */}
-                <div className="absolute -left-[13px] top-1/2 z-10 h-[21px] w-[21px] -translate-y-1/2 bg-sky-200/80 [clip-path:polygon(0_50%,100%_0,100%_100%)]" />
-                {/* Inner: fill layer — matches bubble bg */}
-                <div className="absolute -left-3 top-1/2 z-20 h-5 w-5 -translate-y-1/2 bg-white/95 [clip-path:polygon(0_50%,100%_0,100%_100%)]" />
-              </div>
-            </motion.div>
-          )}
+        {/* Mascot button */}
+        <div className="flex justify-center pb-4">
           <button
             type="button"
             onClick={() => mascotChat.setIsOpen(!mascotChat.isOpen)}